/* ============================================================
   Foxfire Arts — "Frosty" build: frosted-glass minimal, no sidebar
   Additive stylesheet — loaded after style.css, only on the pages
   using this treatment (index, gallery, bio, contact). Every other
   page is untouched and keeps the current sidebar design.
   ============================================================ */

.frosty-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.frosty-main { flex: 1; }

/* ---------- Top nav: transparent floating on the hero, solid everywhere else ---------- */
.frosty-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(20px, 4vw, 48px);
  background: var(--page-bg);
  border-bottom: 3px solid var(--sage);
}
.frosty-nav.on-hero {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: none;
}
.frosty-nav.on-hero .frosty-word,
.frosty-nav.on-hero .frosty-links a {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.frosty-nav.on-hero .frosty-exhibition { text-shadow: none; }
.frosty-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.8vw, 27px);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.frosty-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  list-style: none;
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
.frosty-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  transition: color .18s ease;
}
.frosty-links a.current { color: var(--gold); font-weight: 700; }
.frosty-nav.on-hero .frosty-links a.current { color: #f4c9a0; }
@media (hover: hover) {
  .frosty-links a:hover { color: var(--gold); }
  .frosty-nav.on-hero .frosty-links a:hover { color: #f4c9a0; }
}
.frosty-exhibition {
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  /* Cream pill + 2px gold frame + dark text: ~12:1 contrast on any
     background (the old orange-on-peach was 2.5:1, and the translucent
     brown one on the hero photo just sank into it). Padding is reduced
     by the border width so the pill keeps its old outer size. */
  color: var(--ink);
  background: #fbf7ec;
  border: 2px solid var(--gold);
  border-radius: 7px;
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
@media (hover: hover) {
  .frosty-exhibition:hover,
  .frosty-nav.on-hero .frosty-exhibition:hover { background: var(--gold); color: #fff; }
}

.frosty-right { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }

/* Language switcher sits inside .frosty-right, which floats transparently
   over the photo on the hero page — the default text colors (tuned for
   the light topbar background) are unreadable there, so give the on-hero
   nav its own light-on-dark version, same pattern as .frosty-links. */
.frosty-nav.on-hero .lang-switch a,
.frosty-nav.on-hero .lang-switch-hu a {
  color: rgba(255,255,255,.92);
}
.frosty-nav.on-hero .lang-switch-row a.pill-target,
.frosty-nav.on-hero .lang-switch-row:not(.js-pill-ready) a.active {
  color: #2b2a22;
}
.frosty-nav.on-hero .lang-switch,
.frosty-nav.on-hero .lang-switch-hu {
  background: transparent;
  position: relative;          /* NOT a stacking context: the sliding pill must stay between the bar and the letters */
}
/* frosted dark bar (readable over bright crops such as the floor tiles on a
   2K screen as well as over her dark hair), drawn BEHIND the sliding
   "active language" pill: a ::before at z-index -1, not a backdrop-filter
   on the box itself (that would hide the pill behind the bar). */
.frosty-nav.on-hero .lang-switch::before,
.frosty-nav.on-hero .lang-switch-hu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(22, 28, 20, .62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* Bare/no-frame language indicator — everywhere except the home hero,
   where the loud pill stays because that's the one place people are
   actually making the choice. Elsewhere the pill background is dropped
   entirely; the active code just gets bolder plus a thin gold
   underline, so it's a clean indicator instead of a "look at me" box. */
.frosty-nav:not(.on-hero) .lang-switch,
.frosty-nav:not(.on-hero) .lang-switch-hu {
  background: transparent;
  padding: 0;
  gap: clamp(8px, 1.6vw, 18px);
}
.frosty-nav:not(.on-hero) .lang-switch a,
.frosty-nav:not(.on-hero) .lang-switch-hu a {
  width: auto;
  height: auto;
  padding: 4px 1px;
}
.frosty-nav:not(.on-hero) .lang-pill { display: none; }
.frosty-nav:not(.on-hero) .lang-switch-row a.pill-target,
.frosty-nav:not(.on-hero) .lang-switch-row:not(.js-pill-ready) a.active {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  position: relative;
}
.frosty-nav:not(.on-hero) .lang-switch-row a.pill-target::after,
.frosty-nav:not(.on-hero) .lang-switch-row:not(.js-pill-ready) a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

/* Mobile hamburger for the frosty nav (separate from the sidebar one) */
.frosty-menu-toggle {
  display: none;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.frosty-menu-toggle span { display: block; width: 22px; height: 2px; background: currentColor; }
.frosty-nav .frosty-menu-toggle { color: var(--ink); }
.frosty-nav.on-hero .frosty-menu-toggle { color: #fff; }

/* Unconditional: without this, a bare <nav> falls back to the browser's
   default display:block outside the mobile media query below, which is
   why the full link list was bleeding across the top of the desktop
   view. Only ever shown via .open, and .open is only ever reachable
   through the hamburger button — which is itself hidden above 780px. */
.frosty-nav-mobile { display: none; }

/* Hamburger menu below 1150px: the full menu no longer fits on one line in
   every language under that (Hungarian is the widest). The Exhibition pill
   stays in the header on tablets and only moves into the menu on phones. */
@media (max-width: 1149px) {
  .frosty-links { display: none; }
  .frosty-menu-toggle { display: flex; }
  .frosty-right { flex-wrap: nowrap; }
  .frosty-nav-mobile {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--page-bg);
    border-bottom: 3px solid var(--sage);
    padding: 6px 0 14px;
    z-index: 99;
  }
  .frosty-nav-mobile.open { display: block; }
  .frosty-nav-mobile a {
    display: block;
    padding: 10px clamp(20px, 4vw, 48px);
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
  }
  .frosty-nav-mobile a.current { color: var(--gold); }
}
@media (max-width: 780px) {
  /* Redundant on mobile — the same link already lives in the dropdown
     menu below, and the full-width pill was crowding out the language
     switcher and hamburger on narrow phones (390px and under). */
  .frosty-right > .frosty-exhibition { display: none; }
}


/* ---------- Hero (home page only) ---------- */
.frosty-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  min-height: 420px;
  overflow: hidden;
  background: #222;
  /* Makes cqh/cqw units below resolve against the hero's OWN box,
     rather than the viewport — the missing piece last round: the hero
     itself became height-responsive, but the textbox/accent-photo
     inside it were still sized off viewport width alone, so on a short
     hero their now-oversized-by-comparison fixed pixel heights could
     collide. Sizing them in cqh ties them back to whatever height the
     hero actually ends up at. */
  container-type: size;
}

/* Above phone width: size the hero off actual available viewport height
   instead of purely off its own width. The old aspect-ratio-only
   approach made hero height a function of width alone, so a wide-but-
   short laptop window (16:10 FHD, browser chrome eating vertical space)
   got a hero tall enough to push the footer below the fold, forcing a
   page scroll that didn't happen on a taller/higher-res monitor at the
   same width. Subtracting the footer's own real height (--footer-h, a fixed height set in style.css)
   keeps hero+footer filling the viewport with no leftover gap on
   either side of the footer, and no scroll on short screens; the
   920px cap keeps it from ballooning on very tall displays — tuned to
   land close to the previous aspect-ratio result on a normal 2K
   monitor, so that look doesn't change. */
@media (min-width: 781px) {
  .frosty-hero {
    aspect-ratio: unset;
    height: clamp(420px, calc(100vh - var(--footer-h) - 3px), 1100px);
    height: clamp(420px, calc(100dvh - var(--footer-h) - 3px), 1100px);
  }
}
.frosty-hero .fh-gray, .frosty-hero .fh-color {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Desktop crop rule: the FULL photo width is shown and the dragon's nose
     tip is pinned 2.4% of the picture height above the bottom edge, whatever
     the window shape. The exact vertical position is computed in
     frosty-hero.js / the inline script after each <section> (it depends on
     the picture's width and height); 64% is only the fallback. All four
     layers must share the value or they misalign. */
  object-position: 50% 64%;
}
.frosty-hero .fh-gray { filter: grayscale(1) contrast(1.08) brightness(.95); }
.frosty-hero .fh-color { filter: none; }

/* Single patch of grayscale image permanently masking the area behind
   the textbox, regardless of where the divider sits — simpler than
   the earlier inverse-wipe version (which tracked the divider and
   flipped color/gray to always contrast), and more predictable: text
   readability shouldn't depend on where you last dragged the line.
   Clipped to the textbox's own footprint by JS on load/resize only
   (not on every drag, since it no longer needs to react to the
   divider at all). */
.frosty-hero .fh-tbox-patch {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 64%;
  z-index: 6; pointer-events: none;
  clip-path: inset(50% 50% 50% 50%);
}
/* Behind the textbox the picture shows the INVERSE of the main split
   (like the accent photo): faded colour where the main image is grey,
   grey where it is colour — one continuous wipe at the divider. Both
   are slightly dimmed so the white text stays readable. */
.frosty-hero .fh-tbox-patch-color { filter: saturate(1.15) contrast(.95) brightness(.8); }
.frosty-hero .fh-tbox-patch-gray  { filter: grayscale(1) contrast(1.05) brightness(.8); }

.frosty-hero .fh-split-line {
  position: absolute; top: 0; bottom: 0; width: 20px; margin-left: -10px;
  z-index: 20; cursor: ew-resize; touch-action: none; background: transparent;
}
.frosty-hero .fh-split-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);
}
.frosty-hero .fh-split-line::after {
  content: "";
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  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);
}
.frosty-hero.fh-dragging { cursor: ew-resize; }
.frosty-hero.fh-dragging .fh-split-line::after { box-shadow: 0 2px 14px rgba(0,0,0,.5); }
.frosty-tbox {
  position: absolute;
  z-index: 25;
  left: 6%; top: 16%;
  width: min(342px, 34%);   /* was 360: keeps the upper horn tip clear of the box edge on ~1360px-wide heroes */
  /* min() of a vw-based and a cqh-based clamp: whichever axis is
     tighter wins, so the panel (and the room it needs) shrinks on a
     hero that's short even if the browser window is wide, instead of
     only reacting to width like before. */
  padding: clamp(10px, min(2.6vw, 4.5cqh), 30px);
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
}
.frosty-tbox h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(15px, min(3vw, 5.8cqh), 28px);
  color: #fff;
  font-weight: 600;
}
.frosty-tbox p {
  margin: 0;
  font-size: clamp(11px, min(1.4vw, 2.8cqh), 14.5px);
  line-height: 1.5;
  color: #f2efe2;
}
.frosty-accent-photo {
  position: absolute;
  left: 6%; bottom: 6%;
  /* Same idea: capped by hero height (cqh) as well as hero width, so
     a short-but-wide hero doesn't keep this at its full fixed size
     and run into the textbox above it. */
  width: min(230px, 18%, 26cqh);
  aspect-ratio: 3/4;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  z-index: 10;
}
.frosty-accent-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Color sits underneath, always fully shown; grayscale sits on top,
   clipped by frosty-hero.js to the OPPOSITE side of wherever the main
   split's divider currently is — same inverse idea as the textbox
   patch, so the photo defaults to color (since it normally starts on
   the main split's gray side) and only turns bw once the divider is
   dragged past it. */
.frosty-accent-photo .fap-color { z-index: 1; }
.frosty-accent-photo .fap-gray { z-index: 2; filter: grayscale(1) contrast(1.08) brightness(.95); clip-path: inset(0 0 0 100%); }

@media (max-width: 780px) {
  /* Phone hero fills the screen down to the footer (was a fixed 3:4 box
     that left an empty area under the footer) and uses its own tall crop.
     The small forest painting is back, but tiny and tucked into the
     bottom-left corner: on the tall phone crop the strip of floor and
     paper left of the dragon's chin is empty, so it sits there instead
     of covering the face. */
  .frosty-hero { aspect-ratio: auto; height: calc(100vh - var(--footer-h) - 3px); height: calc(100dvh - var(--footer-h) - 3px); min-height: 420px; }
  .frosty-tbox { left: 5%; right: 5%; width: auto; top: 12%; }
  .frosty-accent-photo {
    left: 5%; bottom: 12px;              /* same left edge as the textbox */
    width: clamp(60px, 21vw, 84px);      /* ~76px on a 360px phone */
    border-width: 2px; border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,.4);
  }
  /* Phones use their own tall crop (studio-0020-hero-m.jpg, the <picture>
     fallback) instead of the wide desktop one — this position is tuned
     for that tall image. */
  .frosty-hero .fh-gray, .frosty-hero .fh-color, .frosty-hero .fh-tbox-patch {
    object-position: 50% 40%;
  }
}

@media (max-width: 780px) and (max-height: 470px) {
  .frosty-accent-photo { display: none; }
}

/* ---------- Gallery hub ---------- */
.frosty-page-head { padding: 4px clamp(20px, 5vw, 60px) clamp(14px, 2vw, 20px); text-align: center; }
.frosty-page-head h1 { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 8px; color: var(--ink); }
.frosty-page-head p { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 980px; margin: 0 auto; line-height: 1.6; }

.frosty-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: clamp(14px, 2vw, 20px) clamp(20px, 5vw, 60px) clamp(40px, 6vw, 70px);
}
@media (max-width: 780px) { .frosty-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.frosty-gtile {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  background: #ddd;
}
.frosty-gtile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1);
  transition: filter .35s ease, transform .35s ease;
}
@media (hover: hover) {
  .frosty-gtile:hover img { filter: grayscale(0); transform: scale(1.04); }
}
/* Landscapes stays in color at rest — a visible hint, right on the
   grid, that hovering any tile reveals its color; the rest still start
   grayscale so the hint doesn't get lost among several colorful tiles. */
