/* Alina Yurkovska: Museum Silence, static edition.
   Tokens measured from the live Webflow stylesheet (2026-09-14 publish). */

@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/alegreya-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-017F, U+2009, U+2010-2027, U+202F, U+2039-203A, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/alegreya-cyrillic.woff2') format('woff2'); unicode-range: U+0400-04FF, U+2116; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('fonts/alegreya-italic-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-017F, U+2009, U+2010-2027, U+202F, U+2039-203A, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('fonts/alegreya-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0400-04FF, U+2116; }
@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ptsans-regular-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-017F, U+2009, U+2010-2027, U+202F, U+2039-203A, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ptsans-regular-cyrillic.woff2') format('woff2'); unicode-range: U+0400-04FF, U+2116; }
@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/ptsans-bold-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-017F, U+2009, U+2010-2027, U+202F, U+2039-203A, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/ptsans-bold-cyrillic.woff2') format('woff2'); unicode-range: U+0400-04FF, U+2116; }

:root {
  --bg: #F7F5F1;
  --ink: #1C1A17;
  --muted: #6E685C;
  --faint: #8C8577;
  --accent: #7A4B32;
  --line: rgba(28, 26, 23, 0.10);
  --field-line: #E5E0D8;
  --serif: 'Alegreya', Georgia, 'Times New Roman', serif;
  --sans: 'PT Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --pad-x: 48px;
  --column: 720px;
  --maxh: 80vh;
  --gap: 200px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@supports (height: 1svh) { :root { --maxh: 80svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: 10px 16px;
  font-size: 14px; text-decoration: none; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px var(--pad-x);
}
.wordmark {
  font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2;
  text-decoration: none; color: var(--ink); letter-spacing: 0.005em;
}
.site-nav { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  font-size: 14px; letter-spacing: 0.02em; text-decoration: none; color: var(--ink);
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--accent); }

.lang { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lang a { display: block; padding: 8px 6px; line-height: 0; opacity: 0.45; transition: opacity 0.15s ease; }
.lang a:hover, .lang a[aria-current="true"] { opacity: 1; }
.lang svg { width: 18px; height: 12px; display: block; }

/* ---------- Home: identity ---------- */
.identity { text-align: center; padding: 96px var(--pad-x) 0; }
.identity h1 {
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.6;
  letter-spacing: 0.02em; color: var(--muted); max-width: 34em; margin: 0 auto;
}
.exhibition { margin: 56px auto 0; max-width: 34em; text-align: center; }
.exhibition .label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.exhibition p { font-family: var(--serif); font-size: 20px; line-height: 1.45; }

/* ---------- Gallery (one work at a time) ---------- */
.gallery-section { padding: 160px var(--pad-x); }
.identity + .gallery-section { padding-top: 112px; }
.column { max-width: var(--column); margin: 0 auto; }
.page-heading {
  font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1.15;
  color: var(--ink); margin-bottom: 20px;
}
.gallery-hint { font-size: 13px; color: var(--faint); text-align: center; margin-bottom: 56px; }
.works-intro .gallery-hint { text-align: left; }
.works-intro { margin-bottom: 96px; }

.gallery { display: grid; grid-template-columns: 1fr; row-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.work {
  display: block; margin: 0 auto;
  width: min(100%, calc(var(--maxh) * var(--r)));
  cursor: zoom-in; text-decoration: none;
}
/* Hairline plus a soft wall shadow: the works on white paper would otherwise dissolve into the background. */
.work img, .strip-item img {
  width: 100%; height: auto; background-color: var(--c, #EDE9E2);
  box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.06), 0 14px 32px -18px rgba(28, 26, 23, 0.35);
}
.js .work img, .js .strip-item img { opacity: 0; transition: opacity 0.9s var(--ease); }
.js .work img.is-loaded, .js .strip-item img.is-loaded { opacity: 1; }
.work:focus-visible { outline-offset: 8px; }

.see-all { text-align: center; margin-top: 160px; }
.text-link {
  font-size: 14px; letter-spacing: 0.02em; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.text-link:hover .arrow { transform: translateX(3px); }

/* ---------- More works: a quiet horizontal strip ---------- */
/* The strip starts on the column edge and runs out to the screen edge. */
.more { margin: 200px calc(var(--pad-x) * -1) 0; }
.more-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  width: min(var(--column), calc(100% - 2 * var(--pad-x))); margin: 0 auto 32px;
}
.more-head h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.2; }
.strip-controls { display: flex; gap: 8px; }
.strip-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; cursor: pointer; display: grid; place-items: center;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.strip-btn:hover:not(:disabled) { border-color: var(--ink); }
.strip-btn:disabled { opacity: 0.3; cursor: default; }
.strip-btn svg { width: 16px; height: 16px; }

.strip-wrap { position: relative; }
.strip {
  display: flex; gap: 24px; margin: 0; padding: 0 0 16px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* Always comes to rest on a work, and one swipe moves one work: a light touch no longer sends it gliding. */
  scroll-snap-type: x mandatory;
  padding-inline: max(var(--pad-x), calc((100% - var(--column)) / 2));
  scroll-padding-inline: max(var(--pad-x), calc((100% - var(--column)) / 2));
  scrollbar-width: thin; scrollbar-color: rgba(28,26,23,.25) transparent;
  --strip-h: 320px;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: rgba(28,26,23,.2); border-radius: 3px; }
.strip-item { flex: 0 0 auto; scroll-snap-align: start; scroll-snap-stop: always; }
.strip-item a { display: block; height: var(--strip-h); width: calc(var(--strip-h) * var(--r)); cursor: zoom-in; }
.strip-item img { height: 100%; width: 100%; }
.js .strip-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 16px; width: 64px; pointer-events: none;
  background: linear-gradient(to right, rgba(247,245,241,0), var(--bg));
  transition: opacity 0.2s ease;
}
.js .strip-wrap.at-end::after { opacity: 0; }

/* ---------- Text pages ---------- */
.content-section { padding: 140px var(--pad-x); }
.prose { max-width: 680px; margin: 0 auto; }
.prose .page-heading { margin-bottom: 48px; }
.prose p { font-size: 16px; line-height: 1.75; margin-bottom: 40px; }
.prose p.lede { color: var(--ink); }

/* ---------- Contact form ---------- */
.form { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.field { display: flex; flex-direction: column; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: 0.01em; }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid var(--field-line); border-radius: 0; padding: 12px 14px;
  transition: border-color 0.15s ease;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-submit {
  align-self: flex-start; background: var(--ink); color: var(--bg); border: 0;
  padding: 14px 32px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
  transition: background-color 0.15s ease;
}
.form-submit:hover { background: var(--accent); }
.form-submit:disabled { opacity: 0.6; cursor: progress; }
.form-status { font-size: 15px; padding: 16px 18px; border-left: 2px solid var(--accent); background: #fff; }
.form-status[hidden] { display: none; }
.form-status.is-error { border-left-color: #9B2C2C; }
.honeypot { position: absolute; left: -9999px; }
.email-line { font-size: 15px; margin-top: 40px; color: var(--muted); }
.email-line a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.site-footer { padding: 96px var(--pad-x); }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-copy { font-size: 13px; color: var(--muted); }

/* ---------- 404 ---------- */
.notfound { text-align: center; }
.notfound .page-heading { margin-bottom: 20px; }
.notfound p { color: var(--muted); margin-bottom: 8px; }
.notfound .alt-langs { margin-top: 24px; font-size: 14px; color: var(--faint); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink);
  overflow: hidden;
}
.lightbox::backdrop { background: var(--bg); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; animation: lb-in 0.35s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
/* The picture fits the space the label leaves, whatever the label's height (one title line or two,
   technique, size): the stage is one track that fills its row, and the picture may not outgrow it. */
.lb-stage {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  min-height: 0; overflow: hidden; padding: 64px 88px 16px; touch-action: pan-y;
}
.lb-stage picture { display: contents; }
/* <source> must take no room: otherwise it becomes a second grid item, and the picture lands in an extra
   row that grows with it instead of the row that is limited to the space above the label. */
.lb-stage source { display: none; }
.lb-stage img {
  grid-area: 1 / 1; width: auto; height: auto; max-width: min(100%, 1400px); max-height: 100%;
  background-color: var(--c, #EDE9E2); transition: opacity 0.35s var(--ease);
}
.lb-stage img.is-swapping { opacity: 0; }
.lb-caption { text-align: center; padding: 8px 24px 28px; min-height: 96px; }
.lb-title { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.35; }
.lb-meta { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 4px; white-space: pre-line; }
.lb-count { font-size: 12px; letter-spacing: 0.12em; color: var(--faint); margin-top: 10px; font-variant-numeric: tabular-nums; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); opacity: 0.6; transition: opacity 0.15s ease;
}
.lb-btn:hover { opacity: 1; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
html.lb-open { overflow: hidden; }

/* ---------- Breakpoints (same as the Webflow site) ---------- */
@media (max-width: 991px) {
  :root { --gap: 160px; --column: 620px; --maxh: 76vh; }
  .identity { padding-top: 72px; }
  .identity + .gallery-section { padding-top: 96px; }
  .gallery-section { padding-top: 120px; padding-bottom: 120px; }
  .content-section { padding-top: 104px; padding-bottom: 104px; }
  .site-footer { padding-top: 72px; padding-bottom: 72px; }
  .more { margin-top: 160px; }
  .strip { --strip-h: 280px; }
}
@media (max-width: 767px) {
  :root { --pad-x: 24px; --gap: 120px; --maxh: 70vh; }
  .site-header { flex-direction: column; justify-content: center; gap: 14px; padding-top: 28px; padding-bottom: 20px; text-align: center; }
  .site-nav { flex-direction: column; gap: 10px; }
  .nav-links { gap: 28px; justify-content: center; }
  .identity { padding-top: 56px; }
  .identity + .gallery-section { padding-top: 72px; }
  .gallery-section { padding-top: 96px; padding-bottom: 96px; }
  .works-intro { margin-bottom: 64px; }
  .content-section { padding-top: 72px; padding-bottom: 72px; }
  .site-footer { padding-top: 56px; padding-bottom: 56px; }
  .footer-inner { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .page-heading { font-size: 32px; }
  .prose p { margin-bottom: 32px; }
  .more { margin-top: 120px; }
  .more-head { margin-bottom: 24px; }
  .strip { gap: 16px; --strip-h: 240px; }
  .lb-stage { padding: 56px 12px 8px; }
  .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-caption { padding-left: 64px; padding-right: 64px; }
}
@media (max-width: 479px) {
  :root { --gap: 80px; --maxh: 62vh; }
  .identity { padding-top: 40px; }
  .identity + .gallery-section { padding-top: 56px; }
  .gallery-section { padding-top: 72px; padding-bottom: 72px; }
  .gallery-hint { margin-bottom: 40px; }
  .nav-links { gap: 22px; }
  .strip { --strip-h: 220px; }
  .strip-controls { display: none; }
  .see-all { margin-top: 96px; }
}
@supports (height: 1svh) {
  @media (max-width: 991px) { :root { --maxh: 76svh; } }
  @media (max-width: 767px) { :root { --maxh: 70svh; } }
  @media (max-width: 479px) { :root { --maxh: 62svh; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .work img, .js .strip-item img { opacity: 1; }
}