/* ---- Fonts: served from this site, not Google (a GDPR point) -------- */
/* Marck Script and Manrope, SIL Open Font License (static/fonts/OFL-*.txt).
   Manrope is a variable font: one file per alphabet covers weights 300-600. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Marck Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marck-script-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Marck Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marck-script-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Marck Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marck-script-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Theme palettes -------------------------------------------------- */
/* data-theme lives on #page, not <body>: hx-boost swaps body's innerHTML,
   so an attribute on <body> would never be refreshed by a boosted nav. */
#page[data-theme="white"] {
  --bg: #fafaf8; --nav-bg: rgba(250,250,248,0.85); --ink: #1c1b18;
  --body-text: #3a3934; --muted: #7b786f; --panel: #f1f0ec;
  --line: #e3e1da; --accent: #8a3b2e;
}
#page[data-theme="atelier"] {
  --bg: #f5eee1; --nav-bg: rgba(245,238,225,0.85); --ink: #2b2419;
  --body-text: #4a4234; --muted: #8a7f6b; --panel: #ede3cf;
  --line: #ddd1b8; --accent: #9c4a24;
}
#page[data-theme="dark"] {
  --bg: #191918; --nav-bg: rgba(25,25,24,0.85); --ink: #ece9e2;
  --body-text: #c9c5bc; --muted: #95917f; --panel: #211f1d;
  --line: #343330; --accent: #c8a05a;
}

/* ---- Base ------------------------------------------------------------ */
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Manrope', sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; }
img { max-width: 100%; display: block; }

#page {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  transition: background .4s, color .4s;
}

.serif { font-family: 'Marck Script', cursive; }

/* ---- Nav ------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 6px clamp(20px, 5vw, 64px);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The name is the tallest thing in the bar (32px, line-height 1), so the
   nav's height follows it: 47px on desktop with the 6px vertical padding.
   A bigger name makes the whole bar taller. --nav-height must match the
   measured bar, because the sections keep that much clear when an anchor
   scrolls them into view (scroll-margin-top on .section); check it in a
   browser after any change to the bar. */
:root { --nav-height: 47px; }
.wordmark {
  padding-top: 2px;
  font-family: 'Marck Script', cursive;
  font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap;
  align-self: center;
}
.nav-links {
  display: flex; align-items: center; gap: clamp(14px, 2.5vw, 32px);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  flex-wrap: wrap; justify-content: flex-end;
}
.switch {
  display: flex; gap: 2px;
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
}
.switch-option {
  padding: 6px 10px; font-size: 11px; letter-spacing: .1em;
  color: var(--muted); background: transparent; cursor: pointer;
}
.switch-option.is-active { background: var(--ink); color: var(--bg); }
.switch-option.is-active:hover { opacity: 1; }

/* The phone menu toggle is desktop-invisible; the checkbox stays in the DOM
   (and focusable) rather than display:none, which would drop it from the tab
   order and from the accessibility tree. */
.nav-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nav-toggle { display: none; }

/* ---- Nav on phones and tablets ---------------------------------------
   Below this width the four section links plus both switch groups no longer
   fit on one line: .nav-links wrapped to three rows and the vertically
   centred wordmark ended up looking like it sat beneath them. Collapse the
   lot behind ☰ instead. Tap targets go to the 44px minimum here only —
   the desktop bar keeps its tighter proportions.

   1023px is measured, not chosen for tidiness: the Bulgarian labels are the
   long ones ("ЗА ХУДОЖНИКА" against "ABOUT"), and they wrap the bar to two
   rows until ~1024px. Setting the breakpoint by the English width would
   leave Bulgarian visitors — the primary audience — with the broken nav on
   every tablet. Re-measure both languages before moving this. */
