/* CANVAS WOMAN — site.css
   Ivory wall, charcoal ink, taupe, plaster. Brass appears only in measured drawings.
   Noto Serif Display (display; artwork titles in italic) + Albert Sans (UI and body).
   Artwork is never cropped by CSS: every painting image is sized from its own ratio (--r). */
@font-face{font-family:"Noto Serif Display";src:url("../fonts/noto-serif-display-var.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif Display";src:url("../fonts/noto-serif-display-italic-var.woff2") format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("../fonts/albert-sans-var.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --ivory:#F5F0E7;--plaster:#EBE3D6;--ink:#221E1A;--ink-2:#3A332C;--taupe:#655B52;
  --brass:#7C5F34;--brass-line:#A88B5C;--umber:#2A2420;--on-umber:#F5F0E7;--on-umber-muted:#BDB1A1;
  --rule:rgba(34,30,26,.15);--line:rgba(34,30,26,.32);--field:#8C847B;
  --serif:"Noto Serif Display","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Albert Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,4.6vw,64px);--max:1360px;--section:clamp(88px,11vw,168px);--header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hang:0 1px 1px rgba(45,32,20,.10),0 12px 20px -10px rgba(45,32,20,.24),0 30px 50px -26px rgba(45,32,20,.30);
  --hang-lift:0 1px 1px rgba(45,32,20,.10),0 18px 28px -12px rgba(45,32,20,.28),0 42px 64px -30px rgba(45,32,20,.36);
}
@media (max-width:1023px){:root{--header-h:62px}}

@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px)}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
/* The hidden attribute must win over any component's own display value. Without
   this, a control set to hidden in JS still renders and still takes clicks. */
[hidden]{display:none!important}
picture{display:contents}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--line)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:350;line-height:1.05;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.75rem,6vw,5.5rem);line-height:1}
h2{font-size:clamp(2.05rem,4.2vw,3.75rem)}
h3{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2}
address{font-style:normal}
button,input,select,textarea{font:inherit;color:inherit}
main:focus{outline:none}
::selection{background:#DCCDB2;color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;background:var(--ink);color:var(--ivory);padding:10px 16px;text-decoration:none}
.skip-link:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--plaster{background:var(--plaster)}
.section:not(.section--plaster) + .section:not(.section--plaster),.spread + .essay,.profile + .reach,.artist + .reach{padding-top:0}
.muted{color:var(--taupe)}
.small{font-size:.875rem}
.lead{font-size:clamp(1.125rem,1.45vw,1.3rem);line-height:1.6}
.art-title{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;vertical-align:middle;margin:0 .65em}
.icon{width:20px;height:20px;flex:none}
.hang{box-shadow:var(--hang)}
.wall-label{display:flex;flex-direction:column;gap:1px;margin-top:20px;font-size:.8125rem;line-height:1.5;color:var(--taupe);width:0;min-width:100%}
.wall-label .art-title{font-size:1.125rem;color:var(--ink)}

.lot__specs dd,.lot__price-value,.lot__ref,.card__meta,.work__label,.glance dd,.gallery__count,
.filters__count,.index__count,.cat__count,.ways__count,.price-lines,.sd-label,.salon__meta,
.contact__number,.reach__note{font-variant-numeric:tabular-nums lining-nums}

/* buttons & links */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:52px;padding:.85em 1.6em;border:1px solid var(--ink);background:var(--ink);color:var(--ivory);font:500 .8125rem/1.25 var(--sans);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;transition:color .4s var(--ease),border-color .4s var(--ease),transform .18s var(--ease)}
/* Each button inverts on hover, and the direction of the sweep follows the button: a
   dark button lightens from the top down, a light one darkens from the bottom up. Two
   adjacent buttons therefore wipe towards each other rather than in step. */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ivory);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn .icon{width:18px;height:18px}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost::before{background:var(--ink);transform-origin:bottom}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ivory)}
.btn--block{display:flex;width:100%}
.btn--large{min-height:60px;padding-inline:2.2em;font-size:.875rem}
/* Light button on a dark band: light by default, so it sweeps dark from the bottom up. */
.btn--light{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn--light::before{background:var(--ink);transform-origin:bottom}
.btn--light:hover,.btn--light:focus-visible{color:var(--ivory)}
.link{font-weight:500;font-size:.9375rem;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line);text-underline-offset:.4em;transition:text-decoration-color .3s}
.link:hover{text-decoration-color:currentColor}
.link--light{color:var(--on-umber);text-decoration-color:rgba(245,240,231,.4)}

/* Artwork is held back until the browser has fully decoded it, then revealed — so a
   half-downloaded photograph never paints its way down the page. The frame is already
   reserved by the image's aspect ratio, so nothing moves. Below the fold it fades in;
   above the fold it appears the instant it is ready, to keep the page fast. Applies
   only when JavaScript ran — without it, images show immediately as normal. */
.js picture[data-fade] > img:not(.is-ready){opacity:0}
.js picture[data-fade] > img:not([fetchpriority="high"]){transition:opacity .3s var(--ease)}

/* development preview bar (never rendered by --production) */
.preview-note{background:var(--plaster);border-bottom:1px solid var(--rule);color:var(--taupe);font-size:.8125rem;line-height:1.4;text-align:center;padding:8px var(--gutter)}
.preview-note p{margin:0}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--ivory);transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.site-header__bar{height:var(--header-h);display:flex;align-items:center;gap:24px;position:relative;z-index:2;background:var(--ivory)}
.wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1;letter-spacing:.07em;text-decoration:none;white-space:nowrap;margin-right:auto;padding-block:12px;transition:opacity .45s var(--ease),visibility .45s}
.js .has-masthead:not(.show-mark) .site-header__bar .wordmark{opacity:0;visibility:hidden}
.site-nav ul{display:flex;gap:clamp(18px,2.2vw,34px)}
.site-nav a{display:block;font-size:.9375rem;text-decoration:none;padding:6px 0;position:relative}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.site-nav a:hover::after{transform:scaleX(1);opacity:.4}
.site-nav a[aria-current="page"]::after{transform:scaleX(1);opacity:1}
.site-header__actions{display:flex;align-items:center;gap:2px;margin-left:clamp(4px,1.2vw,16px)}
/* Each account lights up in its own platform's colour on hover. At rest they are all
   plain ink, so the header stays quiet — the colour is recognition, not decoration.
   --glow is the halo behind the icon; --tint recolours the glyph itself. */
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;padding:0;color:var(--ink);cursor:pointer;
  transition:color .3s var(--ease)}
.icon-btn::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--glow,transparent);
  opacity:0;transform:scale(.7);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.icon-btn svg{position:relative;transition:transform .35s var(--ease)}
.icon-btn:hover svg,.icon-btn:focus-visible svg{transform:translateY(-1px)}
.icon-btn:hover::before,.icon-btn:focus-visible::before{opacity:1;transform:scale(1)}
.icon-btn:hover,.icon-btn:focus-visible{color:var(--tint,var(--ink))}

/* WhatsApp green, Facebook blue, Instagram across its own magenta-to-amber range. The
   Instagram halo is the one place a gradient is allowed, because it IS the brand mark. */
