/* ==========================================================================
   Artwork page · shared by every piece
   ========================================================================== */

/* the page opens on white, so the header is navy from the first pixel */
.site-header.solid{--a:1 !important}

/* ---------- 1 · the decision: the work first, then a museum label ---------- */
.buy{padding:88px 0 clamp(72px,9vw,128px)}
.buy-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(48px,6vw,112px);align-items:start;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding-right:var(--gutter)}

/* gallery: the work fills its column, top to bottom; named views instead of dots */
.gallery{position:sticky;top:88px;display:flex;flex-direction:column;align-items:flex-end;padding-left:var(--gutter)}
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:min(100%, calc(100vh - 88px - 64px));aspect-ratio:1/1;cursor:pointer;transition:opacity .45s ease}
.g-track::-webkit-scrollbar{display:none}
.g-track figure{flex:0 0 100%;margin:0;scroll-snap-align:center;overflow:hidden}
.g-track img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.g-track.swap{opacity:0}
.g-views{display:flex;flex-wrap:wrap;gap:4px 28px;height:64px;align-items:center;width:min(100%, calc(100vh - 88px - 64px))}
.g-views button{position:relative;padding:8px 0;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.g-views button::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--navy);transition:right .5s cubic-bezier(.2,.65,.2,1)}
.g-views button:hover,.g-views button[aria-selected="true"]{color:var(--navy)}
.g-views button[aria-selected="true"]::after{right:0}

/* the label: what a museum would print beside the work */
.info{padding-top:clamp(56px,9vh,112px);max-width:380px}
.info .eyebrow{margin-bottom:28px}
.info .eyebrow a{border-bottom:1px solid var(--hair)}
.art-title{font-family:var(--serif);font-weight:400;font-size:clamp(38px,3.6vw,56px);line-height:1.04;letter-spacing:-.01em;color:var(--navy);margin:0;text-wrap:balance}
.label{margin:18px 0 0;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.label span{display:block}
.art-tag{margin:14px 0 0;font-size:13px;color:var(--ink-soft)}
.art-line{margin:28px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,23px);line-height:1.45;color:var(--navy)}

/* the choice: words, not boxes */
.choose{margin-top:36px;padding-top:24px;border-top:1px solid var(--hair)}
.kinds,.sizes{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px}
.sizes{margin-top:12px}
.kinds:empty,.sizes:empty{display:none}
.opt,.size{position:relative;padding:6px 0;background:none;border:0;cursor:pointer;color:var(--ink-soft);transition:color .3s}
.opt{font-family:var(--serif);font-size:21px}
.size{font-family:var(--sans);font-size:13px;letter-spacing:.06em}
.opt::after,.size::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--navy);transition:right .5s cubic-bezier(.2,.65,.2,1)}
.opt:hover,.size:hover{color:var(--navy)}
.opt[aria-checked="true"],.size[aria-checked="true"]{color:var(--navy)}
.opt[aria-checked="true"]::after,.size[aria-checked="true"]::after{right:0}
.opt[disabled],.size[disabled]{cursor:default;opacity:.45}
.opt small{font-family:var(--sans);font-size:11px;letter-spacing:.08em;margin-left:6px}

.buyline{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:28px 0 16px}
.price{margin:0;font-family:var(--serif);font-size:24px;color:var(--navy)}
.price small{margin-left:8px;font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
.claim{display:block;text-align:center;padding:18px 24px;background:var(--navy);color:var(--gold-light);border:1px solid var(--navy);font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;transition:background .5s,color .5s}
.claim:hover{background:var(--navy-deep);color:var(--cream)}
.claim.ghost{background:none;color:var(--navy)}
.claim.ghost:hover{background:var(--navy);color:var(--gold-light)}
.claim.off{background:none;color:var(--ink-soft);border-color:var(--hair);pointer-events:none}
.includes{margin:16px 0 0;font-size:13px;line-height:1.65;color:var(--ink-soft)}
.after-links{margin:18px 0 0;font-size:12px;letter-spacing:.06em}
.after-links a{color:var(--gold-ink);border-bottom:1px solid var(--gold)}

@media (max-width:960px){
  .buy{padding-top:88px}
  .buy-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-right:0}
  .gallery{position:static;padding-left:0;align-items:stretch}
  .g-track{width:100%;cursor:grab}
  .g-views{width:auto;height:auto;padding:14px var(--gutter) 0;gap:4px 20px}
  .info{padding:8px var(--gutter) 0;max-width:none}
}

/* details, now below the fold inside "What it's saying" */
.details{margin-top:36px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);max-width:48ch}
.details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--navy)}
.details summary::-webkit-details-marker{display:none}
.details summary::after{content:"";width:9px;height:9px;border:solid var(--gold-ink);border-width:0 1px 1px 0;transform:rotate(45deg) translateY(-3px);transition:transform .4s}
.details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.details dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;margin:0 0 22px;font-size:14px}
.details dt{color:var(--ink-soft)}
.details dd{margin:0;color:var(--navy)}
.details p{margin:0 0 22px;font-size:13px;color:var(--ink-soft)}
.details p a{border-bottom:1px solid var(--hair)}

