/* ============================================================
   Foxfire Arts — V04 "painting as backdrop" (dark glass)
   Loaded last, only on inner pages (<body class="glass-page">).
   The home page is untouched. Remove this file + js/frosty-glass.js
   + the glass-bg block to get the previous design back.
   ============================================================ */

/* ---------- the backdrop: one of Réka's paintings, blurred, split B&W | colour ---------- */
.glass-page .site-shell { background: #20261f; }
.glass-bg {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100dvh;
  margin-bottom: -100vh; margin-bottom: -100dvh;
  overflow: hidden; flex: none;
}
.glass-page .site-shell { --split: 2%; }   /* inner pages start in the left margin, clear of the logo */
.glass-bg-l {
  position: absolute; inset: -30px;
  background-size: cover; background-position: 50% 50%;
  filter: blur(9px) brightness(.72) saturate(1.2);
  transform: scale(1.04);
}
.glass-bg-gray { filter: blur(9px) brightness(.66) grayscale(1); }
.glass-bg-color { clip-path: inset(0 0 0 calc(var(--split) + 30px)); }
.glass-bg-line {
  position: absolute; top: 0; bottom: 0; left: var(--split);
  width: 22px; margin-left: -11px; z-index: 2; cursor: ew-resize; touch-action: none;
}
.glass-bg-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.85); box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.glass-bg-line i {
  position: absolute; left: 50%; top: 88%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* everything else sits above the backdrop; empty areas let drags reach the divider */
.glass-page .frosty-main { position: relative; z-index: 2; color: #f2efe2; }

/* reveal once the script has arranged the page (falls back on its own after 1.2s) */
.glass-page:not(.glass-ready) .frosty-main { opacity: 0; animation: glassReveal .01s 1.2s forwards; }
.glass-page.glass-ready .frosty-main { opacity: 1; transition: opacity .25s ease; }
@keyframes glassReveal { to { opacity: 1; } }

/* ---------- header: transparent over the painting, dark glass once scrolled ---------- */
.glass-page .frosty-shell > .frosty-nav.on-hero {
  position: sticky; top: 0; left: auto; right: auto;
  background: linear-gradient(rgba(12,16,12,.5), rgba(12,16,12,0));
  transition: background .3s ease, box-shadow .3s ease;
}
.glass-page .frosty-shell > .frosty-nav.on-hero.is-scrolled {
  background: rgba(22,28,20,.62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.glass-page .frosty-exhibition.current-pill { background: var(--gold); color: #fff; }

/* ---------- glass pieces ---------- */
.glass-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap; margin: 6px 0 24px;
}
.glass-title, .glass-card, .glass-side {
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.glass-title {
  background: rgba(24,30,22,.34);
  border: 1px solid rgba(255,255,255,.34);
  padding: 18px 26px; max-width: 560px;
}
.glass-title .page-heading {
  font-family: var(--font-display); text-transform: none; letter-spacing: 0;
  font-size: clamp(26px, 2.6vw, 32px); font-weight: 600;
  color: #fff; margin: 0 0 6px; flex: none;
}
.glass-title .page-subheading { color: #f2efe2; margin: 0; font-size: 15px; line-height: 1.5; min-height: 0; text-align: left; max-width: none; }
.glass-title .contact-intro-line2 { color: #f2efe2; margin: 6px 0 0; font-weight: 600; }
.glass-side, .glass-card {
  background: rgba(22,28,20,.48);
  border: 1px solid rgba(255,255,255,.2);
}
.glass-side { padding: 12px 18px 10px; }
.glass-card { padding: clamp(20px, 2.4vw, 32px); color: #f2efe2; }

/* Bio / Studio / Journey tabs: a small glass pill that still sticks under the header */
.glass-page .frosty-subtabs {
  background: rgba(22,28,20,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
  padding: 10px 18px; display: inline-flex; margin-bottom: 0;
  min-height: 0;
}
.glass-page .frosty-subtabs a { color: rgba(255,255,255,.85); }
.glass-page .frosty-subtabs a.current, .glass-page .frosty-subtabs a:hover { color: #f4c9a0; }
.glass-page .frosty-subtabs { top: calc(var(--nav-h, 73px) + 8px); }

/* ---------- gallery pages ---------- */
.glass-page .gallery-head { margin-bottom: 0; }
.glass-page .gallery-subnav-row { margin: 0; }
.glass-page .gallery-cat-tabs-thumbs { border-bottom: 0; padding-bottom: 0; }
.glass-page .gallery-cat-tabs-thumbs .thumb-tab span { color: rgba(255,255,255,.9); }
.glass-page .gallery-cat-tabs-thumbs .thumb-tab.current span { color: #f4c9a0; }
.glass-page .gallery-cat-tabs-thumbs .thumb-tab.current img { outline-color: #f4c9a0; }
@media (hover: hover) {
  .glass-page .gallery-cat-tabs-thumbs .thumb-tab:not(.current):hover img { outline-color: rgba(244,201,160,.5); }
}
.glass-page .gallery-cat-tabs-text a { color: rgba(255,255,255,.85); }
.glass-page .gallery-cat-tabs-text a.current { color: #f4c9a0; }
.glass-page .carousel-frame img {
  border: 3px solid #fff; border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
  box-sizing: border-box;
}
.glass-page .carousel-item-caption .cap-title,
.glass-page .carousel-caption h2 { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.glass-page .carousel-item-caption .cap-meta,
.glass-page .carousel-caption p,
.glass-page .carousel-touch-hint { color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.glass-page .carousel-arrow { color: rgba(255,255,255,.8); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.glass-page .carousel-arrow:hover:not(:disabled) { color: #fff; }
.glass-page .carousel-arrow:disabled { color: rgba(255,255,255,.3); }

/* ---------- text inside dark glass ---------- */
.glass-card h2, .glass-card h3 { color: #fff; }
.glass-card p, .glass-card li, .glass-card td, .glass-card label, .glass-card cite { color: #f2efe2; }
.glass-card a:not(.btn) { color: #f4c9a0; }
.glass-card .page-subheading { color: rgba(255,255,255,.85); }

/* Bio */
.glass-page .bio-text { color: #f4f1e6; margin-top: 0; }
.glass-page .bio-closing { color: rgba(255,255,255,.82); }
.glass-page .bio-quote { border-color: #f4c9a0; }
.glass-page .bio-quote p { color: #fff; }
.glass-page .bio-quote cite { color: #f4c9a0; }
.glass-page .bio-photo-col .bio-portrait-img { border: 3px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.4); }

/* Studio */
.glass-page .studio-text h2 { color: #fff; }
.glass-page .studio-text p { color: #f2efe2; }
.glass-page .studio-next { color: #f4c9a0; }
.glass-page .studio-photo { background: transparent; box-shadow: none; }
.glass-page .studio-photo img { border: 3px solid #fff; border-radius: 10px; box-shadow: 0 12px 26px rgba(0,0,0,.45); }

/* Journey — thinner white frame than the mockup */
.glass-page .journey-era-age { color: #f4c9a0; }
.glass-page .journey-era-title { color: #fff; }
.glass-page .journey-era-desc { color: rgba(255,255,255,.8); }
.glass-page .journey-card-frame {
  border: 2px solid #fff; background: rgba(255,255,255,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.glass-page .journey-scroll-btn { color: rgba(255,255,255,.75); }
.glass-page .journey-scroll-btn:hover:not(:disabled) { color: #fff; }
.glass-page .journey-scroll-btn:disabled { color: rgba(255,255,255,.25); }

/* Contact */
.glass-page .form-field label { color: #fff; }
.glass-page .form-field input, .glass-page .form-field textarea {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); color: #fff;
}
.glass-page .form-field input:focus, .glass-page .form-field textarea:focus { border-color: #f4c9a0; box-shadow: 0 0 0 3px rgba(244,201,160,.25); }
.glass-page .required-star { color: #f4c9a0; }
.glass-page .note-box, .glass-page .note-box span { color: rgba(255,255,255,.8); background: transparent; border-color: rgba(255,255,255,.25); }
.glass-page .contact-giraffe { border: 3px solid #fff; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.45); }

/* Donate */
.glass-page .donate-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.glass-page .donate-card p { color: #f2efe2; }
.glass-page .donate-goal-label, .glass-page .donate-option-label { color: #f4c9a0 !important; }
.glass-page .donate-layout .donate-divider span { background: transparent; color: rgba(255,255,255,.7); }
.glass-page .donate-divider::before, .glass-page .donate-divider::after { background: rgba(255,255,255,.25); }
.glass-page .donate-share { border-color: rgba(255,255,255,.2); }
.glass-page .btn-share { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.glass-page .btn-share:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.glass-page .donate-photo img { border: 3px solid #fff; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.45); }

/* Exhibition */
.glass-page .exhibition-banner { background: transparent; border: 0; box-shadow: none; }
.glass-page .exhibition-date { color: #f4c9a0; }
.glass-page .exhibition-details h2 { color: #fff; }
.glass-page .exhibition-details p, .glass-page .exh-hours td { color: #f2efe2; }
.glass-page .exh-hours-note { color: rgba(255,255,255,.75); }
.glass-page .venue-link { color: #f4c9a0; }
.glass-page .venue-pin path, .glass-page .venue-pin ellipse { fill: #f4c9a0; }
.glass-page .exhibition-flyer img { border: 3px solid #fff; box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.glass-page .exhibition-flyer figcaption { color: rgba(255,255,255,.75); }

/* Thank you */
.glass-page .thankyou-card { background: transparent; border: 0; box-shadow: none; }
.glass-page .thankyou-card p { color: #f2efe2; }

/* Footer: keep the papyrus strip, above the backdrop */
.glass-page .site-footer { position: relative; z-index: 3; }

/* ---------- smaller screens ---------- */
@media (max-width: 780px) {
  .glass-top { flex-direction: column; align-items: stretch; margin-bottom: 18px; }
  .glass-title { max-width: none; padding: 14px 18px; }
  .glass-side { padding: 10px 12px 8px; overflow-x: auto; }
  .glass-card { padding: 18px 16px; border-radius: 12px; }
  .glass-bg-line i { top: 92%; }
}
.glass-bg-l { transition: opacity .26s ease; }
.glass-bg.is-swapping .glass-bg-l { opacity: 0; }

/* ---------- V04 fixes after first look ---------- */
.glass-page .frosty-subtabs {
  width: max-content; max-width: 100%;
  margin-top: 0; margin-bottom: 14px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.2);
}
.glass-top { flex-wrap: nowrap; align-items: stretch; }
.glass-title { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center; }
.glass-side { flex: 0 1 auto; margin-left: auto; display: flex; align-items: center; }
.glass-side .gallery-subnav-row { margin: 0; flex-wrap: nowrap; }
.glass-side .gallery-cat-tabs-thumbs { gap: clamp(6px, 1vw, 14px); flex-wrap: nowrap; }
.glass-side .gallery-cat-tabs-thumbs .thumb-tab { width: 84px; }
.glass-side .gallery-cat-tabs-thumbs .thumb-tab img { width: 62px; height: 62px; }
.glass-page .page-heading-row, .glass-title .page-heading { flex-basis: auto; }
.glass-title .page-heading.donate-heading, .glass-title .page-subheading.donate-heading { text-align: left; margin-left: 0; margin-right: 0; }
.glass-page .donate-goal { color: #f2efe2 !important; }
.glass-page .donate-layout .donate-options { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.glass-page .exhibition-flyer { background: transparent; padding: 0; }
.glass-page .exh-hours { width: auto !important; }
@media (max-width: 1100px) {
  .glass-top { flex-wrap: wrap; }
  .glass-side { margin-left: 0; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 780px) {
  .glass-top { flex-direction: column; }
  .glass-side .gallery-cat-tabs-thumbs .thumb-tab { width: 70px; }
  .glass-side .gallery-cat-tabs-thumbs .thumb-tab img { width: 52px; height: 52px; }
}
.glass-page .exh-hours { justify-self: start; }
/* no papyrus boxes behind the paintings: they sit straight on the backdrop */
.glass-page { --carousel-bg: transparent; }
.glass-page .journey-card-frame { background: rgba(255,255,255,.08); }

/* ================= V19: full-screen gallery pages (body.glass-immersive) ================= */
.glass-immersive { --imm-pad: clamp(20px, 3.5vw, 48px); --imm-col: clamp(210px, 19vw, 260px); --imm-bar: 96px; --imm-foot: 34px; }
.glass-immersive .glass-bg-l { inset: 0; transform: none; filter: none; background: none; }
.glass-immersive .glass-bg-gray { filter: grayscale(1) brightness(.9); }
.glass-immersive .glass-bg-color { clip-path: inset(0 0 0 var(--split)); }
.imm-blur { position: absolute; inset: -40px; background-size: cover; background-position: 50% 50%; filter: blur(24px) brightness(.6) saturate(1.1); }
/* the painting: to the right of the left column, clear of title / caption / thumbnails */
.imm-img {
  position: absolute;
  left: calc(var(--imm-pad) + var(--imm-col) + 70px); right: calc(var(--imm-pad) + 44px);
  top: calc(var(--nav-h, 73px) + 18px); bottom: calc(var(--imm-foot) + var(--imm-bar) + 34px);
  background: no-repeat 50% 50% / contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
  transition: opacity .18s ease;
}
.glass-bg.imm-swap .imm-img { opacity: 0; }
.glass-immersive .glass-bg-line i { top: 44%; }

/* the page itself is exactly one screen: header + stage + footer */
.glass-immersive .frosty-main.content {
  padding: 0; --content-pad-x: 0px; --content-pad-y: 0px;
  height: calc(100vh - var(--nav-h, 73px)); height: calc(100dvh - var(--nav-h, 73px));
  display: flex; flex-direction: column; opacity: 1; animation: none;
}
.glass-immersive .site-footer { margin: auto 0 0; }
.glass-immersive .gallery-head { position: absolute; inset: 0 0 var(--imm-foot) 0; margin: 0; pointer-events: none; }
.glass-immersive .gallery-head > * { pointer-events: auto; }
/* the site's own carousel keeps running off-screen (lightbox, NEW tags, gallery switching) */
.glass-immersive .carousel, .glass-immersive .carousel-caption, .glass-immersive .carousel-mobile-nav, .glass-immersive .carousel-touch-hint {
  position: fixed !important; left: -12000px !important; top: 0 !important; width: 1200px !important; opacity: 0 !important; pointer-events: none !important;
}

/* left column: title, galleries, caption */
.imm-left {
  position: absolute; left: var(--imm-pad); top: 18px; bottom: calc(var(--imm-bar) + 34px);
  width: var(--imm-col); display: flex; flex-direction: column; gap: 14px; pointer-events: none;
}
.imm-left > * { pointer-events: auto; }
.imm-title { max-width: none; padding: 16px 20px; }
.imm-title .page-heading { font-size: clamp(22px, 2vw, 28px); }
.imm-title .page-subheading { font-size: 13.5px; }
.imm-cats { padding: 10px 12px; margin: 0; display: block; overflow-y: auto; min-height: 0; flex: 0 1 auto; }
.imm-cats .gallery-subnav-row { display: block; margin: 0; }
.imm-cats .gallery-cat-tabs-thumbs { flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 0; border: 0; }
.imm-cats .gallery-cat-tabs-thumbs .thumb-tab { flex-direction: row; width: auto; gap: 10px; align-items: center; padding: 3px 4px; border-radius: 8px; }
.imm-cats .gallery-cat-tabs-thumbs .thumb-tab img { width: 34px; height: 34px; border-radius: 7px; outline-width: 2px; outline-offset: 2px; }
.imm-cats .gallery-cat-tabs-thumbs .thumb-tab .ti { position: relative; display: block; line-height: 0; }
.imm-cats .gallery-cat-tabs-thumbs .thumb-tab span:not(.ti) { font-size: 11.5px; text-align: left; }
.imm-cats .gallery-cat-tabs-thumbs .thumb-tab.current { background: rgba(244,201,160,.12); }
@media (hover: hover) { .imm-cats .gallery-cat-tabs-thumbs .thumb-tab:hover { background: rgba(255,255,255,.08); } .imm-cats .gallery-cat-tabs-thumbs .thumb-tab:hover img { transform: none; } }
.imm-cap { margin-top: auto; padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; }
.imm-cap b { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; }
.imm-cap span { font-size: 12.5px; color: #f2efe2; }
.imm-cap b:empty + span:empty { display: none; }

/* click area over the painting + arrows beside it */
.imm-stage {
  position: absolute;
  left: calc(var(--imm-pad) + var(--imm-col) + 70px); right: calc(var(--imm-pad) + 44px);
  top: 18px; bottom: calc(var(--imm-bar) + 34px);
}
.imm-hit { position: absolute; inset: 0; background: transparent; border: 0; cursor: zoom-in; }
.imm-inline { display: none; }
.imm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(22,28,20,.45); color: #fff; font-size: 18px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s;
}
.imm-arrow:hover { background: rgba(22,28,20,.75); }
.imm-prev { left: -58px; } .imm-next { right: -52px; }

/* thumbnail strip */
.imm-thumbs {
  position: absolute; left: var(--imm-pad); right: var(--imm-pad); bottom: 16px; height: var(--imm-bar);
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; overflow-x: auto; scrollbar-width: none;
  background: rgba(22,28,20,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
}
.imm-thumbs::-webkit-scrollbar { display: none; }
.imm-th { flex: none; position: relative; width: 74px; height: 74px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,.06); outline: 3px solid transparent; outline-offset: -3px; transition: transform .2s, outline-color .2s; }
.imm-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imm-th.on { outline-color: #f4c9a0; }
@media (hover: hover) { .imm-th:hover { transform: translateY(-2px); } }
.imm-new { position: absolute; left: 4px; top: 4px; background: var(--gold); color: #fff; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 1px 5px; border-radius: 6px; }

/* short windows: tighter left column */
@media (max-height: 760px) {
  .imm-title { padding: 12px 16px; } .imm-title .page-subheading { font-size: 12.5px; }
  .imm-cats .gallery-cat-tabs-thumbs .thumb-tab img { width: 28px; height: 28px; }
  .imm-cats .gallery-cat-tabs-thumbs { gap: 2px; }
}

/* phones / narrow tablets: everything stacks, the painting shows inline */
@media (max-width: 900px) {
  .glass-immersive .frosty-main.content { height: auto; min-height: calc(100dvh - var(--nav-h, 73px)); padding: 14px 14px 0; }
  .glass-immersive .gallery-head { position: relative; inset: auto; pointer-events: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .imm-left { position: static; width: auto; display: contents; }
  .imm-title { order: 1; } .imm-cats { order: 2; overflow-x: auto; } .imm-stage { order: 3; } .imm-cap { order: 4; margin: 0; } .imm-thumbs { order: 5; }
  .imm-cats .gallery-cat-tabs-thumbs { flex-direction: row; }
  .imm-stage { position: relative; inset: auto; }
  .imm-inline { display: block; width: 100%; max-height: 60vh; object-fit: contain; border: 3px solid #fff; border-radius: 10px; box-sizing: border-box; background: rgba(0,0,0,.2); }
  .imm-hit { display: none; }
  .imm-arrow { width: 38px; height: 38px; }
  .imm-prev { left: 6px; } .imm-next { right: 6px; }
  .imm-thumbs { position: relative; inset: auto; height: auto; }
  .imm-th { width: 60px; height: 60px; }
  .glass-immersive .imm-img { display: none; }
  .glass-immersive .site-footer { margin-top: 12px; }
}
/* win over the gallery bar's own "seven icons" spacing rules */
.glass-immersive .imm-cats .gallery-cat-tabs-thumbs { gap: 3px !important; justify-content: flex-start; }
@media (min-width: 681px) { .glass-immersive .imm-cats .gallery-cat-tabs-thumbs { display: flex !important; } }
.glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab { width: auto !important; min-width: 0 !important; flex: none !important; }
.glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab img { width: 34px !important; height: 34px !important; flex: none; }
.glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab span:not(.ti) { white-space: nowrap !important; width: auto !important; max-width: none !important; }
.glass-immersive .imm-cats .new-dot { width: 11px; height: 11px; border-width: 2px; border-color: #2a3027; top: -4px; right: -4px; }
@media (max-height: 760px) { .glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab img { width: 28px !important; height: 28px !important; } }
@media (max-width: 900px) {
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs { flex-direction: row !important; gap: 6px !important; }
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab { flex-direction: column !important; }
}


/* ================= V19_002 ================= */
/* The divider's knob floats ABOVE the page (the page used to sit on top of it,
   so it could not be grabbed). The line itself stays in the backdrop. */
.glass-bg-line { pointer-events: none; }
.glass-bg-line i { display: none; }
.glass-knob {
  position: sticky; top: 0; z-index: 90; flex: none;
  height: 100vh; height: 100dvh; margin-bottom: -100vh; margin-bottom: -100dvh;
  pointer-events: none;
}
.glass-knob i {
  position: absolute; left: var(--split); top: var(--knob-top, 88%);
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.18);
  pointer-events: auto; cursor: ew-resize; touch-action: none;
  transition: transform .15s ease;
}
.glass-knob i::before { content: ""; position: absolute; inset: -12px; }   /* bigger grab area, esp. for fingers */
.glass-knob.is-dragging i, .glass-knob i:hover { transform: scale(1.15); }
.glass-immersive .glass-knob i { top: 44%; }
@media (max-width: 780px) { .glass-knob i { top: 93%; } }

/* Contact: only the form is the dark card; the giraffe stands on its own beside it */
.glass-page .contact-layout { grid-template-rows: auto; align-items: start; }
.glass-page .contact-col.glass-card {
  display: flex; flex-direction: column; grid-column: 1; grid-row: 1;
  min-height: var(--giraffe-h); box-sizing: border-box;
}
.glass-page .contact-col.glass-card .contact-form { flex: 1 1 auto; height: auto; }
.glass-page .contact-col.glass-card .form-footer-row { margin-top: 14px; }
.glass-page .contact-giraffe { grid-row: 1; }
@media (max-width: 900px) { .glass-page .contact-col.glass-card { min-height: 0; display: block; } }
/* Donate: only the text is the dark card; the photo stands on its own */
.glass-page .donate-main.glass-card { align-self: start; }
@media (max-width: 900px) {
  .glass-page .contact-col.glass-card, .glass-page .contact-giraffe { grid-column: 1; grid-row: auto; }
  .glass-page .contact-giraffe { justify-self: center; margin-top: 16px; }
}


/* ================= V19_003 ================= */
/* gallery: the painting sits above the divider line, always in full colour */
.glass-immersive .glass-bg > .imm-img { z-index: 3; }

/* Donate: progress bar (TEST value in js/frosty-glass.js) */
.donate-progress { display: flex; align-items: center; gap: 14px; margin: 10px 0 16px; }
.dp-bar { flex: 1 1 auto; max-width: 360px; height: 10px; border-radius: 6px; background: rgba(255,255,255,.16); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.dp-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #be6e3c, #e09a5c); }
.dp-text { font-size: 13px; font-weight: 600; color: #f4c9a0; white-space: nowrap; }

/* Donate: the two links side by side on wider screens (narrower frames) */
@media (min-width: 901px) {
  .glass-page .donate-layout .donate-options { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 16px; padding: 16px 18px; }
  .glass-page .donate-layout .donate-option { flex: 1 1 0; min-width: 0; }
  .glass-page .donate-layout .donate-option .btn { display: block; width: 100%; box-sizing: border-box; text-align: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
  .glass-page .donate-layout .donate-divider { width: 1px; height: auto; align-self: stretch; }
  .glass-page .donate-layout .donate-divider::before, .glass-page .donate-layout .donate-divider::after { display: none; }
  .glass-page .donate-layout .donate-divider { background: rgba(255,255,255,.2); }
  .glass-page .donate-layout .donate-divider span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2a3027; padding: 4px 0; }
  /* photo ends exactly at the bottom of the text card */
  .glass-page .donate-layout { align-items: stretch; }
  .glass-page .donate-photo { display: flex; }
  .glass-page .donate-photo .donate-photo-img { aspect-ratio: auto; height: 0; min-height: 100%; width: 100%; object-fit: cover; }
}

/* Exhibition: opening hours right next to the days */
.glass-page .exhibition-details .exh-hours { display: table; width: auto !important; }
.glass-page .exhibition-details .exh-hours td { width: auto !important; padding-right: 26px; }
.glass-page .exhibition-details .exh-hours { align-self: flex-start; }


/* ================= V19_004 ================= */
/* lighter backdrop behind, same dark boxes in front: more contrast between the two */
.glass-bg-l { filter: blur(9px) brightness(.93) saturate(1.2); }
.glass-bg-gray { filter: blur(9px) brightness(.86) grayscale(1); }
.imm-blur { filter: blur(24px) brightness(.84) saturate(1.15); }
.glass-immersive .glass-bg-gray { filter: grayscale(1) brightness(1); }
/* every text box the same dark glass (title boxes were lighter) */
.glass-title { background: rgba(22,28,20,.52); border-color: rgba(255,255,255,.22); }
.glass-side, .glass-card, .imm-thumbs { background: rgba(22,28,20,.52); }
.glass-page .frosty-subtabs { background: rgba(22,28,20,.55); }

/* Contact / Donate: card + picture as one pair, picture exactly as tall as the card */
@media (min-width: 901px) {
  .glass-page .contact-layout, .glass-page .donate-layout {
    display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 24px;
  }
  .glass-page .contact-col.glass-card { flex: 0 1 640px; min-height: 0; }
  .glass-page .donate-main.glass-card { flex: 0 1 660px; }
  .glass-page .contact-giraffe { flex: none; height: var(--media-h, var(--giraffe-h)); width: auto; margin: 0; }
  .glass-page .donate-photo { flex: none; display: block; margin: 0; }
  .glass-page .donate-photo .donate-photo-img { height: var(--media-h, 480px); min-height: 0; width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
}


/* ================= V19_005 ================= */
/* Contact / Donate: the picture spans the title box AND the card (pulled up beside the title) */
@media (min-width: 901px) {
  .glass-page .contact-giraffe, .glass-page .donate-photo { margin-top: calc(-1 * var(--media-up, 0px)); }
}

/* Gallery: a bit more room for the painting (slimmer strip, less top gap) */
.glass-immersive { --imm-bar: 84px; }
.imm-img { top: calc(var(--nav-h, 73px) + 10px); }
.imm-left, .imm-stage { top: 10px; }

/* Gallery thumbnails: a bit more light + soft shadow; the selected one gets a thin 2px peach line */
.imm-thumbs { padding: 10px 13px; gap: 10px; }
.imm-th { width: 64px; height: 64px; outline: none !important; box-shadow: 0 4px 10px rgba(0,0,0,.55); overflow: visible; }
.imm-th img { border-radius: 8px; filter: brightness(1.12) contrast(1.06); }
.imm-th::after { content: ""; position: absolute; inset: 0; border-radius: 8px; border: 2px solid transparent; pointer-events: none; transition: border-color .2s; }
.imm-th.on::after { border-color: #f4c9a0; }
.imm-new { z-index: 1; }

/* Left column never scrolls: compact list, tighter still on short windows */
.imm-cats { overflow: hidden; padding: 8px 10px; }
.glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab { padding: 3px 5px; }
.glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab img { width: 30px !important; height: 30px !important; border-radius: 6px; }
.imm-left { gap: 12px; }
.imm-cap { padding: 10px 16px; }
.imm-cap b { font-size: 16.5px; line-height: 1.25; }
@media (max-height: 700px) {
  .imm-title { padding: 11px 15px; }
  .imm-title .page-heading { font-size: 22px; margin-bottom: 3px; }
  .imm-title .page-subheading { font-size: 12px; line-height: 1.35; }
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab { padding: 2px 5px; }
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab img { width: 24px !important; height: 24px !important; }
  .imm-left { gap: 10px; }
  .imm-cap { padding: 8px 14px; }
}
@media (max-height: 620px) {
  .imm-title .page-subheading { display: none; }
}
/* very short windows: the seven galleries as a grid of icons (names on hover) */
@media (max-height: 560px) and (min-width: 901px) {
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs { flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; }
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab span:not(.ti) { display: none; }
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab { padding: 3px; }
  .glass-immersive .imm-cats .gallery-cat-tabs-thumbs .thumb-tab img { width: 30px !important; height: 30px !important; }
}


/* ================= V19_006 ================= */
/* slightly lighter edges on every glass box = a touch more contrast */
.glass-title, .glass-side, .glass-card, .imm-thumbs, .glass-page .frosty-subtabs { border-color: rgba(255,255,255,.34); }

/* gallery: soft light in the background around the painting (subtle, the same for every painting) */
.imm-light {
  position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--lx, 50%) - var(--lw, 600px) / 2); top: calc(var(--ly, 50%) - var(--lh, 600px) / 2);
  width: var(--lw, 600px); height: var(--lh, 600px);
  background: radial-gradient(closest-side, rgba(255,238,205,1), rgba(255,230,190,.55) 45%, rgba(255,230,190,0) 100%);
  opacity: .33; mix-blend-mode: screen;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.glass-immersive .glass-bg > .imm-img { z-index: 3; }
.glass-bg.imm-swap .imm-blur { opacity: .6; transition: opacity .15s ease; }
.imm-blur { transition: opacity .15s ease; }
@media (max-width: 900px) { .imm-light { display: none; } }

/* gallery: less space between the thumbnail strip and the footer line */
.glass-immersive { --imm-foot: 26px; }
.glass-immersive .site-footer { padding: 0 0 6px; gap: 0; min-height: var(--imm-foot); justify-content: flex-end; font-size: 11.5px; }
.imm-thumbs { bottom: 6px; }
.imm-left, .imm-stage { bottom: calc(var(--imm-bar) + 20px); }
.imm-img { bottom: calc(var(--imm-foot) + var(--imm-bar) + 20px); }

/* Bio, Journey, Exhibition: tabs + title in a narrow left column, the card on the right */
@media (min-width: 901px) {
  .glass-cols { display: flex; align-items: flex-start; gap: 26px; margin-top: 6px; }
  .glass-col-left { flex: 0 0 clamp(220px, 21vw, 280px); display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-h, 73px) + 12px); }
  .glass-col-left .frosty-subtabs { position: static; margin: 0; width: auto; justify-content: space-between; }
  .glass-col-left .glass-top { margin: 0; }
  .glass-col-left .glass-title { max-width: none; width: 100%; }
  .glass-cols > .glass-card { flex: 1 1 auto; min-width: 0; margin: 0; }
  /* Bio inside the narrower card: portrait a bit smaller */
  .glass-cols .bio-photo-col { width: 190px; margin-right: 32px; }
  /* Exhibition inside the narrower card: flyer column a bit narrower */
  .glass-cols .exhibition-banner { grid-template-columns: clamp(200px, 20vw, 280px) minmax(0, 1fr); gap: 28px; }
}

/* Donate: the photo never grows into the text — capped width, cropped instead */
@media (min-width: 901px) {
  .glass-page .donate-layout { gap: 24px; }
  .glass-page .donate-main.glass-card { flex: 1 1 560px; max-width: 660px; }
  .glass-page .donate-photo { flex: 0 1 auto; min-width: 0; max-width: 40%; }
  .glass-page .donate-photo .donate-photo-img { width: min(calc(var(--media-h, 480px) * .75), 100%); max-width: 100%; }
}

/* Contact: wider card (the intro fits one line), compact, and the message box can be resized again */
@media (min-width: 901px) {
  .glass-page .contact-col.glass-card { flex: 0 1 760px; padding: 20px 26px 18px; }
  .glass-page .contact-col .form-field { margin-bottom: 10px; }
  .glass-page .contact-col .form-field label { margin-bottom: 4px; }
  .glass-page .contact-col .form-field input { padding-top: 8px; padding-bottom: 8px; }
  .glass-page .contact-layout .contact-form textarea { flex: none; height: 150px; min-height: 110px; resize: vertical; }
  .glass-page .contact-col.glass-card .form-footer-row { margin-top: 8px; }
  .glass-page .glass-top { margin-bottom: 18px; }
  .glass-page .contact-layout ~ * , .glass-page .contact-layout { margin-top: 0; }
}
/* Donate: a little more compact so it fits one laptop screen */
@media (min-width: 901px) {
  .glass-page .donate-main.glass-card { padding: 22px 26px 20px; }
  .glass-page .donate-card p { margin-bottom: 10px; }
  .glass-page .donate-layout .donate-options { padding: 12px 16px; margin-top: 2px; }
  .glass-page .donate-layout .donate-share { margin-top: 14px; padding-top: 12px; }
  .glass-page .donate-progress { margin: 6px 0 12px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .glass-page .glass-title { padding: 13px 20px; }
  .glass-page .glass-title .page-heading { font-size: 26px; }
  .glass-page .frosty-main.content { padding-top: 14px; }
}


/* ================= V19_007 ================= */
/* gallery: no animation — painting, background and light change in one step */
.imm-img, .imm-blur, .imm-light, .glass-bg.imm-swap .imm-img, .glass-bg.imm-swap .imm-blur { transition: none !important; opacity: 1; }
.imm-light { opacity: .33 !important; }

/* thinner white edges on pictures: the same family as the glass boxes */
.glass-page .contact-giraffe, .glass-page .donate-photo .donate-photo-img,
.glass-page .studio-photo img, .glass-page .exhibition-flyer img, .glass-page .carousel-frame img { border-width: 1.5px; }
.glass-page .bio-photo-col .bio-portrait-img { border-width: 1.5px; }
.glass-page .journey-card-frame { border-width: 1.5px; }

/* Bio, Studio, Journey, Exhibition: header row [ tabs | title ], the card full width below */
.glass-headrow { display: flex; align-items: stretch; gap: 18px; margin: 6px 0 18px; }
.glass-headrow .frosty-subtabs { position: static; margin: 0; flex: none; width: auto; align-items: center; }
.glass-headrow .glass-title { flex: 1 1 auto; max-width: none; display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; padding: 14px 24px; }
.glass-headrow .glass-title .page-heading { margin: 0; }
.glass-headrow .glass-title .page-subheading { margin: 0; }
.glass-page .gallery-head.studio-head { margin: 0; }
.glass-card-head { margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.14); }
.glass-card-head .gallery-subnav-row { margin: 0; }
.glass-card-head .gallery-cat-tabs-thumbs { border: 0; padding: 0; }
@media (max-width: 900px) {
  .glass-headrow { flex-direction: column; gap: 12px; }
  .glass-headrow .frosty-subtabs { align-self: flex-start; }
}
.glass-headrow .glass-title, .glass-headrow .glass-title .page-heading, .glass-headrow .glass-title .page-subheading {
  text-align: left !important; justify-content: flex-start; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto;
}
.glass-headrow .glass-title .page-heading { flex: none; }
.glass-headrow .glass-title .page-subheading { flex: 1 1 300px; text-wrap: pretty; }
.glass-page .gallery-head.studio-head { display: block; width: 100%; } .studio-head .glass-headrow { width: 100%; }
/* Studio icons now live at the top of the card: keep the Studio look for them (labels may wrap) */
.glass-card-head .thumb-tab span { white-space: normal; max-width: 104px; line-height: 1.25; }
.glass-card-head .gallery-cat-tabs-thumbs .thumb-tab { min-width: 92px; }
@media (max-width: 780px) {
  .glass-card-head .gallery-cat-tabs-thumbs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 10px; scrollbar-width: none; }
  .glass-card-head .gallery-cat-tabs-thumbs .thumb-tab { min-width: 0 !important; flex: none; }
  .glass-card-head .gallery-cat-tabs-thumbs .thumb-tab img { width: 58px !important; height: 58px !important; }
  .glass-card-head .thumb-tab span { display: none; }
  .glass-card-head { margin-bottom: 16px; padding-bottom: 12px; }
}


/* ================= V19_008 ================= */
/* gallery: the painting in a discreet frame, the same thin line as the text boxes, corners slightly
   rounded. The frame element is sized to the painting itself by js/frosty-immersive.js */
.imm-img { filter: none; background: none !important; }
.imm-paint {
  position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  background: no-repeat 50% 50% / cover; background-origin: padding-box; background-clip: padding-box;
  border: 1px solid rgba(255,255,255,.34); border-radius: 5px;
  box-shadow: 0 18px 30px rgba(0,0,0,.55);
}
/* first / last painting: that arrow fades out (no wrap-around) */
.imm-arrow:disabled { opacity: .25; cursor: default; }
.imm-arrow:disabled:hover { background: rgba(22,28,20,.45); }
/* narrow windows / phones: no white placeholder frame around the box, the discreet frame on the painting */
@media (max-width: 900px) {
  .imm-inline { width: auto; max-width: 100%; margin: 0 auto; background: none; box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.34); border-radius: 5px; box-shadow: 0 10px 22px rgba(0,0,0,.45); }
}

/* Studio: a little more room between the six icons, every label on one line */
@media (min-width: 781px) {
  .glass-card-head .gallery-cat-tabs-thumbs { gap: 16px clamp(26px, 3.2vw, 48px); }
  .glass-card-head .thumb-tab span { white-space: nowrap; max-width: none; }
}

/* Journey: the "scroll sideways / click to enlarge" hint now sits at the top of the card */
.glass-page .journey-hint { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: rgba(242,239,226,.72); }

/* Bio, Studio, Exhibition: the header row [ tabs | title ] stays under the menu while the card scrolls */
@media (min-width: 901px) {
  .glass-page .glass-headrow.glass-sticky, .glass-page .gallery-head.studio-head.glass-sticky {
    position: sticky; top: calc(var(--nav-h, 73px) + 8px); z-index: 5;
  }
}

/* Donate: "or" in plain white like "Share this page", the line opens around it; no rubber-band scroll */
html.glass-donate, html.glass-donate body { overscroll-behavior-y: none; }
@media (min-width: 901px) {
  .glass-page .donate-layout .donate-divider {
    background: linear-gradient(to bottom, rgba(255,255,255,.2) calc(50% - 15px), transparent calc(50% - 15px),
                transparent calc(50% + 15px), rgba(255,255,255,.2) calc(50% + 15px));
  }
  .glass-page .donate-layout .donate-divider span { background: transparent; color: #fff; font-weight: 600; padding: 0; }
}


/* ================= V19_010 ================= */
/* gallery: no flash / jump on load or switch */
.imm-light:not(.is-on) { opacity: 0 !important; transition: none !important; }   /* appears only once it sits behind the painting */
/* the gallery list box: narrow from the very first moment (fits its longest name), title + caption keep the column width */
@media (min-width: 901px) and (min-height: 561px) {
  .glass-immersive .imm-cats { width: max-content; max-width: 100%; padding-right: 24px; }
}

/* the divider's dot: the same as on the home page, and at the same height (middle of the window) on every page */
.glass-knob i, .glass-immersive .glass-knob i {
  top: 50% !important; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: rgba(255,255,255,.9);
  background-image: linear-gradient(90deg, transparent 6px, rgba(30,44,32,.6) 6px 7px, transparent 7px 9px, rgba(30,44,32,.6) 9px 10px, transparent 10px 16px);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.glass-knob.is-dragging i, .glass-knob i:hover { transform: none; box-shadow: 0 2px 14px rgba(0,0,0,.5); }

/* Bio, Studio, Journey: BIO · STUDIO · JOURNEY sit on the same line as the title and its sentence */
@media (min-width: 901px) {
  .glass-headrow .frosty-subtabs a { position: relative; top: 3.5px; }
}
.imm-paint.is-round { border-radius: 50%; }

/* ================= V19_012: gallery pages appear in one step ================= */
/* before the script has built the page, the backdrop already looks like the final one:
   one blurred, darkened copy (never the raw photo tiled four times) */
body.glass-immersive:not(.imm-built) .glass-bg-l {
  background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;
  filter: blur(24px) brightness(.6) saturate(1.1);
}
body.glass-immersive:not(.imm-built) .glass-bg-gray { filter: grayscale(1) blur(24px) brightness(.55); }
/* the gallery itself (title, list, painting, caption, strip) stays hidden until painting and thumbnails
   are ready, then everything shows at once; safety net: it shows after 2.5 s whatever happens */
/* V19_013: the WHOLE page (header, backdrop, gallery) waits, so it appears in one step. On the live
   site the browser keeps the previous page on screen meanwhile, so a switch looks like a direct cut */
/* V19_015: nothing waits any more (no dark screen). Only the raw, not-yet-arranged gallery markup is
   kept out of sight for the few milliseconds before the script arranges it */
body.glass-immersive:not(.imm-ui) .frosty-main,
body.glass-immersive:not(.imm-ui) .imm-img,
body.glass-immersive:not(.imm-ui) .imm-light { visibility: hidden; animation: imm-failsafe 0s linear 2.5s forwards; }
.imm-thumbs.is-loading .imm-th { visibility: hidden; }
/* coming back to a painting by its number (#4, e.g. after a language switch): no flash of painting 1 */
html.imm-deep body.glass-immersive:not(.imm-ui) .glass-bg-l { background-image: none !important; }
@keyframes imm-failsafe { to { visibility: visible; } }

.imm-cap.is-pending { visibility: hidden; }   /* New works: caption shows once its text is known */

/* ================= V19_016: the gallery layout is written in the page ================= */
/* the painting fits its box by the stylesheet alone (no script needed): the box measures itself,
   the painting takes the largest size with its own proportions (--ar = width / height) */
.imm-img { container-type: size; }
.imm-paint {
  width: min(100cqw, calc(100cqh * var(--ar, 1.33)));
  height: min(100cqh, calc(100cqw / var(--ar, 1.33)));
}

/* ================= V19_019 ================= */
/* the divider's dot: in the lower third (65% down), on every page including home */
.glass-knob i, .glass-immersive .glass-knob i { top: 65% !important; }
.frosty-hero .fh-split-line::after { top: 65%; }

/* the invisible "click to enlarge" area never shows the browser's focus frame
   (it appeared behind the lightbox when stepping left/right) */
.imm-hit:focus, .imm-hit:focus-visible { outline: none !important; box-shadow: none !important; }

/* Studio: same gap under the header row as Bio / Journey / Exhibition (was 16px more) */
.glass-page .gallery-head.studio-head { padding-bottom: 0; }

/* Bio: photo, card edge and text all 32px apart; the text takes the width that frees up */
@media (min-width: 901px) {
  .glass-page .bio-photo-col { width: clamp(200px, 26vw, 300px); margin-right: clamp(20px, 2.4vw, 32px); }   /* exactly the photo's width; gap = the card's own edge padding */
  .glass-page .bio-photo-col .bio-portrait-img { width: 100%; }
  .glass-page .bio-text { max-width: none; font-size: 16px; line-height: 1.62; }
}
/* Studio: the photo leaves room for the header row, so the page fits a laptop window */
@media (min-width: 1200px) {
  .glass-page .studio-photo { height: clamp(240px, calc(100dvh - 430px), 540px); }
}
.glass-page .bio-page-body > :last-child, .glass-page .bio-text > :last-child, .glass-page .bio-text .bio-quote { margin-bottom: 0; }

/* ================= V19_021: the frosted band ================= */
/* Bio, Studio, Journey, Exhibition (desktop): once the page scrolls, menu + header row sit on one dark-glass
   strip with a single straight bottom edge; the page scrolls under it (placed and sized by frosty-glass.js) */
.glass-band {
  position: fixed; top: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: rgba(16,20,15,.74);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 22px rgba(0,0,0,.28);
  transition: opacity .25s ease;
}
body.has-band.band-on .glass-band { opacity: 1; }
body:not(.has-band) .glass-band { display: none; }
/* the band carries the dark glass now - the menu doesn't need its own */
body.has-band.band-on .frosty-shell > .frosty-nav.on-hero.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================= V19_022: Bio, Studio, Journey - only the card's content scrolls ================= */
/* (desktop; the class is set by frosty-glass.js, which also sizes the card to the window) */
html.glass-boxscroll, html.glass-boxscroll body { overflow: hidden; }
html.glass-boxscroll .glass-boxcard {
  overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
  margin-bottom: 0; scrollbar-width: none;
}
html.glass-boxscroll .glass-boxcard::-webkit-scrollbar { display: none; }
/* the copyright line: always in the 34px strip under the card, a little lighter so it reads on any backdrop */
html.glass-boxscroll .glass-page .site-footer,
html.glass-footpin .glass-page .site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  width: auto; height: 34px; margin: 0; color: rgba(242,239,226,.62);
}
/* with the copyright line out of the flow, the page area needs no room underneath for it */
html.glass-boxscroll .glass-page .frosty-main,
html.glass-footpin .glass-page .frosty-main { padding-bottom: 0; }
/* the first box sits 10px under the menu on every page, as on the gallery pages (desktop; phones unchanged) */
@media (min-width: 901px) {
  body.glass-page:not(.glass-immersive) .frosty-main.content { padding-top: 4px; }
  body.glass-page .frosty-main.content > .studio-head.glass-sticky { top: 74px; }   /* Studio's sticky wrapper held its header row 4px lower */
}

/* swiping sideways on the painting changes it (frosty-immersive.js); the page still scrolls up and down */
.imm-stage { touch-action: pan-y pinch-zoom; }

/* ================= V19_026: phones held upright (≤600px wide) — PC, iPad and sideways phones unchanged ================= */
.bio-who, .glass-card-sub, .donate-card-sub, .donate-card-photo { display: none; }
@media (max-width: 600px) and (min-height: 480px) {
  /* content starts higher under the slimmer menu bar */
  body.glass-page .frosty-main.content { padding-top: 8px !important; }
  .glass-page .glass-headrow { margin-top: 0 !important; margin-bottom: 12px !important; }
  .glass-page .glass-top { margin-top: 0 !important; margin-bottom: 14px !important; }
  .glass-page .studio-head { margin-top: 0 !important; }
  /* no B&W divider (nor its ball) on the inner pages — the home page keeps its own */
  .glass-bg-line, .glass-knob { display: none !important; }
  .site-shell { --split: 0% !important; }

  /* Gallery: thinner list box */
  .imm-cats { padding-top: 3px !important; padding-bottom: 3px !important; }

  /* Bio, Studio, Journey: no title box; its sentence is in the card ("Who am I?" under Bio's photo) */
  html.glass-tabpage .glass-headrow .glass-title { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .glass-page .bio-photo-col { margin-left: auto !important; margin-right: auto !important; text-align: center; }
  .glass-page .bio-photo-col .bio-portrait-img { margin-left: auto; margin-right: auto; }
  .bio-who { display: block; margin: 16px 0 2px; font-family: var(--font-display); font-weight: 600; color: #fff;
    font-size: 26px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
  .glass-card-sub { display: block; margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: rgba(242,239,226,.85); }
  /* Studio: smaller icons, a tighter photo area */
  .gallery-cat-tabs-thumbs .thumb-tab { width: 48px !important; }
  .gallery-cat-tabs-thumbs .thumb-tab img { width: 48px !important; height: 48px !important; }
  .glass-page .glass-card-head { padding-bottom: 10px !important; margin-bottom: 12px !important; }
  .glass-page .studio-feature { margin-top: 0 !important; gap: 12px !important; }
  .glass-page .studio-photo { height: 190px !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; }
  .glass-page .studio-photo img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain; }

  /* Contact: short intro, 120px message box, the giraffe beside Send (sized by frosty-glass.js) */
  .glass-page .glass-title .contact-intro { display: none !important; }
  .glass-page .glass-title .contact-intro-line2 { margin-top: 2px !important; }
  .glass-page .contact-form textarea { height: 120px; min-height: 0 !important; }
  html.glass-girside .glass-page .form-footer-row { position: relative; display: block !important; margin-top: 16px !important;
    min-height: var(--gh, 120px); padding-right: calc(var(--gh, 120px) * .54 + 14px); }
  html.glass-girside .glass-page .form-footer-row .btn { margin-top: 0 !important; }
  html.glass-girside .glass-page .form-footer-row .contact-giraffe { position: absolute; right: 0; top: 0; height: var(--gh, 120px) !important;
    width: auto !important; margin: 0 !important; border: 1.5px solid #fff; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.4); }

  /* Exhibition (V19_027): the details use the card's own padding, opening times on one line */
  .glass-page .exhibition-details { padding: 18px 0 0 !important; }
  .glass-page .exh-hours td:last-child { white-space: nowrap; }
  .glass-page .exhibition-details .exh-hours td:first-child { padding-right: 14px; }
  .glass-page .exhibition-details .exh-hours td:last-child { padding-right: 0; }
  .glass-page .exhibition-banner { grid-template-columns: minmax(0, 1fr) !important; }
  .glass-page .exhibition-details { min-width: 0; }
  .glass-page .exhibition-details .exh-hours { width: 100% !important; }
  .glass-page .exhibition-details .exh-hours td:first-child { white-space: normal !important; }

  /* Donate: the buttons stay inside their panel */
  .glass-page .donate-layout .donate-options { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  .glass-page .donate-layout .donate-option, .glass-page .donate-layout .donate-divider { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .glass-page .donate-layout .donate-option .btn { display: block; width: 100% !important; box-sizing: border-box; text-align: center; }
}
/* Donate on phones (class set by frosty-glass.js): only the heading stays on top, the card scrolls inside */
html.glass-donpin, html.glass-donpin body { overflow: hidden !important; }
html.glass-donpin .glass-top .glass-title .page-subheading { display: none !important; }
html.glass-donpin .glass-top .glass-title { padding-top: 12px !important; padding-bottom: 12px !important; }
html.glass-donpin .glass-top .glass-title .page-heading { margin: 0 !important; font-size: 24px; line-height: 1.2; }
html.glass-donpin .donate-layout > .donate-photo { display: none !important; }
html.glass-donpin .donate-main { overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; margin-bottom: 0 !important; }
html.glass-donpin .donate-main::-webkit-scrollbar { display: none; }
html.glass-donpin .donate-card-sub { display: block; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.16);
  color: #f2efe2; font-size: 15px; line-height: 1.5; }
html.glass-donpin .donate-card-photo { display: block; margin: 18px 0 0; }
html.glass-donpin .donate-card-photo img { display: block; width: 100%; height: auto; border: 1.5px solid #fff; border-radius: 10px; }
html.glass-donpin .glass-page .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; width: auto; height: 34px; margin: 0; color: rgba(242,239,226,.62); }

/* ================= V19_028: tablets held upright (601-900px wide, at least 640px tall — e.g. iPad 9 portrait) ================= */
/* PC, tablets held sideways and phones are unchanged by this block. */
.exh-card-h { display: none; }
@media (min-width: 601px) and (max-width: 900px) and (min-height: 640px) {
  /* content starts higher under the slimmer menu bar */
  body.glass-page .frosty-main.content { padding-top: 8px !important; }
  .glass-page .glass-headrow { margin-top: 0 !important; margin-bottom: 12px !important; }
  .glass-page .glass-top { margin-top: 0 !important; margin-bottom: 14px !important; }
  .glass-page .studio-head { margin-top: 0 !important; }
  /* no B&W divider (nor its ball) on the inner pages — the home page keeps its own */
  .glass-bg-line, .glass-knob { display: none !important; }
  .site-shell { --split: 0% !important; }

  /* Gallery: one line for the title, slimmer boxes, even 10px gaps, the painting takes the height that is left (no scrolling) */
  .imm-title { flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline; gap: 16px; padding: 10px 20px !important; align-self: flex-start; width: fit-content; max-width: 100%; }
  .imm-title .page-heading, .imm-title .page-subheading { margin: 0 !important; }
  .imm-title .page-subheading { font-size: 15px; min-width: 0; }
  .imm-cats { padding-top: 3px !important; padding-bottom: 3px !important; }
  .imm-cap { flex-direction: row !important; align-items: baseline; gap: 10px; padding: 8px 16px !important; width: fit-content; max-width: 100%; }
  .imm-cap span::before { content: '·'; margin-right: 10px; opacity: .7; }
  .imm-thumbs { padding-top: 6px !important; padding-bottom: 6px !important; top: auto !important; bottom: auto !important; }
  .imm-th { width: 56px !important; height: 56px !important; }
  .imm-stage { top: auto !important; bottom: auto !important; flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; display: flex; align-items: center; justify-content: center; }
  .imm-inline { width: auto !important; height: auto !important; max-height: 100% !important; max-width: calc(100% - 96px) !important; margin: 0 !important; }
  body.glass-immersive { overflow: hidden !important; }
  body.glass-immersive .frosty-main.content { height: calc(100dvh - var(--nav-h, 53px)) !important; min-height: 0 !important; flex: none !important; box-sizing: border-box; padding-top: 8px !important; padding-bottom: 0 !important; }
  .glass-immersive .gallery-head { height: calc(100% - 34px) !important; margin-bottom: 0 !important; gap: 10px !important; }
  .glass-immersive .site-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; margin: 0 !important; z-index: 3; width: auto; }

  /* Bio, Studio, Journey: the title box is hidden (kept for screen readers); its words are in the card */
  html.glass-tabpage .glass-headrow .glass-title { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .bio-who { display: block; text-align: center; margin: 16px 0 2px; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 26px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
  .glass-card-sub { display: block; margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: rgba(242,239,226,.85); }
  /* Studio: the six icons on one line */
  .glass-card-head .gallery-cat-tabs-thumbs { gap: 8px 12px !important; flex-wrap: nowrap !important; }
  .glass-card-head .thumb-tab img { width: 48px !important; height: 48px !important; }

  /* Exhibition: its title is the card's heading; flyer left, details right */
  html.glass-exhpage .glass-headrow { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .exh-card-h { display: block; margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 26px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
  .glass-page .exhibition-banner { grid-template-columns: 250px minmax(0, 1fr) !important; gap: 26px !important; }
  .glass-page .exhibition-details { padding: 0 !important; }

  /* Contact: card and giraffe side by side (sized by frosty-glass.js so both end on the same line) */
  html.glass-donate .glass-page .contact-layout { display: flex !important; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 17px; margin-top: 0 !important; }
  html.glass-donate .glass-page .contact-col.glass-card { flex: 0 0 auto; width: calc(100% - var(--gw, 250px) - 17px); min-height: 0; display: block; padding: 20px 26px 18px; grid-column: auto; grid-row: auto; }
  html.glass-donate .glass-page .contact-giraffe { flex: none; width: var(--gw, 250px) !important; height: auto !important; margin: 0; margin-top: calc(-1 * var(--media-up, 0px)); grid-column: auto; grid-row: auto; justify-self: auto; }
  html.glass-donate .glass-page .contact-col .form-field { margin-bottom: 12px; }
  html.glass-donate .glass-page .contact-col .form-field label { margin-bottom: 4px; }
  html.glass-donate .glass-page .contact-col .form-field input { padding-top: 8px; padding-bottom: 8px; }
  html.glass-donate .glass-page .contact-layout .contact-form textarea { flex: none; min-height: 70px; resize: vertical; }
  html.glass-donate .glass-page .contact-col.glass-card .form-footer-row { margin-top: 12px; }

  /* Donate: stronger "or"; title box as wide as the page with a bigger heading; Share centred between its line and the card's edge;
     the same 17px at the page edges and between the card and the image, the image a little bigger */
  .glass-page .donate-layout .donate-divider span { color: #fff; font-size: 12px; font-weight: 600; }
  html.glass-donatepage .glass-top .glass-title { max-width: none !important; }
  html.glass-donatepage .glass-top .page-heading { font-size: 30px; }
  html.glass-donatepage .donate-share .donate-note:empty { min-height: 0; height: 0; margin: 0 !important; overflow: hidden; }
  html.glass-donatepage .glass-page .donate-main.glass-card { padding-bottom: 21px; }
  html.glass-donatepage .glass-page .donate-layout { grid-template-columns: minmax(0, 1fr) 263px; column-gap: 17px; }
  html.glass-donatepage .glass-page .donate-photo .donate-photo-img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
}

/* ================= V19_029 ================= */
/* ---- phones and tablets (≤1199px): Studio steps by swiping; the "1 / 6 → next" line is not needed ---- */
@media (max-width: 1199px) {
  .studio-next { display: none !important; }
  [data-studio] .studio-feature { touch-action: pan-y; }
}
/* ---- the enlarged view's caption keeps its natural width (it was squeezed to half the screen, so titles wrapped) ---- */
@media (max-width: 900px) {
  .lightbox-caption { width: max-content; max-width: min(520px, 92vw); }
}

/* ---- phones held upright: tighter, every page the gallery's width, the gallery fits one screen ---- */
@media (max-width: 600px) and (min-height: 480px) {
  /* same side margins everywhere (the gallery's 14px) and less room under the menu bar */
  body.glass-page:not(.glass-immersive) .frosty-main.content { padding-left: 14px !important; padding-right: 14px !important; }
  body.glass-page .frosty-main.content { padding-top: 5px !important; }
  .glass-page .glass-headrow { margin-bottom: 8px !important; }
  .glass-page .glass-top { margin-bottom: 10px !important; }
  .glass-page .glass-headrow .frosty-subtabs { padding-top: 8px; padding-bottom: 8px; }
  .glass-page .glass-boxcard { padding-top: 14px !important; }
  html.glass-exhpage .glass-headrow .glass-title { padding-top: 10px !important; padding-bottom: 10px !important; }
  .glass-page .glass-top .glass-title { padding-top: 11px; padding-bottom: 11px; }

  /* Gallery: one screen. The painting takes the height that is left; even 10px gaps; slimmer boxes and thumbnails */
  body.glass-immersive { overflow: hidden !important; }
  body.glass-immersive .frosty-main.content { height: calc(100dvh - var(--nav-h, 48px)) !important; min-height: 0 !important; flex: none !important; box-sizing: border-box; padding-bottom: 0 !important; }
  .glass-immersive .gallery-head { height: calc(100% - 34px) !important; margin-bottom: 0 !important; gap: 10px !important; }
  .imm-title { padding: 8px 14px !important; }
  .imm-title .page-heading { font-size: 20px; line-height: 1.15; margin: 0 !important; }
  .imm-title .page-subheading { font-size: 12px; line-height: 1.3; margin: 2px 0 0 !important; }
  .imm-cats { padding: 4px 8px !important; }
  .glass-immersive .gallery-cat-tabs-text { padding-bottom: 0 !important; border-bottom: 0 !important; }
  .imm-stage { top: auto !important; bottom: auto !important; flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; display: flex; align-items: center; justify-content: center; }
  .imm-inline { width: auto !important; height: auto !important; max-height: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .imm-cap { padding: 6px 14px !important; }
  .imm-thumbs { top: auto !important; bottom: auto !important; padding: 6px 10px !important; }
  .imm-th { width: 46px !important; height: 46px !important; }
  .glass-immersive .site-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; margin: 0 !important; z-index: 3; width: auto; }

  /* Studio: six 40px icons spread over the card; the photo takes the height that is left, so nothing can push the card into scrolling */
  .glass-card-head .gallery-cat-tabs-thumbs { gap: 0 !important; justify-content: space-between !important; flex-wrap: nowrap !important; overflow: visible !important; }
  .glass-card-head .gallery-cat-tabs-thumbs .thumb-tab { width: 40px !important; }
  .glass-card-head .gallery-cat-tabs-thumbs .thumb-tab img { width: 40px !important; height: 40px !important; }
  html.glass-studiopage .glass-boxcard { display: flex; flex-direction: column; }
  html.glass-studiopage .glass-boxcard > * { flex: none; }
  html.glass-studiopage .glass-boxcard > .studio-feature { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 0 !important; gap: 10px !important; }
  html.glass-studiopage .glass-page .studio-photo, html.glass-studiopage .studio-photo { flex: 1 1 0; min-height: 110px; height: auto !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; }
  html.glass-studiopage .studio-photo img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain; }
  html.glass-studiopage .studio-text { flex: none; }

  /* Exhibition: "Get in touch" on its own line, flush left, with air above it */
  .glass-page .glass-boxcard .page-subheading .btn { display: flex; width: fit-content; margin: 12px 0 0 0 !important; }

  /* Contact: a little air between Send and the note */
  html.glass-girside .glass-page .form-footer-row > .note-box { margin-top: 10px; }

  /* Donate: the same distance above and below Share; a stronger "or" */
  html.glass-donpin .donate-share { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  html.glass-donpin .glass-page .donate-share .donate-note:empty, html.glass-donpin .donate-share .donate-note:empty { min-height: 0; height: 0; margin: 0 !important; overflow: hidden; }
  html.glass-donpin .donate-card-photo { margin-top: 20px; }
  .glass-page .donate-layout .donate-divider span { color: #fff; font-size: 12px; font-weight: 600; }
}

/* ---- tablets held upright: every page the gallery's width ---- */
@media (min-width: 601px) and (max-width: 900px) and (min-height: 640px) {
  body.glass-page:not(.glass-immersive) .frosty-main.content { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ---- tablets held sideways (901-1199px wide, e.g. iPad 9 landscape); a laptop window (1200px and up) is not touched ---- */
@media (min-width: 901px) and (max-width: 1199px) {
  /* no B&W divider (nor its ball) on the inner pages */
  .glass-bg-line, .glass-knob { display: none !important; }
  body.glass-page .site-shell { --split: 0% !important; }

  /* Gallery: title and caption boxes reach 90px further to the right (the painting is in the middle anyway),
     the title box keeps one height on every page so the gallery list never jumps; a wide painting is a little smaller */
  .imm-title, .imm-cap { width: 300px; max-width: none; box-sizing: border-box; }
  .imm-title { min-height: 102px; }
  .imm-img, .imm-stage { left: calc(var(--imm-pad) + var(--imm-col) + 102px); }

  /* Bio: no title box (still read by screen readers); "Who am I?" under the photo, a slightly smaller photo */
  html.glass-biopage .glass-headrow .glass-title { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .bio-who { display: block; text-align: center; margin: 16px 0 2px; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 26px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
  html.glass-biopage .glass-page .bio-photo-col, html.glass-biopage .bio-photo-col { width: 210px; margin-right: 22px; }
  html.glass-biopage .glass-page .bio-text { font-size: 15px; line-height: 1.5; }
  html.glass-biopage .glass-page .bio-text p { margin-bottom: 10px; }
  html.glass-biopage .glass-boxcard { padding-left: 24px; padding-right: 24px; }

  /* the tab names sit in the middle of their pill (the PC's 3.5px nudge is for the taller PC pill) */
  .glass-headrow .frosty-subtabs a { top: 0; }
  /* Studio and Journey: title and sentence balanced in the box */
  html.glass-tabpage:not(.glass-biopage) .glass-headrow .glass-title { align-items: center; flex-wrap: nowrap; padding: 12px 22px; }
  html.glass-tabpage:not(.glass-biopage) .glass-headrow .glass-title .page-subheading { font-size: 13px; flex: 1 1 auto; min-width: 0; }
  /* Studio: smaller icons; the photo takes the height that is left in the card (no dependence on the browser's moving viewport height) */
  .glass-card-head .thumb-tab img { width: 48px !important; height: 48px !important; }
  html.glass-studiopage .glass-boxcard { display: flex; flex-direction: column; }
  html.glass-studiopage .glass-boxcard > * { flex: none; }
  html.glass-studiopage .glass-boxcard > .studio-feature { flex: 1 1 auto; min-height: 0; margin-top: 0 !important; grid-template-rows: minmax(0, 1fr); align-items: center; }
  html.glass-studiopage .studio-photo { height: auto !important; min-height: 0; align-self: stretch; padding: 0 !important; display: flex; align-items: center; justify-content: center; }
  html.glass-studiopage .studio-photo img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain; }
}