.icon-btn--wa,.social--wa,.channel--whatsapp{--tint:#1DA851;--glow:radial-gradient(circle,rgba(37,211,102,.30),rgba(37,211,102,0) 70%)}
.icon-btn--fb,.social--fb,.channel--facebook{--tint:#1877F2;--glow:radial-gradient(circle,rgba(24,119,242,.28),rgba(24,119,242,0) 70%)}
.icon-btn--ig,.icon-btn--ig-personal,.social--ig,.social--ig-personal,.channel--instagram{--tint:#C7248B;
  --glow:radial-gradient(circle at 32% 78%,rgba(253,176,63,.42),rgba(221,42,123,.34) 42%,rgba(129,52,175,.26) 68%,rgba(129,52,175,0) 78%)}
/* Email has no brand, so it takes the site's own brass rather than borrowing a colour. */
.icon-btn--email,.social--email,.channel--email{--tint:#7C5F34;--glow:radial-gradient(circle,rgba(168,139,92,.34),rgba(168,139,92,0) 70%)}
.icon-btn--yt,.social--yt,.channel--youtube{--tint:#C4302B;--glow:radial-gradient(circle,rgba(255,0,0,.26),rgba(255,0,0,0) 70%)}
/* TikTok's mark is black split by cyan and magenta, so the halo carries both. */
.icon-btn--tt,.social--tt,.channel--tiktok{--tint:#C8134A;
  --glow:radial-gradient(circle at 36% 34%,rgba(37,244,238,.38),rgba(254,44,85,.30) 48%,rgba(254,44,85,0) 74%)}

/* Footer Connect: the same four accounts, with room to say which is which. */
.socials{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.social{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.social__icon{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:1px solid var(--rule);color:currentColor;transition:color .3s var(--ease),border-color .3s var(--ease)}
.social__icon::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--glow,transparent);
  opacity:0;transform:scale(.7);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.social__icon svg{position:relative;width:17px;height:17px}
.social__text{display:grid;gap:1px;min-width:0}
.social__name{font-size:.9375rem;line-height:1.3}
.social__sub{font-size:.8125rem;line-height:1.35;color:var(--taupe)}
.social:hover .social__icon,.social:focus-visible .social__icon{color:var(--tint,var(--ink));border-color:currentColor}
.social:hover .social__icon::before,.social:focus-visible .social__icon::before{opacity:1;transform:scale(1)}
.social:hover .social__name,.social:focus-visible .social__name{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.icon-btn::before{transition:opacity .01ms}}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;position:relative;margin-right:-10px}
.menu-btn span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.menu-btn span:first-child{top:18px}
.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.site-menu{display:none}
@media (max-width:1023px){
  .site-nav{display:none}
  .menu-btn{display:inline-block}
  .site-header__bar{gap:14px}
  .site-header__actions{gap:0}
  .icon-btn{width:40px}
  .wordmark{font-size:1.125rem;letter-spacing:.06em}
  .site-menu{display:block;position:fixed;left:0;right:0;top:var(--menu-top,var(--header-h));bottom:0;z-index:1;background:var(--ivory);overflow-y:auto;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .site-menu[hidden]{display:none}
  .site-menu.is-open{opacity:1;transform:none}
  .site-menu__inner{padding-block:20px 36px;display:flex;flex-direction:column;min-height:100%;gap:40px}
  .site-menu__links a{display:block;font-family:var(--serif);font-size:clamp(2rem,9vw,2.75rem);line-height:1.2;padding:5px 0;text-decoration:none}
  .site-menu__links a[aria-current="page"]{font-style:italic}
  .site-menu__foot{margin-top:auto;display:grid;gap:18px}
  .site-menu__social{gap:16px;margin:0;padding:0;list-style:none}
  .site-menu__foot p{margin:0}
}
html.menu-open{overflow:hidden}

/* ---------- home hero ----------
   desktop ≥900: full-width masthead; text column 35% / artwork column 65%, artwork flush right and sized by
   the viewport height. tablet 600–899: one-line masthead, stacked. phone <600: two-line masthead, stacked. */
.hero{padding-block:clamp(6px,1.2vw,18px) clamp(72px,8vw,120px)}
.hero__grid{container-type:inline-size;display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);column-gap:clamp(32px,4vw,72px);grid-template-areas:"mast mast" "ident work" "tag work" "act work" "note work" "meta work";grid-template-rows:auto auto auto auto auto 1fr}
.masthead{grid-area:mast;font-family:var(--serif);font-weight:300;font-size:calc(100cqi / 8.2);line-height:.84;letter-spacing:-.005em;margin:0 0 clamp(14px,1.6vw,24px) -.045em;white-space:nowrap}
.masthead span{display:inline-block}
.hero__identity{grid-area:ident;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.5;margin:0;padding-top:4px}
.hero__by{display:block}
.hero__tagline{grid-area:tag;font-family:var(--serif);font-weight:350;font-size:clamp(2rem,3.3vw,3.4rem);line-height:1.08;margin:clamp(40px,11vh,136px) 0 36px}
.hero__tagline span{display:block}
/* The buttons fill the column rather than shrink-wrapping their labels, so the left side
   of the hero reads as a single measured column against the artwork. */
.hero__actions{grid-area:act;display:grid;gap:12px;width:100%;max-width:23rem}
/* The artwork is tall, so the column beside it used to run out of content well before the
   bottom. The note and the facts carry it down to meet the foot of the painting. */
.hero__note{grid-area:note;max-width:34ch;margin:clamp(28px,3.4vh,44px) 0 0;color:var(--taupe);
  font-size:.9375rem;line-height:1.65}
.hero__meta{grid-area:meta;align-self:end;display:grid;gap:14px;margin:clamp(28px,4vh,56px) 0 0;max-width:23rem;
  border-top:1px solid var(--rule);padding-top:20px}
.hero__meta div{display:grid;gap:2px}
.hero__meta dt{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)}
.hero__meta dd{margin:0;font-size:.9375rem;line-height:1.45}
.hero__work{grid-area:work;justify-self:end;align-self:start;width:fit-content;max-width:100%;margin:calc(-1 * clamp(10px,1.1vw,16px)) 0 0}
.hero__hang{display:block}
.hero__hang img{width:min(calc((100cqi - clamp(32px,4vw,72px)) * .65),calc(clamp(520px,100svh - 12vw,940px) * var(--r)));height:auto;aspect-ratio:var(--r)}
@media (prefers-reduced-motion:no-preference){
  .js .masthead{animation:rise 1.1s var(--ease) both}
  /* A plain fade. This deliberately does NOT wipe: a clip-path that travels down the
     artwork is indistinguishable from a photograph downloading badly, and reads as a
     fault rather than as polish. */
  .js .hero__hang{animation:appear .8s .1s var(--ease) both}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes appear{from{opacity:0}to{opacity:1}}
@media (min-width:600px) and (max-width:899px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;grid-template-areas:"mast mast" "ident ident" "work work" "tag act" "note note" "meta meta";grid-template-rows:none}
  .hero__meta{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:20px;margin-top:clamp(28px,4vw,44px)}
  .hero__work{margin-top:22px}
  .hero__hang img{width:min(100cqi,calc(min(62svh,760px) * var(--r)))}
  .hero__tagline{margin:52px 0 0;font-size:clamp(2rem,5vw,2.6rem)}
  .hero__actions{align-self:end;width:auto}
}
@media (max-width:599px){
  .hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"mast" "ident" "work" "tag" "act" "note" "meta";grid-template-rows:none}
  .hero__meta{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px}
  .masthead{font-size:calc(100cqi / 4.05);white-space:normal;line-height:.86;margin-bottom:14px}
  .masthead span{display:block}
  .hero__identity{font-size:.9375rem}
  .hero__work{justify-self:stretch;width:auto;margin-top:22px}
  .hero__hang{display:flex;justify-content:flex-end}
  .hero__hang img{width:min(100cqi,calc(60svh * var(--r)))}
  .hero__work .wall-label{width:auto;min-width:0;align-items:flex-end;text-align:right}
  .hero__tagline{margin:44px 0 28px;font-size:clamp(2.1rem,10.4vw,2.6rem)}
  .hero__actions{width:auto}
}

/* reveal (JS adds .will-reveal only to artworks that start below the fold) — opacity
   only, for the reason given above: nothing here may travel down a painting. */
.js .will-reveal{opacity:0;transition:opacity .6s var(--ease)}
.js .will-reveal.is-in{opacity:1}

/* section heads */
.section-head{display:grid;gap:14px;margin-bottom:clamp(40px,5vw,72px);max-width:760px}
.section-head__sub{margin:0;color:var(--taupe);font-size:1.0625rem}
.section-foot{margin:clamp(44px,5vw,64px) 0 0}

/* categories — whole paintings on the wall */
.cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(56px,6vw,96px) clamp(20px,2.6vw,40px)}
.cat{display:block;text-decoration:none}
.cat--1{grid-column:1 / 8}.cat--2{grid-column:8 / 13}.cat--3{grid-column:1 / 6}.cat--4{grid-column:6 / 13}
.cat__wall{display:flex;align-items:flex-end;justify-content:flex-start;height:clamp(300px,32vw,500px);container-type:size}
.cat__wall img{width:min(100cqw,100cqh * var(--r));height:auto;aspect-ratio:var(--r);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.cat:hover .cat__wall img{transform:translateY(-4px);box-shadow:var(--hang-lift)}
.cat__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:26px}
.cat__name{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.1}
.cat__count{font-size:.8125rem;color:var(--taupe);white-space:nowrap}
.cat__blurb{display:block;margin-top:6px;color:var(--taupe);font-size:.9375rem}
.cats--four .cat{grid-column:span 3}
.cats--four .cat__wall{height:clamp(200px,20vw,300px)}
.cat--small .cat__name{font-size:clamp(1.3rem,1.7vw,1.65rem)}
.cat--small .cat__row{flex-direction:column;gap:2px}
@media (max-width:899px){
  .cats{grid-template-columns:minmax(0,1fr)}
  .cats .cat{grid-column:auto}
  .cat__wall{height:min(88vw,440px)}
  .cats--four{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 20px}
  .cats--four .cat__wall{height:min(40vw,300px)}
}
/* Single column: the cover fills it, so its edges line up with the name beneath. A fixed
   container height would size each cover by its proportions instead, leaving a different
   amount of blank column beside every one. */
@media (max-width:559px){
  .cats--four{grid-template-columns:minmax(0,1fr)}
  .cats .cat__wall,.cats--four .cat__wall{height:auto;container-type:inline-size}
  .cats .cat__wall img,.cats--four .cat__wall img{width:100%}
}

/* about teaser & portrait */
.portrait{margin:0}
.portrait img{width:100%;height:auto;aspect-ratio:var(--r)}
.portrait__mat{aspect-ratio:4 / 5;background:var(--plaster);display:grid;place-content:center;text-align:center;padding:24px;outline:1px solid var(--rule);outline-offset:-18px}
.portrait__mat p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.25rem}
.portrait__mat p.small{font-family:var(--sans);font-style:normal;font-size:.8125rem;margin-top:6px}

