/* =====================================================================
   MICHAEL SCHWEIGART — base, components, pages, responsive (900/560)
   Loads after css/tokens.css and before css/mobile.css.
===================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;min-height:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{max-width:100%;display:block;}
::selection{background:color-mix(in oklab,var(--accent) 26%,transparent);}

/* ---------- shared type ---------- */
.eyebrow,.pagehead__eyebrow,.heroA__eyebrow,
.section-title,.navlink,.wallcard__meta,.wallcard__status,.filterbar__btn,
.frame__tag,.show__kind,.show__badge,.contact__k{
  font-family:var(--label);
}
.section-title{
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.4em;
}
.pagehead__eyebrow,.heroA__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1.2em;
}

/* ---------- app shell ---------- */
.app{position:relative;}
.routeview{animation:routein .5s var(--ease);}
@keyframes routein{from{transform:translateY(10px);}to{transform:none;}}

/* ---------- top nav ---------- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  background:color-mix(in oklab,var(--paper) 86%,transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--line-2);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.topnav--light{
  background:transparent;backdrop-filter:none;border-color:transparent;color:#fff;
}
.topnav.is-scrolled{
  background:color-mix(in oklab,var(--paper) 92%,transparent);
  border-bottom-color:var(--line);color:var(--ink);
  backdrop-filter:saturate(120%) blur(12px);
}
.topnav__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{display:flex;flex-direction:column;line-height:1;}
.wordmark__name{
  font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:.01em;white-space:nowrap;
}
.wordmark__role{
  font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);margin-top:6px;
}
.topnav--light .wordmark__role{color:rgba(255,255,255,.72);}
.navlinks{display:flex;gap:34px;align-items:center;}
.navlink{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);position:relative;padding:6px 0;transition:color .25s;
}
.topnav--light .navlink{color:rgba(255,255,255,.82);}
.navlink::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:currentColor;transition:right .3s var(--ease);
}
.navlink:hover::after,.navlink.is-active::after{right:0;}
.navlink.is-active{color:var(--accent);}
.topnav--light .navlink.is-active{color:#fff;}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);
  padding:14px 26px;border-radius:1px;transition:background .25s,transform .25s,color .25s;
}
.btn:hover{background:var(--accent);transform:translateY(-1px);}
.btn--light{background:#fff;color:var(--ink);}
.btn--light:hover{background:var(--accent);color:#fff;}
.btn--ghostlight{
  background:rgba(0,0,0,.20);color:#fff;border:1px solid rgba(255,255,255,.5);
}
.btn--ghostlight:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-1px);}
.textlink{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line);
  padding-bottom:3px;transition:color .25s,border-color .25s;
}
.textlink:hover{color:var(--accent);border-color:var(--accent);}

/* ---------- the framed painting ---------- */
.frame{position:relative;}
.frame__art{
  position:relative;width:100%;overflow:hidden;background:var(--paper-2);
  box-shadow:0 1px 2px rgba(33,28,22,.10);
}
.frame__img{width:100%;height:100%;display:block;object-fit:cover;transition:opacity .4s var(--ease);}
/* Frosted-glass placeholder veil (js/components.jsx's Frame) — covers the blocky thumb
   without filtering the img itself, fading out over .8s once the real target size loads. */
.frame__veil{
  position:absolute;inset:0;pointer-events:none;
  background:rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:opacity .8s var(--ease);
}
.frame--fill,.frame--fill .frame__art{width:100%;height:100%;}
.frame--hairline .frame__art{outline:1px solid var(--line);outline-offset:-1px;}
.frame--mat{
  background:var(--card);padding:7%;
  border:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(33,28,22,.5);
}
.frame--mat .frame__art{box-shadow:0 1px 3px rgba(33,28,22,.22),0 0 0 1px rgba(33,28,22,.18);}

/* ---------- wall card ---------- */
.wallcard{display:flex;flex-direction:column;gap:5px;margin-top:16px;}
.wallcard__title{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.1;letter-spacing:.005em;}
.wallcard__meta{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.wallcard__metawrap{display:inline-flex;flex-direction:column;gap:3px;align-self:flex-start;min-width:0;}
.wallcard__statusrow{display:flex;align-items:center;gap:33px;}
.wallcard__status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.wallcard__statusrow .wallcard__status.is-prints{margin-left:auto;}
.wallcard__status .dot,.lightbox__status .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);}
.wallcard__status.is-available{color:var(--available);}
.wallcard__status.is-available .dot,.lightbox__status.is-available .dot{background:var(--available);}
.wallcard__status.is-prints{color:var(--accent);}
.lightbox__status.is-prints{color:var(--accent);}
.lightbox__status.is-prints .dot{background:var(--accent);}

