/* =============================================================
   DACHA ART — immersive redesign
   Design system + motion. No dependencies.
   ============================================================= */

/* ---------- 1. TOKENS ----------
   One fixed palette — the original site's own CSS (Artisteer/Joomla
   template.css): #F0EFD3 sheet, #8C3B3B accent, #000 body text. No more
   dark/light/classic switching; this IS the gallery's look now. */
:root{
  --ink:            #000000;
  --ink-2:          #313125;
  --ink-3:          #575742;
  --plaster:        #f0efd3;
  --plaster-2:      #e8e6ba;
  --bone:           #6b6450;
  --smoke:          #8a8268;
  --smoke-2:        #6b6459;

  --leaf:           #8c3b3b;
  --leaf-soft:      #ab6a6a;
  --leaf-dim:       rgba(140,59,59,.18);

  --maroon:         #8c3b3b;
  --maroon-dark:    #6c2d2d;

  /* the original site sat on a solid olive-drab page background (#6e6e53)
     with the cream "sheet" inset inside it — a softened, gradient version
     of that same green frames the sheet here instead of a flat block. */
  --frame:          #6f6f56;
  --frame-2:        #5c5c46;

  --bg:             var(--plaster);
  --fg:             var(--ink);
  --muted:          var(--smoke);
  --line:           rgba(0,0,0,.14);
  --line-strong:    rgba(0,0,0,.28);
  --panel:          rgba(0,0,0,.045);

  /* type — the original template's own font stack (Artisteer/Joomla) */
  --serif: Garamond, Palatino, Georgia, "Times New Roman", serif;
  --sans:  Garamond, Arial, Helvetica, sans-serif;
  --mono:  ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* scale */
  --step--1: clamp(.72rem, .69rem + .12vw, .8rem);
  --step-0:  clamp(.9rem, .86rem + .18vw, 1rem);
  --step-1:  clamp(1.1rem, 1rem + .45vw, 1.35rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem);
  --step-3:  clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --step-4:  clamp(2.6rem, 1.3rem + 5.4vw, 6.4rem);
  --step-5:  clamp(3.2rem, .8rem + 9vw, 10rem);

  --gut: clamp(1.1rem, 3.4vw, 3.6rem);
  --maxw: 1000px;

  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-in:   cubic-bezier(.7,0,.84,0);
  --ease-soft: cubic-bezier(.4,.01,.16,1);
  --t-fast: .28s;
  --t:      .6s;
  --t-slow: 1.05s;

  --navh: 0px;

  --t-bg:          var(--plaster);
  --t-bg-2:        var(--plaster-2);
  /* the flattened result of --plaster under the header's 30% tan wash —
     a plain solid so any "cream card" (.infoCard, .foot__card) reads as
     the SAME warm cream as the masthead, not the cooler plain --plaster. */
  --t-bg-warm:     #eee9c7;
  --t-fg:          var(--ink);
  --t-fg-2:        var(--ink-2);
  --t-fg-3:        var(--ink-3);
  --t-fg-4:        var(--smoke);
  --t-leaf:        var(--leaf);
  --t-line:        var(--line);
  --t-line-strong: var(--line-strong);
  --t-panel:       var(--panel);
  --t-navbg:       #893938;
  --t-subnavbg:    #c8d197;
  --t-filtbg:      rgba(240,239,211,.94);
  --t-staroff:     rgba(0,0,0,.18);
}

/* self-hosted so the brand wordmark still renders (not a generic fallback)
   for the visitors whose OS ships neither Monotype Corsiva nor Apple Chancery —
   keeps the "works from file://, no CDN" promise from the project README. */
@font-face{
  font-family:'Petit Formal Script';
  src:url('../assets/fonts/PetitFormalScript.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* background lives on html, not just body: the html/body canvas-propagation
   rule (CSS2.1 §14.2) paints whichever of the two has a background onto the
   page's root canvas FIRST, before anything else — including any z-index:-1
   descendant of body, however "behind" it looks on paper. Declaring it here
   too keeps that propagation on html, so .heritage-background (fixed,
   z-index:-1, a child of body) can actually paint above body's own
   background instead of being buried under the canvas paint. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--frame); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; color:var(--t-fg);
  background:linear-gradient(180deg, var(--frame) 0%, var(--frame-2) 100%);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* the olive "mat" reveal around .page — thin on phones, a touch wider
     on desktop, never enough to fight the reading width inside
     (top/bottom: 25% bigger than the original clamp(.7rem,1.6vw,1.75rem);
     left/right: another 10% on top of that, on request — so the sides
     read wider than top/bottom instead of an even mat all around) */
  padding:clamp(.875rem,2vw,2.19rem) clamp(.9625rem,2.2vw,2.41rem);
}
body.is-locked{ overflow:hidden; }

/* the cream sheet itself: everything the original boxed against its olive
   page background lives in here, centered with a soft lift instead of the
   original's hard 2000s border — same idea, quieter execution. Wider on
   request, so it fills more of a large monitor instead of leaving a big
   olive margin either side. */
.page{
  max-width:1900px; margin:0 auto; background:var(--t-bg);
  box-shadow:0 12px 50px rgba(0,0,0,.16);
}
img{
  max-width:100%; display:block;
  /* deterrents to go with motion.js's contextmenu/dragstart guards — stop
     the drag "ghost", iOS's long-press "Save Image" callout, and dragging
     text/images into a selection, none of which block devtools or the
     network tab, just the casual right-click/drag/long-press path. */
  -webkit-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,ul{ margin:0; }
ul{ padding:0; list-style:none; }
::selection{ background:var(--leaf); color:var(--plaster); }
:focus-visible{ outline:2px solid var(--leaf); outline-offset:3px; }

/* ---------- 3/4/5. removed ----------
   Grain, vignette, custom cursor, animated preloader, and the heritage/
   night ambient backgrounds were all part of the "immersive" redesign.
   None of that belongs on a faithful recreation of the original site's
   plain, static look, so the corresponding elements in index.html were
   removed and their CSS dropped here with them. */

/* js/motion.js still calls M.preload() (toggles #preloader.is-done) and
   M.curtain() (toggles #curtain's class between page navigations) — both
   assume the elements exist and aren't null-guarded, so index.html keeps
   them in the DOM. They just render as nothing now: no preloader screen,
   no page-transition flash, matching the plain original site. */
.preloader,.curtain{ display:none!important; }

/* ---------- 6. NAV ----------
   Static two-row header: a centered masthead (logo + full wordmark, like
   the original site's banner) sitting above a solid nav bar — matches the
   original's proportions while staying a plain flexbox, no fixed/glass nav. */
.nav{
  position:static; height:auto; z-index:800;
  /* the original banner's own parchment tone (sampled off its header
     image, warmer/more tan than our plain --plaster) laid over the page's
     cream at 30% strength — a soft wash, not a full colour swap, so the
     header reads a touch richer than the body without breaking the
     shared --t-bg used everywhere else. Shared by index.html and
     admin/index.php since both build on this same .nav class. */
  background:
    linear-gradient(rgba(235,226,187,.5), rgba(235,226,187,.5)),
    var(--t-bg);
  border-bottom:3px solid var(--t-navbg);
}
.nav__masthead{
  position:relative; display:flex; justify-content:center; align-items:center;
  padding:clamp(1.7rem,4vw,3.2rem) var(--gut) clamp(1.5rem,3.4vw,2.8rem); overflow:hidden;
}
/* the Russian state eagle (assets/crest-source.svg, CC BY-SA — Wikimedia
   Commons "Gerb rossii2.svg") as a watermark behind the wordmark: same
   shape and detail as the source, just desaturated and tinted into the
   page's own ink tone via filters instead of its native gold/black/red,
   so it recedes into the cream background rather than clashing with it.
   (A CSS mask reading the SVG's alpha was tried first so the colour
   could be swapped for one flat fill, but this file's nested groups/
   gradients aren't supported as a mask source in this engine — it
   rendered as a plain rectangle. Filtering the <img> directly works
   because that's the code path that already renders it correctly.) */
.nav__crest{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  /* kept comfortably under the masthead's own rendered height (measured
     ~106px at 700px viewports up to ~128px at 1536px) so the whole
     emblem sits inside the cream masthead only — never bleeding into the
     olive frame above or the maroon nav bar below. overflow:hidden above
     is the hard guarantee; this sizing is what keeps it from ever
     needing to clip anything in the first place. */
  height:clamp(78px,17vw,190px); width:auto; max-width:none;
  filter:grayscale(1) sepia(.25) brightness(.6) contrast(.9);
  opacity:.11; pointer-events:none; user-select:none; z-index:0;
}
.nav__brand{ position:relative; z-index:1; display:flex; align-items:center; gap:1.1rem; }
.nav__brandMark svg{ width:clamp(46px,8vw,116px); height:clamp(46px,8vw,116px); flex:0 0 auto; }
.nav__brandMark rect{ fill:var(--maroon); }
.nav__brandMark rect.brandMark-outer{ fill:none; stroke:var(--t-fg-3); stroke-width:1; opacity:.5; }
.nav__brandMark rect.brandMark-inner{ fill:none; stroke:var(--plaster); stroke-width:1; opacity:.85; }
.nav__brandMark text{ font-family:var(--serif); font-size:19px; font-weight:700; fill:var(--plaster); text-anchor:middle; dominant-baseline:middle; }
/* position:relative here (not just on .nav__brand) makes the wordmark's
   OWN box — title + subtitle, not the logo — the crest's centering
   reference, so it lines up on the text even though the logo sitting to
   its left would otherwise pull that centre off to one side. */
.nav__brandText{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.nav__brandSig{
  position:relative; z-index:1; display:inline-block; padding-bottom:.5rem;
  font:italic 400 clamp(1.3rem,5vw,4.8rem)/1.15 var(--serif); color:var(--t-fg); white-space:nowrap;
}
.nav__brandSig::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--t-fg-3); opacity:.55; }
.nav__brandSig em{ font-style:italic; }
.nav__brandGal{ position:relative; z-index:1; font:400 clamp(.66rem,1.9vw,1.4rem)/1 var(--serif); letter-spacing:.38em; text-transform:uppercase; color:var(--t-fg-3); white-space:nowrap; }

