/* ------------------------------------------------------------------
   your disabled friend — storefront
   Palette pulled from the artist's own work:
   sky wash blue (cover art), madder brown (logo strokes),
   crayon red (Rainy Night / Wander), warm paper white.
   Body face: Atkinson Hyperlegible (Braille Institute) for accessibility.
   ------------------------------------------------------------------ */
:root{
  --paper:#fbfaf6;
  --paper-deep:#f2efe7;
  --sky:#cfe6ef;
  --sky-soft:#e4f1f6;
  --sky-ink:#4d8aa3;
  --madder:#6b3a2e;
  --crayon:#c23b2e;
  --ink:#241d19;
  --muted:#6e645c;
  --line:#ddd4c8;
  --radius:16px;
  --shadow:0 14px 40px rgba(46,58,64,.12);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.02rem;line-height:1.6}
:focus-visible{outline:3px solid var(--sky-ink);outline-offset:3px;border-radius:6px}

/* header */
.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,5vw,64px);position:sticky;top:0;z-index:20;
  background:rgba(251,250,246,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.01em;
  text-decoration:none;color:var(--madder);text-transform:lowercase}
.site-header nav{display:flex;align-items:center;gap:20px}
.site-header nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.site-header nav a:hover{color:var(--madder)}
.cart-button{font:inherit;font-size:.95rem;color:var(--ink);background:#fff;cursor:pointer;
  padding:10px 16px;border:1.5px solid var(--ink);border-radius:999px;min-height:44px}
.cart-button span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:999px;
  background:var(--crayon);color:#fff;font-size:.78rem;font-weight:700;margin-left:6px}

/* hero — soft watercolor wash like his cover art */
.hero{padding:clamp(56px,9vw,110px) clamp(20px,7vw,110px) clamp(46px,7vw,80px);
  background:
    radial-gradient(58% 90% at 18% 12%, rgba(207,230,239,.95), transparent 62%),
    radial-gradient(50% 80% at 78% 28%, rgba(228,241,246,.9), transparent 58%),
    radial-gradient(42% 66% at 55% 88%, rgba(207,230,239,.55), transparent 60%),
    var(--paper)}
.hero-copy{max-width:820px}
.eyebrow{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;font-weight:700;
  color:var(--sky-ink);margin-bottom:14px;text-transform:uppercase}
.hero h1,.detail-panel h1,.about-page h1{font-family:var(--display);font-weight:800;
  letter-spacing:-.03em;margin:0;line-height:1.02;text-transform:lowercase;color:var(--ink)}
.hero h1{font-size:clamp(2.9rem,8.5vw,6.2rem);position:relative;display:inline-block;padding-bottom:.18em}
/* signature: a crayon stroke under the name, in his madder red */
.hero h1::after{content:"";position:absolute;left:-.04em;right:-.06em;bottom:0;height:.14em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M4 9 C 60 3, 110 12, 160 7 S 260 10, 296 5' fill='none' stroke='%236b3a2e' stroke-width='6' stroke-linecap='round' opacity='.85'/></svg>") no-repeat center/100% 100%}
.hero p{font-size:clamp(1.12rem,2.1vw,1.45rem);max-width:640px;color:#4c443d;line-height:1.55;margin:20px 0 0}

/* gallery */
.gallery-wrap{padding:clamp(44px,6vw,72px) clamp(18px,6vw,84px) clamp(90px,10vw,130px)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}
.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.7rem);
  margin:0;text-transform:lowercase;letter-spacing:-.02em}
.section-head p{color:var(--muted);max-width:420px;margin:0}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:clamp(20px,3.5vw,40px)}
.art-card{color:inherit;text-decoration:none;display:block}
/* paintings shown whole, never cropped — like a print resting on paper */
.art-image-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:4/3;display:grid;place-items:center;padding:14px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .35s ease,box-shadow .35s ease}
.art-image-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 6px 22px rgba(46,40,32,.16)}
.art-card:hover .art-image-wrap{transform:translateY(-3px);box-shadow:0 20px 48px rgba(46,58,64,.16)}
.art-meta{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 0}
.art-meta h3{font-family:var(--display);font-weight:700;font-size:1.22rem;margin:0;text-transform:lowercase}
.art-meta span{font-size:.88rem;color:var(--sky-ink);font-weight:700}
.empty-state{padding:70px 24px;background:var(--sky-soft);border:1.5px dashed var(--sky-ink);
  text-align:center;border-radius:var(--radius)}
.empty-state h3{font-family:var(--display);text-transform:lowercase;margin:0 0 8px}

