/* MAVE'S GALLERY / Soft Watercolour Edition / 2026-10-12
   Contrast ��� Repetition ��� Alignment ��� Proximity
   Pure visual layer: catalogue, artwork delivery and viewer scripts remain unchanged. */
:root {
  --ink:#344b5b;
  --paper:#f6f9f9;
  --paper-deep:#e5eef0;
  --white:#fffcf8;
  --muted:#637986;
  --line:rgba(67,100,117,.19);
  --gold:#89b4c5;
  --gold-deep:#406b85;
  --clay:#c89ea8;
  --plum:#637d8a;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:"Avenir Next",Avenir,"Segoe UI",sans-serif;
  --sky:#e4f1f6;
  --blue:#46768f;
  --sage:#dce9e4;
  --blush:#f7e5e4;
  --shadow:0 24px 58px rgba(57,96,117,.10);
}
html { scroll-padding-top:6.2rem; }
body {
  background:
    radial-gradient(ellipse at 8% 18%,rgba(214,235,240,.64),transparent 35%),
    radial-gradient(ellipse at 92% 58%,rgba(246,222,221,.36),transparent 32%),
    #f9fbfa;
  color:var(--ink);
  font-size:1rem;
  line-height:1.75;
}
::selection { background:#cce5ed;color:#263f4b; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #457e99;outline-offset:4px; }
.site-header {
  min-height:6rem;
  padding:.78rem clamp(1.1rem,5vw,6rem);
  border-bottom:1px solid rgba(96,145,161,.19);
  background:rgba(251,253,252,.93);
  color:#395b6c;
  box-shadow:0 7px 26px rgba(52,84,103,.045);
  backdrop-filter:blur(18px);
}
.wordmark {gap:.8rem;}
.wordmark img {width:3.7rem;height:3.7rem;filter:drop-shadow(0 5px 9px rgba(73,116,138,.09));}
.wordmark span {letter-spacing:0;line-height:1.1;}
.wordmark strong {font:400 clamp(1.48rem,2vw,1.85rem)/1 var(--serif);letter-spacing:-.04em;color:#416d83;}
.wordmark small {margin-top:.34rem;color:#829fa9;font-size:.62rem;letter-spacing:.31em;font-weight:650;text-transform:uppercase;}
.desktop-nav {gap:clamp(1rem,2vw,2.4rem);}
.desktop-nav a,.nav-action {color:#436779;font-size:.89rem;font-weight:550;}
.desktop-nav a::after {height:2px;background:#9fc5d0;}
.nav-action {border:1px solid #b9d8df;border-radius:999px;padding:.6rem 1.15rem;color:#416c80;background:#f2f9fa;}
.mobile-menu {inset:6rem 0 auto;border-top:1px solid var(--line);background:#f7fbfb;color:#456778;box-shadow:0 18px 40px rgba(50,80,90,.14);}
.mobile-menu a,.mobile-menu button {border-bottom:1px solid var(--line);}
.menu-button {color:#456778;}
.menu-button span {height:2px;border-radius:9px;}
main {overflow:hidden;}
.masthead {
  min-height:clamp(41rem,78svh,55rem);
  padding:clamp(4rem,7vw,7rem) clamp(1.5rem,8vw,9rem) 3.5rem;
  background:
    radial-gradient(circle at 14% 9%,rgba(210,229,237,.9),transparent 33%),
    radial-gradient(circle at 70% 85%,rgba(244,222,221,.64),transparent 39%),
    linear-gradient(116deg,#f7fbfb,#e8f3f5 56%,#f9f5ef);
  color:var(--ink);
}
.masthead::before {
  z-index:0;
  top:auto;right:4%;bottom:-25%;width:40vw;height:40vw;
  border:2px solid rgba(120,176,196,.15);border-radius:52% 48% 63% 37% / 46% 55% 45% 54%;
  box-shadow:0 0 0 26px rgba(194,223,230,.11),0 0 0 60px rgba(220,234,226,.12);
  transform:rotate(-19deg);
}
.masthead::after {
  background:linear-gradient(90deg,rgba(250,252,250,.98) 0%,rgba(249,251,250,.85) 23%,rgba(247,251,251,.06) 66%),
             linear-gradient(0deg,rgba(249,250,249,.78),transparent 32%);
}
.masthead-art {
  inset:5.5% 0 2% 39%;
  border-radius:46% 0 0 48% / 20% 0 0 20%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 22%,black 100%);
  mask-image:linear-gradient(90deg,transparent 0%,black 22%,black 100%);
}
.masthead-art.loaded {opacity:.96;}
.masthead-art img {filter:saturate(1.04);object-position:center;}
.masthead-kicker {
  gap:.9rem;color:#557e90;font-size:.71rem;font-weight:650;letter-spacing:.18em;
}
.masthead-kicker i {height:1px;background:#83aebf;}
.masthead h1 {
  max-width:8ch;
  margin:clamp(4rem,8vw,7.5rem) 0 clamp(4rem,8vw,7rem);
  color:#426e84;
  font:400 clamp(5.3rem,12.1vw,10.5rem)/.87 var(--serif);
  letter-spacing:-.075em;
  text-shadow:none;
}
.masthead h1 span {
  margin-left:clamp(.1rem,4vw,4rem);
  color:#799aab;
  font-style:italic;
  font-size:.72em;
  letter-spacing:-.055em;
}
.masthead-foot {
  grid-template-columns:minmax(13rem,36rem) auto;
  max-width:84rem;
  margin:0;
  padding-top:1.6rem;
  border-top:1px solid rgba(69,118,141,.22);
}
.masthead-foot p {color:#4d7183;font:400 clamp(1.05rem,1.8vw,1.36rem)/1.65 var(--serif);}
.masthead-foot p strong {color:#406b80;font-weight:600;}
.masthead-foot a,.artist-link,.about-cta > a {
  border:1px solid #477d96;
  border-radius:999px;
  background:#4f8198;color:#fffdf9;
  box-shadow:0 10px 22px rgba(67,113,139,.12);
  font-size:.79rem;font-weight:600;letter-spacing:.045em;text-transform:none;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.masthead-foot a span {color:#fff;}
.masthead-foot a:hover,.masthead-foot a:focus-visible,
.artist-link:hover,.artist-link:focus-visible,.about-cta > a:hover,.about-cta > a:focus-visible {
  background:#345f76;color:#fff;box-shadow:0 14px 28px rgba(67,113,139,.18);
}
.intro-band {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,7vw,9rem);
  align-items:center;
  padding:clamp(4rem,8vw,7rem) clamp(1.5rem,8vw,9rem);
  background:#fffcf8;
  border-top:1px solid rgba(86,133,146,.12);
  border-bottom:1px solid rgba(86,133,146,.12);
}
.intro-band::before {position:absolute;right:4%;top:8%;width:10rem;height:10rem;background:radial-gradient(circle,rgba(243,223,221,.48),transparent 70%);content:"";pointer-events:none;}
.intro-band .eyebrow {margin:0 0 1.4rem;}
.intro-band h2 {max-width:13ch;margin:0;color:#4b7588;font:400 clamp(2.8rem,5.3vw,5.4rem)/1.07 var(--serif);letter-spacing:-.052em;}
.intro-band h2 em {color:#8aa7a6;font-weight:400;}
.intro-band p:last-child {max-width:40rem;margin:0;color:#607a87;font:400 clamp(1.1rem,1.7vw,1.37rem)/1.9 var(--serif);}
.collection {
  padding:clamp(4.5rem,8vw,8rem) clamp(1.5rem,6.5vw,8rem);
  background:radial-gradient(ellipse at 92% 0%,rgba(214,232,240,.72),transparent 34rem),
             radial-gradient(ellipse at 0% 80%,rgba(246,225,227,.27),transparent 34rem),#f8faf9;
}
.collection::before {height:0;background:none;}
.section-heading {border-bottom:1px solid rgba(83,130,152,.25);padding-bottom:2rem;}
.eyebrow {
  padding:0;
  background:none;
  color:#608ba0;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.section-heading h2,.artist-copy h2 {
  color:#426c81;
  font:400 clamp(2.85rem,5.7vw,5.65rem)/1.04 var(--serif);
  letter-spacing:-.055em;
}
.work-count {
  padding:.35rem .8rem;
  border:1px solid #d2e4e8;border-radius:999px;
  background:#edf6f7;color:#527b8d;
  font-weight:600;letter-spacing:.06em;
}
.collection-tools {
  margin-bottom:2.5rem;padding:1.1rem 0;border-color:rgba(72,112,132,.16);
}
.collection-tools label > span {color:#607b8a;font-weight:600;}
.collection-tools input,.collection-tools select {border-bottom:1px solid #a9c5d0;color:#344b5b;}
.collection-tools input:focus,.collection-tools select:focus {border-color:#477d96;}
.gallery-grid {gap:clamp(1.5rem,3vw,3.5rem);}
.art-stage {
  border:.7rem solid #fffefa;
  border-radius:.6rem;
  outline:1px solid #d9e4e3;
  background:#e7efef;
  box-shadow:var(--shadow);
}
.art-stage::after {inset:.4rem;border-color:rgba(255,255,255,.7);}
.art-index {
  border-radius:3rem;
  background:rgba(255,252,248,.91);
  color:#44697c;
  font-weight:600;
}
.art-caption {border-bottom:1px solid rgba(86,130,148,.2);padding-top:1.25rem;}
.art-caption strong {color:#466e82;font:400 clamp(1.3rem,2vw,1.68rem)/1.25 var(--serif);}
.art-caption span {color:#79919a;font-weight:550;}
.art-card-button:hover .art-stage,.art-card-button:focus-visible .art-stage {box-shadow:0 22px 56px rgba(74,123,145,.18);}
.skeleton {border-radius:.5rem;background:linear-gradient(100deg,#e5eeee 30%,#fcffff 50%,#e5eeee 70%);background-size:250% 100%;}
.artist-section {
  grid-template-columns:minmax(7rem,.36fr) minmax(18rem,1.2fr) minmax(10rem,.35fr);
  min-height:33rem;
  background:radial-gradient(circle at 7% 30%,rgba(207,226,226,.6),transparent 35%),
    radial-gradient(circle at 97% 79%,rgba(245,223,224,.48),transparent 35%),
    linear-gradient(130deg,#edf5f4,#e5f0f5 63%,#faf2ee);
  color:#405f72;
}
.artist-number {
  color:rgba(132,181,189,.15);
  font:400 clamp(8rem,20vw,19rem)/.7 var(--serif);
  -webkit-text-stroke:1px rgba(116,166,180,.4);
}
.artist-section .eyebrow,.viewer .eyebrow {background:none;color:#668fa1;}
.artist-copy h2 {color:#446f83;text-shadow:none;}
.artist-intro {color:#5e7b88;font:400 clamp(1.16rem,2vw,1.52rem)/1.8 var(--serif);}
.artist-link {padding:.9rem 1.4rem;}
.artist-note {
  border:1px solid rgba(115,158,174,.25);border-radius:.8rem;
  background:rgba(255,255,255,.5);color:#65828e;
  font-weight:600;letter-spacing:.07em;
}
.site-footer {
  align-items:center;
  border-top:1px solid rgba(83,130,152,.22);
  background:#e7f0f2;color:#678391;
}
.site-footer strong {color:#4b7487;letter-spacing:.05em;font-weight:600;}
.viewer {background:#f4f8f8;color:#405d70;}
.viewer::backdrop {background:rgba(35,59,75,.78);}
.viewer-header {background:#f8fbfb;border-bottom:1px solid #d3e2e8;}
.viewer-header > span {color:#547e90;}
.viewer-info,.viewer-close {border-color:#d3e2e8;color:#45697d;}
.viewer-info[aria-expanded="true"] {color:#386982;border-color:#91b7c8;}
.viewer-stage {background:radial-gradient(circle at 50% 38%,#f4f7f8,#dce7ec 90%);}
.viewer-canvas img {box-shadow:0 18px 45px rgba(51,81,97,.2);}
.viewer-arrow {border-color:#c8dae2;background:rgba(255,255,255,.85);color:#456f83;}
.viewer-arrow:hover,.viewer-arrow:focus-visible {border-color:#7daabd;background:#e6f2f5;}
.viewer-stage-tools button {background:rgba(255,255,255,.93);border-color:#cadee6;color:#466f81;}
.viewer-stage-tools button:hover,.viewer-stage-tools button:focus-visible {color:#305c72;border-color:#83afc1;}
.viewer-details {background:#fffcf9;color:#476678;border-left:1px solid #d7e5e9;}
.viewer-details h2 {color:#426c81;font-weight:400;}
.viewer-details dl div {border-color:#d7e5e9;}
.viewer-details dt {color:#718c97;}
.viewer-details dd {color:#486a7d;}
.viewer-story {border-left:3px solid #9bc4d2;background:#f0f7f9;}
.viewer-story-kicker {color:#577e92;}
.viewer-story h3 {color:#416b80;font-weight:500;}
.viewer-description {color:#536d7d;}
.viewer-actions button {border-color:#abc9d4;border-radius:999px;color:#416b80;}
.viewer-actions button:hover,.viewer-actions button:focus-visible {color:#305c72;border-color:#709fb1;}
.viewer-position {color:#79939e;}
.toast {background:#416d83;border-radius:1rem;}
.about-hero {
  min-height:clamp(39rem,77svh,52rem);
  background:radial-gradient(circle at 92% 13%,rgba(208,232,238,.75),transparent 33%),
             radial-gradient(circle at 8% 93%,rgba(245,220,220,.5),transparent 35%),
             linear-gradient(122deg,#f6faf9,#e6f0f3 68%,#fbf7f3);
  color:#456b7d;
}
.about-hero::before {border:2px solid rgba(124,172,189,.19);border-radius:46% 54% 41% 59%;transform:rotate(-17deg);}
.about-hero::after {background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(228,242,245,.15));}
.about-hero h1 {color:#426d84;font-weight:400;text-shadow:none;}
.about-hero h1 span {color:#7c9fae;font-style:italic;}
.about-hero-intro {color:#5c7d8e;font-weight:400;}
.about-hero blockquote {border:1px solid #cbdfe6;border-radius:1.5rem;background:rgba(255,255,255,.57);color:#577887;font-weight:400;box-shadow:var(--shadow);}
.about-hero blockquote::before {color:#a6c2c8;}
.about-scroll {color:#466f84;}
.about-story {background:radial-gradient(circle at 100% 0%,rgba(215,235,239,.56),transparent 29rem),#fffdf9;}
.about-story-heading h2,.about-works-heading h2,.about-cta h2 {color:#436d82;font-weight:400;line-height:1.04;}
.about-story-heading {border-bottom:1px solid #a9c7d2;}
.about-copy p {color:#5b7483;}
.about-copy .about-lead {color:#3f6478;font-weight:400;}
.about-works {background:#edf5f5;color:#456c7e;}
.about-works-heading {border-bottom-color:#b8d0d9;}
.about-works-heading h2 {color:#436d82;}
.about-works-heading > a {color:#4b788c;font-weight:600;letter-spacing:.04em;text-transform:none;}
.about-work-stage {border:.7rem solid #fffdf9;border-radius:.65rem;background:#e6efef;box-shadow:var(--shadow);}
.about-work-caption {border-color:#c5d9de;}
.about-work-caption strong {color:#477186;font-weight:400;}
.about-work-caption span {color:#7593a1;font-weight:600;}
.about-loading {color:#6d8896;}
.about-principles {background:#f6faf9;}
.about-principles article {border-color:#d3e1e6;}
.about-principles span {color:#668da0;border-color:#a6c7d3;}
.about-principles h2 {color:#4a7184;font-weight:400;}
.about-cta {background:radial-gradient(circle at 85% 16%,rgba(243,219,220,.53),transparent 36%),linear-gradient(115deg,#dfedef,#f9f8f4);color:#4c7083;}
.about-cta .eyebrow {background:none;color:#608ba0;}
.about-cta h2 {color:#446f83;}
.about-cta > p:not(.eyebrow) {color:#5f7b88;}
@media(max-width:900px){
 .masthead-art {inset:3% -14% 17% 25%;}
 .masthead-art.loaded {opacity:.54;}
 .masthead::after {background:linear-gradient(90deg,rgba(252,253,252,.9),rgba(252,253,252,.6) 38%,rgba(252,253,252,.12) 100%);}
 .viewer-details {background:rgba(253,252,249,.98);border-color:#c8dce4;box-shadow:0 -15px 40px rgba(53,92,114,.17);}
}
@media(max-width:680px){
 .site-header {min-height:5.25rem;padding:.5rem 1.05rem;}
 .wordmark img {width:3rem;height:3rem;}
 .wordmark strong {font-size:1.43rem;}
 .mobile-menu {inset:5.25rem 0 auto;}
 .masthead {min-height:43rem;padding:3.7rem 1.3rem 2.6rem;}
 .masthead-art {inset:3% -45% 25% 0;border-radius:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 50%);mask-image:linear-gradient(90deg,transparent,#000 50%);}
 .masthead-art.loaded {opacity:.38;}
 .masthead::after {background:linear-gradient(0deg,rgba(251,252,250,.95) 0%,rgba(251,252,250,.42) 70%,rgba(251,252,250,.7));}
 .masthead h1 {margin:5rem 0 6rem;font-size:clamp(4.7rem,24vw,7.4rem);}
 .masthead h1 span {margin-left:0;}
 .masthead-foot {grid-template-columns:1fr;}
 .masthead-foot p {font-size:1.15rem;}
 .masthead-foot a {justify-self:start;}
 .intro-band {grid-template-columns:1fr;gap:1.3rem;padding:4rem 1.3rem;}
 .intro-band h2 {font-size:clamp(2.7rem,12vw,4.2rem);}
 .collection {padding:4.5rem 1.3rem;}
 .section-heading {gap:1rem;}
 .section-heading h2,.artist-copy h2 {font-size:clamp(2.7rem,11vw,4rem);}
 .work-count {white-space:nowrap;}
 .art-card.lead .art-stage {aspect-ratio:4/5;}
 .artist-section {min-height:0;padding:5rem 1.4rem;}
 .artist-number {opacity:.45;top:6rem;}
 .artist-link {width:auto;}
 .site-footer {align-items:start;}
 .viewer-canvas {padding:1rem 3.15rem;}
 .about-hero h1 {font-size:clamp(4.1rem,22vw,7rem);}
 .about-story,.about-works {padding:4.5rem 1.3rem;}
}
@media(prefers-reduced-motion:reduce) {
 .masthead-art,.art-stage,.art-stage img {transition:none;}
}