/* The bar: the buttons sit on one row, and when the bar is too narrow for all
   of them they drop out ONE AT A TIME FROM THE RIGHT — each button that no
   longer fits moves into the mini menu (#navDrop), which opens from an icon
   at the RIGHT end of the bar. navFit (js/app.js) measures the real widths on
   load, on every window resize, on a language change (labels get longer or
   shorter) and once the fonts load, so it is driven by the space actually
   available, not by fixed breakpoints. The icon only exists while at least
   one button is inside the menu (.has-overflow); the buttons that stay in
   the bar look exactly like they do on a wide screen. */
.nav__links{
  position:relative; z-index:790; width:100%;
  display:flex; align-items:stretch; flex-wrap:nowrap;
  background:var(--t-navbg);
}
.nav__list{ display:flex; flex:1 1 auto; flex-wrap:nowrap; gap:0; min-width:0; overflow:hidden; } /* clips only during the instant before navFit has run */
.nav__links a{
  flex:0 0 auto; white-space:nowrap;
  font:700 .74rem/1 var(--nav-serif,var(--serif)); letter-spacing:.08em; text-transform:uppercase; color:var(--nav-fg,#e0e0d6);
  padding:.85rem 1.1rem; transition:background .25s,color .25s;
}
/* the buttons on the bar share ALL its width equally: whatever room is left
   after each one takes its own text is split evenly among them (and the
   label is centred in its wider button), so the row always spans the bar
   edge to edge — with or without the menu icon at the right end. navFit
   turns this off (.is-measuring) for the instant it measures each button's
   natural width to decide which ones fit. */
.nav__list a{ flex:1 1 auto; text-align:center; }
.nav__links.is-measuring .nav__list a{ flex:0 0 auto; }
.nav__links a:hover,.nav__links a.is-active{ background:var(--t-bg); color:var(--t-leaf); }
.nav__links a.is-accent{ color:var(--t-leaf); }

/* the menu icon: first thing in the bar, same height/colours as a bar button */
.nav__more{
  display:none; flex:0 0 auto; align-items:center; justify-content:center;
  padding:.85rem 1.1rem; color:var(--nav-fg,#e0e0d6);
  background:transparent; border:0; transition:background .25s,color .25s;
}
.nav__links.has-overflow .nav__more{ display:flex; }
.nav__more:hover,.nav__links.is-open .nav__more,.nav__more.has-active{ background:var(--t-bg); color:var(--t-leaf); } /* has-active: the page you're on is one of the buttons inside the menu */
.nav__moreIcon{ display:inline-flex; flex-direction:column; gap:4px; }
.nav__moreIcon i{ display:block; width:18px; height:2px; background:currentColor; transition:transform .25s var(--ease),opacity .2s; }
.nav__more[aria-expanded="true"] .nav__moreIcon i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__more[aria-expanded="true"] .nav__moreIcon i:nth-child(2){ opacity:0; }
.nav__more[aria-expanded="true"] .nav__moreIcon i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* the mini menu: a small panel under the icon holding the buttons that no longer fit */
.nav__drop{
  display:none; position:absolute; right:0; top:100%; flex-direction:column;
  min-width:min(250px,100%); max-width:100%;
  background:var(--t-navbg); border-top:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 30px -14px rgba(0,0,0,.45); max-height:calc(100vh - 4rem); overflow-y:auto;
}
.nav__links.is-open .nav__drop{ display:flex; animation:navDrop .18s ease-out; }
.nav__drop a{ white-space:normal; padding:1rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.1); }
.nav__drop a:last-child{ border-bottom:0; }
@keyframes navDrop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .nav__links.is-open .nav__drop{ animation:none; } }

.nav__tools{ position:absolute; z-index:1; right:var(--gut); top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:.4rem; }
/* When the masthead has no room for the search + language buttons beside the
   wordmark (they used to end up on top of it), they stop being part of the
   header and become two round icons floating at the right edge of the screen,
   stacked, and following you as you scroll. Whether they fit is measured
   live (toolsFit in js/app.js), on load and on every resize — not a fixed
   breakpoint — and it sets .tools-float on the header. */