/* =====================================================================
   HOME A — immersive hero
===================================================================== */
.heroA{position:relative;height:100vh;min-height:600px;overflow:hidden;background:#1a1712;}
.heroA__stack{position:absolute;inset:0;}
.heroA__scrim{
  position:absolute;inset:0;pointer-events:none;
  /* Dark at the bottom (behind the caption + controls) and at the top (behind the nav),
     clear through the middle. Fade points are anchored in px from each edge so they stay
     put as the window height changes (only the clear middle stretches/shrinks). */
  /* Each fade is EASED (slope tapers toward the clear band) rather than a straight
     ramp into a hard flat stop — a linear-to-flat corner reads as a bright Mach-band
     line to the eye. The fade end points (190px, nav-h+15px) are unchanged. */
  background:linear-gradient(to top,
    rgba(20,16,12,.6)  0,
    rgba(20,16,12,.5)  40px,
    rgba(20,16,12,.3)  90px,
    rgba(20,16,12,.12) 135px,
    rgba(20,16,12,.03) 168px,
    rgba(20,16,12,0)   190px,                             /* ~25px above the caption's top */
    rgba(20,16,12,0)   calc(100% - var(--nav-h) - 15px),  /* 15px below the nav's bottom */
    rgba(20,16,12,.03) calc(100% - 71px),
    rgba(20,16,12,.12) calc(100% - 55px),
    rgba(20,16,12,.3)  calc(100% - 30px),
    rgba(20,16,12,.5)  calc(100% - 12px),
    rgba(20,16,12,.6)  100%);
}
.heroA__copy{
  position:absolute;bottom:23vh;z-index:3;color:#fff;padding:40px 40px;
  /* shrink to fit the text, left-aligned at the same gutter as the page max-width container */
  left:max(0px, calc((100% - var(--maxw)) / 2));
  width:fit-content;max-width:calc(100% - 80px);
}
/* Feathered dark rectangle behind the copy. It's a single solid block that is then
   blurred — so the whole edge fades as one shape (no fill-vs-glow seam). Tune the
   alpha (darkness), blur (feather softness) and border-radius (corner roundness). */
.heroA__copy::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(18,14,10,.5);
  border-radius:72px;
  filter:blur(60px);
}
.heroA__name{
  font-family:var(--serif);font-weight:500;font-size:clamp(54px,8vw,108px);
  line-height:.96;margin:.06em 0 .2em;letter-spacing:.005em;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.heroA__eyebrow{color:rgba(255,255,255,.86);}
.heroA__lede{
  max-width:40ch;font-size:21px;line-height:1.55;color:rgba(255,255,255,.9);margin:0 0 1.8em;
}
.heroA__actions{display:flex;gap:16px;flex-wrap:wrap;}
.heroA__caption{
  position:absolute;right:40px;bottom:118px;z-index:3;text-align:right;color:#fff;
  display:flex;flex-direction:column;gap:5px;
}
.heroA__caption-title{font-family:var(--serif);font-style:italic;font-size:22px;}
.heroA__caption-meta{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap;}
/* hairline outline (65% black) so the caption reads over any painting */
.heroA__caption-title,.heroA__caption-meta{
  text-shadow:
    1px 0 1px rgba(0,0,0,.65), -1px 0 1px rgba(0,0,0,.65),
    0 1px 1px rgba(0,0,0,.65), 0 -1px 1px rgba(0,0,0,.65),
    1px 1px 1px rgba(0,0,0,.65), -1px -1px 1px rgba(0,0,0,.65),
    1px -1px 1px rgba(0,0,0,.65), -1px 1px 1px rgba(0,0,0,.65),
    0 0 3px rgba(0,0,0,.5);   /* just a hint of soft fade, not a full glow */
}
.heroA__controls{position:absolute;left:0;right:0;bottom:54px;z-index:3;display:flex;justify-content:center;}

.strip{max-width:var(--maxw);margin:0 auto;padding:110px 40px 40px;}
.strip__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:34px;}
.strip__head .section-title{margin:0;}
.strip__row{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;}
.strip__item{cursor:pointer;}
.strip__item .frame{transition:transform .4s var(--ease);}
.strip__item:hover .frame{transform:translateY(-5px);}
.strip__cap{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);margin-top:12px;}