/* ---------- homepage spreads ---------- */
.runhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:18px;margin-bottom:clamp(48px,6vw,104px)}
.runhead__title{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.15}
.runhead__note{font-size:.875rem;color:var(--taupe)}

/* 1 selected works: one painting as a spread, then two at contrasting scales */
.works{padding-bottom:var(--section)}
.works__inner{container-type:inline-size}
.work{margin:0}
.work__wall{display:block}
.work__wall img{height:auto;aspect-ratio:var(--r);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.work:hover .work__wall img{transform:translateY(-4px);box-shadow:var(--hang-lift)}
.work__label{display:flex;flex-direction:column;gap:2px;font-size:.875rem;line-height:1.5;color:var(--taupe)}
.work__title{font-size:clamp(1.5rem,2.1vw,2.05rem);line-height:1.15;color:var(--ink);text-decoration:none;margin-bottom:8px}
.work__title:hover{text-decoration:underline}
.work__price{color:var(--ink);margin-top:10px}
.work--1{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);align-items:end}
.work--1 .work__wall{grid-column:1 / 10;grid-row:1}
.work--1 img{width:min(calc(100cqi * .7),calc(min(84svh,900px) * var(--r)))}
.work--1 .work__label{grid-column:10 / 13;grid-row:1;border-top:1px solid var(--rule);padding-top:16px}
.works__pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);margin-top:clamp(112px,13vw,220px);align-items:start}
.work--2,.work--3{width:fit-content;max-width:100%}
.work--2{grid-column:5 / 13;grid-row:1;justify-self:end}
.work--2 img{width:min(calc(100cqi * .64),calc(min(64svh,660px) * var(--r)))}
.work--3{grid-column:1 / 5;grid-row:1;margin-top:clamp(140px,20vw,340px)}
.work--3 img{width:min(calc(100cqi * .26),calc(min(40svh,420px) * var(--r)))}
.work--2 .work__label,.work--3 .work__label{width:0;min-width:100%;margin-top:20px}

/* 2 the collection: typographic index, the painting changes as you move down the list */
.index__grid{container-type:inline-size;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,6vw,112px);align-items:center}
.index__list{border-top:1px solid var(--line)}
.index__item{border-bottom:1px solid var(--rule)}
.index__link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name count" "blurb blurb";gap:2px 20px;align-items:baseline;padding:clamp(18px,2.2vw,30px) 0;text-decoration:none}
.index__thumb{display:none}
.index__name{grid-area:name;font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.3vw,3.4rem);line-height:1.04;letter-spacing:-.01em;transition:transform .5s var(--ease)}
.index__count{grid-area:count;font-size:.8125rem;color:var(--taupe);white-space:nowrap}
.index__blurb{grid-area:blurb;font-size:.9375rem;color:var(--taupe)}
.index__link:hover .index__name,.index__link:focus-visible .index__name{font-style:italic;transform:translateX(10px)}
.index__stage{position:relative;height:min(76svh,780px)}
.index__plate{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;opacity:0;transition:opacity .7s var(--ease)}
.index__plate:first-child{opacity:1}
.index__plate img{width:min(calc(100cqi * .44),calc((min(76svh,780px) - 44px) * var(--r)));height:auto;aspect-ratio:var(--r)}
.index__plate figcaption{margin-top:16px;font-size:.8125rem;color:var(--taupe)}
.index__grid:has(.index__item:hover) .index__plate:first-child,.index__grid:has(.index__item:focus-within) .index__plate:first-child{opacity:0}
.index__grid:has(.index__item:nth-child(1):hover) .index__plate:nth-child(1),.index__grid:has(.index__item:nth-child(1):focus-within) .index__plate:nth-child(1),
.index__grid:has(.index__item:nth-child(2):hover) .index__plate:nth-child(2),.index__grid:has(.index__item:nth-child(2):focus-within) .index__plate:nth-child(2),
.index__grid:has(.index__item:nth-child(3):hover) .index__plate:nth-child(3),.index__grid:has(.index__item:nth-child(3):focus-within) .index__plate:nth-child(3),
.index__grid:has(.index__item:nth-child(4):hover) .index__plate:nth-child(4),.index__grid:has(.index__item:nth-child(4):focus-within) .index__plate:nth-child(4),
.index__grid:has(.index__item:nth-child(5):hover) .index__plate:nth-child(5),.index__grid:has(.index__item:nth-child(5):focus-within) .index__plate:nth-child(5),
.index__grid:has(.index__item:nth-child(6):hover) .index__plate:nth-child(6),.index__grid:has(.index__item:nth-child(6):focus-within) .index__plate:nth-child(6){opacity:1}

/* ---------- featured work: the surface band ------------------------------ */
/* Sits on the artwork's own page rather than a second URL, so the work keeps one
   canonical address and whatever links it earns all point at the same place. */
.surface{background:var(--plaster)}
.surface__head{max-width:62ch;margin-bottom:clamp(40px,5vw,72px)}
.surface__eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 14px}
.surface__head h2{font-size:clamp(2.2rem,4.4vw,4rem);line-height:1;font-weight:300;letter-spacing:-.015em;margin:0 0 24px}
.surface__lead{margin:0}
.surface__lead img{width:100%;height:auto;aspect-ratio:var(--r)}
.surface__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2vw,28px)}
.surface__tile{margin:0}
.surface__tile img{width:100%;height:auto;aspect-ratio:var(--r)}
.surface__note{max-width:52ch;margin:clamp(32px,4vw,56px) 0 0;color:var(--taupe);font-size:.9375rem;line-height:1.65}
@media (max-width:699px){
  .surface__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .surface__tile:first-child{grid-column:1 / -1}
}
/* The eyebrow on the lot itself, so the page says what it is before you scroll. */
.lot__flag{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 10px}