.nav.tools-float .nav__tools{
  position:fixed; z-index:600; top:auto; right:.8rem; bottom:max(1.1rem, env(safe-area-inset-bottom));
  transform:none; flex-direction:column; align-items:center; gap:.55rem;
}
.nav.tools-float .nav__tools .iconbtn,
.nav.tools-float .nav__tools .langSel{
  width:46px; height:46px; border-radius:50%;
  background-color:var(--t-bg-warm); border:1px solid var(--t-line-strong);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5);
}
.nav.tools-float .nav__tools .iconbtn svg{ width:19px; height:19px; }
/* the language picker as a round badge showing just its code (EN, ES…) — still the native list when tapped */
.nav.tools-float .nav__tools .langSel{ padding:0; background-image:none; text-align:center; text-align-last:center; font-size:.72rem; line-height:46px; }
@media (max-width:640px){
  .nav__masthead{ padding-block:1.2rem; }
  /* the wordmark never wraps, so on a phone it has to shrink to what's left
     beside the logo — its usual minimum (1.3rem) was wider than a 320–390px
     screen and the end of "…McCarthey Gallery" was cut off */
  /* (100vw counts a desktop window's 15px scrollbar too, hence the extra margin) */
  .nav__brandSig{ font-size:max(.75rem, min(clamp(1.3rem,3.1vw,2.15rem), calc((100vw - 132px) / 16))); }
  .nav__brand{ max-width:100%; }
}
@media (max-width:400px){
  .nav__brand{ gap:.7rem; }
  .nav__brandMark svg{ width:38px; height:38px; }
  .nav__brandGal{ letter-spacing:.22em; }
}
.iconbtn{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--t-line); border-radius:4px; transition:border-color .3s,background .3s; }
.iconbtn:hover{ border-color:var(--t-line-strong); background:var(--t-panel); }
.iconbtn svg{ width:16px; height:16px; color:var(--t-fg-2); }
.langSel{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:transparent; border:1px solid var(--t-line); border-radius:4px;
  height:34px; padding:0 1.5rem 0 .7rem; font:600 .66rem/34px var(--sans); letter-spacing:.04em; color:var(--t-fg-2);
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' fill='none' stroke='%238d8578' stroke-width='1.3'/></svg>");
  background-repeat:no-repeat; background-position:right .5rem center;
}
.langSel option{ color:#111; background:#fff; font:14px/1.4 var(--sans); }
.burger{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger i{ display:block; width:19px; height:1px; background:var(--t-fg); transition:transform .4s var(--ease),opacity .3s; }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }
/* (the old rule that hid the whole bar below 1180px and showed this burger is gone —
   the bar now collapses into its own dropdown, see .nav__links above — so the burger and
   the full-screen menu it opened stay hidden) */
@media (max-width:480px){ .iconbtn{ width:30px; height:30px; } }

/* ---------- 7. FULLSCREEN MENU ----------
   A full-screen dark takeover is a UI pattern independent of the page's
   own light parchment palette, so it keeps its own fixed dark colours
   instead of the (now light-mode) --ink-2/--bone/--plaster tokens. */
.menu{
  position:fixed; inset:0; z-index:780; background:#1a1712;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
  display:grid; align-items:center; padding:var(--gut);
  overflow-y:auto;
}
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__grid{ width:100%; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr .8fr; gap:clamp(2rem,6vw,7rem); }
.menu__col--main{ display:flex; flex-direction:column; }
.menu__col--main a{
  display:flex; align-items:baseline; gap:1rem; padding:.28em 0;
  font-family:var(--serif); font-size:clamp(1.9rem,5.4vw,4.2rem); line-height:1.06; letter-spacing:-.02em;
  color:#cfc7b8; transition:color .35s var(--ease);
}
.menu__col--main a span{ position:relative; }
.menu__col--main a span::after{ content:""; position:absolute; left:0; bottom:.12em; width:100%; height:1px; background:var(--leaf); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.menu__col--main a:hover{ color:#f0efd3; }
.menu__col--main a:hover span::after{ transform:scaleX(1); transform-origin:left; }
.menu__col--main a em{ font:400 .62rem/1 var(--mono); font-style:normal; letter-spacing:.16em; color:var(--leaf); opacity:.8; }
.menu__label{ font:600 .64rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:#8d8578; margin-bottom:1rem; }
.menu__artists{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.menu__artists a{ font-size:.8rem; color:#cfc7b8; border:1px solid rgba(244,240,232,.12); border-radius:99px; padding:.3rem .8rem; transition:.3s; }
.menu__artists a:hover{ border-color:var(--leaf); color:var(--leaf); }
.menu__meta{ font-size:.86rem; color:#8d8578; line-height:1.9; }
.menu__meta a{ color:var(--leaf); }
@media (max-width:900px){ .menu__grid{ grid-template-columns:1fr; } }

/* ---------- 8. SEARCH ---------- */
.search{
  position:fixed; inset:0; z-index:900; background:rgba(10,9,8,.96); color:#f0efd3;
  opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; padding:0 var(--gut);
  display:flex; flex-direction:column;
}
.search.is-open{ opacity:1; visibility:visible; }
.search__bar{ display:flex; align-items:center; gap:1rem; max-width:1000px; width:100%; margin:clamp(4rem,14vh,9rem) auto 0; border-bottom:1px solid var(--line-strong); padding-bottom:1rem; }
.search__bar svg{ width:22px; height:22px; color:var(--smoke); flex:0 0 auto; }
.search__bar input{ flex:1; background:none; border:0; font-family:var(--serif); font-size:clamp(1.3rem,3.6vw,2.4rem); color:var(--plaster); outline:none; }
.search__bar input::placeholder{ color:var(--smoke-2); }
.search__close{ font:400 .68rem/1 var(--mono); letter-spacing:.14em; color:var(--smoke); border:1px solid var(--line); border-radius:4px; padding:.4rem .55rem; }
.search__results{ max-width:1000px; width:100%; margin:0 auto; overflow-y:auto; padding:1.6rem 0 4rem; }
.sres{ display:flex; gap:1rem; align-items:center; padding:.7rem .6rem; border-radius:6px; transition:background .25s; }
.sres:hover{ background:rgba(255,255,255,.05); }
.sres img{ width:58px; height:44px; object-fit:cover; object-position:50% 30%; background:#1e1b17; flex:0 0 auto; }
.sres__t{ font-family:var(--serif); font-size:1rem; }
.sres__s{ font-size:.74rem; color:#8d8578; letter-spacing:.05em; }
.sres__k{ margin-left:auto; font:400 .6rem/1 var(--mono); letter-spacing:.14em; color:var(--leaf); text-transform:uppercase; }
.search__none{ color:#8d8578; font-size:.9rem; padding:1.4rem .6rem; }

/* ---------- 9. CURTAIN TRANSITION ---------- */
.curtain{ position:fixed; inset:0; z-index:950; pointer-events:none; display:flex; }
.curtain i{ flex:1; background:#1a1712; transform:scaleY(0); transform-origin:bottom; }
.curtain.is-in i{ animation:curtIn .55s var(--ease-in) forwards; }
.curtain.is-out i{ transform:scaleY(1); transform-origin:top; animation:curtOut .6s var(--ease) forwards; }
.curtain i:nth-child(1){ animation-delay:0s }   .curtain i:nth-child(2){ animation-delay:.05s }
.curtain i:nth-child(3){ animation-delay:.1s }  .curtain i:nth-child(4){ animation-delay:.15s }
.curtain i:nth-child(5){ animation-delay:.2s }
@keyframes curtIn{ to{ transform:scaleY(1); } }
@keyframes curtOut{ to{ transform:scaleY(0); } }

/* ---------- 10. LAYOUT PRIMITIVES ---------- */
.app{ min-height:70vh; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:820px; }
.wrap--mid{ max-width:1140px; }
/* Monthly Auctions: not a centered reading column like the variants above —
   a minimal side margin only (smaller than --gut), so the text (intro and
   each lot's write-up) runs edge to edge of that margin. The photo is the
   one thing kept at a contained, centered width (.auctionLot__cap below) —
   stretching a picture edge to edge read as a banner, not a photo. */
.wrap--bleed{ max-width:none; padding-inline:clamp(1rem,3vw,2.5rem); }
.auctionLot__cap{ max-width:680px; margin-inline:auto; }
/* the home page's card rows: as wide as the (now-wider) sheet allows, so the
   cards themselves cover the green wash behind them instead of leaving it
   showing as a wide margin on either side */
.wrap--wide{ max-width:96%; }
.sec{ padding-block:clamp(4rem,11vw,10rem); }
.rule{ height:1px; background:var(--t-line); }

/* the original site's sage-green tone (its subnav bar, #C8D197) reused as
   a soft background wash — 50% strength, same layered-gradient trick as
   the nav's tan wash and the footer's olive one — behind whichever
   sections opt in with .sec--wash. The actual content inside each one
   still sits on solid cream via .infoCard, so text contrast never
   changes; only the space around those cards goes green. */
.sec--wash{
  background:
    linear-gradient(rgba(200,209,151,.5), rgba(200,209,151,.5)),
    var(--t-bg);
  /* tighter than the default .sec rhythm — this is the green "field"
     around the cards, not a full section break, so it shouldn't read as
     its own huge empty block the way the plain cream sections do */
  padding-block:clamp(1.5rem,3vw,2.2rem);
}
.infoCard{
  background:var(--t-bg-warm); border:1px solid var(--t-line); border-radius:10px;
  padding:clamp(1.6rem,3vw,2.4rem);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font:600 .64rem/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--t-leaf);
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--leaf); opacity:.6; }
/* eyebrow/phead__sub are one-line labels, not prose — if the editor wraps
   typed text in a <p> (its normal cleanup step for any editable field),
   strip that paragraph's default spacing so the label stays one tight line */
.eyebrow p, .phead__sub p{ margin:0; }
/* an editable field embedded mid-sentence (a bidding number, a custom
   entry's title/artist/year) needs to stay inline even after the same <p>
   wrap — same fields, same formatting tools, just addressed differently */
.editInline{ display:inline; }
/* a long unbroken run (a pasted URL, "||||||…") must wrap inside its box
   instead of widening it — "anywhere" (not "break-word") also shrinks the
   min-content width, so grid/flex columns holding the text stay put */
[data-edit-body], .prose{ overflow-wrap:anywhere; min-width:0; }
/* Home page: two free-form article columns — top-aligned, each as tall as its own content */
.split2.split2--cols{ align-items:start; gap:clamp(1.2rem,3vw,3rem); }
.homeCol{ min-height:8rem; font-size:1rem; line-height:1; color:var(--t-fg); }
.homeCol h3{ font-weight:700; font-size:var(--step-2); line-height:1; margin:1.6em 0 .6em; }
.homeCol p{ margin:0; }
.homeCol img{ border:0; }
.homeCol > :first-child{ margin-top:0; }
.homeCol img.is-float-left, .homeCol img.is-float-right{ margin-top:.2rem; }
.editInline p{ display:inline; margin:0; }
.h-display{ font-family:var(--serif); font-size:var(--step-4); line-height:.98; letter-spacing:-.025em; font-weight:400; }
.h-1{ font-family:var(--serif); font-size:var(--step-3); line-height:1.06; letter-spacing:-.02em; font-weight:400; }
.h-2{ font-family:var(--serif); font-size:var(--step-2); line-height:1.18; letter-spacing:-.01em; font-weight:400; }
.lede{ font-family:var(--serif); font-size:var(--step-1); line-height:1.62; color:var(--t-fg-2); }
.body p{ margin-bottom:1.15em; color:var(--t-fg-2); }
.body a{ color:var(--t-leaf); border-bottom:1px solid var(--leaf-dim); transition:border-color .3s; }
.body a:hover{ border-color:var(--leaf); }
.muted{ color:var(--t-fg-3); }
.mono{ font:400 .68rem/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--t-fg-3); }
/* an artist's name sitting right above a work's title (Home's Monthly Auction
   and Featured rows, the Monthly Auctions page, the archived newsletter) —
   same treatment as .work__artist, so it reads with the title's own weight
   instead of the small mono caps used for dates/dimensions elsewhere. */
.artistLine{ font-family:var(--serif); font-size:1rem; line-height:1.3; color:var(--t-leaf); }

/* buttons — plain bordered pill, flat colour invert on hover. No blob,
   no glow, no cursor-lit sheen: matches the original site's flat buttons. */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.3rem; border:1px solid var(--t-leaf); border-radius:3px;
  font:700 .7rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--t-leaf);
  background:transparent; transition:background .25s,color .25s;
}
.btn:hover{ background:var(--t-leaf); color:#fff; }
.btn--solid{ background:var(--t-leaf); color:#fff; border-color:var(--t-leaf); }
.btn--solid:hover{ background:transparent; color:var(--t-leaf); }
.btn--ghost{ border-color:var(--t-line-strong); color:var(--t-fg-2); }
.btn--ghost:hover{ background:var(--t-panel); color:var(--t-fg); }
.arrow{ width:15px; height:9px; }

/* ---------- 11. REVEAL MOTION (disabled) ----------
   The scroll-reveal fade/mask/tilt choreography was part of the "immersive"
   redesign. The old-site recreation is a plain, static page — content is
   just visible, unconditionally, the same override the reduced-motion media
   query already used to use. js/motion.js is left alone: it still runs and
   still toggles .is-in/[data-tilt] inline transforms, they just no longer
   do anything visible. */
[data-reveal],[data-reveal="scale"],[data-reveal="mask"] > *,[data-reveal="mask"] > figcaption{
  opacity:1!important; transform:none!important; clip-path:none!important;
}
.split-line > i{ transform:none!important; }
.card__frame,[data-tilt] .card__frame{ transform:none!important; }

/* ---------- 12. HERO ---------- */
/* ---------- 12/13. removed ----------
   No hero slideshow, no artist-name marquee ticker — app.js no longer
   emits .hero/.marq markup (dropped in the earlier home-page redesign),
   so their CSS goes too. .filtersBrand__sig keeps a plain accent colour
   instead of the animated gold-shine gradient text it used to share
   with the hero eyebrow. */
.filtersBrand__sig{ color:var(--t-leaf); }

/* ---------- 14. WORK CARD / GRID ---------- */
.grid{ display:grid; gap:clamp(1.4rem,2.6vw,2.6rem); }
.grid--works{ grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); }
/* Collection's section cards (there are only a handful — --n of them): on a
   wide screen they all share one row instead of leaving the last one alone on
   a second row; on a narrower one they keep the usual auto-fill columns */
@media (min-width:1300px){ .grid--sections{ grid-template-columns:repeat(var(--n,4),1fr); } }
.grid--wide{ grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); }

.card{ position:relative; display:block; }
.card__frame{ position:relative; overflow:hidden; background:var(--t-bg-2); border:1px solid var(--t-line-strong); }
/* default crop leans toward the upper half — most paintings here are
   portraits/figures whose subject sits above center, so this keeps a face
   in frame more often than a plain center crop; a work can override it
   with its own object-position (see focusStyle() in app.js, set from the
   admin panel's "Focus point" picker on the work form). */
.card__img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; object-position:50% 30%; }
.card__img--empty{ display:grid; place-items:center; aspect-ratio:4/3.1; background:var(--t-bg-2); }
.card__img--empty span{ font:400 .6rem/1 var(--mono); letter-spacing:.2em; color:var(--t-fg-4); text-transform:uppercase; }
.card__body{ padding-top:.7rem; }
.card__t{ font-family:var(--serif); font-size:1.02rem; line-height:1.3; font-style:italic; color:var(--t-fg); }
/* same family and a close size as the title beside it, not a small uppercase
   label — see .work__artist above for the full reasoning */
.card__a{ font-family:var(--serif); font-size:.92rem; line-height:1.3; color:var(--t-leaf); margin-top:.3rem; }
.card__d{ font:400 .68rem/1.5 var(--mono); color:var(--t-fg-4); margin-top:.3rem; letter-spacing:.04em; }
.colSection__stars{ font-style:normal; font-size:1.3rem; letter-spacing:.08em; color:var(--t-leaf); }
.card__badge{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  font:600 .55rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  background:var(--leaf); color:#fff; padding:.3rem .5rem;
}
/* editorial rows on the home page — one painting per row, plain framed
   photo + prose, no tilt/zoom (data-tilt is still on the element for
   motion.js, it just no longer visibly does anything — see section 11). */
.story__row{ align-items:center; }
.story__media{ display:block; }
.story__frame{ aspect-ratio:auto; }
.story__img{ width:100%; height:auto; display:block; }
@media (max-width:900px){ .story__row{ margin-bottom:clamp(2.4rem,8vw,3.5rem) !important; } }
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.stars i{ width:8px; height:8px; background:var(--leaf); display:block; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.stars i.off{ background:var(--t-staroff); }

/* ---------- 15. FILTER BAR ---------- */
.filters{ position:sticky; top:0; z-index:120; background:var(--t-filtbg); border-block:1px solid var(--t-line); }
.filters__in{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:.85rem; }
/* the "McCarthey Collection" lockup that opens this bar — same script
   signature + shine as the nav brand (kept in sync via syncShine so the
   two never drift out of phase), "Collection" set like the nav's "Gallery"
   so the whole bar reads as its own labelled section, not just controls. */
.filtersBrand{ display:flex; align-items:baseline; gap:.35em; margin-right:.6rem; white-space:nowrap; }
.filtersBrand__sig{
  font:400 clamp(1.05rem,2.6vw,1.35rem)/1 var(--serif); color:var(--leaf);
  font-family:'Petit Formal Script','Monotype Corsiva','Apple Chancery',cursive;
  font-style:normal; padding:3px 0 0 3px;
}
.filtersBrand__label{ font:400 clamp(1.05rem,2.6vw,1.35rem)/1 var(--serif); color:var(--leaf); }
@media (max-width:640px){ .filtersBrand{ display:none; } }
.chip{
  font:600 .63rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--t-fg-2);
  border:1px solid var(--t-line); border-radius:99px; padding:.52rem .9rem; transition:.3s; white-space:nowrap;
}
.chip:hover{ border-color:var(--t-line-strong); color:var(--t-fg); }
.chip.is-on{ background:var(--leaf); border-color:var(--leaf); color:var(--plaster); }
.sel{
  appearance:none; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' fill='none' stroke='%238d8578' stroke-width='1.3'/></svg>") no-repeat right .8rem center;
  border:1px solid var(--t-line); border-radius:99px; padding:.52rem 2.2rem .52rem .9rem;
  font:600 .63rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--t-fg-2); cursor:pointer;
}
.sel option{ background:#fff; color:#111; text-transform:none; letter-spacing:0; }

/* ---------- CUSTOM SELECT (js/motion.js: Motion.enhanceSelects) ----------
   A native <select> popup renders with the OS's own colours no matter what
   CSS says — this is the site-styled listbox that stands in for it. The
   original .sel becomes .selMenu__native (display:none, still the actual
   form control) inside the new .selMenu wrapper; .selMenu__btn copies the
   original pill look so nothing shifts at rest, only the open popup looks
   different — and matches the editorial voice (serif for the list, hairline
   border, theme-aware surface) instead of a flat OS box. */
.selMenu{ position:relative; display:inline-flex; }
.selMenu__native{ display:none; }
.selMenu__btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; border:1px solid var(--t-line); border-radius:99px;
  padding:.52rem 1rem; font:600 .63rem/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-fg-2); cursor:pointer; white-space:nowrap;
  transition:border-color .3s,color .3s;
}
.selMenu__btn:hover{ border-color:var(--t-line-strong); color:var(--t-fg); }
.selMenu.is-open .selMenu__btn{ border-color:var(--t-leaf); color:var(--t-fg); }
.selMenu__label{ overflow:hidden; text-overflow:ellipsis; max-width:38vw; }
.selMenu__chev{ width:9px; height:7px; flex:0 0 auto; color:var(--t-fg-3); transition:transform .3s var(--ease); }
.selMenu.is-open .selMenu__chev{ transform:rotate(180deg); }
.selMenu__list{
  position:absolute; top:calc(100% + .6rem); left:0; z-index:200; min-width:100%;
  max-height:22rem; overflow-y:auto; margin:0; padding:.4rem; list-style:none;
  background:var(--t-bg);
  border:1px solid var(--t-line-strong); border-radius:4px; box-shadow:0 18px 40px -22px rgba(0,0,0,.35);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.selMenu.is-open .selMenu__list{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
/* thin theme-aware scrollbar instead of the OS's boxy default (grey track,
   square arrow buttons) — Firefox via scrollbar-width/-color, everything
   else via the WebKit pseudo-elements. */
.selMenu__list{ scrollbar-width:thin; scrollbar-color:var(--t-line-strong) transparent; }
.selMenu__list::-webkit-scrollbar{ width:6px; }
.selMenu__list::-webkit-scrollbar-track{ background:transparent; }
.selMenu__list::-webkit-scrollbar-thumb{ background:var(--t-line-strong); border-radius:99px; }
.selMenu__list::-webkit-scrollbar-thumb:hover{ background:var(--t-leaf); }
.selMenu__list::-webkit-scrollbar-button{ display:none; height:0; width:0; }
.selMenu__opt{
  padding:.6rem .85rem; border-radius:9px; white-space:nowrap;
  font:400 .84rem/1.3 var(--serif); color:var(--t-fg-2); cursor:pointer; transition:background .2s,color .2s;
}
.selMenu__opt:hover{ background:var(--t-panel); color:var(--t-fg); }
.selMenu__opt.is-selected{ color:var(--t-leaf); font-style:italic; }
@media (max-width:640px){ .selMenu__list{ max-width:min(85vw,320px); } }

.filters__count{ margin-left:auto; font:400 .68rem/1 var(--mono); letter-spacing:.12em; color:var(--t-fg-3); }
.filters__clear{ font:600 .6rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--t-leaf); }

/* ---------- 16. WORK DETAIL ---------- */
.work{ padding-top:calc(var(--navh) + clamp(2rem,6vw,5rem)); }
.work__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.work__viewer{ position:relative; }
.work__plate{ position:relative; padding:clamp(10px,1.4vw,18px); background:var(--t-bg-2); border:1px solid var(--t-line-strong); }
.work__canvas{ position:relative; overflow:hidden; cursor:zoom-in; }
.work__canvas img{ width:100%; display:block; }
.work__side{ position:sticky; top:calc(var(--navh) + 2rem); }
/* the artist's name reads with the same weight as the work's title — same
   serif family and a size close to it — instead of a small uppercase label,
   on request ("anywhere the details of a painting are listed, the artist's
   name should be the same as the title"). It stays upright (not italic) and
   in the gallery's maroon so the two lines are still easy to tell apart at a
   glance, with the title (italic, full size, ink) as the larger of the two. */
.work__artist{ font-family:var(--serif); font-size:var(--step-1); line-height:1.2; color:var(--t-leaf); }
.work__artist a{ color:inherit; }
.work__title{ font-family:var(--serif); font-size:var(--step-2); font-style:italic; line-height:1.15; margin-top:.3rem; }
.dl{ margin-top:2rem; border-top:1px solid var(--t-line); }
.dl__row{ display:flex; gap:1.4rem; padding:.85rem 0; border-bottom:1px solid var(--t-line); font-size:.86rem; }
.dl__k{ flex:0 0 34%; font:600 .6rem/1.6 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--t-fg-4); }
.dl__v{ color:var(--t-fg-2); }
.work__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
@media (max-width:1000px){ .work__grid{ grid-template-columns:1fr; } .work__side{ position:static; } }

/* ---------- 17. ARTIST ---------- */
.artistHero{ position:relative; padding-top:calc(var(--navh) + clamp(3rem,9vw,7rem)); padding-bottom:clamp(2rem,5vw,4rem); }
.artistHero__num{ font:400 .68rem/1 var(--mono); letter-spacing:.2em; color:var(--t-fg-4); }
.artistHero__name{ font-family:var(--serif); font-size:var(--step-4); line-height:.98; letter-spacing:-.03em; margin-top:.6rem; }
.artistHero__bar{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:1.6rem; }
.stat b{ display:block; font-family:var(--serif); font-size:1.7rem; }
.stat span{ font:600 .58rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--t-fg-4); }

.artistList{ border-top:1px solid var(--t-line); }
.artistRow{
  position:relative; display:flex; align-items:center; gap:1.4rem; padding:clamp(1rem,2.4vw,1.9rem) 0;
  border-bottom:1px solid var(--t-line); overflow:hidden;
}
.artistRow__i{ font:400 .64rem/1 var(--mono); color:var(--t-fg-4); flex:0 0 3ch; }
.artistRow__n{ font-family:var(--serif); font-size:clamp(1.3rem,3.4vw,2.4rem); line-height:1.1; transition:transform .55s var(--ease),color .4s; }
.artistRow__c{ margin-left:auto; font:400 .66rem/1 var(--mono); letter-spacing:.14em; color:var(--t-fg-3); flex:0 0 auto; }
.artistRow__peek{
  position:absolute; right:12%; top:50%; width:150px; height:104px; pointer-events:none;
  transform:translateY(-50%); opacity:0; transition:opacity .3s var(--ease);
  object-fit:cover; border:1px solid var(--t-line-strong);
}
.artistRow:hover .artistRow__n{ color:var(--t-leaf); }
.artistRow:hover .artistRow__peek{ opacity:1; }
@media (max-width:820px){ .artistRow__peek{ display:none; } }

/* ---------- 18. EDITORIAL / LEGACY CONTENT ---------- */
.prose{ font-size:1.02rem; line-height:1; color:var(--t-fg-2); }
.prose h1,.prose h2{ font-family:var(--serif); font-weight:400; font-size:var(--step-2); line-height:1; color:var(--t-fg); margin:2.4em 0 .7em; letter-spacing:-.01em; }
.prose h3,.prose h4{ font-family:var(--serif); font-weight:400; font-size:var(--step-1); color:var(--t-fg); margin:2em 0 .6em; }
/* Word-like (client request 2026-09-30): Enter goes down one line, no
   automatic paragraph gap; a blank line is an empty paragraph */
.prose p{ margin:0; }
.prose strong{ color:var(--t-fg); font-weight:600; }
.prose em{ color:var(--t-fg-2); }
.prose a{ color:var(--t-leaf); border-bottom:1px solid var(--leaf-dim); }
.prose a:hover{ border-color:var(--leaf); }
/* fills the column by default (many of the catalog's own reference/archival
   photos are small originals that used to sit tiny and padded in a sea of
   empty space) — a floated image (below) is the deliberate exception. */
.prose img{ display:block; width:100%; height:auto; margin:2rem 0; border:1px solid var(--t-line-strong); }
/* an image the admin has set to float (image hover overlay → Float left/right,
   in the Site pages editor) — text wraps around it instead of stacking below.
   Half the column plus a little, so a line or two of text still wraps beside
   it rather than one lonely word. */
.prose img.is-float-left{ float:left; width:52%; max-width:340px; margin:.3rem 1.8rem 1.2rem 0; }
.prose img.is-float-right{ float:right; width:52%; max-width:340px; margin:.3rem 0 1.2rem 1.8rem; }
/* an image placed by dragging it in the editor: still one of the floats
   above, but pushed in from its edge by an inline margin (a % of the column,
   so it scales with it) — a negative one makes it stick out of the text's
   frame, so it's lifted above whatever it overlaps. On a phone there's no
   room for that: it goes back against its edge. */
.prose img.is-placed{ position:relative; z-index:2; }
@media (max-width:700px){
  .prose img.is-placed.is-float-left{ margin-left:0 !important; }
  .prose img.is-placed.is-float-right{ margin-right:0 !important; }
}
/* the space between a picture and the text next to it = that text's own line
   spacing (the gap between its lines), so at spacing 1 the picture sits as
   close as the lines do to each other. js/app.js imageGaps() measures it and
   hands it over as --img-gap; it wins over the older fixed margins (inline
   ones included). A picture on a line of its own takes it from the text
   above it, and the paragraph gaps around that line are dropped so they
   don't add to it. .6em is only the fallback before the script has run. */
.prose img{ margin-top:var(--img-gap,.6em) !important; margin-bottom:var(--img-gap,.6em) !important; }
.prose img.is-float-left{ margin-right:var(--img-gap-x,.6em) !important; }
.prose img.is-float-right{ margin-left:var(--img-gap-x,.6em) !important; }
.prose .is-imgOnly{ margin-top:0 !important; margin-bottom:0 !important; }
.prose .is-beforeImg{ margin-bottom:0 !important; }
.prose .is-afterImg{ margin-top:0 !important; }
.prose .legacy-strip img{ margin:0 !important; }
/* invisible room kept in a text block for a picture from the next column
   that reaches over it (js/app.js wrapOverlaps) — never clickable/typeable */
.wrapGhost{ display:block; pointer-events:none; user-select:none; margin:0; padding:0; }
.homeCol > .wrapGhost + :not(.wrapGhost){ margin-top:0; } /* the real first child is still the first one */
.prose::after{ content:""; display:table; clear:both; }
.prose ul{ margin:0 0 1.4em; padding-left:1.1em; list-style:none; }
.prose ul li{ position:relative; padding-left:.2em; margin-bottom:.4em; }
.prose ul li::before{ content:"—"; position:absolute; left:-1.1em; color:var(--leaf); }
/* the editor's List ▾ picker: dashes (the site's own, a plain <ul>), dots, or numbers */
.prose ul.list-dots li::before{ content:"•"; left:-.95em; font-weight:700; }
.prose ol{ margin:0 0 1.4em; padding-left:1.6em; list-style:decimal; }
.prose ol li{ padding-left:.3em; margin-bottom:.4em; }
.prose ol li::marker{ color:var(--leaf); font-weight:600; }
.prose table{ width:100%; border-collapse:collapse; margin:1.6rem 0; }
.prose td,.prose th{ padding:.7rem .8rem; border-bottom:1px solid var(--t-line); vertical-align:top; text-align:left; }
.prose hr{ border:0; border-top:1px solid var(--t-line); margin:2.6rem 0; }
.prose .legacy-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; margin:1.8rem 0; }
.prose .legacy-strip li{ padding:0; margin:0; }
.prose .legacy-strip li::before{ display:none; }
.prose .legacy-strip img{ margin:0; width:100%; height:120px; object-fit:cover; }
.prose .legacy-slideshow{ margin:1.8rem 0; }
.prose iframe{ max-width:100%; }

/* text pasted from Word/e-mail often arrives wrapped in a heading
   (<h3><p>…</p></h3>, <h3><img></h3>): those wrappers are not real headings
   and must not add heading margins between the lines */
.prose h3:has(> p), .prose h3:has(> img), .prose h3:has(> div),
.prose h4:has(> p), .prose h4:has(> img), .prose h4:has(> div){ margin-top:0; margin-bottom:0; }
/* old pictures with no size set in the admin: natural size (never blown up
   past their pixels), centred, and never taller than most of the screen */
.prose img:not([style*="width"]):not(.is-float-left):not(.is-float-right){
  width:auto; max-width:100%; max-height:72vh; margin-left:auto; margin-right:auto;
}
/* Home: the sunflowers picture (a 325px-wide scan) was stretched to the full
   column. Shown at 60%, centred, only while its admin width is still 100% —
   resizing it in the admin takes over automatically */
.homeCol img[src*="8d4a5fc606dcd52db46c243263a8c822"][style*="width: 100%"]{
  width:60% !important; margin-left:auto !important; margin-right:auto !important;
}
/* line spacing chosen with the admin's Spacing picker (admin/admin.js
   setLineHeightClass) — everything else is 1.0; any inline line-height is
   dropped as leftover (js/text-repair.js) */
:root .lh-0-7{ line-height:.7; }  :root .lh-0-8{ line-height:.8; }  :root .lh-0-9{ line-height:.9; }
:root .lh-1-3{ line-height:1.3; } :root .lh-1-5{ line-height:1.5; } :root .lh-1-85{ line-height:1.85; }
:root .lh-2-2{ line-height:2.2; }
/* pictures in the page text open full size in the lightbox (js/app.js) */
html:not(.is-edit) .prose img{ cursor:zoom-in; }
/* Resources (bottom of Russian & Soviet Impressionism): each book starts
   below the previous cover */
.resourcesSec .prose h3{ clear:both; }

/* ---------- 19. PAGE HEADS ---------- */
.phead{ padding-top:calc(var(--navh) + clamp(4rem,11vw,9rem)); padding-bottom:clamp(2rem,5vw,4rem); }
.phead__title{ font-family:var(--serif); font-size:var(--step-4); line-height:.98; letter-spacing:-.03em; }
.phead__sub{ max-width:60ch; margin-top:1.2rem; color:var(--t-fg-3); font-size:1rem; }
/* Monthly Auctions' header shares the page's edge-to-edge column (see
   .wrap--bleed) and, on request, sits a line lower under the title than the
   default gap above gives it */
.wrap--bleed .phead__sub{ margin-top:2.8rem; max-width:none; }

/* ---------- BANNERS (Collection + Artists headers) ----------
   Four paintings behind the page title that overlap in a slow crossfade
   (css only, no script). Kept quiet on purpose: the whole layer sits at low
   opacity so the title, the intro and the filter bar below stay the focus;
   and it is symmetric — every image is centred, and the edges fade to the
   page's cream by the same amount on the left and the right (plus a fade
   into the content at the bottom), so nothing looks cropped or lopsided.
   Cycle = 4 slides x 7s; each one fades in over ~2s while the previous one
   fades out over the same ~2s, drifting a few percent from a slight zoom to
   rest, with ease-in-out on every step. Nothing moves for visitors who ask
   for reduced motion (they get the first painting, still). */
.phead--banner{ position:relative; isolation:isolate; overflow:hidden; }
.phead--banner > .wrap{ position:relative; z-index:1; }
.banner{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.3; }
.banner__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:0; transform:scale(1.05); will-change:opacity,transform;
  animation:bannerCross 28s ease-in-out infinite; animation-delay:calc(var(--i) * 7s - 1.6s);
}
.banner::after{ /* symmetric edge fade + fade into the content */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--t-bg) 0%, rgba(240,239,211,0) 24%, rgba(240,239,211,0) 76%, var(--t-bg) 100%),
    linear-gradient(to bottom, rgba(240,239,211,0) 55%, var(--t-bg) 100%);
}
@keyframes bannerCross{
  0%   { opacity:0; transform:scale(1.05); }
  8%   { opacity:1; }
  25%  { opacity:1; }
  33%  { opacity:0; transform:scale(1); }
  100% { opacity:0; transform:scale(1.05); }
}
@media (prefers-reduced-motion:reduce){
  .banner__img{ animation:none; transform:none; }
  .banner__img:first-child{ opacity:1; }
}