.frosty-gtile.default-color img { filter: grayscale(0); }
/* Once you're hovering anywhere in the grid, the "always color" tile
   reverts to gray like the rest, and only whichever tile is actually
   under the cursor lights up — so the color reads as a single
   spotlight that follows the mouse, rather than one tile just always
   being the odd one out. Needs both rules: the first re-grays
   everything (including .default-color) while the grid is hovered,
   the second re-colors the one tile actually being pointed at — and
   it must come after the first to win their tied specificity. */
@media (hover: hover) {
  .frosty-gallery-grid:hover .frosty-gtile img { filter: grayscale(1); }
  .frosty-gallery-grid .frosty-gtile:hover img { filter: grayscale(0); }
}
.frosty-gtile .gcap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 16px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Bio / Contact page-head chrome on the new nav ---------- */
.frosty-inner-content { padding-bottom: 20px; }

/* Fallback custom-property values so .site-footer's calc()-based
   full-bleed trick (which reads --content-pad-x/--content-pad-y,
   normally set by .content) still resolves correctly even on pages
   where .content isn't used (the home hero). Harmless when .content
   IS also present, since it sets the same values itself. */
.frosty-main { --content-pad-x: 20px; --content-pad-y: 44px; }

/* On frosty pages there's no sidebar eating the left edge, so give
   .content's normally-asymmetric padding (20px left / 48px right,
   tuned for sitting next to a sidebar) a symmetric one instead. */