@media (max-width: 1023px) {
  /* The 44px menu toggle sets the height here: 44 + 6 + 6 + the 1px border. */
  :root { --nav-height: 57px; }
  .site-nav { flex-wrap: wrap; gap: 0 16px; padding: 6px clamp(16px, 5vw, 24px); }

  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -12px;
    font-size: 20px; line-height: 1; cursor: pointer; color: inherit;
  }
  .nav-toggle-input:focus-visible ~ .nav-toggle {
    outline: 2px solid var(--ink); outline-offset: -4px;
  }

  .nav-links {
    display: none; flex-basis: 100%; flex-direction: column;
    align-items: stretch; gap: 0; padding-bottom: 10px;
  }
  .nav-toggle-input:checked ~ .nav-links { display: flex; }

  .nav-links > a {
    display: flex; align-items: center; min-height: 44px;
    border-top: 1px solid var(--line);
  }
  .nav-links .switch { align-self: flex-start; margin-top: 14px; }
  .nav-links .switch + .switch { margin-top: 8px; }
  .switch-option {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 16px;
  }
}

/* ---- Shared section furniture --------------------------------------- */
.section {
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
  /* A menu link lands the section just under the sticky bar, not behind it. */
  scroll-margin-top: var(--nav-height);
}
.section-inner { max-width: 1280px; margin: 0 auto; }
.section--panel { background: var(--panel); border-top: 1px solid var(--line); }
.section--bordered { border-top: 1px solid var(--line); }
.section-title {
  font-family: 'Marck Script', cursive; font-weight: 500;
  font-size: clamp(30px, 3.5vw, 44px); margin: 0;
}
.button {
  display: inline-block; border: 1px solid var(--ink);
  padding: 13px 30px; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; background: none; color: inherit;
  font-family: 'Manrope', sans-serif; cursor: pointer;
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px clamp(20px, 5vw, 64px);
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; font-size: 12px; letter-spacing: .08em; color: var(--muted);
}

