:root{
  --bg: #EAE4D8;
  --panel: #DED6C4;
  --panel-border: #CFC5AE;
  --ink: #131210;
  --muted: #A79C86;
  --tile: #DED6C4;
  --tile-border: #C9BFA8;
  --tile-text: #7d745f;
  --lightbox-bg: #14120F;
  --dot-off: #cfc5ae;
}

*{ box-sizing:border-box; }

/* Защита от любой горизонтальной прокрутки */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.app{
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ---------- LEFT PANEL (Fluid Scale) ---------- */
.side{
  width: 18%; /* Сайбар занимает пропорциональные 18% ширины */
  flex-shrink: 0;
  background: var(--panel);
  border: none;
  padding: 3vw 1.5vw;
  display: flex;
  flex-direction: column;
}

.artist-label{
  font-size: clamp(0.65rem, 0.9vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 2vw 0;
}

nav.menu{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5vw;
}

.menu-link{
  font-size: clamp(0.7rem, 0.85vw, 0.825rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5vw 0;
  cursor: pointer;
  color: var(--ink);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
  display: block;
  transition: opacity .15s ease;
}
.menu-link:hover{ opacity: 0.6; }

/* Current page / current filter: shown as "pressed" — no hover,
   no pointer, slightly muted so it reads as inactive/selected. */
.menu-link.current{
  color: var(--muted);
  cursor: default;
  opacity: 1;
}
.menu-link.current:hover{ opacity: 1; }

.menu-label{
  font-size: clamp(0.7rem, 0.85vw, 0.825rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5vw 0;
  color: var(--muted);
  cursor: default;
}

.projects-group,
.filter-group{
  border-left: 1px solid var(--panel-border);
  margin-left: 0.2vw;
  padding-left: 0.8vw;
  display: flex;
  flex-direction: column;
}
.projects-group .menu-link,
.filter-group .menu-link{
  padding: 0.4vw 0;
}

/* ---------- RIGHT CONTENT ---------- */
.content{
  flex: 1;
  min-width: 0; /* Предотвращает раздувание сетки за пределы экрана */
  padding-top: 1.5vw;
padding-left: 4vw;
padding-right: 4vw;
  display: flex;
  flex-direction: column;
}

.page-title{
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  margin: 0 0 3vw 0;
}

/* Title row: lets a page-title share its line with an inline control
   (e.g. an info button) while staying visually centered as a group. */
.page-title-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6vw;
  margin: 0 0 1vw 0;
}
.page-title-row .page-title{ margin: 0; }

/* Small round "i" trigger — opens an .info-modal. Default size fits a
   per-tile use (next to a caption); add .info-btn--lg for a project-level
   button next to a page title (e.g. Arboretum). */
.info-btn{
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 1px solid var(--tile-border);
  background: var(--panel);
  color: var(--muted);
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease;
}
.info-btn:hover{ opacity: 0.6; }

.info-btn--lg{
  width: 3.2em;
  height: 3.2em;
  font-size: 1.5rem;
}

/* Per-tile info button sits in the caption row (.tile-label is a flex
   row already) and pins itself to the far right. */
.tile-info-btn{ margin-left: auto; }

/* ---------- INFO MODAL (light, site-toned — for text, not artwork.
   Separate from .lightbox, which stays dark and is for images only.) ---------- */
.info-modal{
  position: fixed;
  inset: 0;
  background: rgba(19, 18, 16, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 4vh 4vw;
}
.info-modal.open{ display: flex; }

.info-modal-panel{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 3.5vw 3vw;
}

.info-modal-panel .text-wrap{ max-width: none; }
.info-modal-panel .text-wrap p:last-child{ margin-bottom: 0; }

.info-modal-close{
  position: absolute;
  top: 1.2vw;
  right: 1.2vw;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-modal-close:hover{ opacity: 0.6; }

@media (max-width: 600px){
  .info-modal-panel{ padding: 2.2rem 1.4rem; max-height: 80vh; }
  .info-modal-close{ top: 0.8rem; right: 0.8rem; }
}

/* ==========================================================
   TEXT PAGE (site-wide, for prose content — About, statements,
   catalog forewords, etc. Not tied to any single page.)
   ========================================================== */

/* Hero: a square photo frame beside an intro paragraph, at the top of a
   text page. The frame's size matches Selected Art tiles exactly — same
   3-column / 2vw-gap math, just reused outside the .grid gallery system
   (this container holds a photo, not artwork tiles, so it stays separate
   from .grid/script1.js's gallery logic). */
.hero-layout{
  display: grid;
  grid-template-columns: repeat(var(--hero-cols, 3), 1fr);
  gap: 2vw;
  align-items: start;
  margin-bottom: 3vw;
}

@media (max-width: 900px){
  .hero-layout{ --hero-cols: 2; }
}
@media (max-width: 600px){
  .hero-layout{ --hero-cols: 1; }
}

.hero-photo{
  grid-column: 1 / 2;
}

.hero-text{
  grid-column: 2 / -1;
}
@media (max-width: 600px){
  .hero-text{ grid-column: 1 / -1; }
}

.hero-text p{
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

.text-wrap{
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.text-wrap p{
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 1.4em 0;
}

.text-wrap .contact-block{
  margin: 2.5vw 0 4vw 0;
}

.text-wrap .contact-email{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--tile-border);
  transition: opacity .15s ease;
}
.text-wrap .contact-email:hover{ opacity: 0.6; }

.section-label{
  font-size: clamp(0.75rem, 0.95vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5vw 0;
  padding-top: 1.5vw;
  border-top: 1px solid var(--panel-border);
}

.section-sublabel{
  font-size: clamp(0.7rem, 0.85vw, 0.825rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tile-text);
  margin: 1.8em 0 0.8em 0;
}

.exhibit-list{
  list-style: none;
  margin: 0 0 0.5em 0;
  padding: 0;
}

.exhibit-list li{
  display: flex;
  gap: 1em;
  padding: 0.35em 0;
  font-size: clamp(0.75rem, 0.85vw, 0.825rem);
  font-weight: 300;
  line-height: 1.5;
  border-bottom: 1px solid var(--panel-border);
}

.exhibit-year{
  flex-shrink: 0;
  width: 2.6em;
  color: var(--muted);
  font-weight: 400;
}

.exhibit-venue{
  color: var(--ink);
}

/* ==========================================================
   GRID SYSTEM (site-wide, reusable across every section)
   ----------------------------------------------------------
   Set the max column count per section with data-columns on
   the .grid container. Supported presets:
     data-columns="3"  → 3 → 2 → 1   (>900px / >600px / ≤600px)
     data-columns="4"  → 4 → 3 → 2 → 1
     data-columns="5"  → 5 → 4 → 3 → 2 → 1
   No JS involved — purely CSS custom-property driven.
   ========================================================== */
.grid{
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 2vw;
  flex: 1;
  /* Rows must stay exactly as tall as their content (the square tile +
     caption), never stretched to fill leftover vertical space in the
     flex:1 container. Without this, a filtered view with few tiles
     (few rows) inflates each row to fill the whole page height. */
  align-content: start;
}

.grid[data-columns="3"]{ --cols: 3; }
.grid[data-columns="4"]{ --cols: 4; }
.grid[data-columns="5"]{ --cols: 5; }

/* Prevents a brief flash of the original HTML order on sections that
   shuffle their tiles via JS (data-shuffle="true"). JS removes this
   class immediately after reordering. */
.grid[data-shuffle="true"].pre-shuffle{ visibility: hidden; }

@media (max-width: 900px){
  .grid[data-columns="3"]{ --cols: 2; }
  .grid[data-columns="4"]{ --cols: 3; }
  .grid[data-columns="5"]{ --cols: 4; }
}

@media (max-width: 600px){
  .grid[data-columns="3"]{ --cols: 1; }
  .grid[data-columns="4"]{ --cols: 2; }
  .grid[data-columns="5"]{ --cols: 3; }
  .grid{ gap: 1rem; }
}

@media (max-width: 420px){
  .grid[data-columns="4"]{ --cols: 1; }
  .grid[data-columns="5"]{ --cols: 2; }
}

@media (max-width: 340px){
  .grid[data-columns="5"]{ --cols: 1; }
}

/* ---------- PAGINATION (injected by script1.js via data-paginate) ---------- */
.pagination{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5vw;
}

/* When the nav sits above its grid (data-paginate-nav="top"), flip the
   spacing: no gap above (it already follows the page title), a gap below
   instead, before the grid starts. */
.pagination:has(+ .grid[data-paginate-nav="top"]){
  margin-top: 0;
  margin-bottom: 2.5vw;
}

@media (max-width: 480px){
  .pagination:has(+ .grid[data-paginate-nav="top"]){
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 480px){
  .pagination{
    gap: 0.5rem 0.7rem;
    margin-top: 1.5rem;
  }
}

.page-link{
  font-family: inherit;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.35rem;
  transition: opacity .15s ease;
}
.page-link:hover{ opacity: 0.6; }

.page-link.current{
  color: var(--muted);
  cursor: default;
}
.page-link.current:hover{ opacity: 1; }

.page-link:disabled{
  opacity: 0.25;
  cursor: default;
}
.page-link:disabled:hover{ opacity: 0.25; }

.page-prev, .page-next{
  font-size: 1.3rem;
}

/* ---------- TILE (preview card: square image frame + caption row) ---------- */
.tile{
  position: relative;
  aspect-ratio: 9/10;
  background: transparent;
  border: none;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: opacity .15s ease;
  /* Reset in case .tile is an <a> (navigation tile, no lightbox) rather
     than a <figure> (artwork preview) — harmless no-op on figure tiles. */
  color: inherit;
  text-decoration: none;
}
.tile:hover{ opacity: 0.82; }

/* Hidden by an active filter (see data-filter-for in script1.js) */
.tile.is-hidden{ display: none; }

/* Невидимый квадратный фрейм (сохраняет пропорцию 1:1) */
.tile-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* гарантирует идеальный квадрат */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

/* Картинка вписывается по большей стороне и центрируется внутри фрейма
   по обеим осям (position:absolute + inset:0 + margin:auto) */
.tile-img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* Подпись под квадратом: точка-маркер + название + год */
.tile-label{
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 0;
  padding: 0;
  background: none;
  font-size: clamp(0.65rem, 0.75vw, 0.75rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: inherit;
  text-align: left;
  line-height: 1.4;
}
.tile-label .t-title{
  display: block;
  font-style: italic;
  color: #5f5847;
}

/* Точка-маркер доступности работы */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.available { background-color: #2ecc71; }
.status-dot.unavailable { background-color: #e74c3c; }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  background: var(--lightbox-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox.open{ display: flex; }

.lb-stage{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 4vh 0; /* guarantees ~4% of viewport height as clear space above and below the image */
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-frame,
#lbFrame {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: calc(100vh - 8vh); /* 92vh: full height minus 4vh top + 4vh bottom */
}

.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 8vh);
  object-fit: contain;
  display: block;
}

.lb-zone{
  position: absolute;
  top: 0; bottom: 0;
  width: 33%;
  cursor: pointer;
}
.lb-zone.left{ left: 0; }
.lb-zone.right{ right: 0; }

.lb-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ded6c4;
  font-size: 1rem;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
  opacity: 0.65;
}
.lb-arrow.left{ left: 2vw; }
.lb-arrow.right{ right: 2vw; }

.lb-close{
  position: absolute;
  top: 2vw; right: 2vw;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  background: none;
  color: #ded6c4;
  font-size: 1rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.lb-counter{
  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: #8a8370;
  z-index: 5;
}

/* ---------- MOBILE ADAPTATION (layout not related to grid columns) ---------- */
@media (max-width: 768px){
  .app{ flex-direction: column; }

  .side{
    width: 100%;
    padding: 1.25rem 5vw;
    align-items: center;
  }

  .artist-label{
    text-align: center;
    margin-bottom: 0.75rem;
  }

  nav.menu{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 1.25rem;
    margin-top: 0;
    width: 100%;
  }

  .projects-group{ display: contents; }

  .content{ padding: 1.5rem 4vw; }
  .lb-frame{ width: 90vw; height: 60vh; }
}

/* ==========================================================
   ARTIST VARIANT (experimental) — the accent color itself is set
   per-artist just below; every other rule here targets any
   body[data-artist] generically, so both artists share the same
   mechanics and each just plugs in their own --accent.
   ========================================================== */
body[data-artist="ruta"]{
  --accent: #C50000;
}
body[data-artist="inokenty"]{
  --accent: #245DFF;
}

/* Thin accent stripe on the outer edge of the page — the fastest,
   most peripheral-vision-level cue for "which artist am I on". */
body[data-artist] .side{
  position: relative;
}
body[data-artist] .side::before{
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}

/* Active menu item in the artist's accent color */
body[data-artist] .menu-link.current{
  color: var(--accent);
}
body[data-artist] .menu-link.current:hover{ opacity: 1; }

/* Spacing unit: two ordinary stacked menu items (.menu-link/.menu-label)
   already sit 1vw apart via their own 0.5vw top+bottom padding — that's
   "1 unit" in the site's rhythm. Custom gaps below are expressed as
   multiples of that same unit, layered on top of the built-in half-unit
   each neighboring item already contributes. */

/* Artist name: folded into the ordinary menu flow, right below Home —
   same per-item padding rhythm as the rest of the list (no divider line),
   with extra margin tuned to land on exact unit multiples:
   Home → name = 2 units, name → "Selected art" = 1.5 units. */
.artist-label--inline{
  padding: 0.5vw 0;
  margin: 1vw 0 0.5vw 0; /* +1 unit above (→2 total), +0.5 unit below (→1.5 total) */
}
body[data-artist] .artist-label--inline{
  color: var(--accent);
}

/* Page title row variant: "Artist Name · Section Title" */
.page-title-row--artist{
  gap: 0.5em;
}
.page-title-artist{
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted); /* same color as the section title next to it */
}
.page-title-sep{
  font-size: clamp(2.7rem, 4.5vw, 3.5rem);
}
body[data-artist] .page-title-sep{
  color: var(--accent);
}

@media (max-width: 768px){
  body[data-artist] .side::before{
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto;
    height: 4px;
  }
}