/* Viet Noir / September 2026 — an ivory gallery for Vietnamese lacquer. */
:root{--black:#f5f1e8;--black-soft:#ece6db;--panel:#e9e3d8;--line:#d7cfc0;--gold:#826539;--gold-soft:#755829;--ivory:#252621;--ivory-dim:#64635a;--max-width:1440px;--ink:#20251f;--paper:#f5f1e8}
body{font-weight:400;overflow-x:clip}
h1,h2,h3{letter-spacing:-.035em;line-height:1.08}
h2{font-size:clamp(2.3rem,4vw,3.7rem)}
p{line-height:1.75}
.wrap{padding-inline:clamp(22px,5vw,76px)}
header.site-header{background:rgba(245,241,232,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{padding:20px clamp(22px,5vw,76px);min-height:98px}
.logo{font-size:2rem;letter-spacing:.01em;line-height:1}
.logo em{color:inherit;font-style:italic}
.logo .sub{font-size:.56rem;letter-spacing:.23em;margin-top:9px}
.nav-links{font-size:.7rem;letter-spacing:.13em;gap:34px}
.nav-links a:hover,.nav-links a.active{color:var(--ink);border-color:var(--gold)}
.eyebrow{font-size:.66rem;letter-spacing:.19em;color:var(--gold);font-weight:500}
.btn{font-size:.66rem;letter-spacing:.12em;padding:16px 24px;border-color:var(--ink);min-height:48px}
.btn.solid{background:var(--ink);color:#f5f1e8;border-color:var(--ink)}
.btn.solid:hover{background:#3c4437;border-color:#3c4437}
.btn.ghost{color:var(--ink)}
.btn:hover{background:var(--ink);color:#fff}
.btn.small{font-size:.64rem;padding:11px 18px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid #846329;outline-offset:5px}
.text-link{font-size:.76rem;letter-spacing:.045em;text-decoration:none;border-bottom:1px solid #aaa18f;padding-bottom:5px;color:var(--ink)}
.skip-link{position:fixed;left:20px;top:-100px;z-index:500;background:var(--ink);color:white;padding:14px}.skip-link:focus{top:10px}
.landing-hero{display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;gap:clamp(30px,5vw,90px);padding-block:58px 66px;max-width:1440px;margin:auto;padding-inline:clamp(22px,5vw,76px)}
.hero-copy{padding:15px 0 25px}
.hero-copy h1{font-size:clamp(3.8rem,6.5vw,6.7rem);max-width:10ch;margin:24px 0 28px;line-height:.99;font-weight:400}
.hero-copy h1 em{color:#816039;font-weight:400}
.hero-copy>p{font-size:.95rem;max-width:38ch}
.hero-copy .hero-actions{margin-top:33px;gap:24px;align-items:center}
.hero-art{margin:0;position:relative}
.hero-art-stage{background:#e8e0d2;padding:clamp(20px,3vw,42px);display:flex;min-height:570px;align-items:center;justify-content:center}
.hero-art-stage img{width:auto;max-height:540px;object-fit:contain;box-shadow:0 22px 36px #42382b24}
.hero-art figcaption{display:flex;justify-content:space-between;gap:18px;margin-top:17px;font-size:.67rem;color:var(--ivory-dim)}
.hero-art figcaption strong{font-weight:500;color:var(--ink)}
.hero-edition{font-size:.65rem;color:var(--ivory-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:45px;display:flex;align-items:center;gap:15px}
.hero-edition:before{content:"";width:40px;height:1px;background:#958466}
.collection-ribbon{border-block:1px solid var(--line);padding:20px clamp(22px,5vw,76px);display:flex;justify-content:space-between;gap:20px;color:var(--ivory-dim);font-size:.67rem;letter-spacing:.12em;text-transform:uppercase}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:38px}
.section-heading h2{margin:0}
.section-heading .text-link{flex:0 0 auto;margin-bottom:4px}
.section-heading p{max-width:48ch;margin-top:15px}
.collection-grid,.editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px;align-items:start}
.collection-grid .card,.editorial-grid .card,.editorial-grid .card:last-child{grid-column:auto}
.card{transform:none!important}
.card-frame,.card-wide .card-frame,.card-landscape .card-frame,.card-portrait .card-frame,.card-square .card-frame{aspect-ratio:1/1;background:#eae4d9;border:0;display:grid;place-items:center;padding:clamp(16px,2.5vw,32px);overflow:hidden}
.card-frame picture{height:100%;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
.card-frame img{width:100%;height:100%;object-fit:contain;padding:0;max-height:100%;filter:drop-shadow(0 10px 12px #3d342922);transition:transform .45s ease}
.card:hover .card-frame img{transform:scale(1.025)}
.card-view{position:absolute;bottom:12px;right:15px;font-size:.59rem;text-transform:uppercase;letter-spacing:.1em;opacity:0;background:var(--paper);padding:5px 9px;transition:opacity .2s}
.card:hover .card-view,.card:focus-visible .card-view{opacity:1}
.card-meta{padding-top:20px}
.card-topline{display:flex;justify-content:space-between;gap:10px;color:var(--gold);font-size:.64rem;letter-spacing:.07em;margin-bottom:9px}
.card-topline span:first-child{max-width:75%}
.card-meta h3{font-size:1.75rem;line-height:1.13;margin-bottom:5px}
.card-translation{font-size:.74rem;color:var(--ivory-dim);margin-bottom:14px;line-height:1.5}
.card-foot{font-size:.62rem;letter-spacing:.025em;text-transform:none;padding-top:11px;align-items:center}
.collection-intro{padding-top:62px!important;padding-bottom:35px!important}
.collection-intro .intro-row{display:grid;grid-template-columns:1fr .65fr;align-items:end;gap:60px}
.collection-intro h1{font-size:clamp(3.4rem,6vw,5.7rem);margin-bottom:0}
.collection-intro .intro-row p{font-size:.91rem;margin-bottom:0}
.gallery-section{padding-top:0;padding-bottom:100px}
.gallery-controls{padding:24px 0 30px;border-top:1px solid var(--line)}
.filters{gap:6px;margin:0;flex-wrap:wrap}
.filter-btn{border:none;border-bottom:1px solid transparent;padding:11px 14px;background:none;letter-spacing:.03em;color:var(--ivory-dim);text-transform:none;font:inherit;font-size:.78rem;min-height:44px}
.filter-btn:first-child{padding-left:0;margin-right:7px}
.filter-btn.active{color:var(--ink);background:transparent;border-bottom-color:var(--ink)}
.filter-btn:hover{color:var(--ink);border-bottom-color:var(--line)}
.find-row{display:grid;grid-template-columns:1.25fr 1fr 1fr auto;gap:20px;margin-top:21px;align-items:end}
.find-row label{display:grid;gap:8px;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ivory-dim)}
.find-row input,.find-row select{font:inherit;font-size:.83rem;text-transform:none;letter-spacing:0;background:transparent;border:0;border-bottom:1px solid #afa695;border-radius:0;padding:11px 0;color:var(--ink);width:100%;min-width:0}
#collection-count{font-size:.63rem;padding-bottom:12px;white-space:nowrap}
.empty-state{grid-column:1/-1;padding:60px 20px;text-align:center}
.dark-feature{background:var(--ink);color:#f5f1e8;padding-block:88px}
.dark-feature h2,.dark-feature h3{color:#f5f1e8}
.dark-feature p{color:#c6c8be}
.dark-feature .eyebrow{color:#c6ac79}
.dark-feature .text-link{color:#ede7dc}
.dark-feature .split{gap:70px}
.dark-feature img{width:100%;object-fit:contain}
.dark-feature .art-framing{background:#30382e;padding:30px}
.genre-links{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.genre-links a{padding:30px 22px;border-right:1px solid var(--line)}
.genre-links a:first-child{padding-left:0}.genre-links a:last-child{border-right:0}
.genre-links span{font-size:.65rem;color:var(--gold);display:block;margin-bottom:14px}
.genre-links h3{font-size:1.7rem;margin-bottom:9px}
.genre-links p{font-size:.74rem;margin:0}
.genre-links a:hover h3{color:var(--gold)}
.closing-cta{background:#eae4d9;padding:70px 0!important}
.closing-cta-inner{display:flex;justify-content:space-between;gap:40px;align-items:center}
.closing-cta h2{max-width:18ch;margin-bottom:10px}
.closing-cta p{max-width:48ch;font-size:.88rem;margin:0}
footer.site-footer{background:var(--paper);padding-bottom:80px}
.footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:70px}
.footer-grid h4{color:var(--gold)}
.footer-grid li{font-size:.78rem}
.footer-brand-line{font-family:var(--font-display);font-size:clamp(3rem,12vw,11rem);color:#d7cfbf;line-height:.9;margin:50px 0 0;letter-spacing:-.05em}
.footer-bottom{font-size:.66rem}
.artwork-section{padding:35px 0 0!important}
.crumb{margin-bottom:28px;font-size:.68rem}
.artwork-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,76px);align-items:start}
.artwork-visual{position:sticky;top:123px}
.artwork-open{display:block;position:relative;width:100%;background:#e9e3d8;padding:clamp(20px,3vw,42px);border:0;cursor:zoom-in}
.artwork-open picture{display:block}
.artwork-open img{width:100%;height:auto;max-height:680px;object-fit:contain}
.enlarge-label{display:block;text-align:right;font-size:.61rem;color:var(--ink);letter-spacing:.06em;margin-top:22px}
.photo-caption{font-size:.63rem;margin:14px 0 2px;color:var(--ivory-dim)}
.original-link{font-size:.65rem;border-bottom:1px solid var(--line)}
.artwork-record{padding-top:18px}
.artwork-record h1{font-size:clamp(2.7rem,4.2vw,4.4rem);line-height:1.05;margin-bottom:12px}
.artwork-translation{font-family:var(--font-display);font-size:1.3rem;font-style:italic;line-height:1.3;margin-bottom:20px}
.artwork-artist{font-size:.8rem;color:var(--gold);letter-spacing:.05em;margin-bottom:26px}
.artwork-description{font-size:.91rem;margin-bottom:28px}
.artwork-specs{border-block:1px solid var(--line);margin:0}
.artwork-specs>div{display:grid;grid-template-columns:100px 1fr;gap:25px;padding:16px 0;border-bottom:1px solid var(--line)}
.artwork-specs>div:last-child{border:0}
.artwork-specs dt{font-size:.63rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ivory-dim)}
.artwork-specs dd{margin:0;font-size:.83rem}
.artwork-specs dd span{font-size:.72rem;color:var(--ivory-dim)}
.detail-actions{align-items:center;gap:24px;margin-top:28px}
.discreet-note{font-size:.65rem;margin-top:15px}
.record-notes{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;font-size:.72rem;color:var(--ivory-dim)}
.record-notes summary{cursor:pointer;color:var(--ink);padding:7px 0;font-size:.73rem}
.record-notes p{margin-top:12px;line-height:1.65}
.condition-note{border-left:2px solid #9b7841;padding-left:16px;margin-top:24px;font-size:.78rem}
.condition-note strong{font-weight:500;color:var(--ink)}
.condition-note p{margin:7px 0}
.record-navigation{margin-top:65px}
.related-section{padding:74px 0}
.artwork-lightbox{background:var(--paper);color:var(--ink);max-width:96vw;max-height:94vh;width:min(1400px,96vw);padding:20px;border:0}
.artwork-lightbox::backdrop{background:#11170fec}
.lightbox-head{position:sticky;top:0;background:var(--paper);padding:6px 0 16px;z-index:2;border-bottom:1px solid var(--line);color:var(--ink)}
.lightbox-close{background:var(--ink)!important;color:var(--paper)!important;border:0!important;min-height:44px;padding:10px 15px}
.lightbox-image{padding:25px 0;max-height:none;overflow:auto;display:block}
.lightbox-image img{max-height:none;max-width:100%;width:auto;margin:auto}
.lightbox-note{font-size:.72rem;margin:0}
.lightbox-note a{text-decoration:underline}
.page-intro h1{font-size:clamp(3.2rem,5vw,5.3rem)}
.page-intro .section-head{max-width:750px}
.section-head p{font-size:.94rem}
.inquiry-launcher{border:1px solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:0 8px 26px #20251f22;font-size:.65rem}
.inquiry-launcher:hover{background:#3c4437}
.inquiry-panel{background:var(--paper);box-shadow:0 16px 50px #20251f30}
.inquiry-panel p{font-size:.83rem}
.field input,.field select,.field textarea,.widget-form input,.widget-form textarea{background:#fcfaf6;color:var(--ink);border-color:var(--line)}
.widget-status.error{color:#862020}
.contact-aside{background:var(--black-soft)}
.catalog-note{background:transparent}
.confirmation-page{background:var(--paper)}
.confirmation-card{padding:28px}
.reveal-ready{opacity:1!important;transform:none!important}
[hidden]{display:none!important}
@media(max-width:1000px){.landing-hero{gap:35px}.hero-art-stage{min-height:470px}.hero-art-stage img{max-height:460px}.hero-copy h1{font-size:5.1rem}.collection-grid{gap:38px 20px}.card-meta h3{font-size:1.55rem}.artwork-layout{grid-template-columns:1fr 1fr;gap:35px}}
@media(max-width:860px){.nav{min-height:84px}.nav-links{background:var(--paper)}.landing-hero{grid-template-columns:1fr 1fr;gap:25px;padding-block:40px}.hero-copy h1{font-size:4rem}.hero-art-stage{min-height:400px;padding:20px}.hero-art-stage img{max-height:380px}.hero-edition{margin-top:25px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-intro .intro-row{grid-template-columns:1fr;gap:20px}.artwork-layout{grid-template-columns:1fr}.artwork-visual{position:static}.artwork-record{max-width:650px}.genre-links{grid-template-columns:repeat(2,1fr)}.genre-links a:nth-child(2){border-right:0}.genre-links a:nth-child(3){padding-left:0;border-top:1px solid var(--line)}.genre-links a:nth-child(4){border-top:1px solid var(--line)}.footer-grid{gap:30px}.find-row{grid-template-columns:1fr 1fr}.find-row label:first-child{grid-column:1/-1}#collection-count{grid-column:2;text-align:right}.closing-cta-inner{align-items:start;flex-direction:column}}
@media(max-width:600px){.nav{padding-block:16px}.logo{font-size:1.8rem}.landing-hero{grid-template-columns:1fr;padding-top:32px;gap:30px;padding-bottom:35px}.hero-copy{padding:0}.hero-copy h1{font-size:4.55rem;max-width:11ch;margin-block:20px}.hero-copy>p{max-width:40ch}.hero-edition{display:none}.hero-art-stage{min-height:0;padding:26px}.hero-art-stage img{max-height:490px}.hero-art figcaption{font-size:.64rem}.collection-ribbon{font-size:.59rem;flex-wrap:wrap;gap:8px 20px}.collection-ribbon span:last-child{display:none}.section-heading{align-items:start;flex-direction:column;gap:18px}.section-heading h2{font-size:2.6rem}.collection-grid,.editorial-grid{grid-template-columns:1fr;gap:36px}.card-frame,.card-portrait .card-frame,.card-wide .card-frame,.card-landscape .card-frame,.card-square .card-frame{aspect-ratio:1.1/1;padding:26px}.card-meta h3{font-size:1.95rem}.card-meta{padding-top:17px}.card-topline{font-size:.66rem}.card-foot{font-size:.67rem}.card-view{opacity:1}.collection-intro{padding-top:36px!important}.collection-intro h1{font-size:3.9rem}.find-row{gap:14px}.filters{gap:0}.filter-btn{font-size:.72rem;padding-inline:10px}.gallery-controls{padding-top:15px}.dark-feature{padding-block:55px}.dark-feature .split{gap:32px}.dark-feature .art-framing{padding:18px}.genre-links h3{font-size:1.55rem}.genre-links a{padding:25px 16px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid .logo{font-size:2.4rem}.footer-brand-line{font-size:4rem}.artwork-section{padding-top:23px!important}.artwork-open{padding:20px}.artwork-record h1{font-size:3.3rem}.detail-actions{align-items:start;flex-direction:column;gap:20px}.record-navigation{margin-top:40px}.record-navigation a{padding:18px 8px}.record-navigation strong{font-size:1rem}.lightbox-head{font-size:.74rem;gap:10px}.footer-bottom{padding-right:70px}.photo-caption{font-size:.59rem}.inquiry-launcher{font-size:.61rem}}