/* ---------- 20. removed ---------- */
/* THE ROOM (WebGL 3D gallery walkthrough) was already dead code — nothing
   in app.js or index.html renders a .room element anymore. */

/* ---------- 21. LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:940; background:rgba(6,5,4,.97); color:#f0efd3;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease),visibility .45s;
  display:grid; place-items:center; padding:clamp(2.5rem,7vw,5rem);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.lightbox__frame{ overflow:hidden; max-height:76vh; cursor:grab; }
.lightbox__frame.is-grab{ cursor:grabbing; }
.lightbox__frame img{ max-height:76vh; width:auto; transition:transform .18s linear; transform-origin:center; box-shadow:0 50px 90px -50px #000; }
.lightbox__cap{ text-align:center; }
.lightbox__cap .t{ font-family:var(--serif); font-style:italic; font-size:1.1rem; }
.lightbox__cap .m{ font:400 .68rem/1.7 var(--mono); color:#8d8578; letter-spacing:.08em; }
.lightbox__close{ position:absolute; top:1.2rem; right:1.6rem; font-size:2rem; line-height:1; color:#cfc7b8; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.6rem; color:#8d8578; padding:1rem; transition:color .3s; }
.lightbox__nav:hover{ color:var(--leaf); }
.lightbox__nav--prev{ left:.4rem; } .lightbox__nav--next{ right:.4rem; }
.lightbox__hint{ position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); font:400 .6rem/1 var(--mono); letter-spacing:.14em; color:var(--smoke-2); }

/* ---------- 22. FOOTER ----------
   The original site's footer was three plain cells (newsletter, social
   icons, address) sitting directly on its dark olive page background.
   Same three things plus our own "Read" card, same olive tone — just a
   soft 25%-strength wash instead of a flat block, and the cells are
   rounded cream cards instead of bare table cells. */
