/* Art of NOMA works pages (v1.6). Index grid, filters, single work, shortlist. */
.nw-wrap{padding-block:28px 56px}
.nw-head{padding:34px 0 22px;max-width:760px}
.noma .nw-head h1{font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.nw-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0;border-block:1px solid var(--nx-line);position:sticky;top:0;z-index:20;background:var(--nx-cream)}
@media(min-width:900px){.nw-bar{grid-template-columns:2fr 1.2fr 1fr 1.2fr 1.2fr auto;align-items:end;gap:12px}}
.nw-field{display:flex;flex-direction:column;gap:4px;font:500 11px/1.2 var(--noma-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--noma-muted);min-width:0}
.nw-field-q{grid-column:1/-1}
@media(min-width:900px){.nw-field-q{grid-column:auto}}
.nw-field input,.nw-field select{font:400 15px/1.2 var(--noma-sans);letter-spacing:0;text-transform:none;color:var(--nx-ink);background:#fff;border:1px solid var(--nx-line);border-radius:0;padding:11px 12px;min-height:44px;width:100%}
.nw-field input:focus,.nw-field select:focus{outline:2px solid var(--nx-ink);outline-offset:1px}
.nw-saved-btn{min-height:44px;padding:0 16px;border:1px solid var(--nx-ink);background:transparent;color:var(--nx-ink);font:500 14px/1 var(--noma-sans);cursor:pointer;grid-column:1/-1}
@media(min-width:900px){.nw-saved-btn{grid-column:auto}}
.nw-saved-btn[aria-pressed="true"]{background:var(--nx-ink);color:var(--nx-cream)}
.nw-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 6px;min-height:52px}
.nw-status p{margin:0;font:400 14px/1.4 var(--noma-sans);color:var(--noma-muted)}
.nw-short{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nw-linkbtn{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 2px;font:500 13px/1 var(--noma-sans);cursor:pointer;color:var(--nx-ink)}
.nw-grid{columns:2;column-gap:14px}
@media(min-width:700px){.nw-grid{columns:3;column-gap:22px}}
@media(min-width:1100px){.nw-grid{columns:4}}
.nw-grid .nw-card{break-inside:avoid;margin:0 0 26px}
.nw-card{position:relative;min-width:0}
.nw-card[hidden]{display:none}
.nw-card-img{display:flex;align-items:center;justify-content:center;background:var(--nx-sand);padding:16px;aspect-ratio:1/1}
.nw-card-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 8px 22px rgba(33,28,24,.18);transition:transform .4s}
.nw-card:hover .nw-card-img img{transform:scale(1.03)}
.nw-card-info{display:flex;flex-direction:column;gap:2px;padding-top:10px}
.nw-card-artist{font:500 12px/1.3 var(--noma-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--noma-muted)}
.nw-card-title{font:400 17px/1.25 var(--noma-serif);color:var(--nx-ink)}
.nw-card-title:hover{color:var(--nx-accent)}
.nw-card-sub{font:400 13px/1.3 var(--noma-sans);color:var(--noma-muted)}
.nw-card-price{font:500 15px/1.3 var(--noma-sans);margin-top:4px}
.nw-save{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(252,251,249,.92);color:var(--nx-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.nw-save[aria-pressed="true"]{color:var(--nx-accent)}
.nw-save[aria-pressed="true"] path{fill:currentColor}
.nw-save-lg{position:static;width:auto;height:auto;border-radius:0;border:1px solid var(--nx-ink);background:transparent;padding:12px 18px;gap:8px;font:500 14px/1 var(--noma-sans);box-shadow:none}
.nw-crumbs{padding:10px 0 4px;font:500 13px/1 var(--noma-sans)}
.nw-crumbs a{border-bottom:1px solid var(--nx-ink)}
.nw-work{display:grid;grid-template-columns:1fr;gap:28px;padding-top:14px}
@media(min-width:960px){.nw-work{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}.nw-info{position:sticky;top:90px}}
.nw-main{display:flex;align-items:center;justify-content:center;width:100%;background:var(--nx-sand);border:0;padding:clamp(14px,3vw,40px);cursor:zoom-in;min-height:min(78vh,760px)}
.nw-main img{max-width:100%;max-height:min(72vh,820px);width:auto;height:auto;object-fit:contain;box-shadow:0 18px 50px rgba(33,28,24,.25)}
.nw-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.nw-thumbs button{flex:0 0 72px;height:72px;border:1px solid var(--nx-line);background:var(--nx-sand);padding:4px;cursor:pointer}
.nw-thumbs button[aria-pressed="true"]{border-color:var(--nx-ink);border-width:2px}
.nw-thumbs img{width:100%;height:100%;object-fit:contain}
.nw-artist{display:inline-block;font:500 13px/1.3 var(--noma-sans);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--nx-ink);margin-bottom:10px}
.noma .nw-info h1{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
.nw-meta{font:400 16px/1.4 var(--noma-sans);color:var(--noma-muted);margin:0 0 14px}
.nw-price{font:400 clamp(26px,3vw,34px)/1.1 var(--noma-serif);margin:0 0 20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.nw-avail{font:500 12px/1 var(--noma-sans);letter-spacing:.1em;text-transform:uppercase;color:#2f6b3a;border:1px solid currentColor;padding:5px 8px}
.nw-cta{display:flex;flex-wrap:wrap;gap:10px}
.nw-cta .nx-btn{min-height:46px;display:inline-flex;align-items:center}
.nw-note{font:400 13px/1.5 var(--noma-sans);color:var(--noma-muted);margin:10px 0 0}
.nw-ask{margin-top:18px;padding:18px;background:var(--nx-paper);border:1px solid var(--nx-line);display:grid;gap:12px}
.nw-ask[hidden]{display:none}
.nw-ask label{display:flex;flex-direction:column;gap:5px;font:500 12px/1.2 var(--noma-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--noma-muted)}
.nw-ask input,.nw-ask textarea{font:400 16px/1.3 var(--noma-sans);letter-spacing:0;text-transform:none;border:1px solid var(--nx-line);background:#fff;padding:11px 12px;color:var(--nx-ink);width:100%;border-radius:0}
.nw-form-msg{margin:0;font:500 14px/1.4 var(--noma-sans)}
.nw-mail{font:400 13px/1 var(--noma-sans);color:var(--noma-muted);border-bottom:1px solid currentColor;justify-self:start}
.nw-trust{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;border-top:1px solid var(--nx-line);padding-top:18px}
.nw-trust li{display:flex;flex-direction:column;gap:2px}
.nw-trust strong{font:500 14px/1.3 var(--noma-sans)}
.nw-trust span{font:400 14px/1.5 var(--noma-sans);color:var(--noma-muted)}
.nw-about .nw-body{max-width:68ch;font:400 18px/1.7 var(--noma-serif)}
.nw-roomwall{position:relative;width:100%;max-width:880px;aspect-ratio:320/230;background:linear-gradient(#efe9de,#e6dfd1);overflow:hidden;border:1px solid var(--nx-line)}
.nw-roomwall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:#cfc3ae}
.nw-roomart{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);height:auto;box-shadow:0 10px 26px rgba(33,28,24,.3);z-index:2}
.nw-sofa{position:absolute;left:50%;bottom:6%;width:62.5%;transform:translateX(-50%);z-index:1}
.nw-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,24%);gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px}
@media(max-width:700px){.nw-rail{grid-auto-columns:62%}}
.nw-rail .nw-card{scroll-snap-align:start}
.nw-lightbox{position:fixed;inset:0;background:rgba(20,16,13,.94);z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px}
.nw-lightbox[hidden]{display:none}
.nw-lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.nw-lb-close{position:absolute;top:10px;right:14px;width:48px;height:48px;border:0;background:transparent;color:#fff;font-size:38px;line-height:1;cursor:pointer}
@media(prefers-reduced-motion:reduce){.nw-card-img img{transition:none}}
.nw-short[hidden],.nw-wrap [hidden]{display:none!important}
.nw-card .nw-save{padding:0;min-width:40px;max-width:40px;line-height:1;aspect-ratio:1/1;font-size:0}
.nw-card .nw-save svg{display:block;flex:none}
.nw-save-lg{max-width:none!important}
.nw-head{padding-top:10px}
.nw-card .nw-save{padding:0!important;width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important}
.nw-card .nw-save svg{width:20px!important;height:20px!important}
.nw-save-lg{padding:12px 18px!important;border-radius:0!important}
.nw-bar{top:56px}
.nw-info{top:110px}
.noma .nw-meta{margin:0 0 18px!important}
.noma .nw-price{margin:0 0 22px!important}
.noma .nw-artist{margin-bottom:12px}
.nw-wrap{padding-top:0}
/* Art comes first on a phone: the 300x250 top ad would fill the first screen of a work page. */
@media(max-width:700px){.nw-page .noma-ad-top{display:none}}

.nw-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--nx-cream);border-top:1px solid var(--nx-line);box-shadow:0 -6px 20px rgba(33,28,24,.08)}
.nw-sticky>div:first-child{display:flex;flex-direction:column;min-width:0}
.nw-sticky strong{font:500 17px/1.2 var(--noma-sans)}
.nw-sticky span{font:italic 400 13px/1.3 var(--noma-serif);color:var(--noma-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-sticky .nx-btn{min-height:44px;display:inline-flex;align-items:center;flex:none}
@media(max-width:959px){.nw-sticky.on{display:flex}}
.nx-browse{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 13px/1 var(--noma-sans)}
.nx-browse a{border:1px solid var(--nx-line);padding:9px 12px;color:var(--nx-ink);background:#fff}
.nx-browse a:hover{border-color:var(--nx-ink)}
@media(min-width:900px){.nw-bar{grid-template-columns:2fr 1.2fr 1fr 1.2fr 1.1fr 1.2fr auto}}

/* Art wall: a slow, full-bleed strip of real works above the title. */
.nw-marquee{overflow:hidden;background:linear-gradient(#ece4d6,#e3d9c6);padding:26px 0;margin-top:-6px}
.nw-marquee-track{display:flex;gap:28px;width:max-content;animation:nwmq 90s linear infinite}
.nw-marquee:hover .nw-marquee-track{animation-play-state:paused}
.nw-mq{display:flex;align-items:center;height:clamp(180px,26vw,300px)}
.nw-mq img{height:100%;width:auto;max-width:none;object-fit:contain;box-shadow:0 14px 34px rgba(33,28,24,.28);transition:transform .5s}
.nw-mq:hover img{transform:translateY(-6px) scale(1.02)}
@keyframes nwmq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nw-marquee{overflow-x:auto}.nw-marquee-track{animation:none}}
.noma .nw-head h1{font-size:clamp(40px,6.4vw,84px);letter-spacing:-.03em}

/* Buy now / Reserve (v1.7). Scoped to work pages, cards and the sticky bar so home styles (represent.css) do not collide. */
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy{display:flex;flex-wrap:wrap;gap:10px;margin:0}
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:1 1 150px;min-height:46px;padding:0 22px;border:1px solid var(--nx-ink);border-radius:0;font:500 15px/1 var(--noma-sans);letter-spacing:.01em;text-align:center;text-decoration:none;white-space:nowrap;box-shadow:none;transition:background-color .2s,color .2s,border-color .2s}
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a.nx-buy-now{background:var(--nx-ink);color:var(--nx-cream)}
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a.nx-buy-now:hover,
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a.nx-buy-now:focus-visible{background:var(--nx-ink);border-color:var(--nx-ink);color:var(--nx-acid)}
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a.nx-buy-reserve{background:transparent;color:var(--nx-ink)}
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a.nx-buy-reserve:hover,
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a.nx-buy-reserve:focus-visible{background:var(--nx-ink);border-color:var(--nx-ink);color:var(--nx-cream)}
:is(.nw-work,.nw-card,.nw-sticky) .nx-buy a:focus-visible{outline:2px solid var(--nx-ink);outline-offset:2px}
.nw-work .nw-cta .nx-buy{flex:1 1 100%}
.nw-work .nw-cta .nx-buy a{min-height:52px;font-size:16px}
.nw-work .nx-buy-note{margin:12px 0 0;font:400 13px/1.5 var(--noma-sans);color:var(--noma-muted)}
.nw-card .nx-buy{gap:8px;margin-top:10px}
.nw-card .nx-buy a{flex:1 1 90px;min-height:44px;padding:0 10px;font-size:13px}
.nw-sticky .nx-buy{flex:none;flex-wrap:nowrap;gap:8px}
.nw-sticky .nx-buy a{flex:none;min-height:44px;padding:0 16px;font-size:14px}
.nw-anchor{display:block;height:0;overflow:hidden}
.nw-ask-title{margin:0;font:italic 400 20px/1.2 var(--noma-serif);color:var(--nx-ink)}
@media(max-width:419px){
  :is(.nw-work,.nw-card) .nx-buy{flex-direction:column;flex-wrap:nowrap}
  :is(.nw-work,.nw-card) .nx-buy a{flex:none;width:100%}
}