/* ---------- fade stack + dots ---------- */
.fadestack{position:relative;width:100%;height:100%;}
.fadestack__layer{position:absolute;inset:0;opacity:0;transition:opacity .85s var(--ease);}
.fadestack__layer.is-active{opacity:1;}
.dots{display:flex;gap:11px;align-items:center;}
.dots__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.42);transition:all .3s;}
.heroA__controls .dots__dot{background:rgba(255,255,255,.4);}
.dots__dot:not(:disabled):hover{background:rgba(255,255,255,.75);}
.dots__dot.is-active{background:#fff;width:22px;border-radius:4px;}
.dots__dot:disabled{cursor:default;}                 /* slide whose image hasn't loaded yet */
.dots__dot:disabled:not(.is-active){opacity:.4;}

/* =====================================================================
   PAGE chrome (paintings / shows / about)
===================================================================== */
.page{max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 64px) 40px 40px;}
.pagehead{max-width:760px;margin-bottom:54px;}
.pagehead__title{font-family:var(--serif);font-weight:500;font-size:clamp(48px,6.5vw,82px);line-height:1;margin:0 0 .3em;}
.pagehead__lede{font-size:21px;line-height:1.6;color:var(--ink-2);max-width:54ch;margin:0;}

.filterbar{display:flex;gap:8px;margin-top:34px;}
.filterbar__btn{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding:9px 16px;border:1px solid var(--line);border-radius:1px;transition:all .25s;
  display:inline-flex;align-items:center;gap:8px;
}
.filterbar__btn:hover{color:var(--ink);border-color:var(--ink-3);}
.filterbar__btn.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.filterbar__count{opacity:.55;font-size:10px;}

/* masonry salon hang — column count comes from JS (useGalleryColumnCount in
   pages.jsx, reading --bp-2col/--bp-1col from tokens.css), which distributes
   items round-robin across .gallery__col so reading order is left-to-right. */
.gallery{display:flex;gap:42px;}
.gallery__col{display:flex;flex-direction:column;flex:1;min-width:0;}
.tile{break-inside:avoid;margin:0 0 52px;cursor:pointer;outline:none;}
.tile__frame{position:relative;overflow:hidden;}
.tile .frame{transition:transform .5s var(--ease);}
.tile:hover .frame{transform:scale(1.012);}
.tile__view{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);z-index:4;
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;padding:11px 22px;border:1px solid rgba(255,255,255,.7);background:rgba(20,16,12,.32);
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);backdrop-filter:blur(2px);
}
.tile:hover .tile__view,.tile:focus-visible .tile__view{opacity:1;transform:translate(-50%,-50%);}
.tile:focus-visible .tile__frame{outline:2px solid var(--accent);outline-offset:4px;}
/* same cut-mat bevel as the lightbox, thinner (2px), on the gallery tiles + about-page plates */
.tile .frame--mat .frame__art,
.page--about .frame--mat .frame__art{
  border:2px solid;
  border-color:var(--mat-bevel-shadow) var(--mat-bevel-lit) var(--mat-bevel-lit) var(--mat-bevel-shadow);
  box-shadow:none;
}

/* =====================================================================
   SHOWS & NEWS
===================================================================== */
.shows-group{margin-bottom:64px;}
.shows-list{display:flex;flex-direction:column;}
.show{
  display:grid;grid-template-columns:minmax(220px,250px) 1fr auto;gap:40px;align-items:start;
  padding:30px 0;border-top:1px solid var(--line);transition:background .3s;
}
.show:hover{background:color-mix(in oklab,var(--card) 60%,transparent);}
.show--past{opacity:.74;}
.show__when{display:flex;flex-direction:column;gap:10px;}
.show__dates{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.25;}
.show__kind{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.show__title{font-family:var(--serif);font-weight:500;font-size:28px;margin:0 0 .25em;line-height:1.1;}
.show__titlelink{color:inherit;text-decoration:none;transition:color .2s;}
.show__titlelink:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.show__venue{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .5em;}
.show__venuelink,.show__maplink{color:inherit;text-decoration:none;transition:color .2s;}
.show__venuelink:hover,.show__maplink:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.show__opening{font-size:13px;font-style:italic;color:var(--accent);margin:0 0 .75em;}
.show__note{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0;}
.show__badge{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in oklab,var(--accent) 40%,var(--line));padding:7px 13px;border-radius:1px;white-space:nowrap;
}
.show__badge--muted{color:var(--ink-3);border-color:var(--line);}