.foot{ margin-top:clamp(1.5rem,3vw,2.5rem); }
/* the footer is built from the page's own colours, the same three the rest of
   the site uses: the sage-green wash of the home page's sections (#C8D197 at
   50% over the cream — .sec--wash), cream cards, and the maroon of the nav
   bar — a maroon rule on top and a maroon strip at the bottom mirror the
   header's maroon bar, so the page is bookended by the same colour. (It used
   to be a greyish olive that appears nowhere else.) */
.foot__wash{
  background:
    linear-gradient(rgba(200,209,151,.5), rgba(200,209,151,.5)),
    var(--t-bg);
  border-top:3px solid var(--t-navbg);
  padding-block:clamp(1.5rem,3vw,2.2rem);
}
.foot__grid{
  /* as wide as the home page's card rows (.wrap--wide), so the four cards
     cover the wash instead of huddling in a fixed 1000px column */
  max-width:96%; margin:0 auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;
  /* stretch: every card in a row is the same height, so the row reads as one
     tidy band */
  align-items:stretch;
}
/* everything inside a card is centred in its frame — across AND up/down, so
   in a card that's taller than its content (they all match the tallest) the
   label + content sit in the middle of the frame, not stuck to the top. */
.foot__card{
  background:var(--t-bg-warm); border:1px solid var(--t-line); border-radius:12px;
  padding:1.6rem 1.6rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transition:box-shadow .3s,border-color .3s;
}
.foot__card:hover{ border-color:var(--t-line-strong); box-shadow:0 14px 32px -22px rgba(0,0,0,.28); }
.foot__label{ font:600 .6rem/1.5 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--t-leaf); margin-bottom:1rem; } /* maroon, like the .eyebrow labels elsewhere */
.nlform{ display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:260px; }
.nlform input{
  width:100%; background:var(--t-bg); border:1px solid var(--t-line); border-radius:99px;
  padding:.75rem 1.2rem; text-align:center; color:var(--t-fg);
}
.nlform input::placeholder{ color:var(--t-fg-4); }
.nlform input:focus{ outline:none; border-color:var(--leaf); }
.nlform .btn{ width:100%; }
.foot__social{ display:flex; justify-content:center; gap:.8rem; }
/* real brand marks in their own brand colour (simple-icons, CC0 — same
   shapes Facebook/Instagram use everywhere) instead of a hand-drawn
   monochrome outline, so the badges read as the actual platforms rather
   than generic icon-font glyphs. */