/* 3 made to measure */
.measure__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);grid-template-rows:auto auto 1fr}
.measure__head{grid-column:1 / 9;grid-row:1;margin-bottom:clamp(48px,6vw,88px)}
.measure__head h2{font-size:clamp(2.6rem,5.6vw,5.5rem);line-height:.98;font-weight:300;letter-spacing:-.015em;margin-bottom:28px}
.measure__head .lead{max-width:46ch;margin:0}
.measure__room{grid-column:1 / 9;grid-row:2 / 4;margin:0}
.measure__room img{width:100%;height:auto;aspect-ratio:var(--r)}
.measure__room figcaption{margin-top:14px;font-size:.8125rem;color:var(--taupe)}
.measure__list{grid-column:10 / 13;grid-row:2;border-top:1px solid var(--ink)}
.measure__list li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--rule)}
.measure__glyph{display:block;padding-top:4px}
.measure__glyph svg{width:56px;height:42px;overflow:visible}
.measure__glyph rect,.measure__glyph line{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.measure__glyph .g-dim line{stroke:var(--brass)}
.swatches{display:flex;width:56px;height:42px;outline:1px solid var(--rule)}
.swatches span{flex:1}
.measure__list h3{font-size:1.3rem;margin-bottom:4px}
.measure__list p{margin:0;font-size:.9063rem;color:var(--taupe)}
.measure__actions{grid-column:10 / 13;grid-row:3;align-self:end;display:grid;justify-items:start;gap:18px;margin-top:40px}

/* 4 the quote: a close-up bleeding to the page edge, the words beside it */
.thought{background:var(--plaster)}
.thought__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;max-width:1920px;margin-inline:auto}
.thought__media{container-type:inline-size}
.thought__media img{width:min(100cqi,calc(min(96svh,980px) * var(--r)));height:auto;aspect-ratio:var(--r)}
.thought__text{padding:clamp(72px,9vw,140px) var(--gutter) clamp(72px,9vw,140px) clamp(40px,6vw,120px)}
.thought__quote{margin:0}
.thought__quote blockquote{margin:0}
.thought__quote blockquote p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.3rem,4.6vw,4.85rem);line-height:1.07;letter-spacing:-.01em;margin:0;max-width:16ch;text-wrap:balance}
.thought__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 32px;margin-top:clamp(36px,4vw,60px);padding-top:18px;border-top:1px solid var(--line);max-width:34rem}
.thought__foot cite{font-style:normal;font-size:.9375rem}
.thought__credit{margin:14px 0 0;font-size:.8125rem;color:var(--taupe)}

/* 5 the artist */
.artist__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);align-items:end}
.artist .portrait{grid-column:2 / 8}
.artist .portrait img{width:min(100%,calc(min(84svh,860px) * var(--r)))}
.artist .portrait__mat{height:min(80svh,820px);max-width:100%}
.artist__text{grid-column:9 / 13}
.artist__kicker{font-size:.875rem;color:var(--taupe);margin:0 0 18px}
.artist__name span{display:block}
.artist__name{font-size:clamp(3rem,5.6vw,5.75rem);line-height:.94;font-weight:300;letter-spacing:-.015em;margin:0 0 clamp(28px,3.5vw,48px)}
.artist__lead{font-family:var(--serif);font-weight:350;font-size:clamp(1.3rem,1.8vw,1.65rem);line-height:1.35;margin:0 0 20px}
.artist__body{font-size:1rem;line-height:1.75}

/* 6 international reach */
.reach{padding-block:clamp(72px,9vw,140px) var(--section)}
.reach__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,40px)}
.reach__title{grid-column:1 / 5;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.15;padding-right:24px}
.reach__countries{grid-column:5 / 13;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.9rem,3.7vw,3.7rem);line-height:1.2;margin:0}
.reach__countries > span{white-space:nowrap}
.reach__sep{font-style:normal;color:var(--taupe)}
.reach__note{grid-column:5 / 13;margin:28px 0 0;color:var(--taupe);font-size:.9375rem}

/* 7 closing — leads into WhatsApp */
.closing{background:var(--umber);color:var(--on-umber);padding-block:clamp(104px,13vw,200px)}
.closing__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);row-gap:clamp(56px,7vw,104px);align-items:end}
.closing__title{grid-column:1 / 12;font-weight:300;font-size:clamp(2.6rem,6.4vw,6.6rem);line-height:1;letter-spacing:-.015em}
.closing__drawing{grid-column:1 / 6;grid-row:2}
.closing__text{grid-column:7 / 13;grid-row:2}
.closing--plain .closing__text{grid-column:1 / 9}
.closing__lead{font-family:var(--serif);font-weight:350;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.35;max-width:30ch;margin:0 0 40px}
.closing__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.closing__meta{display:flex;flex-wrap:wrap;gap:6px 28px;margin:44px 0 0;padding-top:20px;border-top:1px solid rgba(245,240,231,.18);font-size:.8125rem;color:var(--on-umber-muted)}
.closing__meta a{text-decoration:none}
.closing__meta a:hover{text-decoration:underline}
.closing :focus-visible{outline-color:var(--on-umber)}

@media (max-width:899px){
  /* The three works hang at three scales on a wide screen. In one column that variation
     reads as misalignment rather than as a hang, so here each one spans the column and
     they all share the same two edges as their labels. */
  .work--1{display:block}
  .work--1 img{width:100%}
  .work--1 .work__label{margin-top:22px}
  .works__pair{display:block;margin-top:88px}
  .work--2,.work--3{width:auto}
  .work--2 img{width:100%}
  .work--3{margin-top:88px}
  .work--3 img{width:100%}
  .index__grid{grid-template-columns:minmax(0,1fr)}
  .index__stage{display:none}
  .index__link{grid-template-areas:"thumb thumb" "name name" "blurb count";padding:44px 0 26px}
  /* One column, so every cover spans it. Sizing these by height instead left each one a
     different width, and alternating their alignment made the column look accidental
     rather than set — the image and the name under it now share both edges. */
  .index__thumb{display:flex;grid-area:thumb;margin-bottom:24px}
  .index__thumb img{width:100%;height:auto;aspect-ratio:var(--r)}
  .index__name{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .measure__grid{display:flex;flex-direction:column}
  .measure__head{margin-bottom:40px}
  .measure__room{margin-inline:calc(-1 * var(--gutter))}
  .measure__room figcaption{padding-inline:var(--gutter)}
  .measure__list{margin-top:48px}
  .measure__actions{align-self:stretch}
  .thought__grid{grid-template-columns:minmax(0,1fr)}
  .thought__media img{width:min(100cqi,calc(72svh * var(--r)))}
  .thought__text{padding:56px var(--gutter) 80px}
  .artist__grid{display:block}
  .artist .portrait{margin-bottom:44px}
  .artist .portrait__mat{height:auto;width:min(100%,460px)}
  .artist .portrait img{width:min(100%,calc(70svh * var(--r)))}
  .reach__grid{display:block}
  .reach__title{margin-bottom:24px;padding:0}
  .closing__grid{display:flex;flex-direction:column;align-items:stretch;gap:48px}
  .closing__drawing{order:3;width:100%;max-width:440px}
}
@media (max-width:599px){.closing__actions .btn,.measure__actions .btn{width:100%}.measure__actions{justify-items:stretch}}

/* home: how the work is made, and the commission process in brief */
.hand__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.hand__list a{display:block;text-decoration:none}
.hand__list img{width:100%;height:auto;aspect-ratio:var(--r);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.hand__list a:hover img{transform:translateY(-3px);box-shadow:var(--hang-lift)}
.hand__name{display:block;margin-top:14px;font-family:var(--serif);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.25}
.brief__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);border-top:1px solid var(--ink)}
.brief__list li{padding-top:18px}
.brief__n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1;color:var(--taupe);margin-bottom:10px}
.brief__t{font-size:.9688rem;line-height:1.4}
@media (max-width:899px){.hand__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}.brief__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.hand__list{grid-template-columns:repeat(2,minmax(0,1fr))}.brief__list{grid-template-columns:minmax(0,1fr);gap:0}.brief__list li{padding:14px 0;border-bottom:1px solid var(--rule)}}