.repline{border-top:1px solid var(--line);padding-top:48px;}
.repline__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.repcard{
  display:flex;flex-direction:column;gap:6px;padding:28px;background:var(--card);
  border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s;
}
.repcard:hover{transform:translateY(-3px);border-color:var(--ink-3);}
.repcard__name{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:4px;}
.repcard__line{font-size:15px;color:var(--ink-2);line-height:1.4;}
.repcard__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;}
.repcard__go{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none;}
.repcard__go:hover{text-decoration:underline;text-underline-offset:2px;}
.repcard__directions{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color .2s;}
.repcard__directions:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

/* =====================================================================
   ABOUT
===================================================================== */
.about-hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
  padding:20px 40px 0;max-width:var(--maxw);margin:0 auto;
}
.about-hero__title{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,68px);line-height:1.04;margin:0;}
.about-hero__art{cursor:zoom-in;}
.statement{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start;
  max-width:var(--maxw);margin:0 auto;padding:80px 40px 0;
}
.statement--rev{padding-top:60px;}
.statement__p{font-size:21px;line-height:1.72;color:var(--ink-2);margin:0 0 1.3em;}
.statement__p:first-letter{}
.statement__plate{cursor:zoom-in;position:sticky;top:calc(var(--nav-h) + 30px);}

.contact{margin-top:96px;background:var(--paper-2);border-top:1px solid var(--line);}
.contact__inner{
  max-width:var(--maxw);margin:0 auto;padding:80px 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
}
.contact__galleries{display:flex;flex-direction:column;gap:26px;}
.contact__gallery{display:flex;flex-direction:column;gap:3px;transition:transform .25s;}
.contact__gallery:hover{transform:translateX(4px);}
.contact__gallery-name{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink);}
.contact__gallery:hover .contact__gallery-name{color:var(--accent);}
.contact__gallery-line{font-size:15px;color:var(--ink-3);}
.contact__lede{font-size:19px;color:var(--ink-2);margin:0 0 1.6em;max-width:42ch;}
.contact__list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:14px;}
.contact__list li{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--line-2);padding-bottom:12px;}
.contact__k{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);width:64px;flex:none;}
.contact__list a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.contact__list a:hover{color:var(--accent);border-color:var(--accent);}
.contact__list span:not(.contact__k){font-size:18px;}
.contact__social{display:flex;gap:22px;}
.contact__social a{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .2s,border-color .2s;}
.contact__social a:hover{color:var(--accent);border-color:var(--accent);}

/* =====================================================================
   LIGHTBOX
===================================================================== */
.lightbox{
  --lb-margin:50px;            /* breathing room around the whole detail view */
  --lb-mat:50px;               /* white matte border width inside the frame */
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  gap:24px;padding:var(--lb-margin);background:rgba(26,21,16,.86);backdrop-filter:blur(8px);
}
.lightbox__stage{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:center;
  max-width:none;width:100%;animation:lbpop .35s var(--ease);
}
@keyframes lbpop{from{transform:scale(.975);}to{transform:scale(1);}}
.lightbox__art{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;}
/* Detail view: show the painting as large as the available browser-window area allows,
   uncropped. frame__art's width/height are set directly, in px, by Frame (js/components.jsx's
   fitWidth/fitHeight + fitBox) — computed from the real photo ratio (imgW/imgH) and the actual
   available area (see Lightbox/useLightboxFit), not derived here via CSS max-width/max-height
   + aspect-ratio auto-sizing. That auto-sizing approach doesn't reliably reconcile two
   independent max-width/max-height clamps (one from the grid column, one from viewport
   height) through this nested flex/padding layout, and kept producing a frame__art shaped
   differently than the actual photo. */
.lightbox__art .frame--mat{padding:var(--lb-mat);}
/* cut-mat bevel: a few-px inner edge inside the white mat. Bottom+right catch the
   light (warm cream), top+left sit in shadow (darker). Per-side border colors miter
   the corners to a 45° diagonal automatically. */
.lightbox__art .frame--mat .frame__art{
  --bevel:4px;
  --bevel-lit:var(--mat-bevel-lit);     /* bottom + right (shared token) */
  --bevel-shadow:var(--mat-bevel-shadow); /* top + left (shared token) */
  border:var(--bevel) solid;
  border-color:var(--bevel-shadow) var(--bevel-lit) var(--bevel-lit) var(--bevel-shadow);
  box-shadow:none;
}
/* width/height:100% + object-fit:fill — frame__art above is already an explicit pixel box
   matching the real ratio, so the img just stretches whatever's currently loaded (the small
   placeholder included) to fill it exactly; no letterboxing/contain math needed. */