.frosty-shell .content {
  padding: clamp(28px, 4vw, 44px) clamp(20px, 5vw, 48px);
  --content-pad-x: clamp(20px, 5vw, 48px);
  /* Must equal the real bottom padding below: the footer is pulled down by
     exactly this much. It used to fall back to 44px while the padding was
     28px on phones, so the footer hung 16px below the frame (the white strip). */
  --content-pad-y: clamp(28px, 4vw, 44px);
  /* Content starts closer to the header: was clamp(28px,4vw,44px) at the
     top too (i.e. 44px on laptop/desktop). Bottom padding is untouched —
     the footer's full-bleed trick depends on it. */
  padding-top: clamp(14px, 2vw, 20px);
}

/* ---------- "Meet the Artist" local tab strip (Bio / Studio / Journey) ----------
   Replaces the old collapsible sidebar submenu, which no longer exists now
   that there's no sidebar at all. */
.frosty-subtabs {
  display: flex;
  gap: clamp(14px, 2.5vw, 28px);
  margin-bottom: clamp(12px, 2vw, 20px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  flex-wrap: wrap;
}
.frosty-subtabs a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.frosty-subtabs a.current { color: var(--gold); font-weight: 700; }
@media (hover: hover) { .frosty-subtabs a:hover { color: var(--gold); } }

/* Exhibition pill gets a visible "you are here" state when it IS the
   current page, same idea as the .current class on the regular links. */
.frosty-exhibition.current-pill,
.frosty-nav.on-hero .frosty-exhibition.current-pill {
  background: var(--gold);
  color: #fff;
}

/* ---------- Gallery category mini-nav: text tabs vs thumbnails ----------
   Same purpose as .frosty-subtabs (Bio/Studio/Journey), but a visitor
   can pick which style they'd rather see; the choice is remembered
   (localStorage) the same way the mobile nav / accordion states are. */
.gallery-subnav-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(12px, 1.4vw, 16px);
}
.gallery-cat-tabs-thumbs {
  display: flex;
  gap: clamp(14px, 2.6vw, 36px);
  flex: 1 1 auto;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
/* .frosty-subtabs / .gallery-cat-tabs-thumbs both set their own
   `display`, which otherwise beats the browser's default
   [hidden]{display:none} — this makes the hidden attribute (used by
   the toggle below) actually hide whichever one isn't selected. */
.gallery-subnav-row [hidden] { display: none !important; }
.gallery-subnav-row + .page-heading-row { margin-bottom: 16px; }   /* title row hugs the bar above / carousel below (gallery pages only) */

/* All six icons are always in full colour; "you are here" is the frame
   (plus the label) alone. Hover gets its own cue since the old
   grey-to-colour hover no longer exists. */
.gallery-cat-tabs-thumbs .thumb-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  width: 104px;
}
.gallery-cat-tabs-thumbs .thumb-tab img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 9px;
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: outline-color .2s ease, transform .2s ease;
}
.gallery-cat-tabs-thumbs .thumb-tab.current img { outline-color: var(--gold); }
@media (hover: hover) {
  .gallery-cat-tabs-thumbs .thumb-tab:hover img { transform: translateY(-2px); }
  .gallery-cat-tabs-thumbs .thumb-tab:not(.current):hover img { outline-color: var(--gold-wash); }
}
.gallery-cat-tabs-thumbs .thumb-tab span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  line-height: 1.25;
}
.gallery-cat-tabs-thumbs .thumb-tab.current span { color: var(--gold); font-weight: 700; }


@media (max-width: 780px) {
  .gallery-subnav-row { flex-direction: column; }
  .gallery-cat-tabs-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
    justify-items: center;
    width: 100%;
  }
  .gallery-cat-tabs-thumbs .thumb-tab { width: 100%; max-width: 104px; }
  .gallery-cat-tabs-thumbs .thumb-tab img { width: 64px; height: 64px; }
}

/* Phones: the page title's negative top margin (a desktop alignment trick)
   pulled it up over the divider line under the tab strip / icon bar.
   A bigger gap under the strip fixes it. (Was already the case in _011.) */