.foot__socialIcon{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  color:#fff; transition:transform .25s,box-shadow .25s; box-shadow:0 4px 14px -6px rgba(0,0,0,.4);
}
.foot__socialIcon:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(0,0,0,.45); }
.foot__socialIcon svg{ width:20px; height:20px; }
.foot__socialIcon--fb{ background:#1877f2; }
.foot__socialIcon--ig{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
/* the wordmark below matches the nav's own italic serif brand treatment
   (see .nav__brandSig) instead of a plain bold heading, so the footer's
   name reads as the same brand as the header's. */
.foot__brandName{ font:italic 400 clamp(1.05rem,.95rem + .5vw,1.3rem)/1.3 var(--serif); letter-spacing:.02em; color:var(--t-fg); }
/* "Thomas Kearns" on one line, "McCarthey Gallery" (maroon) on the next — a deliberate two-line name instead of wrapping wherever the card happens to run out */
.foot__brandName em{ display:block; color:var(--leaf); font-style:italic; }
.foot__meta{ margin-top:.7rem; font-size:.86rem; color:var(--t-fg-3); line-height:1.9; }
.foot__meta a{ display:inline; color:var(--t-leaf); }
/* the bottom strip: the nav bar's maroon, running the full width like the bar does */
.foot__base{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; justify-content:center; text-align:center;
  padding:1.1rem var(--gut);
  background:var(--t-navbg);
  font:400 .66rem/1.4 var(--sans); letter-spacing:.08em; color:var(--nav-fg,#e0e0d6);
}
.foot__credit{ opacity:.75; }

/* ---------- 23. FORMS ---------- */
.form{ display:grid; gap:1.1rem; max-width:640px; }
.field label{ display:block; font:600 .6rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--t-fg-4); margin-bottom:.55rem; }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:1px solid var(--t-line); border-radius:2px;
  padding:.9rem 1rem; color:var(--t-fg); transition:border-color .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--leaf); }
