:root {
      --ink:#151515;
      --gold:#cfb889;
      --header-h:53px;
      --panel-w:310px;
    }
    * { 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; }

    /* Keep the same navigation already fixed on Home / Artworks. */
    .site-header {
      height:var(--header-h);
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      position:sticky;
      top:0;
      z-index:50;
    }
    .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; }

    /* Single-image artwork viewer. The frame height stays constant while images change. */
    .artwork-gallery {
      position:relative;
      padding:0 29px 66px;
      background:#fff;
    }
    .gallery-frame {
      position:relative;
      width:100%;
      height:min(680px, calc(100vh - 190px));
      height:min(680px, calc(100svh - 190px));
      min-height:420px;
      overflow:hidden;
      background:#fff;
    }
    .gallery-main {
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      background:#fff;
    }
    .gallery-main img {
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center center;
      user-select:none;
      -webkit-user-drag:none;
      transition:opacity .42s ease;
    }
    .gallery-main.is-changing img { opacity:.08; }
    .artwork-head-inner, .detail-content { transition:opacity .28s ease; }
    body.work-changing .artwork-head-inner, body.work-changing .detail-content { opacity:.08; }
    .gallery-nav {
      position:absolute;
      top:50%;
      width:42px;
      height:78px;
      margin-top:-39px;
      border:0;
      background:rgba(207,177,123,.92);
      color:#fff;
      font:300 32px/1 'IBM Plex Sans',sans-serif;
      cursor:pointer;
      z-index:3;
      transition:background .2s ease, opacity .2s ease;
    }
    .gallery-nav:hover { background:rgba(190,157,98,.98); }
    .gallery-nav.prev { left:0; }
    .gallery-nav.next { right:0; }
    .gallery-counter {
      position:absolute;
      right:0;
      bottom:-28px;
      font-size:13px;
      line-height:1;
      color:#767676;
      font-weight:300;
    }
    .gallery-rule {
      position:absolute;
      left:50%;
      bottom:0;
      width:2px;
      height:46px;
      transform:translateX(-50%);
      background:var(--gold);
    }

    /* Title section. Large ghost title mirrors Clayton's single-item style. */
    .artwork-head {
      position:relative;
      overflow:hidden;
      text-align:center;
      padding:31px 24px 38px;
      min-height:255px;
    }
    .artwork-head::before {
      content:attr(data-ghost);
      position:absolute;
      z-index:0;
      left:50%;
      top:-11px;
      transform:translateX(-50%);
      white-space:nowrap;
      pointer-events:none;
      font-family:"Roboto Condensed",Arial,sans-serif;
      font-size:222px;
      line-height:.92;
      font-weight:700;
      letter-spacing:-7px;
      color:rgba(0,0,0,.025);
    }
    .artwork-head-inner {
      position:relative;
      z-index:1;
      max-width:900px;
      margin:0 auto;
    }
    .head-kicker {
      margin:0 0 19px;
      font-family:"Roboto Mono",monospace;
      font-size:12px;
      line-height:1;
      font-weight:600;
      letter-spacing:4px;
      text-transform:uppercase;
      color:#000;
    }
    .head-title {
      margin:0;
      font-family:"Roboto Condensed",Arial,sans-serif;
      font-size:70px;
      line-height:.98;
      font-weight:700;
      letter-spacing:1.2px;
      text-transform:uppercase;
      color:#000;
    }
    .head-subtitle {
      margin:18px 0 0;
      font-family:"Roboto Condensed",Arial,sans-serif;
      font-size:18px;
      line-height:1.2;
      font-style:italic;
      font-weight:300;
      color:#747a83;
    }
    .head-rule {
      width:2px;
      height:43px;
      margin:25px auto 0;
      background:var(--gold);
    }

    .detail-stage {
      position:relative;
      max-width:1684px;
      margin:0 auto;
    }
    .detail-content {
      width:590px;
      max-width:calc(100% - 48px);
      margin:8px auto 0;
      font-size:16px;
      line-height:24px;
      color:#111;
    }
    .detail-content p { margin:0 0 28px; }
    .detail-meta {
      display:grid;
      grid-template-columns:1fr 1fr;
      column-gap:28px;
      row-gap:8px;
      padding:0 0 31px;
      margin-bottom:31px;
      border-bottom:1px solid #ececec;
    }
    .detail-meta-item { min-width:0; }
    .detail-meta-label {
      display:block;
      margin-bottom:3px;
      font-family:"Roboto Mono",monospace;
      font-size:9px;
      line-height:1.2;
      font-weight:600;
      letter-spacing:2px;
      text-transform:uppercase;
      color:#8a8a8a;
    }
    .detail-meta-value { display:block; font-size:15px; line-height:22px; }
    .detail-content h2 {
      margin:35px 0 22px;
      font-family:"Roboto Condensed",Arial,sans-serif;
      font-size:25px;
      line-height:1.15;
      font-weight:700;
      letter-spacing:2.2px;
      text-transform:uppercase;
      color:#000;
    }
    .pull-quote {
      position:relative;
      margin:35px -86px 35px -88px;
      padding:4px 30px 4px 78px;
      min-height:62px;
      font-family:"IBM Plex Sans",Arial,sans-serif;
      font-size:20px;
      line-height:26px;
      font-weight:400;
      font-style:italic;
    }
    .pull-quote::before {
      content:"“";
      position:absolute;
      left:10px;
      top:-7px;
      font-family:Georgia,serif;
      font-size:53px;
      line-height:1;
      font-style:normal;
      color:var(--gold);
    }
    .pull-quote::after {
      content:"";
      position:absolute;
      left:55px;
      top:0;
      bottom:0;
      width:2px;
      background:var(--gold);
    }

    .back-to-artworks {
      display:flex;
      justify-content:center;
      margin:58px 0 0;
    }
    .back-to-artworks a {
      font-family:"Roboto Mono",monospace;
      font-size:11px;
      font-weight:500;
      letter-spacing:2px;
      text-transform:uppercase;
      border-bottom:1px solid #111;
      padding-bottom:5px;
    }

    .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. */
    .chat-panel-wrap {
      position:fixed;
      z-index:70;
      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:1000px) {
      .nav { gap:16px; }
      .nav a { font-size:11.385px; letter-spacing:1.4px; }
      .artwork-gallery { padding-left:18px; padding-right:18px; }
      .gallery-frame { height:min(600px, calc(100vh - 165px)); height:min(600px, calc(100svh - 165px)); min-height:380px; }
      .artwork-head::before { font-size:166px; top:13px; }
      .head-title { font-size:60px; }
    }
    @media (max-width:720px) {
      :root { --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; }
      .artwork-gallery { padding:0 12px 52px; }
      .gallery-frame { height:min(430px, calc(100vh - 135px)); height:min(430px, calc(100svh - 135px)); min-height:300px; }
      .gallery-nav { width:36px; height:66px; margin-top:-33px; font-size:27px; }
      .gallery-counter { bottom:-24px; right:2px; font-size:12px; }
      .gallery-rule { height:34px; }
      .artwork-head { padding:38px var(--mobile-content-inset) 30px; min-height:auto; }
      .artwork-head::before { font-size:82px; top:21px; letter-spacing:-3px; }
      .head-kicker { font-size:10px; letter-spacing:3.2px; margin-bottom:14px; }
      .head-title { font-size:43px; letter-spacing:.4px; }
      .head-subtitle { font-size:16px; margin-top:12px; }
      .head-rule { height:34px; margin-top:19px; }
      .detail-content { max-width:calc(100% - 2 * var(--mobile-content-inset)); width:auto; margin-top:0; font-size:16px; line-height:24px; }
      .detail-meta { grid-template-columns:1fr; row-gap:13px; }
      .detail-content h2 { font-size:23px; }
      .pull-quote { margin:30px 0; padding-left:58px; padding-right:5px; font-size:19px; line-height:25px; }
      .pull-quote::before { left:0; }
      .pull-quote::after { left:40px; }
      .chat-panel-wrap { display:none; }
      .instagram { padding-top:96px; }
    }
  

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