/* ---------- Bio: previous layout (title + circular photo on the left, text
   to the right), with the left column made wide enough for the longest
   translated titles (BIOGRAPHIE, BEMUTATKOZÁS) and the text pushed right. ---------- */
@media (min-width: 681px) {
  .bio-photo-col { width: clamp(230px, 26vw, 340px); margin-right: clamp(28px, 3.4vw, 48px); }
  .bio-photo-col .page-heading { font-size: clamp(24px, 2.5vw, 34px); letter-spacing: 2px; }
  .bio-portrait-img { width: min(100%, 300px); height: auto; }
}

/* ---------- Donate: left-aligned text, photo on the right ---------- */
.donate-layout {
  display: grid;
  grid-template-columns: minmax(0, 660px) clamp(240px, 28vw, 380px);
  justify-content: space-between;
  align-items: start;
  gap: 40px;
}
.donate-layout .page-heading.donate-heading {
  text-align: left;
  margin: 0 0 10px;
  max-width: none;
  font-size: clamp(22px, 2.4vw, 30px);   /* 30px lets the longest translation (HU) sit on two lines */
}
.donate-layout p.page-subheading.donate-heading {
  text-align: left;
  margin: 0 0 24px;
  max-width: none;
}
.donate-layout .donate-card {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.donate-layout .donate-option { align-items: flex-start; }
.donate-layout .donate-divider span { background: var(--page-bg); }
.donate-layout .donate-share { margin-top: 24px; padding-top: 20px; }
.donate-photo { margin: 0; }
.donate-photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
@media (max-width: 780px) {
  .donate-layout { grid-template-columns: 1fr; gap: 28px; }
  .donate-photo-img { max-width: 420px; }
}
@container (max-width: 600px) {
  /* stacked options: left-align them with the text above instead of centring */
  .donate-layout .donate-options { align-items: flex-start; }
}


/* ============================================================
   Gallery pages: icons only, one even rhythm, equal-height photos
   ------------------------------------------------------------
   Vertical rhythm, top to bottom, every gap the same (--gd):
     header line -> [gd] -> icons -> [gd] -> divider line
     -> [gd] -> page title -> [gd] -> photos
   ============================================================ */
:root { --gd: 20px; }

.gallery-subnav-row {
  display: block;
  /* 6px = how far the selected icon's frame reaches beyond the icon, so
     the FRAME (the visible edge) sits exactly one --gd under the header. */
  margin: 6px 0 0;
}
.gallery-cat-tabs-thumbs {
  gap: clamp(20px, 2.4vw, 34px);
  padding-bottom: calc(var(--gd) - 5px);   /* -5: the label box has ~5px of air under its letters */
}
.gallery-cat-tabs-thumbs .thumb-tab { width: auto; min-width: 100px; }
.gallery-cat-tabs-thumbs .thumb-tab img { width: 84px; height: 84px; border-radius: 10px; }
.gallery-cat-tabs-thumbs .thumb-tab span { font-size: 11px; white-space: nowrap; }

/* title row: --gd above and below the visible letters (the h1's own
   line-box leaves ~8px of air above/below the capitals, so subtract it) */
.gallery-subnav-row + .page-heading-row {
  margin-top: calc(var(--gd) - 9px);
  margin-bottom: calc(var(--gd) - 9px);
}
.gallery-subnav-row + .page-heading-row .page-subheading { min-height: 0; }

@media (min-width: 781px) {
  /* The carousel's old -14px pull-up is no longer needed. Auto margins:
     when the window is taller than the photos can grow (cap 900px), the
     spare room is split above and below the row, so the photos sit
     centred between the title and the footer instead of hugging the top
     or the bottom. With no spare room they are 0 and the even --gd
     rhythm above is untouched. The footer then simply follows. */
  .gallery-head ~ .carousel { margin-top: auto; margin-bottom: auto; }
  .gallery-head ~ .site-footer { margin-top: 0; }
  /* title column no longer needs a fixed 480px — the subheading gets the room */
  .gallery-subnav-row + .page-heading-row .page-heading { flex: 0 0 auto; }
}
@media (max-width: 680px) {
  .gallery-cat-tabs-thumbs .thumb-tab span { white-space: normal; }
}
@media (min-width: 1025px) {
  /* photo height = whatever is left between the title row and the footer,
     so the photos grow on bigger monitors instead of leaving a gap, and
     never cause a scroll on smaller ones (height of everything above and
     below is fixed, measured once: --gallery-chrome-h). */
  :root { --gallery-chrome-h: 365px; --carousel-stage-height: clamp(300px, calc(100dvh - var(--gallery-chrome-h)), 900px); }
}

/* Donate: a white panel around ONLY the two links (Switzerland / elsewhere) */
.donate-layout .donate-options {
  background: #fff;
  border: 1.5px solid rgba(136, 139, 108, 0.3);
  border-radius: 10px;
  padding: 22px 28px;
  margin-top: 4px;
}
.donate-layout .donate-divider span { background: #fff; }

/* "Share this page" gets the same treatment as the Exhibition pill:
   cream fill, 2px gold frame, dark text; gold fill on hover. */
.btn-share {
  background: #fbf7ec;
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 8px;
  transition: background .18s ease, color .18s ease;
}
@media (hover: hover) {
  .btn-share:hover { background: var(--gold); color: #fff; }
}


/* ============================================================
   _015 — home footer, Bio/Studio/Journey rhythm, phone fixes
   ============================================================ */
/* Home: the footer's full-bleed trick (built for the padded inner pages)
   made it 20px wider than a phone screen -> sideways scroll. */
.frosty-hero ~ .site-footer { margin: 0; width: 100%; }

/* Bio / Studio / Journey: header line -> tab text -> divider -> title
   are all ~23px apart (were 23 / 19 / 33). */
@media (min-width: 781px) {
  .frosty-subtabs { padding-bottom: 18px; margin-bottom: 10px; }
}

/* Gallery category text tabs: phones only (icons everywhere else) */
.gallery-cat-tabs-text { display: none; }

@media (max-width: 780px) {
  /* Titles were pulled up under the sticky header (Exhibition, Contact). */
  .frosty-shell .content { padding-top: 16px; }
  .frosty-shell .page-heading,
  .frosty-shell .page-heading-row { margin-top: 0; }
  .frosty-subtabs { margin-bottom: 14px; }
}

@media (max-width: 680px) {
  /* one swipeable row of text tabs instead of the icon grid */
  .gallery-cat-tabs-thumbs { display: none; }
  .gallery-subnav-row { margin: 0; }
  .gallery-cat-tabs-text {
    display: flex;
    position: relative;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .gallery-cat-tabs-text::-webkit-scrollbar { display: none; }
  .gallery-cat-tabs-text.is-end { -webkit-mask-image: none; mask-image: none; }
  .gallery-cat-tabs-text a {
    flex: none;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 6px 0;
  }
  .gallery-cat-tabs-text a.current { color: var(--gold); font-weight: 700; }
  .gallery-subnav-row + .page-heading-row { margin-top: 14px; margin-bottom: 10px; }

  /* gallery hub: everything (all six tiles) above the fold */
  .frosty-page-head { padding: 0 16px 6px; }
  .frosty-page-head h1 { font-size: 24px; margin: 0 0 4px; }
  .frosty-page-head p { font-size: 12.5px; line-height: 1.45; }
  .frosty-gallery-grid { padding: 6px 16px 24px; gap: 10px; }
  .frosty-gtile { aspect-ratio: 5 / 4; }
}

@media (max-width: 680px) {
  /* the text-tab row freed ~200px: give it to the photo (fills down to the
     caption + footer; 340px = everything above the photo + caption + footer) */
  :root { --carousel-stage-height: clamp(260px, calc(100dvh - 340px), 560px); }
}


/* ============================================================
   _016 — gallery header band (wide screens, >= 1200px)
   Title + sentence on the left, the icon bar pushed to the right,
   one divider under the band, then the photos. Every gap = --gd.
   iPad and phones keep the stacked layout above (icons first).
   ============================================================ */
@media (min-width: 1200px) {
  .gallery-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: calc(var(--gd) - 5px);           /* -5: label box has ~5px air under its letters */
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: var(--gd);
  }
  /* negative right margin = half the slot's spare width, so the LAST ICON (not its slot) ends exactly at the content edge / divider end */
  .gallery-head .gallery-subnav-row { flex: none; margin: 6px calc((clamp(86px, 7vw, 104px) - 84px) / -2) 0 0; }   /* 6px = frame reach, so the FRAME sits --gd under the header */
  .gallery-head .gallery-cat-tabs-thumbs { border-bottom: 0; padding-bottom: 0; gap: 16px; }
  .gallery-head .gallery-cat-tabs-thumbs .thumb-tab { min-width: clamp(86px, 7vw, 104px); }
  .gallery-head .page-heading-row {
    order: -1;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    /* title capitals start level with the top of the selected icon's frame */
    margin: -2px 0 0 !important;
  }
  .gallery-head .page-heading-row .page-heading { flex: none; margin: 0 0 8px; }
  .gallery-head .page-heading-row .page-subheading {
    text-align: left;
    max-width: none;          /* the block simply takes the width the icons leave free (>= ~440px) */
    min-height: 0;
    margin: 0;
  }
  /* air between the photo captions and the footer text */
  .gallery-head ~ .site-footer { margin-top: 12px; }
  :root { --gallery-chrome-h: 331px; }
}
@media (min-width: 1400px) {
  .gallery-head .gallery-cat-tabs-thumbs { gap: 34px; }
}


/* ============================================================
   _019
   ============================================================ */
/* Top line of the frame travels with the sticky header (it used to be the
   shell's own border-top, which scrolled away). Home keeps the shell line:
   its header is transparent over the picture and that page does not scroll. */
.frosty-shell.has-sticky-nav { border-top: 0; }
.frosty-shell.has-sticky-nav > .frosty-nav { border-top: 3px solid var(--sage); }

/* Rounded corners belong to the PAINTING, not to its box: the photo is
   sized to its own (contain-fitted) rectangle, so even the very wide ones
   that are capped in width get the same 8px corners as everything else. */
.carousel-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.carousel-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--ar, auto);
  border-radius: 8px;
}


/* ============================================================
   _020 — header fit, fixed Bio/Studio/Journey tabs, Studio, Contact, Exhibition
   ============================================================ */
@media (min-width: 1150px) and (max-width: 1349px) {
  .frosty-nav { padding-left: 24px; padding-right: 24px; gap: 10px; }
  .frosty-links { gap: 12px; }
  .frosty-links a { font-size: 13.5px; letter-spacing: .4px; }
  .frosty-exhibition { font-size: 12.5px; letter-spacing: .5px; padding: 3px 8px; }
  .frosty-right { gap: 10px; }
}

/* Bio / Studio / Journey mini header stays put under the main header while
   the page scrolls beneath it (the divider is its bottom border). At rest it
   sits exactly where it always did: the negative margin and the padding
   cancel out. --nav-h is measured in frosty-nav.js. */
.frosty-shell .content { --content-pt: clamp(14px, 2vw, 20px); padding-top: var(--content-pt); }
@media (max-width: 780px) { .frosty-shell .content { --content-pt: 16px; } }
.frosty-subtabs {
  position: sticky;
  top: var(--nav-h, 73px);
  z-index: 60;
  background: var(--page-bg);
  margin-top: calc(-1 * var(--content-pt));
  padding-top: var(--content-pt);
}

/* ---------- Studio: icon bar + one big photo ---------- */
.studio-head .thumb-tab span { white-space: normal; max-width: 104px; line-height: 1.25; }
.studio-head .gallery-cat-tabs-thumbs .thumb-tab { min-width: 92px; }
.studio-head .gallery-cat-tabs-text { display: none !important; }
.studio-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 6px;
}
.studio-photo {
  margin: 0;
  background: #ece5d3;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(240px, 54vw, 480px);
  padding: 14px;
  box-sizing: border-box;
}
.studio-photo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  cursor: zoom-in;
}
.studio-text h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  color: #374736;
  margin: 0 0 8px;
}
.studio-text p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.studio-next {
  font: 600 12px var(--font-body, "Work Sans", sans-serif);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
@media (hover: hover) { .studio-next:hover { text-decoration: underline; } }
@media (min-width: 1200px) {
  .studio-feature { grid-template-columns: minmax(0, 760px) 1fr; gap: 40px; }
  .studio-photo { height: clamp(260px, calc(100dvh - 352px), 540px); }
}
@media (max-width: 680px) {
  .studio-head .gallery-cat-tabs-thumbs {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 6px 6px 12px;   /* room for the selected icon's frame */
    scrollbar-width: none;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .studio-head .gallery-cat-tabs-thumbs::-webkit-scrollbar { display: none; }
  .studio-head .thumb-tab { min-width: 0 !important; flex: none; }
  .studio-head .thumb-tab img { width: 58px !important; height: 58px !important; }
  .studio-head .thumb-tab span { display: none; }
}

/* ---------- Exhibition: flyer + opening hours inside the card ---------- */
.exhibition-banner { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 0; }
.exhibition-flyer {
  margin: 0;
  background: #e9e2cf;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exhibition-flyer img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  cursor: zoom-in;
}
.exhibition-flyer figcaption { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }
.exh-hours { border-collapse: collapse; margin: 2px 0 4px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.exh-hours td { padding: 0 22px 0 0; vertical-align: top; }
.exh-hours-note { font-size: 13px; color: var(--muted); font-style: italic; margin: 0 !important; }
@media (max-width: 820px) { .exhibition-banner { grid-template-columns: 1fr; } }

/* ---------- Contact: form + giraffe ----------
   The message box stretches so its bottom edge lines up with the bottom of
   the giraffe's frame, at any window height; the Send row sits below both.
   (.contact-col is display:contents, so its children take part in the grid.) */
.contact-layout {
  --giraffe-h: clamp(300px, calc(100dvh - 300px), 440px);
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: 40px;
  align-items: start;
}
.contact-col { display: contents; }
.contact-layout .contact-intro { grid-column: 1; grid-row: 1; }
.contact-layout .contact-intro-line2 { grid-column: 1; grid-row: 2; }
.contact-layout .contact-form {
  grid-column: 1; grid-row: 3;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.contact-layout .contact-form .form-field:nth-of-type(3) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.contact-layout .contact-form textarea { flex: 1 1 auto; height: auto; min-height: 120px; resize: none; }
.contact-layout .form-footer-row { grid-column: 1; grid-row: 4; }
.contact-giraffe {
  grid-column: 2; grid-row: 1 / 4;
  justify-self: center;            /* centred in the free space to the right of the form */
  align-self: start;
  display: block;
  height: var(--giraffe-h);
  width: auto;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; grid-template-rows: none; }
  .contact-col { display: block; }
  .contact-layout .contact-intro, .contact-layout .contact-intro-line2, .contact-layout .contact-form, .contact-layout .form-footer-row { grid-column: auto; grid-row: auto; }
  .contact-layout .contact-form { display: block; height: auto; }
  .contact-layout .contact-form .form-field:nth-of-type(3) { display: block; }
  .contact-layout .contact-form textarea { height: 170px; resize: vertical; }
  .contact-giraffe { grid-column: auto; grid-row: auto; height: 260px; margin-top: 8px; }
}

@keyframes swapfade { from { opacity: 0; } to { opacity: 1; } }
.swap-fade { animation: swapfade .22s ease; }
.exh-hours { width: auto; }
.exh-hours td:first-child { white-space: nowrap; }
.contact-layout .contact-form .form-field:nth-of-type(3) { margin-bottom: 0; }
@media (max-width: 900px) { .contact-layout .contact-form .form-field:nth-of-type(3) { margin-bottom: 18px; } }
@media (min-width: 901px) { .contact-layout .form-footer-row { margin-top: 16px; } }


/* ============================================================
   _021 — iPad fixes
   ============================================================ */

/* ---- Home, iPad portrait: bigger "Hi, I'm Réka" glass box, a bit up and left,
   with the forest painting bigger and on the same left edge ---- */
@media (min-width: 781px) and (max-width: 1149px) and (orientation: portrait) {
  .frosty-tbox {
    left: 4%; top: 11%;
    width: 40%;
    padding: 22px 24px 24px;
    border-radius: 18px;
  }
  .frosty-tbox h1 { font-size: 27px; margin-bottom: 10px; }
  .frosty-tbox p  { font-size: 15.5px; line-height: 1.55; }
  .frosty-accent-photo { left: 4%; width: min(23%, 230px, 24cqh); }
}

/* ---- Galleries on iPad: the photos sit right under the "Tap image to enlarge"
   line (the spare height goes BELOW the captions, not above the photos). ---- */
@media (min-width: 781px) and (max-width: 1199px) and (hover: none) {
  .carousel-touch-hint { margin: -4px 0 8px; }
  .gallery-head ~ .carousel { margin-top: 0; margin-bottom: auto; }
}
/* portrait: the freed height makes the photos a little bigger */
@media (min-width: 781px) and (max-width: 1024px) and (orientation: portrait) {
  :root { --carousel-stage-height: min(540px, 56dvh); }
}
/* landscape (1080 wide): everything — photos, both caption lines and the footer —
   fits the window without scrolling. 402px = header + icon bar + title row + hint
   + caption band + footer; a little air is added on top of that. */
@media (min-width: 1025px) and (max-width: 1199px) and (hover: none) {
  :root { --gallery-chrome-h: 402px; }
}

/* ---- Studio (iPad) ---- */
/* icon bar: the divider under the labels now sits as close as the one above the
   icons (was ~19px under two-line labels vs ~10px above); everything below moves up */
@media (min-width: 681px) {
  .studio-head .gallery-cat-tabs-thumbs { padding-bottom: 6px; }
}
/* landscape iPad (1080 wide): photo and text side by side, photo sized to the window,
   so the WHOLE picture is visible without scrolling */
@media (min-width: 1025px) and (max-width: 1199px) {
  .studio-feature { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .studio-photo { height: clamp(240px, calc(100dvh - 430px), 540px); }
}

/* ---- Contact (iPad) ---- */
/* landscape (1080): Name and E-mail as wide as the message box */
@media (min-width: 901px) and (max-width: 1199px) {
  .contact-layout .contact-form .form-field:nth-of-type(1),
  .contact-layout .contact-form .form-field:nth-of-type(2) { max-width: none; }
}
/* portrait (810): the message box is as narrow as Name / E-mail and taller, and the
   giraffe stands to the right of the form instead of underneath it */
@media (min-width: 781px) and (max-width: 900px) {
  .contact-layout {
    --giraffe-h: 480px;
    display: grid;
    grid-template-columns: minmax(0, 440px) 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: start;
  }
  .contact-col { display: contents; }
  .contact-layout .contact-intro { grid-column: 1; grid-row: 1; }
  .contact-layout .contact-intro-line2 { grid-column: 1; grid-row: 2; }
  .contact-layout .contact-form {
    grid-column: 1; grid-row: 3;
    max-width: none;
    display: flex; flex-direction: column;
    min-height: 0; height: 100%;
  }
  .contact-layout .contact-form .form-field:nth-of-type(1),
  .contact-layout .contact-form .form-field:nth-of-type(2) { max-width: none; }
  .contact-layout .contact-form .form-field:nth-of-type(3) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
  .contact-layout .contact-form textarea { flex: 1 1 auto; height: auto; min-height: 120px; resize: none; }
  .contact-layout .form-footer-row { grid-column: 1; grid-row: 4; margin-top: 16px; }
  .contact-giraffe { grid-column: 2; grid-row: 1 / 4; justify-self: center; align-self: start; height: var(--giraffe-h); margin-top: 0; }
}

/* ---- Enlarged view: the title / size line was white text straight on the photo
   (unreadable on light sketches). The photo now leaves its own band for the
   caption, and the caption sits on a dark translucent strip. ---- */
.lightbox-caption {
  background: rgba(20, 22, 15, 0.78);
  padding: 8px 18px 9px;
  border-radius: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.lightbox-overlay.has-caption {
  padding-bottom: 110px;
  padding-top: 24px;
}
.lightbox-overlay.has-caption img { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
@media (hover: none) {
  .lightbox-overlay.has-caption { padding-bottom: 130px; }
  .lightbox-overlay.has-caption img { max-height: calc(100vh - 175px); max-height: calc(100dvh - 175px); }
}

/* ---- Bio, landscape iPad: smaller round photo => wider text => fewer lines,
   so the last lines and the quote fit without scrolling ---- */
@media (min-width: 1025px) and (max-width: 1199px) {
  .bio-photo-col { width: 200px; margin-right: 28px; }
  .bio-portrait-img { width: 200px; }
  .bio-text { max-width: none; line-height: 1.6; }
  .bio-text p { margin-bottom: 12px; }
  .bio-quote { margin: 16px 0 0; padding: 12px 0 12px 22px; }
}

/* ---- Donate, landscape iPad: the two buttons side by side, shrunk to fit ---- */
@media (min-width: 781px) and (max-width: 1199px) and (orientation: landscape) {
  .donate-layout .donate-options { flex-direction: row; flex-wrap: nowrap; gap: 14px; padding: 16px 18px; align-items: center; }
  .donate-layout .donate-option { flex: 1 1 0; min-width: 0; align-items: center; }
  .donate-layout .donate-option .btn { width: 100%; max-width: 230px; padding-left: 10px; padding-right: 10px; box-sizing: border-box; text-align: center; }
  .donate-layout .donate-divider { width: 1px; height: auto; align-self: stretch; }
  .donate-layout .donate-option-label { text-align: center; }
}


/* ============================================================
   _023 — one menu design (tablet + phone), phone header that fits
   ============================================================ */

/* Nothing may make the page scroll sideways. */
html, body { overflow-x: clip; }

/* ---- The menu button: the word MENU stacked above the three bars. The word is
   drawn by CSS inside the button (so no change to the 75 pages, and tapping the
   word taps the button). Wording follows <html lang>. ---- */
@media (max-width: 1149px) {
  .frosty-menu-toggle {
    width: auto; min-width: 40px; height: auto;
    padding: 3px 3px 4px;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .frosty-menu-toggle::before {
    content: "MENU";
    font-family: var(--font-body, "Work Sans", system-ui, sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    padding-left: 1px;              /* balances the trailing letter-spacing */
    color: inherit;
  }
  html[lang="de"] .frosty-menu-toggle::before,
  html[lang="hu"] .frosty-menu-toggle::before { content: "MENÜ"; }

  /* ---- The dropdown: a small panel right under the button, right-aligned,
     exactly as wide as its longest item ---- */
  .frosty-nav-mobile {
    left: auto;
    right: clamp(20px, 4vw, 48px);        /* = the header's own side padding, so the panel's right edge is the button's right edge */
    top: calc(100% + 6px);
    width: max-content;
    min-width: 190px;
    max-width: calc(100% - 24px);
    padding: 6px 0;
    border-bottom: 0;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
  }
  .frosty-nav-mobile.open { animation: frostyMenuIn .16s ease; }
  .frosty-nav-mobile::before {            /* little pointer up to the button */
    content: "";
    position: absolute;
    top: -6px; right: 15px;
    width: 14px; height: 14px;
    background: var(--page-bg);
    transform: rotate(45deg);
    border-radius: 3px;
  }
  .frosty-nav-mobile a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 24px;
    text-align: right;
    white-space: nowrap;
  }
  .frosty-nav-mobile a + a { border-top: 1px solid rgba(0, 0, 0, .07); }
  .frosty-nav-mobile a[href="exhibition.html"] { color: var(--gold); font-weight: 700; }
}
/* the Exhibition pill is in the header on tablets, so the menu doesn't repeat it */
@media (min-width: 781px) and (max-width: 1149px) {
  .frosty-nav-mobile a[href="exhibition.html"] { display: none; }
  .frosty-menu-toggle::before { font-size: 11px; }
}
@keyframes frostyMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* dim the page behind the open menu; a tap on it closes the menu (see frosty-nav.js) */
.frosty-menu-scrim {
  position: fixed; inset: 0;
  z-index: 90;
  background: rgba(20, 22, 15, .28);
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
}
.frosty-menu-scrim.on { opacity: 1; visibility: visible; }

/* ---- Phone header that FITS. At 360px the old header had ~3px to spare, so a
   bigger system font size (or any narrower window) pushed the hamburger against
   the edge and made the page wider than the screen. Now ~30px to spare, the
   pills keep fixed boxes, and the logo is the one thing that may shrink. ---- */
@media (max-width: 400px) {
  .frosty-nav { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .frosty-nav-mobile { right: 12px; }
  .frosty-word { font-size: clamp(18px, 5.4vw, 20px); flex: 0 1 auto; min-width: 0; }
  .frosty-right { gap: 6px; flex: 0 0 auto; }
  .lang-switch a, .lang-switch-hu a { width: 26px; height: 24px; font-size: 11px; }
  .lang-switch-row { gap: 3px; }
}

/* ---- Home: exactly one screen, no wobble up or down. Only when the window is
   tall enough for the whole picture (a phone held sideways still scrolls). ---- */
@media (min-height: 480px) {
  html:has(.frosty-hero), html:has(.frosty-hero) body { overflow: hidden; overscroll-behavior: none; }
}


/* ============================================================
   _025 — New works
   The "New works" icon / tab, the homepage "Latest work" pill and the small
   NEW tags only exist while something is new (html.has-new is set in the
   <head> by js/new-works.js, before the first paint, so nothing pops in).
   ============================================================ */

/* off by default ... */
.gallery-cat-tabs-thumbs .thumb-tab.thumb-tab-new { display: none; }
.gallery-cat-tabs-text a.tab-new { display: none; }
.frosty-latest { display: none; }
/* ... on while something is new */
.has-new .gallery-cat-tabs-thumbs .thumb-tab.thumb-tab-new { display: flex; }
.has-new .gallery-cat-tabs-text a.tab-new { display: block; }
.has-new .frosty-latest { display: flex; }

/* the orange dot on the icon's picture */
.gallery-cat-tabs-thumbs .thumb-tab .ti { position: relative; display: block; line-height: 0; }
.new-dot {
  position: absolute; top: -5px; right: -5px; z-index: 2;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--page-bg);
}

/* NEW tag on a painting (top-left corner of the picture) */
.new-tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 6px 11px; border-radius: 999px;
  background: var(--gold); color: #fdf6e8;
  font: 700 11px/1 var(--font-body);
  letter-spacing: .1em;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  pointer-events: none;
  visibility: hidden;          /* shown once js has put it on the painting's corner */
}
.new-tag.placed { visibility: visible; }

/* ---- Seven icons instead of six (only while "New works" exists; otherwise the six-icon bar is exactly as before): the pictures keep their size, the space BETWEEN
   them shrinks with the window (a little tighter than before at every width, and
   tighter still on narrow windows). Each icon box is exactly as wide as its picture
   (the label may be wider and is centred under it), so the last icon still ends
   exactly at the divider. A long label wraps to two lines instead of touching its
   neighbour. ---- */
@media (min-width: 781px) {
  .has-new .gallery-head .gallery-cat-tabs-thumbs {
    --tg: clamp(14px, calc(6.6vw - 34px), 40px);
    flex-wrap: nowrap;
    gap: var(--tg);
  }
  .has-new .gallery-head .gallery-cat-tabs-thumbs .thumb-tab { width: 84px; min-width: 0; flex: none; }
  .has-new .gallery-head .gallery-cat-tabs-thumbs .thumb-tab span:not(.ti) {
    white-space: normal;
    width: max-content;                      /* may be wider than the picture ... */
    max-width: calc(84px + var(--tg) - 6px);  /* ... but never touches the next label */
  }
}
@media (min-width: 1200px) {
  /* icons exactly as wide as their pictures: the old negative-margin trick is not needed any more */
  .has-new .gallery-head .gallery-subnav-row { flex: 0 0 auto; margin: 6px 0 0 0; }
  .has-new .gallery-head .gallery-cat-tabs-thumbs { --tg: clamp(16px, calc(17.5vw - 194px), 42px); }
  /* the title block keeps at least this much; the sentence wraps to two lines below it */
  .has-new .gallery-head .page-heading-row { min-width: 300px; }
}
/* small tablets / big phones held sideways: seven icons in two tidy rows of 4 + 3 */
@media (min-width: 681px) and (max-width: 780px) {
  .has-new .gallery-cat-tabs-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Homepage: "Latest work" pill under the small painting. The painting itself
   is unchanged (same picture, same size, never rotates); it only sits a little
   higher to make room for the pill. ---- */
.frosty-latest {
  position: absolute; z-index: 12;
  left: 6%; bottom: max(10px, 2.2cqh);
  box-sizing: border-box;
  width: max-content;
  min-width: min(230px, 18%, 26cqh);   /* at least as wide as the painting above it */
  height: 34px;
  align-items: center; gap: 8px;
  padding: 0 12px 0 5px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(28,38,30,.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; text-decoration: none;
  font: 600 13px/1 var(--font-body);
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.frosty-latest .fl-tag {
  padding: 5px 8px; border-radius: 999px;
  background: var(--gold); color: #fdf6e8;
  font: 700 10.5px/1 var(--font-body); letter-spacing: .1em;
}
.frosty-latest .fl-text { flex: 1; }
.frosty-latest .fl-chev { font-size: 19px; line-height: 1; margin-top: -2px; }
.frosty-latest:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .frosty-latest:hover { background: rgba(28,38,30,.78); transform: translateY(-2px); }
}
/* the painting rises by the pill's height + a small gap (only while the pill exists) */
.has-new .frosty-accent-photo { bottom: calc(max(10px, 2.2cqh) + 34px + 8px); }

@media (min-width: 781px) and (max-width: 1149px) and (orientation: portrait) {
  .frosty-latest { left: 4%; min-width: min(23%, 230px, 24cqh); }
}
@media (max-width: 780px) {
  .frosty-latest { left: 5%; bottom: 12px; height: 28px; gap: 6px; padding: 0 9px 0 4px; font-size: 12px; min-width: clamp(60px, 21vw, 84px); }
  .frosty-latest .fl-tag { padding: 4px 7px; font-size: 9.5px; }
  .frosty-latest .fl-chev { font-size: 17px; }
  .has-new .frosty-accent-photo { bottom: calc(12px + 28px + 6px); }
}
@media (max-width: 780px) and (max-height: 470px) {
  .has-new .frosty-latest { display: none; }
}


/* ============================================================
   V19_007 — home: thinner white edge on the small painting,
   "Latest works" pill with the same soft corners as the glass boxes
   ============================================================ */
.frosty-accent-photo { border-width: 1.5px; }
@media (max-width: 780px) { .frosty-accent-photo { border-width: 1.5px; } }
.frosty-latest { border-radius: 9px; }
.frosty-latest .fl-tag { border-radius: 6px; }

/* ================= V19_026: phones held upright — slimmer menu bar (74px → 52px) ================= */
@media (max-width: 600px) and (min-height: 480px) {
  .frosty-shell > .frosty-nav.frosty-nav { padding-top: 5px; padding-bottom: 5px; }   /* V19_029: 48px */
}

/* ================= V19_028: tablets held upright (iPad 9 portrait) — slimmer menu bar (75px → 53px) ================= */
@media (min-width: 601px) and (max-width: 900px) and (min-height: 640px) {
  .frosty-shell > .frosty-nav.frosty-nav { padding-top: 7px; padding-bottom: 7px; }
}