/* commissions: what you can shape, size guidance */
.shape__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px)}
.shape__list li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:start;border-top:1px solid var(--ink);padding-top:22px}
.shape__glyph{display:block;padding-top:4px;color:var(--ink)}
.shape__glyph svg{width:56px;height:42px;overflow:visible}
.shape__glyph rect,.shape__glyph line{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.shape__glyph .g-dim line{stroke:var(--brass)}
.shape__list h3{font-size:clamp(1.2rem,1.5vw,1.4rem);margin-bottom:8px}
.shape__list p{margin:0;font-size:.9375rem;color:var(--taupe)}
.guide__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.guide{display:flex;flex-direction:column}
.guide__art{margin-bottom:clamp(20px,2.4vw,32px)}
.guide__label{font-size:clamp(1.2rem,1.5vw,1.45rem);margin-bottom:8px}
.guide__note{margin:0;color:var(--taupe);font-size:.9375rem}
@media (max-width:899px){.shape__list,.guide__list{grid-template-columns:minmax(0,1fr);gap:32px}}

/* measured drawings — the one place brass is used */
.scale-drawing{position:relative;margin:0;width:100%;color:var(--ink);--dim:var(--brass);--ext:var(--brass-line);--label-bg:var(--ivory)}
.scale-drawing--dark{color:var(--on-umber);--dim:#C9A874;--ext:rgba(201,168,116,.55);--label-bg:var(--umber)}
.scale-drawing svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scale-drawing line,.scale-drawing rect{vector-effect:non-scaling-stroke;fill:none;stroke:currentColor;stroke-width:1}
.sd-furniture{opacity:.55}
.sd-ext line{stroke:var(--ext);stroke-width:.75}
.sd-dim line{stroke:var(--dim)}
.scale-drawing .sd-empty{stroke-width:1.25;stroke-dasharray:6 5}
.sd-art{position:absolute;object-fit:cover;box-shadow:var(--hang);max-width:none}
.sd-label{position:absolute;transform:translate(-50%,-50%);background:var(--label-bg);padding:1px 8px;font-size:.75rem;line-height:1.3;white-space:nowrap}
.sd-label--side{transform:translate(0,-50%);padding:1px 0 1px 10px;background:none}
.sd-empty-label{position:absolute;transform:translate(-50%,-50%);font-family:var(--serif);font-style:italic;font-size:clamp(.8rem,1.35vw,1.1rem);text-align:center;line-height:1.25;white-space:nowrap}
.sd-caption{position:absolute;left:0;right:0;top:100%;margin-top:18px;font-size:.8125rem;color:var(--taupe)}

/* footer */
.site-footer{background:var(--plaster);padding-block:clamp(64px,8vw,112px) 32px;font-size:.9375rem}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr));gap:40px}
.site-footer .wordmark{display:inline-block;font-size:1.5rem;margin-bottom:12px}
.site-footer__brand p{color:var(--taupe);max-width:28ch}
.site-footer__h{font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--taupe);margin:0 0 16px}
.site-footer__col li{margin-bottom:8px}
.site-footer a{text-decoration:none}
.site-footer__col a:hover,.site-footer__base a:hover{text-decoration:underline}
.site-footer__note{margin-top:10px;color:var(--taupe)}
.site-footer__base{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--taupe)}
@media (max-width:1023px){.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer__brand{grid-column:1 / -1}}

/* page heads & breadcrumbs */
.page-head{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,72px)}
.crumbs{margin-bottom:clamp(28px,4vw,48px);font-size:.8125rem;color:var(--taupe)}
.crumbs ol{display:flex;flex-wrap:wrap;row-gap:4px}
.crumbs li+li::before{content:"/";margin:0 .6em;color:var(--line)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-head__lead{max-width:60ch;margin:24px 0 0}

/* collection — a gallery wall in two staggered columns */
.collection{padding-bottom:var(--section)}
.filters{margin-bottom:clamp(56px,7vw,112px)}
.filters ul{display:flex;flex-wrap:wrap;column-gap:clamp(20px,2.6vw,36px)}
.filters a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;text-decoration:none;font-size:.9375rem;color:var(--taupe);text-underline-offset:.45em}
.filters a:hover{color:var(--ink)}
.filters a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink)}
.filters__count{font-size:.6875rem;font-variant-numeric:tabular-nums;color:var(--taupe);align-self:flex-start;margin-top:.9em}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(48px,9vw,160px);row-gap:clamp(80px,9vw,150px);align-items:start}
.card:nth-child(even of :not([hidden])){margin-top:clamp(0px,10vw,180px)}
.card[hidden]{display:none}
.card__link{display:block;text-decoration:none}
.card__wall{display:flex;align-items:flex-end;justify-content:flex-start;height:clamp(320px,42vw,640px);container-type:size}
.card__wall img{width:min(100cqw,100cqh * var(--r));height:auto;aspect-ratio:var(--r);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card__link:hover .card__wall img{transform:translateY(-4px);box-shadow:var(--hang-lift)}
.card__label{display:grid;gap:2px;margin-top:26px}
.card__title{font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1.2}
.card__meta{font-size:.875rem;color:var(--taupe)}
.card__price{font-size:.9375rem;margin-top:4px}
.card__price--sold,.card__price--commission{color:var(--taupe)}
.card__sample{font-size:.75rem;color:var(--taupe);margin-top:6px}
.card-grid--related{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,72px)}
.card-grid.card-grid--related .card{margin-top:0}
.card-grid--related .card__wall{height:clamp(240px,24vw,380px)}
.empty{padding:40px 0;color:var(--taupe)}
.prompt__inner{max-width:760px;text-align:center}
.prompt h2{margin-bottom:20px}
.prompt .actions{justify-content:center;margin-top:36px}
@media (max-width:1023px){.card-grid--related{grid-template-columns:repeat(2,minmax(0,1fr))}.card-grid--related .card:nth-child(3){display:none}}
@media (max-width:599px){
  .card-grid,.card-grid--related{grid-template-columns:minmax(0,1fr);row-gap:72px}
  .card:nth-child(even of :not([hidden])){margin-top:0}
  .card-grid--related .card:nth-child(3){display:block}
  .card__wall,.card-grid--related .card__wall{display:block;height:auto;container-type:normal}
  .card__wall img{width:min(100%,calc(66svh * var(--r)))}
}

