:root{
      --pink:#f5b8c9;
      --link:#2e6bd1;
      --ink:#222;
      --muted:#6b6b6b;
      --bg:#ffffff;
      --thumb-border:#e5e5e5;
      --thumb-selected:#2e6bd1;
      --maxw: 1180px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--ink);
      background:var(--bg);
    }

    /* Header / top nav */
    .site-header{
      max-width:var(--maxw);
      margin:0 auto;
      padding:22px 18px 8px;
      display:flex;
      align-items:flex-end;
      gap:24px;
      flex-wrap:wrap;
    }
    .brand{
      font-weight:700;
      letter-spacing:.08em;
      font-size:28px;
      line-height:1;
    }
    .brand .first{ color:#d22f77; }   /* “JONATHAN” in pink */
    .brand .last{ color:#000; }
    .topnav{
      margin-left:auto;
      display:flex;
      gap:18px;
      flex-wrap:wrap;
    }
    .topnav a{
      text-decoration:none;
      font-weight:600;
      color:#2a7;
    }
    .topnav a:nth-child(1){ color:#2e6bd1; }   /* Press */
    .topnav a:nth-child(2){ color:#24a; }      /* Exhibitions */
    .topnav a:nth-child(3){ color:#d22f77; }   /* Works (active) */
    .topnav a:nth-child(4){ color:#2a8f62; }   /* Resources */
    .topnav a:nth-child(5){ color:#7a3cc9; }   /* Contacts */

    /* Section title line */
    .titlebar{
      max-width:var(--maxw);
      margin:6px auto 10px;
      padding:0 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
    }
    .titlebar h2{
      margin:0;
      font-size:26px;
      letter-spacing:.04em;
    }

    /* Breadcrumb decades */
    .crumbs{
      max-width:var(--maxw);
      margin:0 auto;
      padding:6px 18px 16px;
      color:var(--muted);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      font-size:14px;
    }
    .crumbs a{
      color:var(--muted);
      text-decoration:none;
    }
    .crumbs a:hover{ text-decoration:underline; }

    /* Main layout */
    .wrap{
      max-width:var(--maxw);
      margin:0 auto 28px;
      padding:0 18px 24px;
      display:grid;
      grid-template-columns: 1fr min(360px, 33%);
      gap:28px;
    }
    @media (max-width: 980px){
      .wrap{ grid-template-columns: 1fr; }
    }

    /* Large artwork panel */
    .hero{
      border:8px solid var(--pink);
      background:#fff;
      padding:14px;
    }
    .hero-media{
      width:100%;
      background:#f4f4f4;
      aspect-ratio: 4 / 3;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .hero-media img{
      max-width:100%;
      height:auto;
      display:block;
    }
    .caption{
      font-size:14px;
      color:#333;
      margin:8px 2px 0;
    }
    .caption em{ font-style:italic; }

    /* Right column: thumbnails grid */
    .thumbs{
      border:1px solid #eee;
      padding:14px 14px 8px;
    }
    .thumbgrid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:10px;
    }
    @media (max-width: 460px){
      .thumbgrid{ grid-template-columns: repeat(3, 1fr); }
    }
    .thumb{
      border:2px solid var(--thumb-border);
      padding:2px;
      background:#fff;
      cursor:pointer;
      transition:border-color .15s ease, box-shadow .15s ease;
      aspect-ratio: 1/1;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .thumb:hover{ box-shadow:0 0 0 3px #ddd inset; }
    .thumb[aria-current="true"]{
      border-color:var(--thumb-selected);
      box-shadow:0 0 0 2px var(--thumb-selected) inset;
      outline:none;
    }

    /* Footer line */
    .footerline{
      max-width:var(--maxw);
      margin:10px auto 22px;
      padding:0 18px;
      border-top:6px solid var(--pink);
      text-align:center;
      color:#777;
      font-size:12px;
    }