.field textarea{ min-height:140px; resize:vertical; }
.form__note{ font-size:.8rem; color:var(--t-fg-4); }
.form__ok{ border:1px solid var(--leaf); background:var(--leaf-dim); padding:1rem 1.2rem; font-size:.9rem; color:var(--t-fg); }

/* ---------- 24. MISC ---------- */
.empty{ padding:4rem 0; text-align:center; color:var(--t-fg-3); }
.more{ display:flex; justify-content:center; padding-top:3rem; }
.tagrow{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.tag{ font:600 .58rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--t-fg-2); border:1px solid var(--t-line); border-radius:99px; padding:.42rem .75rem; transition:.3s; }
.tag:hover{ border-color:var(--leaf); color:var(--t-leaf); }
.crumb{ font:400 .64rem/1 var(--mono); letter-spacing:.14em; color:var(--t-fg-4); text-transform:uppercase; margin-bottom:1.2rem; }
.crumb a:hover{ color:var(--t-leaf); }
.split2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.2vw,2rem); align-items:center; }
@media (max-width:900px){ .split2{ grid-template-columns:1fr; } }

/* subtle colour seam between the "Monthly Auction" / "From the Collection"
   columns — same idea as the original site's near-invisible column border,
   just given a hairline of the gallery's own maroon so it actually reads
   as a divider instead of disappearing into the cream background. */