/* painting page — the artwork dominates, details set like a catalogue entry */
.painting{padding-top:clamp(20px,3vw,40px)}
.painting .crumbs{margin-bottom:clamp(20px,3vw,36px)}
.painting__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(300px,4fr);gap:clamp(40px,5vw,96px);align-items:start}
.gallery{min-width:0}
.gallery__track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,6vw,104px) clamp(20px,2.4vw,40px);align-items:end}
.gallery__item--art,.gallery__item--room{grid-column:1 / -1}
.gallery__item{margin:0}
.gallery__zoom{display:block;position:relative;cursor:zoom-in}
.gallery__item--art .gallery__zoom{display:flex;justify-content:center;padding:clamp(4px,1vw,16px) 0}
.gallery__item--art img{width:min(100%,calc(min(84svh,1000px) * var(--r)));height:auto;aspect-ratio:var(--r);box-shadow:var(--hang)}
.gallery__item--detail img,.gallery__item--room img{width:100%;height:auto;aspect-ratio:var(--r)}
.gallery__item figcaption{margin-top:14px;font-size:.8125rem;color:var(--taupe)}
.gallery__item--art figcaption{text-align:center}
.gallery__controls{display:none}
.lot__sample{font-size:.75rem;color:var(--taupe);margin:0 0 14px}
.lot__title{font-size:clamp(2.6rem,4.2vw,4.25rem);line-height:1;margin:0 0 12px}
.lot__artist{color:var(--taupe);margin:0 0 clamp(28px,3vw,44px)}
.lot__price{display:grid;gap:4px;margin:0}
.lot__price-label{font-size:.8125rem;color:var(--taupe)}
.lot__price-value{font-family:var(--serif);font-size:clamp(2rem,2.8vw,2.7rem);line-height:1.05}
.lot__custom{font-size:.9375rem;margin:8px 0 28px}
.lot__specs{margin:clamp(28px,3vw,40px) 0;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;gap:14px}
.lot__specs div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;align-items:baseline}
.lot__specs dt{font-size:.8125rem;color:var(--taupe)}
.lot__specs dd{margin:0}
.lot__alt{margin-left:.6em;color:var(--taupe);font-size:.875rem}
.status{display:inline-flex;align-items:center;gap:9px}
.status__dot{width:7px;height:7px;border-radius:50%;background:#5E7A55}
.status--sold .status__dot{background:#9B4A3C}
.status--commission .status__dot,.status--enquire .status__dot{background:var(--taupe)}
.status--made-to-order .status__dot{background:var(--brass-line)}
.lot__actions{display:grid;gap:14px;justify-items:start}
.lot__actions .link{padding-block:9px}
.lot__hint{font-size:.8125rem;color:var(--taupe);margin:14px 0 0}
.lot__desc p{max-width:44ch}
.lot__ref{font-size:.8125rem;color:var(--taupe);margin:24px 0 0}
@media (min-width:960px) and (min-height:960px){.painting__sticky{position:sticky;top:calc(var(--header-h) + 32px)}}
@media (max-width:959px){
  .painting__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .gallery{margin-inline:calc(-1 * var(--gutter))}
  .gallery__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain}
  .gallery__track::-webkit-scrollbar{display:none}
  .gallery__item{flex:0 0 100%;scroll-snap-align:start}
  .gallery__item .gallery__zoom{min-height:min(100vw,64svh);display:flex;align-items:flex-end;justify-content:center;padding:0 0 14px}
  .gallery__item img,.gallery__item--art img,.gallery__item--detail img,.gallery__item--room img{width:min(100%,calc(min(100vw,64svh) * var(--r)))}
  .gallery__item figcaption{text-align:center;margin-top:10px}
  .gallery__controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px}
  .gallery__count{font-size:.8125rem;color:var(--taupe);min-width:4em;text-align:center;font-variant-numeric:tabular-nums}
  .lot__actions{justify-items:stretch}
}

/* scale section */
.scale__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.scale__text h2{margin-bottom:24px}
.scale__text p{max-width:42ch}
.scale .scale-drawing{margin-bottom:56px}
@media (max-width:899px){.scale__grid{grid-template-columns:minmax(0,1fr)}}

/* make it your own */
.customise__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.customise__head .lead{margin:0;max-width:52ch}
.options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px clamp(24px,3vw,48px)}
.options li{border-top:1px solid var(--ink);padding-top:22px}
.option__title{font-size:clamp(1.3rem,1.8vw,1.6rem);margin-bottom:12px}
.options p{margin:0;font-size:.9375rem}
.frames{margin-top:clamp(56px,7vw,96px)}
.frames__title{font-size:clamp(1.3rem,1.8vw,1.6rem);margin-bottom:28px}
.frames__list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:28px 16px}
.frame{display:grid;justify-items:center;align-content:start;gap:12px;text-align:center}
.frame__box{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;container-type:size}
.frame__art{display:block;box-sizing:content-box;width:calc(min(100cqw,100cqh * var(--r)) * .72);aspect-ratio:var(--r);box-shadow:0 8px 14px -8px rgba(45,32,20,.45)}
.frame__art img{width:100%;height:100%;object-fit:cover}
.frame__name{font-size:.8125rem;line-height:1.35}
.frame--minimal .frame__art{border:3px solid #2A2522}
.frame--float-black .frame__art{border:5px solid #26221E;padding:4px;background:#0F0D0B}
.frame--float-white .frame__art{border:5px solid #FAF8F4;padding:4px;background:#D6D0C6;outline:1px solid rgba(34,30,26,.12)}
.frame--wood .frame__art{border:12px solid #6E4B32;outline:2px solid #4E3423;outline-offset:-12px}
.frame--gold .frame__art{border:9px solid #B38B4D;outline:1px solid #7E6134;outline-offset:-9px}
.frame--colour .frame__art{border:8px solid #71806B}
.frame--other .frame__box{outline:1px dashed var(--taupe);outline-offset:-1px}
.customise__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--rule)}
.price-lines{display:grid;gap:4px;margin:0}
.price-lines span:first-child{font-family:var(--serif);font-size:1.5rem}
.price-lines__note{color:var(--taupe);font-size:.875rem;max-width:44ch;margin-top:6px}
@media (max-width:1023px){.options{grid-template-columns:repeat(2,minmax(0,1fr))}.frames__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:699px){.customise__head{grid-template-columns:minmax(0,1fr)}.frames__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:559px){.options{grid-template-columns:minmax(0,1fr)}.customise__foot .btn{width:100%}}

/* floating enquiry */
.float-enquire{position:fixed;right:clamp(16px,2.5vw,32px);bottom:clamp(16px,2.5vw,32px);z-index:40;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;background:var(--ink);color:var(--ivory);text-decoration:none;font:500 .8125rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.float-enquire .icon{width:18px;height:18px}
.float-enquire{isolation:isolate;overflow:hidden}
.float-enquire::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink-2);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.float-enquire:hover::before{transform:scaleY(1)}
.float-enquire.is-visible{opacity:1;visibility:visible;transform:none}
@media (max-width:559px){.float-enquire{left:12px;right:12px;bottom:12px;justify-content:center}}

/* lightbox */
.lightbox{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ivory);color:var(--ink)}
.lightbox::backdrop{background:rgba(34,30,26,.35)}
.lightbox[open]{display:grid;place-items:center}
.lightbox__figure{margin:0;display:grid;justify-items:center;gap:14px;padding:72px 80px 40px}
.lightbox__figure img{width:auto;height:auto;max-width:calc(100vw - 160px);max-height:calc(100vh - 160px);box-shadow:var(--hang)}
.lightbox__figure figcaption{font-size:.875rem;color:var(--taupe);text-align:center}
.lightbox__close{position:fixed;top:16px;right:16px;min-height:44px;padding:0 16px;border:1px solid var(--ink);background:transparent;cursor:pointer;font:500 .75rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%)}
.lightbox__nav .icon{width:28px;height:28px}
.lightbox__nav--prev{left:12px}
.lightbox__nav--next{right:12px}
@media (max-width:599px){.lightbox__figure{padding:68px 12px 76px}.lightbox__figure img{max-width:calc(100vw - 24px);max-height:calc(100vh - 180px)}.lightbox__nav{top:auto;bottom:14px;transform:none}}

/* magnify the surface: brushwork and impasto are the thing being sold */
.lightbox__figure img{transition:transform .35s var(--ease);cursor:zoom-in;touch-action:none;will-change:transform}
.lightbox.is-zoomed .lightbox__figure{overflow:hidden}
.lightbox.is-zoomed .lightbox__figure img{cursor:grab;transition:none}
.lightbox.is-zoomed .lightbox__figure img:active{cursor:grabbing}
.lightbox__hint{margin:0;font-size:.8125rem;color:var(--taupe)}
.lightbox.is-zoomed .lightbox__nav,.lightbox.is-zoomed .lightbox__figure figcaption{opacity:0;pointer-events:none}
.lot__share{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:6px 0;border:0;background:none;cursor:pointer;font:500 .875rem/1.4 var(--sans);color:var(--taupe);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.4em;transition:color .3s}
.lot__share:hover{color:var(--ink)}

/* commissions */
.page-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(28px,4vw,56px);padding-bottom:var(--section)}
.page-hero h1{margin-bottom:18px}
.page-hero__sub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.2;margin:0 0 28px}
.page-hero .lead{max-width:52ch;margin-bottom:36px}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:44px clamp(20px,2.4vw,36px)}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step__n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3vw,2.75rem);line-height:1;margin-bottom:20px}
.step__title{font-size:clamp(1.2rem,1.5vw,1.4rem);margin-bottom:12px}
.step p{font-size:.9375rem;margin:0}
.share__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:start}
.share h2{margin-bottom:28px}
.share__list li{padding:14px 0;border-top:1px solid var(--rule)}
.share__list li:last-child{border-bottom:1px solid var(--rule)}
.share__h{font-size:clamp(1.6rem,2.6vw,2.3rem)}
@media (max-width:1023px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.page-hero,.share__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.steps{grid-template-columns:minmax(0,1fr)}}