/* ---- Hero ------------------------------------------------------------ */
.hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 64px);
  max-width: 1280px; margin: 0 auto;
}
.hero-name {
  font-family: 'Marck Script', cursive; font-weight: 500;
  font-size: clamp(44px, 6vw, 84px); line-height: 1.02; margin: 24px 0 28px;
}
.hero-sub {
  font-size: 16px; line-height: 1.7; color: var(--muted);
  max-width: 44ch; margin: 0 0 36px;
}
.hero-caption {
  margin-top: 14px; font-size: 16px; font-style: italic; color: var(--muted);
}
.frame { border: 1px solid var(--line); padding: 16px; background: var(--panel); }
.frame--hero { height: clamp(360px, 48vw, 560px); }
.frame--portrait { height: clamp(340px, 42vw, 480px); max-width: 420px; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Gallery --------------------------------------------------------- */
.section-head {
  display: flex; align-items: baseline; gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px; margin-bottom: 40px;
}
.section-sub {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.masonry { columns: 3 300px; column-gap: 28px; }
/* Dealt into columns by site.js so the order reads across the rows. */
.masonry.is-dealt { columns: auto; display: flex; align-items: flex-start; gap: 28px; }
.masonry-col { flex: 1; min-width: 0; }
.tile {
  position: relative; break-inside: avoid; margin: 0 0 28px;
  border: 1px solid var(--line); background: var(--panel); padding: 12px;
  cursor: zoom-in;
}
.tile-image { overflow: hidden; }
.tile-image img { width: 100%; height: 100%; object-fit: cover; }
/* Inset by the tile's own padding, so the veil covers the picture exactly. */
.tile-caption {
  position: absolute; inset: 12px;
  background: rgba(15,14,12,.62);
  color: #f3f1ea; opacity: 0; transition: opacity .3s ease;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px; cursor: zoom-in;
}
.tile:hover .tile-caption,
.tile:focus-visible .tile-caption { opacity: 1; }
/* The label block shared by tile and lightbox veils: the title large in the
   script face, the detail lines small beneath it, as on a gallery label. */
.cap { display: flex; flex-direction: column; align-items: center; }
.cap-title { font-size: 42px; line-height: 1.05; font-weight: 400; text-wrap: balance; }
.cap-size, .cap-medium, .cap-price { font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; opacity: .9; }
.cap-size { margin-top: 8px; }
.cap-medium, .cap-price { margin-top: 2px; }
/* A tile has less room than the lightbox: the title steps down there, and
   the detail lines step up over the big picture. The heart keeps its own
   size in both — it is a control, not a line of the label. */
.tile-caption .cap-title { font-size: 36px; }
.lightbox-veil .cap-size, .lightbox-veil .cap-medium, .lightbox-veil .cap-price { font-size: 15px; }
.lightbox-veil .heart { font-size: 20px; }

/* Heart and share mark side by side; "I'd like to buy" on its own row below. */
.cap-actions {
  display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center;
  gap: 10px 18px; margin-top: 10px;
}
.cap-actions .buy-open { grid-column: 1 / -1; justify-self: center; }

.heart {
  padding: 4px 10px; border: 0; background: none; color: inherit;
  font: inherit; font-size: 18px; font-weight: 600; letter-spacing: .08em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.heart:hover, .heart:focus-visible { opacity: 1; transform: scale(1.08); }
.heart-glyph { font-size: 26px; line-height: 1; }
.heart.is-on .heart-glyph { color: #e0564b; }

/* Share: the mark beside the heart opens the modal below. */
.share-open {
  padding: 4px 10px; border: 0; background: none; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.share-open:hover, .share-open:focus-visible { opacity: 1; transform: scale(1.08); }
.share-mark { width: 26px; height: 26px; fill: currentColor; }

/* ---- Share modal ------------------------------------------------------ */
/* Above the lightbox (200), since it can be opened from inside it. */
.share-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.share-backdrop { position: absolute; inset: 0; background: rgba(14,13,12,.72); cursor: pointer; }
.share-panel {
  position: relative; width: min(600px, 92vw); max-height: 90vh; overflow: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  padding: 22px 24px 26px; font-family: 'Manrope', sans-serif;
}
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.share-title { font-size: 34px; line-height: 1.1; }
.share-close {
  background: none; border: 1px solid var(--line); color: var(--ink);
  width: 40px; height: 40px; border-radius: 50%; font-size: 16px; cursor: pointer; flex-shrink: 0;
}
.share-close:hover { background: var(--ink); color: var(--panel); }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.share-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 8px 12px; border: 1px solid var(--line); background: var(--bg);
  color: inherit; text-decoration: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .2s ease, transform .2s ease;
}
.share-item:hover, .share-item:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.share-item svg { width: 28px; height: 28px; fill: currentColor; }
.share-link { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.share-link input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none;
  padding: 9px 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
/* ---- Buy -------------------------------------------------------------- */
/* "I'd like to buy" sits with the heart and the share mark in the caption. */
.buy-open {
  padding: 7px 14px; border: 1px solid currentColor; background: none; color: inherit;
  font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; opacity: .85; transition: opacity .2s ease, transform .2s ease;
}
.buy-open:hover, .buy-open:focus-visible { opacity: 1; transform: scale(1.04); }
/* The modal borrows the share panel; these are only its own parts. */
.buy-guide { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.buy-form { display: flex; flex-direction: column; gap: 14px; }
.buy-form .share-link { margin-top: 0; }
.buy-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* On a phone the title wraps to three lines and the panel meets its 90vh
   cap; a smaller title and a tighter form let the whole enquiry fit. */
@media (max-width: 600px) {
  .buy-fields { grid-template-columns: 1fr; }
  .buy-modal .share-title { font-size: 28px; }
  .buy-form { gap: 12px; }
}
.buy-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.button--viber { display: inline-flex; align-items: center; gap: 10px; }
.button--viber svg { width: 18px; height: 18px; fill: currentColor; }
.buy-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.tile-zoom {
  position: absolute; right: 14px; bottom: 12px;
  font-size: 20px; line-height: 1; opacity: .85;
}
/* A screen that cannot hover has no veil: the label sits under the picture
   as a normal block, in the page's own colours, and the zoom glyph goes. */
@media (hover: none) {
  .tile-caption {
    position: static; inset: auto; opacity: 1; transition: none;
    background: none; color: inherit; padding: 14px 0 2px; cursor: default;
  }
  .tile-caption .cap-title { font-size: 28px; }
  .tile-caption .cap-size, .tile-caption .cap-medium, .tile-caption .cap-price { font-size: 12px; }
  .tile-zoom { display: none; }
  /* One row under the label: heart, "I'd like to buy", share mark. */
  .cap-actions { grid-template-columns: auto auto auto; gap: 0 12px; }
  .cap-actions .heart { order: 1; }
  .cap-actions .buy-open { grid-column: auto; order: 2; }
  .cap-actions .share-open { order: 3; }
}

/* ---- Exhibitions ----------------------------------------------------- */
.exhibitions-title { margin-bottom: 40px; }
.exhibitions-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.exhibitions-column { display: flex; flex-direction: column; gap: 44px; }
.list-heading {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.record-list { display: flex; flex-direction: column; }
.record {
  display: flex; gap: 20px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.record-year { font-size: 17px; min-width: 48px; color: var(--accent); }
.record-place { align-self: center; }

/* ---- About ----------------------------------------------------------- */
.about-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.about-title { margin-bottom: 28px; }
.prose { display: flex; flex-direction: column; gap: 16px;
  font-size: 15px; line-height: 1.75; color: var(--body-text); }
.prose p { margin: 0; }

/* ---- Lightbox -------------------------------------------------------- */
/* Lock the page behind the modal. :has() lets the body react to the fragment
   htmx injects, with no JavaScript and no extra server round-trip. */
body:has(.lightbox) { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14,13,12,.96); color: #f3f1ea;
  display: flex; flex-direction: column;
}
.lightbox-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 40px);
}
.lightbox-counter { font-size: 12px; letter-spacing: .2em; color: #a49f93; }
.lightbox-close {
  background: none; border: 1px solid rgba(243,241,234,.3); color: #f3f1ea;
  width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer;
}
.lightbox-body {
  flex: 1; display: flex; align-items: stretch; gap: 8px;
  padding: 0 clamp(8px, 2vw, 32px); min-height: 0;
}
.lightbox-arrow {
  background: none; border: none; color: #f3f1ea; font-size: clamp(56px, 6vw, 84px); line-height: 1;
  cursor: pointer; padding: 0 clamp(8px, 2vw, 32px); flex-shrink: 0; opacity: .85;
  transition: opacity .2s ease;
}
.lightbox-arrow:hover, .lightbox-arrow:focus-visible { opacity: 1; }
.lightbox-stage { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* The figure is told the picture's proportions (an inline aspect-ratio from
   the file) and may grow only to the stage, so it can only ever be the
   painted rectangle: the veil covers the paint and not the dark around it. */
.lightbox-picture { position: relative; margin: 0; max-width: 100%; max-height: 100%; }
.lightbox-picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lightbox-veil {
  position: absolute; inset: 0; margin: 0; padding: 18px;
  background: rgba(15,14,12,.62); color: #f3f1ea;
  display: flex; align-items: center; justify-content: center; text-align: center;
  opacity: 0; transition: opacity .3s ease;
}
.lightbox-picture:hover .lightbox-veil,
.lightbox-veil:focus-within { opacity: 1; }
/* The small pictures under the big one. Their padding is also what keeps the
   picture off the bottom edge now that the footer hides on hover screens. */
.lightbox-strip {
  display: flex; justify-content: center; gap: 10px; flex-shrink: 0;
  padding: 16px 16px 22px;
}
/* Seven across, always: 120px wide unless the viewport cannot hold seven
   with the gaps and the strip's side padding, when they shrink to fit. */
.strip-item {
  width: min(120px, calc((100vw - 32px - 6 * 10px) / 7)); aspect-ratio: 3 / 2;
  padding: 0; border: 2px solid transparent; background: none;
  cursor: pointer; opacity: .5; transition: opacity .2s ease, border-color .2s ease;
}
.strip-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.strip-item:hover, .strip-item:focus-visible { opacity: 1; }
.strip-item.is-current { opacity: 1; border-color: #c8a05a; cursor: default; }

.lightbox-footer { text-align: center; padding: 4px 24px 24px; }
/* A screen that can hover gets the veil; one that cannot gets the footer —
   the same label, heart, share and buy included — and no veil at all, so a
   tap on the painting does not summon one. */
@media (hover: hover) { .lightbox-footer { display: none; } }
@media (hover: none) {
  .lightbox-veil { display: none; }
  .lightbox-footer .cap-title { font-size: 28px; }
  .lightbox-footer .cap-size, .lightbox-footer .cap-medium, .lightbox-footer .cap-price { font-size: 13px; }
  .lightbox-footer .heart { font-size: 20px; }

  /* A swipe browses (site.js): no arrows, and the picture takes the width
     they and their padding held. */
  .lightbox-arrow { display: none; }
  .lightbox-body { padding: 0 8px; gap: 0; }

  /* The area under the picture is one fixed height for both the label and
     the reel, so the picture stays put when one stands in for the other. The
     reel (site.js) shows only while browsing and for two seconds after: it
     rises in, fades, and the label rises back. The server's strip is for
     hover screens. */
  .lightbox-under { display: grid; place-items: center; min-height: 176px; width: 100%; }
  .lightbox-strip { display: none; }
  .reel-strip { display: none; position: relative; width: 100%; height: 76px; overflow: hidden; }
  #lightbox.is-browsing .reel-strip { display: block; }  /* its entrance and exit: site.js */
  #lightbox.is-browsing .lightbox-footer { display: none; }
  .lightbox-footer { animation: lightbox-rise .3s ease; }
  .reel-item {
    position: absolute; top: 50%; left: 0; aspect-ratio: 3 / 2; padding: 0;
    border: 2px solid transparent; background: none; cursor: pointer;
  }
  .reel-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .reel-item.is-current { border-color: #c8a05a; }

  /* The picture track: five slides around the current one, each sized by
     site.js exactly as the server's flex-centred figure would be. */
  .reel-stage { position: relative; overflow: hidden; touch-action: pan-y; }
  .reel-track { position: absolute; inset: 0; }
  .reel-slide { position: absolute; left: 50%; top: 50%; margin: 0; max-width: none; max-height: none; }
  .reel-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
}
@keyframes lightbox-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lightbox-footer { animation: none !important; }
}
}

/* ---- Contact --------------------------------------------------------- */
.contact { text-align: center; }
.contact-sub {
  font-size: 15px; color: var(--muted); max-width: 52ch;
  margin: 16px auto 32px; line-height: 1.7;
}
/* The other two ways in: Viber and the phone, as buttons above the form. */
.contact-channels {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  max-width: 520px; margin: 0 auto 28px;
}
.contact-channel {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: 1px solid var(--line); background: var(--bg);
  color: inherit; text-decoration: none;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .2s ease;
}
.contact-channel:hover, .contact-channel:focus-visible { border-color: var(--accent); }
.contact-channel svg { width: 20px; height: 20px; fill: currentColor; }
.contact-form {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 520px; margin: 0 auto; text-align: left;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea {
  font-family: 'Manrope', sans-serif; font-size: 15px;
  padding: 11px 13px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
}
.field input:focus, .field textarea:focus { outline: 1px solid var(--accent); }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.field--honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.errorlist {
  list-style: none; margin: 0; padding: 0;
  font-size: 12px; color: var(--accent);
}
.contact-form .button { align-self: center; margin-top: 6px; }
.contact-success { max-width: 520px; margin: 0 auto; font-size: 15px; color: var(--body-text); }
.contact-city { margin-top: 28px; font-size: 13px; color: var(--muted); }

/* ---- Notices: the maintenance message and the missing-page page ------ */
.notice { min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink); }
.notice-inner { text-align: center; padding: 48px 16px; max-width: 640px; }
.notice-message { font-size: 18px; line-height: 1.6; color: var(--body-text); margin: 20px 0 36px; }

/* Staff only, while the site is hidden: a reminder above the nav. */
.staff-strip {
  background: #a8352a; color: #fff; text-align: center;
  font-size: 13px; padding: 6px 16px;
}
.staff-strip a { color: inherit; margin-left: 8px; }