.lightbox__art .frame__img{display:block;width:100%;height:100%;object-fit:fill;}
.lightbox__placeholder{
  position:absolute;left:0;bottom:-26px;font-family:var(--label);font-size:9px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.lightbox__meta{color:#fff;}
.lightbox__title{font-family:var(--serif);font-weight:500;font-size:42px;line-height:1.04;margin:0 0 .35em;}
.lightbox__sub{font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 .4em;}
.lightbox__statuswrap{display:inline-flex;flex-direction:column;align-self:flex-start;min-width:0;margin:0 0 26px;}
.lightbox__statusrow{display:flex;align-items:center;gap:33px;margin-top:18px;}
.lightbox__status{display:inline-flex;align-items:center;gap:8px;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0;}
.lightbox__statusrow .lightbox__status.is-prints{margin-left:auto;}
.lightbox__status.is-available{color:#a9c08c;}
.lightbox__soldnote{display:block;font-size:16px;color:rgba(255,255,255,.6);font-style:italic;}
.lightbox__count{display:block;margin-top:28px;font-family:var(--label);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.45);}
.lightbox__close{
  position:absolute;top:26px;right:32px;font-family:var(--label);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.3);padding:9px 16px;transition:all .25s;
}
.lightbox__close:hover{background:#fff;color:var(--ink);}
.lightbox__nav{
  width:54px;height:54px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:22px;transition:all .25s;
}
.lightbox__nav:hover{background:rgba(255,255,255,.16);border-color:#fff;}

/* =====================================================================
   FOOTER
===================================================================== */
.site-footer{background:var(--ink);color:var(--paper);margin-top:0;}
.about-hero ~ * .site-footer{margin-top:0;}
.site-footer__inner{
  max-width:var(--maxw);margin:0 auto;padding:70px 40px 40px;
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:48px;align-items:start;
}
.site-footer .wordmark__name{font-size:30px;color:var(--paper);}
.site-footer__tag{display:block;font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.55);margin-top:12px;}
.site-footer__nav{display:flex;flex-direction:column;gap:12px;}
.site-footer__nav a{font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.72);transition:color .2s;}
.site-footer__nav a:hover{color:#fff;}
.site-footer__contact{display:flex;flex-direction:column;gap:9px;font-family:var(--label);font-size:13px;letter-spacing:.04em;color:rgba(244,239,230,.72);}
.site-footer__contact a:hover{color:#fff;}
.site-footer__social{display:flex;gap:18px;margin-top:8px;}
.site-footer__social a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(244,239,230,.3);padding-bottom:2px;}
.site-footer__legal{
  max-width:var(--maxw);margin:0 auto;padding:22px 40px;border-top:1px solid rgba(244,239,230,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,239,230,.45);
}

/* ---------- data-load error ---------- */
.dataerror{max-width:540px;margin:18vh auto;padding:0 24px;text-align:center;color:var(--ink-2);}
.dataerror h1{font-family:var(--serif);font-weight:500;font-size:34px;color:var(--ink);margin:0 0 .4em;}
.dataerror code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--paper-2);padding:1px 6px;border-radius:3px;}
.dataerror__hint{font-size:15px;color:var(--ink-3);margin-top:1.2em;}

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media(max-width:900px){
  body{font-size:18px;}
  .topnav__inner{padding:0 22px;}
  .navlinks{gap:20px;}
  .wordmark__name{font-size:22px;}
  .strip__row{grid-template-columns:repeat(2,1fr);}
  .about-hero,.statement,.statement--rev{grid-template-columns:1fr;gap:36px;}
  .statement__plate{position:static;}
  .statement--rev .statement__col:first-child{order:2;}
  .contact__inner{grid-template-columns:1fr;}
  .repline__grid{grid-template-columns:1fr;}
  .show{grid-template-columns:1fr;gap:14px;}
  .show__end{display:none;}
  .lightbox__stage{grid-template-columns:1fr;gap:24px;}
  .lightbox__nav{position:fixed;top:50%;}
  .lightbox__nav--prev{left:12px;}.lightbox__nav--next{right:12px;}
  .lightbox__art .frame__art,.lightbox__art .frame__img{max-height:60vh;}
  .heroA__caption{display:none;}
  /* narrow screens: revert the copy to the full-width centered layout (shrink-to-fit can overflow) */
  .heroA__copy{left:0;right:0;width:auto;max-width:var(--maxw);margin:0 auto;}
  .page,.strip{padding-left:22px;padding-right:22px;}
}
@media(max-width:560px){
  .heroA__copy{bottom:auto;top:50%;transform:translateY(-40%);}
  .pagehead__title{font-size:44px;}
}