/* commissions FAQ */
.faq__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,6vw,112px);border-top:1px solid var(--ink)}
.faq__item{padding:26px 0;border-bottom:1px solid var(--rule)}
.faq__q{font-size:clamp(1.2rem,1.6vw,1.45rem);margin-bottom:10px}
.faq__a{margin:0;font-size:.9375rem;color:var(--taupe);max-width:52ch}
@media (max-width:899px){.faq__list{grid-template-columns:minmax(0,1fr)}}

/* about — editorial artist profile */
.profile{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"portrait head" "portrait body";grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,112px);padding-top:clamp(20px,3vw,40px);padding-bottom:var(--section)}
.profile__head{grid-area:head;padding-top:clamp(0px,3vw,48px)}
.profile__portrait{grid-area:portrait;align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
.profile__body{grid-area:body}
.profile .portrait img{width:min(100%,calc(min(100svh - var(--header-h) - 64px,940px) * var(--r)))}
.profile .portrait__mat{height:min(calc(100svh - var(--header-h) - 64px),940px);max-width:100%}
.profile__kicker{font-size:.875rem;color:var(--taupe);margin:0 0 18px}
.profile__name span{display:block}
.profile__name{font-size:clamp(3rem,5.4vw,5.75rem);line-height:.94;font-weight:300;letter-spacing:-.015em;margin:0 0 clamp(32px,4vw,56px)}
.profile__lead{font-family:var(--serif);font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.3;font-weight:350;margin:0 0 32px}
.profile__bio p{font-size:1.0625rem;line-height:1.8;max-width:40em}
.profile .actions{margin-top:48px}
@media (max-width:899px){
  .profile{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "portrait" "body";grid-template-rows:none}
  .profile__portrait{position:static;margin-bottom:40px}
  .profile .portrait img{width:min(100%,calc(78svh * var(--r)))}
  .profile .portrait__mat{height:auto;width:100%}
}

/* about: factual summary beside the biography */
.glance{margin:clamp(40px,5vw,64px) 0 0;border-top:1px solid var(--ink)}
.glance div{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:8px 28px;padding:15px 0;border-bottom:1px solid var(--rule)}
.glance dt{font-size:.8125rem;color:var(--taupe)}
.glance dd{margin:0;font-size:.9688rem}
.profile .actions{margin-top:clamp(36px,4vw,52px)}
@media (max-width:599px){.glance div{grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 0}}

/* the art — opening spread, essay, plates */
.spread{container-type:inline-size;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:center;padding-top:clamp(20px,3vw,40px);padding-bottom:var(--section)}
.spread__runner{font-family:var(--sans);font-size:.875rem;font-weight:500;letter-spacing:.02em;line-height:1.4;color:var(--taupe);margin:0 0 clamp(32px,5vw,72px)}
.spread__quote{margin:0}
.spread__quote blockquote{margin:0}
.spread__quote p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.3rem,5vw,5.25rem);line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance}
.spread__quote figcaption{margin-top:clamp(28px,3vw,44px);font-size:.9375rem;color:var(--taupe)}
.spread__plate{margin:0;justify-self:end;width:fit-content;max-width:100%}
.spread__hang{display:block}
.spread__hang img{width:min(calc((100cqi - clamp(40px,6vw,104px)) * 5 / 12),calc(min(78svh,860px) * var(--r)));height:auto;aspect-ratio:var(--r)}
.essay__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.essay__text{grid-column:4 / 11}
.essay__text p{font-family:var(--serif);font-weight:350;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.45;margin:0 0 1.1em}
.plates{padding-bottom:var(--section)}
.plate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);align-items:end;margin:0 0 clamp(96px,12vw,200px)}
.plate:last-child{margin-bottom:0}
.plate > *{grid-row:1}
.plate__wall{grid-column:1 / 9;display:flex;justify-content:flex-start}
.plate__wall img{width:min(100%,calc(min(80svh,860px) * var(--r)));height:auto;aspect-ratio:var(--r)}
.plate .wall-label{grid-column:10 / 13;width:auto;min-width:0;margin:0}
.plate--1 .plate__wall{grid-column:5 / 13;justify-content:flex-end}
.plate--1 .wall-label{grid-column:1 / 4}
.ways__list{border-top:1px solid var(--ink)}
.ways__list a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;gap:10px 40px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding-left .45s var(--ease)}
.ways__list a:hover{padding-left:12px}
.ways__name{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.1}
.ways__blurb{color:var(--taupe)}
.ways__count{font-size:.8125rem;color:var(--taupe);white-space:nowrap}
@media (max-width:899px){
  .spread{grid-template-columns:minmax(0,1fr)}
  .spread__plate{justify-self:end}
  .spread__hang img{width:min(100cqi,calc(64svh * var(--r)))}
  .essay__text{grid-column:1 / -1}
  .plate{display:block}
  .plate__wall,.plate--1 .plate__wall{justify-content:flex-start}
  .plate__wall img{width:min(100%,calc(68svh * var(--r)))}
  .plate .wall-label{margin-top:18px}
}
@media (max-width:799px){.ways__list a{grid-template-columns:minmax(0,1fr)}}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(48px,7vw,120px);padding-bottom:var(--section);align-items:start}
.contact__number{font-family:var(--serif);font-size:clamp(1.75rem,3vw,2.5rem);margin:20px 0 0}
.compose{margin-top:clamp(48px,6vw,80px);padding-top:40px;border-top:1px solid var(--rule);display:grid;gap:22px;max-width:620px}
.compose__title{font-size:clamp(1.5rem,2.4vw,2rem)}
.compose > p{margin:-12px 0 0}
.field{display:grid;gap:8px}
.field label{font-size:.875rem;font-weight:500}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--field);background:#FBF8F2;border-radius:0;font-size:1rem;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:120px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23221E1A' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.compose .btn{justify-self:start}
/* Empty until the form is submitted, so it takes no space and announces nothing early. */
.compose__status{margin:0;font-size:.9375rem;line-height:1.5;color:var(--taupe)}
.compose__status:empty{display:none}
.compose__status a{color:var(--ink)}
.contact__block{padding:24px 0;border-top:1px solid var(--rule)}
.contact__block p{margin:10px 0 0}
.contact__h{font-family:var(--sans);font-size:.8125rem;font-weight:600;color:var(--taupe);margin-bottom:12px}
@media (max-width:899px){.contact{grid-template-columns:minmax(0,1fr)}}

.tearsheet{display:none}