/* artwork detail */
.art-detail{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);min-height:calc(100vh - 72px)}
.detail-image{display:grid;place-items:center;padding:clamp(22px,5vw,70px);
  background:linear-gradient(160deg,var(--sky-soft),var(--paper-deep))}
.detail-image img{max-width:100%;max-height:74vh;object-fit:contain;background:#fff;padding:12px;
  border-radius:10px;box-shadow:0 24px 55px rgba(43,54,60,.22)}
.detail-panel{padding:clamp(34px,5.5vw,80px);display:flex;flex-direction:column;justify-content:center}
.back{color:var(--muted);text-decoration:none;margin-bottom:44px;font-weight:700}
.back:hover{color:var(--madder)}
.detail-panel h1{font-size:clamp(2.3rem,4.6vw,4rem)}
.description{font-size:1.08rem;line-height:1.7;color:#4c443d;margin-top:16px}
.buy-box{margin-top:30px;padding-top:26px;border-top:1.5px solid var(--line)}
label{display:block;font-family:var(--display);font-size:.85rem;font-weight:700;letter-spacing:.04em;
  margin-bottom:16px;color:#544c44;text-transform:lowercase}
select,input,textarea{width:100%;margin-top:8px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:14px 15px;font:inherit;color:var(--ink);min-height:48px}
select:focus,input:focus,textarea:focus{border-color:var(--sky-ink)}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:22px}
#selectedPrice{font-family:var(--display);font-weight:800;font-size:1.9rem}
.primary{border:0;background:var(--madder);color:#fff;padding:15px 22px;border-radius:999px;
  font:inherit;font-family:var(--display);font-weight:700;font-size:1.02rem;cursor:pointer;min-height:50px}
.primary:hover{background:#57291f}
.primary:disabled{opacity:.45;cursor:not-allowed}
.micro{font-size:.82rem;color:var(--muted);line-height:1.5;margin-top:14px}
.notice{padding:16px 18px;background:var(--sky-soft);border:1.5px solid var(--sky);border-radius:12px;margin-top:26px}

/* about */
.about-page{max-width:780px;margin:0 auto;padding:clamp(70px,10vw,120px) 24px clamp(100px,12vw,150px)}
.about-page h1{font-size:clamp(2.6rem,7vw,5rem)}
.about-page p{font-size:1.18rem;line-height:1.75;color:#4c443d;margin:28px 0 34px}
.link-button{display:inline-block;text-decoration:none}

/* footer */
.site-footer{display:flex;justify-content:space-between;gap:20px;
  padding:26px clamp(18px,5vw,64px);border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;
  background:var(--paper-deep)}

/* cart */
.cart-drawer{position:fixed;top:0;right:0;width:min(440px,94vw);height:100dvh;background:var(--paper);
  z-index:51;transform:translateX(105%);transition:transform .3s ease;display:flex;flex-direction:column;
  box-shadow:-18px 0 55px rgba(0,0,0,.14)}
.cart-drawer.open{transform:translateX(0)}
.cart-head{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  border-bottom:1px solid var(--line)}
.cart-head h2{font-family:var(--display);font-weight:800;text-transform:lowercase;margin:0}
.cart-head button{border:0;background:none;font-size:1.9rem;cursor:pointer;line-height:1;padding:8px;color:var(--ink)}
.cart-body{flex:1;overflow:auto;padding:20px 22px}
.cart-item{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:60px;height:70px;object-fit:cover;border-radius:8px;background:var(--sky-soft)}
.cart-item h4{margin:0 0 4px;font-family:var(--display);font-weight:700;font-size:1rem}
.cart-item p{margin:0;color:var(--muted);font-size:.84rem}
.cart-item strong{font-size:.94rem}
.cart-foot{padding:18px 22px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.wide{width:100%}
.scrim{position:fixed;inset:0;background:rgba(36,29,25,.4);z-index:50;opacity:0;visibility:hidden;transition:.25s}
.scrim.open{opacity:1;visibility:visible}
.muted{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--madder);color:#fff;
  padding:12px 20px;border-radius:999px;opacity:0;transition:.2s;z-index:80;font-weight:700}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* phone-first adjustments */
@media(max-width:840px){
  .site-header nav a{display:none}
  .hero{padding-top:44px}
  .section-head{display:block}
  .section-head p{margin-top:10px}
  .art-detail{grid-template-columns:1fr;min-height:0}
  .detail-image{min-height:46vh;padding:20px}
  .detail-panel{padding:30px 20px 70px}
  .back{margin-bottom:26px}
  .site-footer{display:block}
  .site-footer span{display:block;margin:6px 0}
}