/* ---------- 2 · recognition ---------- */
.recog-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,112px)}
.recog-grid .eyebrow{max-width:22ch;line-height:1.9}
.bullets{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.bullets li{padding:22px 0;border-bottom:1px solid var(--hair);font-family:var(--serif);font-weight:300;font-size:clamp(23px,2.2vw,30px);line-height:1.3;color:var(--navy)}
@media (max-width:860px){.recog-grid{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ---------- 3 · what it's saying ---------- */
.saying-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center}
.saying figure{margin:0}
.saying figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.long p{margin:0 0 20px;font-family:var(--serif);font-size:clamp(21px,1.9vw,25px);line-height:1.5;color:var(--navy);max-width:40ch}
.ed-note{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--hair);max-width:48ch;color:var(--ink-soft)}
@media (max-width:860px){.saying-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 4 · what happens after you buy ---------- */
.after .title{color:var(--gold);max-width:18ch}
.steps{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.steps li{border-top:1px solid rgba(168,149,109,.3);padding-top:24px}
.steps em{display:block;font-family:var(--serif);font-size:20px;color:var(--gold-light);margin-bottom:10px}
.steps b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.2;color:var(--cream);margin-bottom:12px}
.steps p{margin:0;font-size:15px;color:rgba(235,233,220,.72)}
.after .box{margin:clamp(48px,6vw,72px) 0 36px;max-width:62ch;font-size:15px;line-height:1.8;color:rgba(235,233,220,.72)}
.after .box em{display:block;margin-bottom:8px;font-family:var(--serif);font-size:20px;color:var(--gold-light)}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5 · one voice ---------- */
.voice-sec .voice{margin:0 auto;text-align:center}
.voice blockquote{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.8vw,38px);line-height:1.35;color:var(--navy);text-wrap:balance}
.voice figcaption{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:36px;text-align:left}
.voice figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--navy)}
.voice figcaption small{display:block;font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
.voice figcaption a{border-bottom:1px solid var(--gold)}
.avatar{position:relative;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:rgba(168,149,109,.18);display:grid;place-items:center}
.avatar::before{content:attr(data-initials);font-family:var(--serif);font-size:20px;color:var(--gold)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- 6 · also in this room ---------- */
.more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,4vw,56px)}
.more-head .eyebrow{margin:0}
.more-head .eyebrow a{color:var(--navy);border-bottom:1px solid var(--hair)}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.related a{display:block}
.related figure{margin:0 0 20px;background:#fff;overflow:hidden}
.related img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform 2.4s cubic-bezier(.2,.65,.2,1)}
.related a:hover img{transform:scale(1.03)}
.related b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,26px);line-height:1.2;color:var(--navy)}
.related small{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft)}
.rooms{margin:clamp(56px,7vw,88px) 0 0;padding-top:28px;border-top:1px solid var(--hair);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.rooms a{margin-right:28px;color:var(--gold-ink);border-bottom:1px solid transparent;transition:border-color .3s}
.rooms a:hover{border-color:var(--gold)}
@media (max-width:760px){
  .related{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
  .related::-webkit-scrollbar{display:none}
  .related a{scroll-snap-align:start}
  .more-head{flex-direction:column;align-items:flex-start}
  .rooms a{display:inline-block;margin:0 20px 12px 0}
}

/* ---------- mobile buy bar ---------- */
.buybar{display:none}
@media (max-width:960px){
  .buybar{display:flex;align-items:center;justify-content:space-between;gap:16px;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--hair);transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.65,.2,1)}
  .buybar.on{transform:none}
  .buybar div{min-width:0}
  .buybar b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buybar span{display:block;font-size:12px;color:var(--ink-soft);white-space:nowrap}
  .buybar .claim{flex:none;padding:14px 22px;font-size:12px}
  .menu-open .buybar{transform:translateY(110%)}
}
@media (max-width:960px){.site-footer{padding-bottom:120px}}   /* room for the buy bar */

/* trust: the questions a buyer has before paying, answered at the button */
.trust{margin:22px 0 0;padding:4px 0 0;border-top:1px solid var(--hair)}
.trust div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;padding:10px 0;border-bottom:1px solid rgba(168,149,109,.18)}
.trust dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding-top:2px}
.trust dd{margin:0;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.trust-more{margin:10px 0 0;font-size:12px}
.trust-more a{color:var(--gold-ink);border-bottom:1px solid var(--hair)}
@media (max-width:520px){.trust div{grid-template-columns:minmax(0,1fr);gap:2px}}