/* contact: one card per way of reaching her, the studio and personal accounts named apart */
.channels{padding-bottom:clamp(48px,6vw,88px)}
.channel-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.channel{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid var(--ink);padding-top:22px}
.channel--primary{grid-column:span 1}
/* The contact card takes its platform's colour when you reach for it, like the icons. */
.channel__mark{display:block;margin-bottom:18px;color:var(--ink);transition:color .35s var(--ease)}
.channel__mark .icon{width:26px;height:26px}
.channel:hover .channel__mark,.channel:focus-within .channel__mark{color:var(--tint,var(--ink))}
.channel__label{font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--taupe);margin:0 0 6px}
.channel__value{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.15;margin:0 0 10px}
.channel__note{font-size:.9063rem;color:var(--taupe);margin:0 0 24px;flex:1}
.channel .btn{margin-top:auto}
.contact__list li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:.9375rem}
.contact__list li:first-child{border-top:1px solid var(--rule)}
.contact__aside .contact__block p{font-size:.9375rem}
@media (max-width:1023px){.channel-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}}
@media (max-width:559px){.channel-list{grid-template-columns:minmax(0,1fr)}}

/* the art: how the work is made */
.tech__list{border-top:1px solid var(--ink)}
.tech{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px clamp(32px,5vw,88px);align-items:start;padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--rule)}
.tech__name{font-size:clamp(1.35rem,2vw,1.85rem);margin-bottom:10px}
.tech__note{margin:0;color:var(--taupe);font-size:.9688rem;max-width:40ch}
.tech__works{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,28px)}
.tech__works a{display:block;text-decoration:none;width:clamp(96px,13vw,168px)}
.tech__works img{width:100%;height:auto;aspect-ratio:var(--r);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tech__works a:hover img{transform:translateY(-3px);box-shadow:var(--hang-lift)}
.tech__caption{display:block;margin-top:10px;font-size:.875rem;line-height:1.3}
@media (max-width:899px){.tech{grid-template-columns:minmax(0,1fr)}}
/* On one column the fixed-width thumbnails left a ragged strip down the right of the
   column. An even three-up grid puts the row back on the same edges as everything else. */
@media (max-width:599px){
  .tech__works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .tech__works a{width:auto}
}

/* about: her own words, set as a pull quote */
.pullquote{margin:clamp(40px,5vw,64px) 0 0;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--rule)}
.pullquote blockquote{margin:0}
.pullquote p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.25;margin:0;max-width:20ch;text-wrap:balance}
.pullquote figcaption{margin-top:20px}

/* 404 */
.notfound{padding-block:clamp(80px,12vw,180px)}
.notfound h1{margin:12px 0 20px}
.notfound .actions{margin-top:36px}

/* Narrow phones: the header keeps the studio account, Facebook and WhatsApp.
   Sreeparna's personal account stays one tap away in the menu, where both are named. */
/* Six accounts and a menu button will not fit beside the wordmark on a phone — measured,
   they overflow every width up to 480px. So the bar carries the four a visitor is most
   likely to reach for, and the pop-out menu carries all six with their names and what
   each one is. Nothing is dropped; the two quieter accounts are one tap away. The
   controls also narrow as the screen does, but never lose their 44px tap height. */
@media (max-width:767px){
  .site-header__actions .icon-btn--fb,
  .site-header__actions .icon-btn--ig-personal{display:none}
}
/* Between the tablet breakpoint and a roomy desktop, all seven icons share the bar with
   the full navigation, so they narrow to keep the row inside the gutters. */
@media (min-width:768px) and (max-width:1200px){
  .site-header__actions .icon-btn{width:36px}
}
/* Five controls plus the menu button now share the bar with the wordmark, so they step
   down in three stages as the screen narrows. Width shrinks; the 44px tap height never
   does, which is what the finger actually needs. */
@media (max-width:479px){
  .site-header__bar{gap:8px}
  .site-header__actions{margin-left:0}
  .site-header__actions .icon-btn{width:32px}
  .menu-btn{width:32px;margin-right:-6px}
  .wordmark{font-size:1rem;letter-spacing:.04em}
}
@media (max-width:379px){
  .site-header__actions .icon-btn{width:29px}
  .menu-btn{width:29px;margin-right:-5px}
  .wordmark{font-size:.9375rem;letter-spacing:.025em}
}
@media (max-width:339px){
  .site-header__actions .icon-btn{width:27px}
  .menu-btn{width:27px;margin-right:-4px}
  .wordmark{font-size:.875rem;letter-spacing:.02em}
}

@media (max-width:599px){
  body{font-size:1rem}
  .link{display:inline-block;padding-block:9px}
  .work__title,.card__title,.index__name,.salon__label .art-title{padding-block:9px}
  .actions .btn,.compose .btn,.contact__main .btn--large{flex:1 1 100%;width:100%}
}

/* ---------- mobile reading sizes (phones only; hierarchy unchanged) ---------- */
@media (max-width:599px){
  .small,.crumbs,.wall-label,.work__label,.card__meta,.card__sample,.lot__sample,.lot__hint,.lot__ref,
  .index__count,.index__blurb,.index__plate figcaption,.thought__credit,.measure__room figcaption,
  .gallery__item figcaption,.sd-caption,.cat__blurb,.reach__note,.section-head__sub,.frame__name,
  .site-footer__base,.custom__media figcaption,.contact__block p,.compose > p{font-size:.9375rem;line-height:1.55}
  .card__price,.work__price,.filters a,.link,.measure__list p,.options p,.step p,.share__list li,
  .price-lines,.site-footer,.closing__meta,.gallery__count,.lot__desc p,.painting__desc p{font-size:1rem}
  .lot__specs{gap:18px}
  .lot__specs dt,.lot__specs dd,.lot__alt,.specs div{font-size:.9375rem}
  .lot__price-label,.preview-note,.site-footer__h,.contact__h,.artist__kicker,.profile__kicker,
  .spread__runner,.filters__count,.sd-label{font-size:.875rem}
  .card__title{font-size:1.5rem}
  .wall-label .art-title{font-size:1.25rem}
  .btn{font-size:.875rem;letter-spacing:.09em}
  .float-enquire{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- print: an artwork page prints as a gallery tear sheet ---------- */
@media print{
  @page{margin:15mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
  .site-header,.site-footer,.preview-note,.float-enquire,.skip-link,.crumbs,.lightbox,
  .lot__actions,.lot__hint,.lot__share,.gallery__controls,.scale,.customise,.related,
  .closing,.prompt,.reach,.about-works,.section-foot,.filters,.empty{display:none!important}
  main{padding:0}
  .wrap{max-width:none;padding-inline:0}
  .tearsheet{display:block;text-align:center;font-family:var(--serif);font-size:8.5pt;letter-spacing:.14em;color:#333}
  .tearsheet--top{padding-bottom:5mm;border-bottom:.4pt solid #999;margin:0 0 8mm}
  .tearsheet--foot{margin:10mm 0 0;padding-top:4mm;border-top:.4pt solid #999;letter-spacing:.06em}
  .painting,.painting__grid{display:block;padding:0}
  .gallery{margin:0}
  .gallery__track{display:block;overflow:visible}
  .gallery__item--detail,.gallery__item--room{display:none}
  .gallery__item--art img{width:auto;max-width:100%;max-height:115mm;margin:0 auto;box-shadow:none;aspect-ratio:auto}
  .gallery__item figcaption{display:none}
  .lot{margin-top:9mm;break-inside:avoid}
  .lot__title{font-size:21pt;margin:0 0 3pt}
  .lot__artist{margin:0 0 6mm}
  .lot__price-value{font-size:15pt}
  .lot__specs{border-color:#aaa;gap:7pt;margin:6mm 0}
  .lot__specs div{border:0}
  .lot__desc p{max-width:none}
  .card-grid,.salon,.cats,.works__pair{display:block}
  a[href]{text-decoration:none;color:#000}
}