:root {
      --ink:#151515;
      --gold:#cdb890;
      --side:26px;
      --header-h:53px;
    }
    * { box-sizing:border-box; }
    html,body { margin:0; padding:0; width:100%; min-height:100%; }
    html { scroll-behavior:smooth; }
    body {
      background:#fff;
      color:var(--ink);
      font-family:"IBM Plex Sans",Arial,sans-serif;
      font-weight:300;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a { color:inherit; text-decoration:none; }
    img { display:block; max-width:100%; }
    button { font:inherit; }

    .page { width:100%; background:#fff; overflow:visible; }
    .site-header {
      height:var(--header-h);
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      position:relative;
      z-index:20;
    }
    .nav {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:26px;
      list-style:none;
      margin:0;
      padding:0;
    }
    .nav a {
      display:inline-flex;
      align-items:center;
      padding:0;
      font-family:"Roboto Mono",monospace;
      font-size:12.65px;
      line-height:1;
      font-weight:500;
      letter-spacing:2px;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .nav .active a { color:#9a8561; }
    .menu-toggle { display:none; }

    /* Clayton collection-style page heading */
    .page-head {
      position:relative;
      overflow:hidden;
      width:100%;
      padding:52px 24px 38px;
      text-align:center;
      background:#fff;
    }
    .page-head::before {
      content:"ARTWORKS";
      position:absolute;
      z-index:0;
      left:50%;
      top:-23px;
      transform:translateX(-50%);
      white-space:nowrap;
      pointer-events:none;
      font-family:"Roboto Condensed",Arial,sans-serif;
      font-size:252px;
      line-height:.98;
      font-weight:700;
      letter-spacing:-8px;
      color:rgba(0,0,0,.025);
    }
    .page-head-inner {
      position:relative;
      z-index:1;
      max-width:760px;
      margin:0 auto;
    }
    .page-kicker {
      margin:0 0 17px;
      font-family:"Roboto Mono",monospace;
      font-size:11px;
      line-height:1;
      font-weight:600;
      letter-spacing:4.2px;
      text-transform:uppercase;
      color:#000;
    }
    .page-title {
      margin:0;
      font-family:"Roboto Condensed",Arial,sans-serif;
      font-size:70px;
      line-height:.98;
      font-weight:700;
      letter-spacing:1.3px;
      text-transform:uppercase;
      color:#000;
    }
    .page-subtitle {
      margin:17px 0 0;
      font-family:"Roboto Condensed",Arial,sans-serif;
      font-size:18px;
      line-height:1.25;
      font-weight:300;
      font-style:italic;
      color:#777d86;
    }
    .page-rule {
      width:2px;
      height:43px;
      margin:22px auto 45px;
      background:var(--gold);
    }
    .page-description {
      max-width:590px;
      margin:0 auto;
      font-size:16px;
      line-height:23px;
      font-weight:300;
      color:#000;
    }

    /* Desktop masonry layout: three independent columns, as in Clayton */
    .artworks-grid {
      width:calc(100% - 48px);
      max-width:1180px;
      margin:0 auto;
      padding-top:2px;
      column-count:3;
      column-gap:26px;
    }
    .artwork-card {
      position:relative;
      display:block;
      width:100%;
      margin:0 0 26px;
      overflow:hidden;
      background:#eee;
      break-inside:avoid;
      -webkit-column-break-inside:avoid;
      page-break-inside:avoid;
    }
    .artwork-card img {
      width:100%;
      height:auto;
      object-fit:initial;
      transform:scale(1.001);
      transition:transform .7s cubic-bezier(.22,.61,.36,1);
    }
    .artwork-card::after {
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      background:rgba(0,0,0,0);
      transition:background .35s ease;
      pointer-events:none;
    }
    .artwork-meta {
      position:absolute;
      z-index:2;
      left:50%;
      top:50%;
      width:86%;
      transform:translate(-50%,-45%);
      text-align:center;
      color:#fff;
      opacity:0;
      transition:opacity .3s ease, transform .35s ease;
      pointer-events:none;
    }
    .artwork-title {
      display:block;
      margin:0;
      font-size:26px;
      line-height:33px;
      font-weight:300;
    }
    .artwork-year {
      display:block;
      margin-top:8px;
      font-family:"Roboto Mono",monospace;
      font-size:10px;
      line-height:1;
      font-weight:500;
      letter-spacing:2.6px;
      text-transform:uppercase;
    }
    @media (hover:hover) and (pointer:fine) {
      .artwork-card:hover img { transform:scale(1.018); }
      .artwork-card:hover::after { background:rgba(0,0,0,.50); }
      .artwork-card:hover .artwork-meta { opacity:1; transform:translate(-50%,-50%); }
    }

    /* Numbered pagination: no infinite scroll. */
    .pagination {
      max-width:1180px;
      margin:50px auto 0;
      padding:0 24px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:18px;
      font-family:"Roboto Mono",monospace;
      font-size:11px;
      line-height:1;
      font-weight:500;
      letter-spacing:1.8px;
      text-transform:uppercase;
      color:#111;
    }
    .pagination a, .pagination span {
      appearance:none;
      border:0;
      background:transparent;
      padding:8px 4px;
      color:inherit;
      cursor:pointer;
      font:inherit;
      letter-spacing:inherit;
      text-transform:inherit;
    }
    .pagination .page-number {
      min-width:24px;
      text-align:center;
    }
    .pagination .is-active {
      color:var(--gold);
      cursor:default;
    }
    .pagination .is-disabled {
      color:#b8b8b8;
      cursor:default;
    }
    @media (hover:hover) and (pointer:fine) {
    .pagination a:not(.is-active):hover { color:var(--gold); }
    }

    .instagram {
      padding-top:126px;
      text-align:center;
    }
    .instagram-title {
      margin:0 auto;
      font-family:"Roboto Mono",monospace;
      font-size:12px;
      line-height:1;
      font-weight:500;
      letter-spacing:4px;
      text-transform:uppercase;
      color:var(--gold);
    }
    .social-icons {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:20px;
      margin:78px 0 35px;
    }
    .social-icons a {
      width:25px; height:25px;
      display:grid; place-items:center;
      color:#000;
    }
    .social-icons svg { width:23px; height:23px; display:block; fill:currentColor; }
    .social-icons .stroke-icon {
      fill:none; stroke:currentColor; stroke-width:2;
      stroke-linecap:round; stroke-linejoin:round;
    }
    .footer {
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 30px 28px;
      font-size:14px;
      line-height:20px;
      font-weight:300;
      text-align:center;
      color:#000;
    }
    .footer strong { font-weight:400; }
    .footer a { color:inherit; font-weight:400; text-decoration:none; }

    /* Existing slide-in chat panel from the fixed homepage version */
    .chat-panel-wrap {
      --panel-w:310px;
      position:fixed;
      z-index:60;
      top:0; right:0;
      width:var(--panel-w);
      height:100vh;
      transform:translateX(100%);
      transition:transform .42s cubic-bezier(.22,.61,.36,1);
      will-change:transform;
    }
    .chat-panel-wrap.open { transform:translateX(0); }
    .chat-launcher {
      position:absolute;
      left:-60px;
      top:31.2vh;
      width:60px; height:60px;
      display:grid; place-items:center;
      background:#fff;
      border:0;
      padding:0;
      cursor:pointer;
      box-shadow:-4px 2px 10px rgba(0,0,0,.08);
    }
    .chat-launcher svg {
      width:27px; height:27px;
      fill:none; stroke:#050505; stroke-width:1.8;
      stroke-linecap:round; stroke-linejoin:round;
    }
    .chat-panel {
      width:100%; height:100%; overflow-y:auto;
      background:#fff;
      box-shadow:-7px 0 18px rgba(0,0,0,.10);
      padding:28px 30px 34px;
    }
    .chat-panel-title {
      margin:0 0 16px;
      font-size:15px; line-height:22px; font-weight:400;
      text-transform:uppercase; letter-spacing:.3px;
    }
    .chat-placeholder {
      min-height:250px;
      display:flex; align-items:center; justify-content:center;
      border:1px solid #e4e4e4;
      background:#f7f7f7;
      color:#929292;
      font-size:15px;
      margin-bottom:26px;
    }
    .chat-panel-actions { display:flex; gap:10px; }
    .chat-panel-actions button {
      min-height:40px; padding:0 18px; border-radius:2px;
      font-size:14px; font-weight:400; cursor:pointer;
    }
    .chat-panel-actions .primary { border:1px solid #55bf84; background:#55bf84; color:#fff; }
    .chat-panel-actions .secondary { border:1px solid #cfcfcf; background:#fff; color:#777; }

    @media (max-width:900px) {
      :root { --side:18px; --header-h:58px; }
      .nav { gap:16px; }
      .nav a { font-size:11.385px; letter-spacing:1.4px; }
      .page-head { padding-top:48px; }
      .page-head::before { font-size:205px; top:-10px; }
      .page-title { font-size:60px; }
      .artworks-grid { width:calc(100% - 36px); column-gap:18px; }
      .artwork-card { margin-bottom:18px; }
      .artwork-title { font-size:23px; line-height:29px; }
      .pagination { gap:14px; margin-top:42px; }
    }
    @media (max-width:720px) {
      :root { --side:12px; --header-h:62px; }
      .site-header { justify-content:flex-end; padding:0 14px; }
      .menu-toggle {
        display:block;
        width:38px; height:38px;
        border:0; background:transparent; position:relative;
      }
      .menu-toggle::before,.menu-toggle::after,.menu-toggle span {
        content:""; position:absolute; left:8px; width:22px; height:1px; background:#111;
      }
      .menu-toggle::before { top:12px; }
      .menu-toggle span { top:19px; }
      .menu-toggle::after { top:26px; }
      .nav {
        position:absolute; top:var(--header-h); left:0; right:0;
        display:none; padding:18px 24px 24px; background:#fff;
      }
      .nav.open { display:block; }
      .nav li { margin:0 0 17px; }
      .nav a { font-size:12.65px; }
      .page-head { padding:58px var(--mobile-content-inset) 34px; }
      .page-head::before { font-size:118px; top:8px; letter-spacing:-4px; }
      .page-kicker { font-size:10px; letter-spacing:3.4px; margin-bottom:14px; }
      .page-title { font-size:46px; letter-spacing:.7px; }
      .page-subtitle { font-size:17px; margin-top:13px; }
      .page-rule { height:38px; margin:18px auto 34px; }
      .page-description { font-size:16px; line-height:24px; }
      .artworks-grid { width:calc(100% - 24px); column-count:1; column-gap:0; padding-top:0; }
      .artwork-card { margin-bottom:12px; }
      .artwork-title { font-size:24px; line-height:30px; }
      .pagination { gap:9px; padding:0 var(--mobile-content-inset); font-size:10px; letter-spacing:1.2px; flex-wrap:wrap; margin-top:34px; }
      .chat-panel-wrap { display:none; }
      .instagram { padding-top:100px; }
    }
  

    /* v19 — shared content typography */
    .page-title {
      font-size:46px;
      line-height:1;
      color:#111;
    }
    .page-description {
      font-size:16px;
      line-height:25px;
      font-weight:300;
      color:#151515;
    }
    @media (max-width:700px){
      .page-title{font-size:38px;line-height:1.04}
      .page-description{font-size:16px;line-height:25px}
    }