:root{
    --paper:#FAF8F3;
    --paper-deep:#F3EFE6;
    --ink:#232019;
    --ink-soft:#5B564C;
    --line:#DDD6C7;
    --accent:#A9662E;
    --accent-soft:#E7D9C4;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', -apple-system, sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
  }
  .measure{max-width:1240px;margin:0 auto;padding:0 40px;}
  h1,h2,h3,.serif{font-family:'Newsreader', Georgia, serif;font-weight:500;letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:11.5px;
    color:var(--ink-soft);
    font-weight:500;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,248,243,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 40px;
    max-width:1240px; margin:0 auto;
  }
  .wordmark{
    font-family:'Newsreader', serif; font-weight:500;
    font-size:30px;
    letter-spacing:0.01em;
  }
  .wordmark em{font-style:normal; font-weight:500; color:var(--accent);}
  nav{display:flex; gap:34px;}
  nav a{
    font-size:14px; color:var(--ink-soft);
    position:relative; padding:4px 0;
    transition:color .2s ease;
  }
  nav a:hover{color:var(--ink);}
  nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0;
    height:1px; background:var(--accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  nav a:hover::after{transform:scaleX(1);}
  .nav-cta{
    font-size:13px; color:var(--ink); border:1px solid var(--ink);
    padding:9px 18px; border-radius:2px; letter-spacing:0.02em;
    transition:background .2s ease, color .2s ease;
  }
  .nav-cta:hover{background:var(--ink); color:var(--paper);}
  .nav-phone{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
    color:var(--ink-soft); transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .nav-phone:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}

  /* ---------- hero ---------- */
  .hero{
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center; gap:60px;
    padding:96px 40px 100px;
    max-width:1240px; margin:0 auto;
  }
  .hero h1{
    font-size:clamp(38px,4.4vw,58px);
    line-height:1.08;
    margin:22px 0 26px;
  }
  .hero p{
    font-size:16.5px; line-height:1.7; color:var(--ink-soft);
    max-width:44ch; margin:0 0 34px;
  }
  .hero-actions{display:flex; gap:16px; align-items:center;}
  .btn-primary{
    background:var(--ink); color:var(--paper);
    padding:13px 26px; font-size:14px; letter-spacing:0.02em;
    border-radius:2px; transition:background .2s ease;
  }
  .btn-primary:hover{background:var(--accent);}
  .btn-ghost{
    font-size:14px; color:var(--ink-soft); border-bottom:1px solid var(--line);
    padding-bottom:2px; transition:border-color .2s ease, color .2s ease;
  }
  .btn-ghost:hover{color:var(--ink); border-color:var(--ink);}

  /* painterly placeholder canvases */
  .canvas{
    position:relative;
    border-radius:1px;
    overflow:hidden;
    box-shadow:0 30px 60px -25px rgba(35,32,25,0.35);
  }
  .canvas::after{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:multiply;
    pointer-events:none;
  }
  .canvas-mat{
    background:var(--paper);
    padding:14px;
    box-shadow:0 1px 0 var(--line);
  }
  .canvas-mat .canvas{box-shadow:0 22px 44px -22px rgba(35,32,25,0.3);}
  .canvas img{width:100%;height:100%;object-fit:cover;display:block;}

  .c1{background:
    radial-gradient(120% 90% at 15% 20%, #E7C79A 0%, transparent 55%),
    radial-gradient(90% 70% at 85% 75%, #7C8B6F 0%, transparent 60%),
    linear-gradient(160deg, #C97A4A 0%, #8A5A3B 45%, #3C332A 100%);
  }
  .c2{background:
    radial-gradient(100% 80% at 70% 20%, #D8C7A8 0%, transparent 55%),
    linear-gradient(150deg, #9C8F6E 0%, #4C5844 60%, #232019 100%);
  }
  .c3{background:
    radial-gradient(90% 90% at 30% 70%, #C7654B 0%, transparent 60%),
    linear-gradient(135deg, #E8DCC4 0%, #B79A6E 55%, #6E5638 100%);
  }
  .c4{background:
    radial-gradient(100% 100% at 80% 30%, #AEB79A 0%, transparent 55%),
    linear-gradient(160deg, #3E4A3B 0%, #232019 70%);
  }
  .c5{background:
    radial-gradient(90% 70% at 20% 30%, #E3B98C 0%, transparent 55%),
    radial-gradient(80% 60% at 80% 80%, #6E4B39 0%, transparent 55%),
    linear-gradient(145deg, #DED2B8 0%, #A9662E 80%);
  }
  .c6{background:
    radial-gradient(110% 90% at 60% 10%, #EDE3CC 0%, transparent 50%),
    linear-gradient(160deg, #8A7256 0%, #4A3D2E 60%, #232019 100%);
  }
  .c7{background:
    radial-gradient(100% 80% at 30% 80%, #B0BFA6 0%, transparent 55%),
    linear-gradient(150deg, #DED2B8 0%, #7C8B6F 55%, #3C332A 100%);
  }
  .hero-canvas{aspect-ratio:4/5; width:100%;}

  /* ---------- intro strip ---------- */
  .intro{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:64px 40px;
  }
  .intro-inner{
    max-width:1240px; margin:0 auto;
    display:grid; grid-template-columns:280px 1fr; gap:60px;
  }
  .intro p{
    font-family:'Newsreader', serif; font-weight:400;
    font-size:24px; line-height:1.5; color:var(--ink);
    max-width:52ch; margin:0;
  }

  /* ---------- section heading ---------- */
  .section{padding:100px 40px;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:48px; gap:24px; flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(28px,3vw,38px); margin:10px 0 0;}
  .section-note{
    font-size:13.5px; color:var(--ink-soft); max-width:34ch; line-height:1.6;
  }

  /* ---------- technique filter ---------- */
  .chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:56px;}
  .chip{
    font-size:13px; padding:8px 16px; border:1px solid var(--line);
    border-radius:999px; color:var(--ink-soft); cursor:pointer;
    transition:all .2s ease; background:transparent;
  }
  .chip:hover{border-color:var(--ink); color:var(--ink);}
  .chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

  /* ---------- gallery grid ---------- */
  .grid{
    display:grid; grid-template-columns:repeat(12,1fr); gap:22px;
  }
  .art{grid-column:span 3;}
  .art.wide{grid-column:span 4;}
  .art.narrow{grid-column:span 2;}
  .art.full{grid-column:span 12;}
  .art.full .canvas{aspect-ratio:21/8;}
  .art .canvas{aspect-ratio:4/5; width:100%;}
  .art.wide .canvas{aspect-ratio:5/4;}
  .art-cap{margin-top:16px; display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
  .art-artist{font-size:14.5px; letter-spacing:0.01em;}
  .art-meta{font-size:12.5px; color:var(--ink-soft); text-align:right;}
  .art-title{color:var(--ink-soft); font-size:13.5px; margin-top:2px;}
  .art.hidden{display:none;}
  .price-tag{
    display:inline-block; margin-top:10px; font-size:12.5px; color:var(--accent);
  }

  /* ---------- artists index ---------- */
  .artists-wrap{
    background:var(--paper-deep);
  }
  .artist-cloud{
    display:flex; flex-wrap:wrap; gap:10px 14px;
  }
  .artist-cloud span{
    font-size:15px; color:var(--ink-soft); font-family:'Newsreader', serif;
    white-space:nowrap;
  }
  .artist-cloud span::after{content:"·"; margin-left:14px; color:var(--line); font-style:normal;}
  .artist-cloud span:last-child::after{content:"";}
  .artist-more{
    margin-top:28px; font-size:13.5px; color:var(--ink-soft);
  }
  .artist-more strong{color:var(--ink); font-weight:500;}

  .artist-index-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
    margin-bottom:36px;
  }
  .artist-index-copy{font-size:15px; color:var(--ink-soft); max-width:52ch;}
  .artist-reset{
    font-family:'Work Sans', sans-serif; font-size:13px; color:var(--accent);
    background:none; border:none; border-bottom:1px solid var(--accent);
    padding:0 0 1px; cursor:pointer; white-space:nowrap;
    appearance:none; -webkit-appearance:none; box-shadow:none; outline:none; border-radius:0;
  }
  .artist-reset:hover{color:var(--ink); border-color:var(--ink);}

  .artist-index{
    column-count:4; column-gap:48px;
  }
  .artist-group{
    break-inside:avoid; margin-bottom:30px;
  }
  .artist-letter{
    font-family:'Newsreader', serif; font-size:15px; font-weight:500;
    color:var(--accent); margin:0 0 12px; padding-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  .artist-names{display:flex; flex-direction:column; align-items:flex-start; gap:9px;}
  .artist-name{
    font-family:'Newsreader', serif; font-size:17.5px; color:var(--ink-soft);
    background:none !important; border:none !important; padding:0 !important; margin:0; text-align:left; cursor:pointer;
    line-height:1.4; transition:color .15s ease;
    appearance:none !important; -webkit-appearance:none !important; box-shadow:none !important; outline:none; border-radius:0;
    display:inline-block; width:auto;
  }
  .artist-name:hover{color:var(--ink);}
  .artist-name:focus-visible{color:var(--accent);}
  .artist-name.active{color:var(--accent); font-weight:500;}

  @media (max-width: 880px){
    .artist-index{column-count:2; column-gap:30px;}
  }
  @media (max-width: 560px){
    .artist-index{column-count:1;}
  }

  /* ---------- about ---------- */
  .about{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center;
  }
  .about .canvas{aspect-ratio:3/4;}
  .about-copy p{font-size:16px; line-height:1.8; color:var(--ink-soft); margin:0 0 18px;}
  .about-copy .lede{font-family:'Newsreader', serif; font-size:22px; color:var(--ink); line-height:1.5;}
  .stat-row{display:flex; gap:44px; margin-top:38px; padding-top:32px; border-top:1px solid var(--line);}
  .stat b{display:block; font-family:'Newsreader', serif; font-size:30px; font-weight:500;}
  .stat span{font-size:12.5px; color:var(--ink-soft); letter-spacing:0.03em;}

  /* ---------- contact ---------- */
  .contact-wrap{background:var(--ink); color:var(--paper);}
  .contact-wrap .eyebrow{color:#B9AF9B;}
  .contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px;}
  .contact-wrap h2{color:var(--paper); font-size:clamp(28px,3.4vw,42px); margin:14px 0 24px;}
  .contact-wrap p{color:#C9C2B2; font-size:16px; line-height:1.75; max-width:46ch;}
  .contact-details{display:flex; flex-direction:column; gap:18px; margin-top:12px;}
  .contact-details div{border-top:1px solid #3A362D; padding-top:16px;}
  .contact-details span{display:block; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:#8B8371; margin-bottom:6px;}
  .contact-details a, .contact-details p{font-size:15.5px; color:var(--paper); margin:0; max-width:none;}
  .contact-form{display:flex; flex-direction:column; gap:16px;}
  .contact-form input, .contact-form textarea{
    background:transparent; border:none; border-bottom:1px solid #4A4636;
    color:var(--paper); font-family:'Work Sans', sans-serif; font-size:15px;
    padding:10px 2px; outline:none; width:100%;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder{color:#7A7362;}
  .contact-form input:focus, .contact-form textarea:focus{border-color:var(--accent);}
  .contact-form button{
    margin-top:10px; align-self:flex-start;
    background:var(--paper); color:var(--ink);
    padding:13px 28px; font-size:14px; letter-spacing:0.02em; border:none;
    border-radius:2px; cursor:pointer; transition:background .2s ease;
  }
  .contact-form button:hover{background:var(--accent); color:var(--paper);}

  /* ---------- footer ---------- */
  footer{padding:34px 40px; border-top:1px solid #3A362D;}
  .footer-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:12.5px; color:#8B8371;
    max-width:1240px; margin:0 auto; flex-wrap:wrap; gap:12px;
  }

  @media (max-width: 880px){
    .measure, .nav-row, .hero, .intro-inner, .about, .contact-grid{padding-left:22px; padding-right:22px;}
    .hero{grid-template-columns:1fr; padding:56px 22px 64px; gap:40px;}
    .hero-canvas{order:-1; aspect-ratio:16/10;}
    nav{display:none;}
    .intro-inner{grid-template-columns:1fr; gap:20px;}
    .section{padding:64px 22px;}
    .grid{grid-template-columns:repeat(2,1fr); gap:22px;}
    .art, .art.wide, .art.narrow, .art.full{grid-column:span 2;}
    .about{grid-template-columns:1fr; gap:36px;}
    .contact-grid{grid-template-columns:1fr; gap:44px;}
    .stat-row{gap:28px; flex-wrap:wrap;}
  }

  .art{text-decoration:none; color:inherit; display:block; cursor:pointer;}
  #detailView .detail-back{font-size:13px; color:var(--ink-soft); display:inline-block; margin-bottom:32px;}
  #detailView .detail-back:hover{color:var(--ink);}
  .detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
  .detail-canvas{aspect-ratio:4/5; width:100%;}
  .detail-title{margin:8px 0 18px; font-size:clamp(30px,3.4vw,44px);}
  .detail-meta{font-size:14px; color:var(--ink-soft);}
  .detail-price{font-size:15px; color:var(--accent); margin-top:10px;}
  .detail-desc{font-size:16px; line-height:1.8; color:var(--ink-soft); max-width:52ch; margin-top:26px;}
  @media (max-width: 880px){
    .detail-grid{grid-template-columns:1fr; gap:28px;}
  }

  .detail-actions{display:flex; flex-direction:column; gap:12px; margin-top:24px; max-width:400px;}
  .detail-phone-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--accent); color:var(--paper);
    padding:14px 20px; font-size:15px; letter-spacing:0.02em;
    border-radius:2px; transition:opacity .2s ease;
  }
  .detail-phone-btn:hover{opacity:0.88;}
  .detail-toggle{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--ink); color:var(--paper); border:none; cursor:pointer;
    padding:14px 20px; font-size:15px; letter-spacing:0.02em; border-radius:2px;
    font-family:'Work Sans', sans-serif; width:100%;
  }
  .detail-toggle .chevron{
    width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg); transition:transform .2s ease; margin-top:-3px;
  }
  .detail-toggle[aria-expanded="true"] .chevron{transform:rotate(-135deg); margin-top:3px;}
  .detail-inline-form{display:flex; flex-direction:column; gap:12px; margin-top:2px;}
  .detail-inline-form input, .detail-inline-form textarea{
    border:1px solid var(--line); background:var(--paper); color:var(--ink);
    padding:12px 14px; font-family:'Work Sans', sans-serif; font-size:14px;
    outline:none; width:100%; border-radius:2px;
  }
  .detail-inline-form input:focus, .detail-inline-form textarea:focus{border-color:var(--accent);}
  .detail-inline-form button{
    background:var(--ink); color:var(--paper); border:none; padding:12px 22px;
    font-size:14px; letter-spacing:0.02em; border-radius:2px; cursor:pointer;
    align-self:flex-start; transition:background .2s ease;
  }
  .detail-inline-form button:hover{background:var(--accent);}
  .form-status{font-size:13px; color:var(--ink-soft); margin:0; display:none;}

  .artist-select-row{margin-bottom:44px; max-width:420px;}
  .select-wrap{position:relative;}
  .select-wrap::after{
    content:""; position:absolute; right:18px; top:50%; margin-top:-5px;
    width:7px; height:7px; border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
    transform:rotate(45deg); pointer-events:none;
  }
  #artistFilter{
    appearance:none; -webkit-appearance:none;
    width:100%; background:var(--paper); color:var(--ink);
    border:1px solid var(--line); border-radius:2px;
    padding:13px 40px 13px 16px; font-family:'Work Sans', sans-serif; font-size:14.5px;
    cursor:pointer;
  }
  #artistFilter:focus{outline:none; border-color:var(--accent);}

  .lightbox-overlay{
    position:fixed; inset:0; background:rgba(20,18,14,0.92);
    display:flex; align-items:center; justify-content:center;
    z-index:200; cursor:zoom-out; padding:24px;
  }
  .lightbox-overlay img{
    max-width:92vw; max-height:92vh; object-fit:contain;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .detail-canvas img{cursor:zoom-in;}
  .lightbox-overlay[hidden]{display:none;}

.related-works{margin-top:56px; padding-top:32px; border-top:1px solid var(--line);}
.related-links{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:10px;}
.related-link{
  font-family:'Work Sans', sans-serif; font-size:14px; color:var(--ink-soft);
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px;
}
.related-link:hover{color:var(--ink); border-color:var(--ink);}