.split2--divider{ align-items:stretch; }
/* both cards are as tall as the taller one; their headings line up at the top */
.split2--divider > .infoCard{ display:flex; flex-direction:column; }
/* "From the Collection": the works sit in a grid (2 across on a wide card,
   1 on a phone) rather than one long column, so this card doesn't end up
   three times as tall as the Monthly Auction next to it. Each picture keeps
   the same fixed aspect ratio as every other card in the site (not stretched
   to fill whatever height is left) — a previous version stretched the grid's
   rows to match the Monthly Auction column's height exactly, but that meant
   adding or removing an auction entry changed the auction column's height
   and, with it, warped every picture in this grid. Any leftover height below
   a shorter grid is just blank card background now, same colour as the rest
   of the card, instead of distorted photos. A lone last work is still
   centred instead of left in a corner. */
.featuredGrid{
  flex:1 1 auto; display:grid; grid-auto-rows:min-content; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,165px),1fr)); gap:1.8rem 1.4rem;
}
.featuredGrid .card{ margin:0; display:flex; flex-direction:column; }
@media (min-width:520px){
  .featuredGrid > .card:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; width:calc(50% - .7rem); }
}
/* the home page's welcome row: match the original's layout, where the
   photo fills the same height as the text beside it instead of floating
   centred with green showing above and below it */
.split2--stretch{ align-items:stretch; }
/* two stacked crossfade boxes (figures / landscapes — see WELCOME_SLIDES_*
   in app.js) instead of one box stretched to the text column's full
   height — that stretch was cropping tall portrait paintings down to an
   unrecognizable sliver. Each box keeps a natural aspect-ratio; together
   they roughly match the text card's height without distorting either. */
.welcomeGrid{ display:grid; grid-template-rows:1fr; height:100%; }
.welcomeGrid .fadeShow{ aspect-ratio:auto; min-height:180px; }
/* the two home cards stack a little earlier than other two-column rows: between
   900 and 1000px each card is too narrow to hold its content properly */
@media (max-width:1000px){ .split2--divider{ grid-template-columns:1fr; } }
@media (min-width:1001px){
  .split2--divider{ position:relative; }
  .split2--divider::before{
    content:""; position:absolute; top:.2em; bottom:.2em; left:50%;
    width:1px; transform:translateX(-50%);
    background:linear-gradient(to bottom, transparent, var(--t-leaf) 15%, var(--t-leaf) 85%, transparent);
    opacity:.32;
  }
}
.figure{ position:relative; }
.figure figcaption{ margin-top:.8rem; font-size:.82rem; color:var(--t-fg-3); font-style:italic; }
.parallax{ will-change:transform; }

/* slow crossfade picture rotator — beside the home "Welcome" copy. The
   incoming frame is stacked above the outgoing one (z-index) so the two
   opacity transitions genuinely dissolve into each other instead of both
   racing at the same layer. */
.fadeShow{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--t-bg-2); border:1px solid var(--t-line-strong); }
.fadeShow__img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
/* true crossfade: the incoming frame dissolves in above the outgoing one
   while both slowly settle from a slight zoom — same slow-motion feel as
   the hero's Ken Burns, just gentler, so the swap never reads as a hard cut.
   Specificity note: both #welcomeShow and #aboutShow carry data-reveal="mask"
   for their one-time scroll-in, and [data-reveal="mask"] > *:not(figcaption)
   sets its own `transition` shorthand on these same elements — at higher
   specificity than a plain .fadeShow__img rule, so it silently replaced this
   transition instead of adding to it. ".fadeShow > .fadeShow__img" outranks
   it without touching that shared reveal rule. */
.fadeShow > .fadeShow__img{
  opacity:0; transform:scale(1.045);
  transition:opacity 2.6s var(--ease-soft), transform 7s var(--ease-soft);
}
.fadeShow > .fadeShow__img.is-live{ z-index:1; opacity:1; transform:scale(1); }
/* wide banner variant — the showroom slideshow at the top of "The Gallery".
   object-fit:contain (not cover) so nothing is ever cropped: photos of very
   different shapes (a wide interior vs. a near-square close-up) all show in
   full, matted on the gallery's own dark ground like a passe-partout. */
.aboutShow{ aspect-ratio:3/2; }
.aboutShow .fadeShow__img{ object-fit:contain; }

/* Stephen's portrait — plain framed photo, same as .card__frame. */
.staff__row{ align-items:center; }
.staff__media{ display:block; max-width:320px; }
.staff__frame{ aspect-ratio:auto; }
.staff__img{ width:100%; height:auto; display:block; }
@media (max-width:900px){ .staff__media{ max-width:220px; margin:0 auto; } }