/*
 * site.css: the only stylesheet of polina-shvedko.art (ADR-0003, SPEC section 2).
 *
 * The rules reproduce the look of the previous version of the site: the values were measured in Chromium on the old
 * build (colours, sizes, weights, spacing, grid, ratios, hover effects). The old CSS bands are kept:
 *   >= 1201 px (container 1200) | 961-1200 (960) | 641-960 (640) | 481-640 | <= 480.
 * Deliberate differences from the old build (its defects): the hero title never overlaps between 900 and
 * 1200 px, the nav links sit on the logo's line, the wide card keeps its full row on two-column layouts, and
 * only the current artwork thumbnail is framed.
 *
 * Font: Jost (SIL OFL 1.1, /css/webfonts/jost/OFL.txt) replaces the old proprietary font. Jost is darker at
 * the same nominal weight, so the weights are mapped (old 300/400/500/600/700 -> Jost 300/375/425/485/565) and
 * the vertical metrics are overridden to the old font's line boxes (line-height: normal = 1.2em).
 * Sections: tokens, fonts, base, skip link, nav, hero, intro, divider, gallery and cards, pills, about me,
 * Instagram, contact, footer, cookie banner, breadcrumb, hub, artwork page, full-screen view, other pages,
 * responsive bands, motion.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  --font-sans: 'Jost', 'Jost Fallback', Arial, sans-serif;
  --fw-light: 300;     /* old font 300 */
  --fw-regular: 375;   /* old font 400 */
  --fw-medium: 425;    /* old font 500 */
  --fw-semibold: 485;  /* old font 600 */
  --fw-bold: 565;      /* old font 700 */

  --c-text: #000;
  --c-heading: #080808;   /* intro, gallery and page headings */
  --c-title: #949494;     /* card and artwork titles */
  --c-link: #ff8562;      /* every link of the old site rendered in this orange */
  --c-muted: #aaa;        /* artwork year */
  --c-badge: #f00;
  --c-footer: #0d0d0d;
  --c-cookie: #1a1a1a;
  --c-line: rgba(0, 0, 0, .1);
  --c-thumb-frame: rgba(0, 0, 0, .15);
  --overlay: rgba(0, 0, 0, .5);

  --radius-pill: 30px;
  --container: 1200px;
  /* width of the page content: the gallery grid (3 x 360 + 2 x 40 px); the nav row aligns to it (see the bands) */
  --content-w: 1160px;
  --nav-h: 52px;
  --focus-ring: #000;
  --row-gap: 80px;        /* gallery rows, 60px from 960 px down */
}

/* ---------------------------------------------------------------- fonts */
/* Jost: SIL OFL 1.1, see /css/webfonts/jost/OFL.txt. Variable wght 100-900, latin subset. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/css/webfonts/jost/jost-latin-wght-normal.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;
  /* the old font's vertical metrics: line-height normal = 1.2em, baseline at 0.95em */
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
/* Metric-matched fallback while Jost loads: same line breaks and box heights (less layout shift). */
@font-face {
  font-family: 'Jost Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 93.8%;
  ascent-override: 101.3%;
  descent-override: 26.7%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* in-page targets (Explore Artworks -> #gallery-oil) stop below the 52 px sticky nav, as before (-60 px) */
  scroll-padding-top: 60px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; display: block; }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: var(--fw-bold); }

img { display: block; max-width: 100%; height: auto; border: 0; }
picture { display: block; }
svg { flex-shrink: 0; }

a { color: var(--c-link); text-decoration: none; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/* Author display rules beat the user-agent [hidden] rule: keep hidden things hidden. */
[hidden] { display: none; }

/* While the consent banner is open, consent.js sets html.consent-open and --consent-h (the banner height): the
   page keeps that room at its end, so the footer can scroll above the banner and keyboard focus scrolling stops
   above it; the hero play button moves above the banner (phones: to the top corner of the hero). */
html.consent-open { scroll-padding-bottom: calc(var(--consent-h, 0px) + 8px); }
html.consent-open body { padding-bottom: var(--consent-h, 0px); }

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

/* ---------------------------------------------------------------- skip link (first Tab stop, shown on focus) */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 10px 20px;
  border: 2px solid #000;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- sticky navigation (old nav.css) */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--c-line);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: translateY(-100%);
  transition: transform .25s ease;
}
.site-nav--visible,
.site-nav:focus-within { transform: translateY(0); }

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* the logo starts and the language flags end at the edges of the page content (the gallery grid) in every
     band; below 641 px the content has 20 px side padding */
  width: calc(100% - 40px);
  max-width: var(--content-w);
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0;
}

.site-nav__logo {
  flex-shrink: 0;
  margin-right: 12px; /* the row of links never touches the logo, also when it scrolls */
  display: block;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 24px;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--c-link);
}

.site-nav__links {
  display: flex;
  min-width: 0;
  margin: 0 0 0 auto; /* the links sit on the right, before the language flags */
  padding: 0 0 0 20px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav__links::-webkit-scrollbar { display: none; }

.site-nav__link {
  position: relative;
  display: block;
  height: var(--nav-h);
  padding: 0 14px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: var(--nav-h);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-link);
  transition: color .15s;
}
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
/* the last link sits beside the language flags: its text keeps the usual gap to them */
.site-nav__link:focus-visible,
.site-nav__logo:focus-visible { outline-offset: -2px; }

/* language switch: one flag per language (inline SVG), the current one underlined like the current link */
.site-nav__langs {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  margin: 0 0 0 6px;
  padding: 0;
  list-style: none;
}
.site-nav__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: var(--nav-h);
  opacity: .55;
  transition: opacity .15s;
}
.site-nav__lang-item:last-child .site-nav__lang { justify-content: flex-end; min-width: 28px; }
.site-nav__item--lang { display: none; } /* the phone copy of the switch (see the narrow-screen rules) */
.site-nav__lang:hover,
.site-nav__lang:focus-visible,
.site-nav__lang[aria-current="true"] { opacity: 1; }
.site-nav__lang[aria-current="true"] .flag { box-shadow: 0 3px 0 -1px var(--c-link); }
.site-nav__lang:focus-visible { outline-offset: -2px; }
.flag { display: block; height: 14px; width: auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
/* The row scrolls on narrow screens (see the narrow-screen rules). nav.js marks an edge that cuts a label:
   --more-start (labels before the left edge) and --more-end (after the right edge); a cut edge fades out, so no
   label ends in a hard cut (the old row ended mid-word). The wider right fade is the cue that the row goes on;
   the left fade is also the snap offset, so a link that snaps to the row start is clear of it. */
.site-nav__links {
  --fade-start: 20px;
  --fade-end: 32px;
}
.site-nav__links--more-start {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-start));
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-start));
}
.site-nav__links--more-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade-end)), transparent);
}
.site-nav__links--more-start.site-nav__links--more-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
}

/* ---------------------------------------------------------------- hero (home) */
.hero {
  --focus-ring: #fff;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  color: #fff;
  text-align: center;
}

.hero__media { position: absolute; inset: 0; }
.hero__poster,
.hero__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The YouTube player (hero.js: div.hero__player > iframe.hero__video) covers the hero like the old background
   video. The player letterboxes its 16:9 video into the iframe and draws its title bar (title, channel avatar)
   along the top edge of the iframe and its logo at the bottom right, at every start, resume and loop. So the
   iframe is as wide as the 16:9 box that covers the hero (container units of .hero__player, which is as large as
   the hero; the hero can be taller than the window) and 240 px taller: the video still covers the hero edge to
   edge, and the title bar and the logo lie outside it, as with the old site's player. The vw/vh lines are for
   browsers without container units (the window's cover box). */
.hero__player {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  width: max(100cqw, 177.78cqh);
  height: calc(max(100cqh, 56.25cqw) + 240px);
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0; /* over the poster, shown when the player reports that it plays (a blocked player keeps the poster) */
  transition: opacity .6s ease;
}
.hero__media--playing .hero__video { opacity: 1; }
/* dark overlay, as before: rgba(0,0,0,.5) over the image or video */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay);
  pointer-events: none;
}

/* The play button sits 30 px above the bottom of the window, not of the hero: in short windows the hero is taller
   than the window (--below), and the button then stays in the first screen. While the consent banner is open,
   it also clears the banner (--lift = its height); on phones it moves to the top corner instead (see <= 640 px). */
.hero__play {
  --lift: 0px;
  --below: max(0px, 100% - 100vh); /* 100%: the hero height (.hero__media is the containing block) */
  position: absolute;
  right: 40px;
  bottom: calc(30px + var(--lift) + var(--below));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  color: #fff;
  opacity: .8;
  transition: opacity .2s ease, background-color .2s ease;
}
@supports (height: 100svh) {
  .hero__play { --below: max(0px, 100% - 100svh); } /* the hero is at least 100svh tall */
}
html.consent-open .hero__play { --lift: var(--consent-h, 0px); }
.hero__play:hover,
.hero__play:focus-visible { opacity: 1; background: rgba(255, 255, 255, .15); }
.hero__play .icon { width: 26px; height: 26px; margin-left: 2px; }
/* after the click the same button pauses and resumes the video (hero.js) */
.hero__play .icon--pause { display: none; margin-left: 0; }
.hero__play--active .icon--play { display: none; }
.hero__play--active .icon--pause { display: block; }

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px 18px;
}

.hero__title {
  margin: 74px 0 23px;
  font-size: 150px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
/* the visible h1 tagline (SPEC section 1): a subtitle line under the name; it takes the room of the old
   54 px gap, so the e-mail line and the pill stay where they were */
.hero__tagline {
  display: block;
  font-size: 24px;
  font-weight: var(--fw-light);
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: none;
}

.hero__descr {
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: 30px;
  font-size: 28px;
  line-height: 1.55;
  font-weight: var(--fw-regular);
}
.hero__email { color: var(--c-link); }
.hero__email:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.hero__buttons { padding-top: 40px; }
.hero__cta {
  display: inline-block;
  padding: 18px;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font-size: 32px;
  font-weight: var(--fw-regular);
  line-height: 38px;
  letter-spacing: .05em;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color .3s ease, color .3s ease, transform .2s ease, box-shadow .3s ease;
}
.hero__cta:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, .25);
}
.hero__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 255, 255, .15);
}

.hero__arrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 2;
  display: flex;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}
.hero__arrow .icon {
  width: 38.4px;
  height: 18.6px;
  animation: hero-arrow 1.7s infinite ease;
}
@keyframes hero-arrow {
  0%, 100% { transform: translateY(0); }
  50%, 55% { transform: translateY(-7px); }
}

/* ---------------------------------------------------------------- intro ("Artist from Germany") */
.intro { padding: 60px 0; text-align: center; }
.intro__inner { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.intro__avatar { width: 180px; height: 180px; margin: 0 auto 29px; }
.intro__avatar img { width: 100%; height: 100%; object-fit: cover; }

.intro__heading,
.gallery__heading,
.hub__title,
.page__title {
  max-width: 960px;
  margin: 0 auto 40px;
  font-size: 52px;
  font-weight: var(--fw-light);
  line-height: 1.23;
  text-align: center;
  color: var(--c-heading);
}
/* headings that wrap get lines of similar length (no "... by Polina / Shvedko") */
.gallery__heading,
.hub__title,
.page__title,
.artwork__title { text-wrap: balance; }

.intro__text,
.hub__intro {
  max-width: 960px;
  margin: 0 auto;
  font-size: 24px;
  font-weight: var(--fw-light);
  line-height: 1.55;
  text-align: center;
}
/* Jost 300 runs about 4 % wider than the old font in this paragraph; this keeps the old line breaks at
   every width (checked at 1366, 1200, 960, 640, 480 and 390 px) */
.intro__text,
.hub__intro { letter-spacing: -.012em; word-spacing: -.03em; }
.hub__intro p + p { margin-top: .75em; }
.intro__actions { margin-top: 40px; }

/* ---------------------------------------------------------------- divider (old t029 line) */
.divider { position: relative; height: 26px; }
.divider::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 760px;
  max-width: calc(100% - 40px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 200px, #000 calc(100% - 200px), rgba(0, 0, 0, 0));
  opacity: .2;
}

/* ---------------------------------------------------------------- link pills (old "Inquire" pill) */
.pill,
.artwork__back,
.page__link {
  display: inline-block;
  padding: 12px 28px;
  border: 2px solid #000;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-link);
  font-size: 13px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .15s, color .15s;
}
a.pill:hover,
.artwork__back:hover,
.page__link:hover { background: #000; }

/* ---------------------------------------------------------------- gallery sections and grid */
.gallery { padding-bottom: 60px; }
.gallery__heading { margin-top: 30px; padding: 0 20px; }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 360px);
  justify-content: center;
  align-items: start;
  column-gap: 40px;
  row-gap: var(--row-gap);
  max-width: var(--container);
  margin: 60px auto 0;
}
.gallery__heading + .gallery__grid { margin-top: 100px; } /* 40 px heading margin + 60 px block padding */
.gallery__footer { margin-top: var(--row-gap); text-align: center; }
.gallery--hub { padding-bottom: calc(var(--row-gap) + 60px); }

/* ---------------------------------------------------------------- card */
.card { min-width: 0; }
.card--wide { grid-column: 1 / -1; }
.card__link { display: block; color: inherit; text-align: center; }

.card__media {
  position: relative;
  aspect-ratio: 1 / .97222;
  margin-bottom: 20px;
  overflow: hidden;
}
.card--wide .card__media { aspect-ratio: 1 / .32407; }

.card__img,
.card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.card__img { z-index: 2; transition: opacity .1s linear; }
.card__img--hover { z-index: 1; opacity: 0; }
@media (hover: hover) {
  .card__media:hover .card__img { opacity: 0; }
  .card__media:hover .card__img--hover { z-index: 3; opacity: 1; }
}
/* touch screens never show the hover image: not rendered, so its lazy file is never downloaded */
@media (hover: none) {
  .card__img--hover { display: none; }
}

/* red label, same place and shape as the old red badge (now "Private collection", two lines) */
.card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min-content;
  min-width: 50px;
  height: 50px;
  padding: 0 10px;
  border-radius: 50px;
  background: var(--c-badge);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  text-align: center;
}

.card__title {
  padding-top: 20px;
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: 32.4px;
  text-align: center;
  color: var(--c-title);
}

/* MORE pill: title box -> pill 31 px (the old 63.4 px minus the removed 32.4 px line under the title) */
.card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  margin-top: 31px;
  padding: 0 32px;
  border: 2px solid #000;
  border-radius: var(--radius-pill);
  color: #000;
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}
.card__link:focus-visible { outline-offset: 6px; }

/* ---------------------------------------------------------------- about me */
.about-me { padding-bottom: 45px; }
.about-me > .divider { margin-bottom: 45px; }
.about-me__heading {
  margin: 0 auto 105px;
  padding: 0 20px;
  font-size: 42px;
  font-weight: var(--fw-semibold);
  line-height: 1.23;
  text-align: center;
  text-transform: uppercase;
  color: #000;
}
.about-me__row {
  display: grid;
  grid-template-columns: 533px 667px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}
.about-me__text { padding: 0 20px; text-align: center; }
.about-me__name {
  font-size: 22px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.about-me__name + .about-me__descr { margin-top: 10px; }
.about-me__descr {
  font-size: 18px;
  font-weight: var(--fw-light);
  line-height: 1.55;
}
.about-me__media { min-width: 0; }
.about-me__photo { width: fit-content; max-width: 100%; padding: 0 30px; }
.about-me__photo img { width: 374px; height: auto; max-width: 100%; } /* 374 x 500, as before */

/* ---------------------------------------------------------------- Instagram mosaic */
.instagram { padding: 60px 0; }
.instagram__heading {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 3px;
  font-size: 42px;
  font-weight: var(--fw-semibold);
  line-height: 1.23;
  text-align: center;
  color: #000;
}
.instagram__link { color: #000; border-bottom: 1px solid #000; }
.instagram__link:hover { border-bottom-width: 2px; }
.instagram__mosaic {
  display: grid;
  grid-template-columns: 570px 275px 275px;
  grid-template-rows: 275px 275px;
  justify-content: center;
  gap: 20px;
  max-width: var(--container);
  margin: 80px auto 20px; /* 60 px block padding + 20 px above the tiles, as before */
}
.instagram__tile { display: block; min-width: 0; overflow: hidden; }
.instagram__tile--big { grid-row: span 2; }
.instagram__img,
.instagram__img img { width: 100%; height: 100%; object-fit: cover; }
.instagram__mosaic:focus-visible { outline-offset: 6px; }

/* ---------------------------------------------------------------- contact */
.contact { padding: 60px 0; text-align: center; }
.contact__inner { max-width: 760px; margin: 0 auto; }
.contact__heading {
  margin-bottom: 70px;
  font-size: 42px;
  font-weight: var(--fw-semibold);
  line-height: 1.23;
  color: #000;
}
.contact__portrait {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 50%;
}
.contact__portrait img { width: 100%; height: 100%; object-fit: cover; }
.contact__name {
  font-size: 22px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
/* the old text started with an empty line: one line-height of space above "E-mail:" */
.contact__email {
  margin-top: 27.9px;
  font-size: 18px;
  font-weight: var(--fw-light);
  line-height: 1.55;
}
.contact__email-link { color: var(--c-link); }
.contact__email-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.social {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 45px;
  padding: 4px 0;
  list-style: none;
}
.social__link {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #000;
  transition: opacity .15s;
}
.social__link:hover { opacity: .7; }
.social__link .icon { display: block; width: 30px; height: 30px; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  --focus-ring: #fff;
  padding: 60px 20px 30px;
  background: var(--c-footer);
  color: #fff;
  text-align: center;
}
.site-footer__copy {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 0 4px;
  font-size: 15px;
  font-weight: var(--fw-light);
  line-height: 1.55;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.site-footer__link,
.site-footer__button {
  display: block;
  min-height: 24px;
  padding: 0 10px;
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  font-weight: var(--fw-light);
  line-height: 24px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .15s;
}
.site-footer__link:hover,
.site-footer__button:hover,
.site-footer__link[aria-current="page"] { color: #fff; }

/* ---------------------------------------------------------------- cookie banner */
.cookie-consent {
  --focus-ring: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding: 16px 24px;
  background: var(--c-cookie);
  color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 21px;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--container);
  margin: 0 auto;
}
.cookie-consent__text { flex: 1 1 0; min-width: 200px; }
.cookie-consent__link { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-consent__actions { display: flex; flex-shrink: 0; gap: 12px; margin-left: auto; }
.cookie-consent__button {
  padding: 10px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 16px;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.cookie-consent__button--accept {
  padding: 9px 27px;
  border: 1px solid transparent; /* same size; forced-colors mode (Windows contrast themes) draws it */
  background: #fff;
  color: var(--c-cookie);
}
.cookie-consent__button--accept:hover { background: #e6e6e6; }
.cookie-consent__button--decline {
  padding: 9px 27px;
  border: 1px solid rgba(255, 255, 255, .8);
  color: #fff;
}
.cookie-consent__button--decline:hover { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- inner pages: nav offset and breadcrumb */
.site:not(.site--home) main { padding-top: calc(var(--nav-h) + 1px); }

.breadcrumb {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 20px 12px;
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 24px;
}
/* the items flow as text: a long title wraps like a sentence (no orphaned separator, no indented block) */
.breadcrumb__list { display: block; }
.breadcrumb__item { display: inline; }
.breadcrumb__sep { margin: 0 .3em; color: var(--c-title); } /* + the spaces around it: 8 px each side */
.breadcrumb__link { display: inline-block; color: rgba(0, 0, 0, .8); } /* 24 px high tap target */
.breadcrumb__link:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.breadcrumb__current { color: #767676; } /* new element: darkest grey of the old titles that meets AA contrast */
/* artwork pages: the breadcrumb starts at the image column */
.artwork > .breadcrumb { max-width: 1240px; padding-left: 40px; padding-right: 40px; }

/* ---------------------------------------------------------------- hub page */
.hub__header { padding: 30px 20px 0; }
.hub .gallery__grid { margin-top: 60px; }

/* ---------------------------------------------------------------- artwork page (old popup look) */
.artwork__layout {
  display: grid;
  grid-template-columns: 560px 560px;
  justify-content: center;
  align-items: start;
  column-gap: 40px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
.artwork__gallery,
.artwork__info { min-width: 0; }

.artwork__stage { position: relative; }
/* full-screen view (artwork.js): the whole main image opens it, as in the old popup */
.artwork__zoom {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.artwork__zoom:focus-visible { outline-offset: -4px; }
.artwork__image { aspect-ratio: 1 / 1; background: #fff; }
.artwork__image[hidden] { display: none; }
.artwork__image img { width: 100%; height: 100%; object-fit: contain; }

.artwork__prev,
.artwork__next {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  transition: background-color .2s ease-in-out;
}
.artwork__prev { left: 30px; }
.artwork__next { right: 30px; }
.artwork__prev[hidden],
.artwork__next[hidden] { display: none; }
.artwork__prev .icon,
.artwork__next .icon { width: 7px; height: 13px; }
.artwork__prev .icon { margin-left: -1px; }
.artwork__next .icon { margin-left: 1px; }

.artwork__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.artwork__thumb {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: hidden;
}
.artwork__thumb-img,
.artwork__thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.artwork__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color .3s ease-in-out;
}
.artwork__thumb[aria-current="true"]::after { border-color: var(--c-thumb-frame); }
.artwork__thumb:focus-visible { outline-offset: 1px; }

.artwork__title {
  margin-bottom: 18px;
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: 1.35;
  color: var(--c-title);
}
.artwork__description {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.35;
}
/* the status line takes the place and type style of the removed amount line of the old popup */
.artwork__status {
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
}
.artwork__facts {
  margin-top: 20px;
  font-size: 20px;
  font-weight: var(--fw-light);
  line-height: 1.55;
}
/* the popup showed the values only: the labels stay for screen readers */
.artwork__facts dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.artwork__fact--year { margin-top: 4px; font-size: 14px; color: var(--c-muted); }
.artwork__actions { margin-top: 24px; }

.artwork__story { max-width: 800px; margin: 65px auto 0; padding: 0 20px; } /* text and images 760 px wide (SIZES.story) */
.artwork__story-heading {
  margin-bottom: 30px;
  font-size: 42px;
  font-weight: var(--fw-light);
  line-height: 1.23;
  text-align: center;
  color: var(--c-heading);
}
.artwork__story-body { font-size: 18px; font-weight: var(--fw-light); line-height: 1.55; }
.artwork__story-body > * + * { margin-top: 1em; }
.artwork__story-body h3 { margin-top: 1.5em; font-size: 24px; font-weight: var(--fw-medium); line-height: 1.35; }
.artwork__story-body figure { margin: 30px 0; }
.artwork__story-body figcaption { margin-top: 8px; font-size: 14px; line-height: 1.55; text-align: center; color: #767676; }
.artwork__story-image img { width: 100%; }

.artwork__pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: calc(100% - 40px);
  max-width: 1160px;
  margin: 65px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--c-line);
}
.artwork__pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(50% - 10px);
  padding: 2px 0;
  color: #000;
}
.artwork__pager-link--next { margin-left: auto; align-items: flex-end; text-align: right; }
.artwork__pager-link:only-child { max-width: 100%; } /* first or last artwork: one link, the whole row */
.artwork__pager-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.artwork__pager-link--prev .artwork__pager-label::before,
.artwork__pager-link--next .artwork__pager-label::after {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.artwork__pager-link--prev .artwork__pager-label::before { transform: rotate(45deg); margin-left: 2px; }
.artwork__pager-link--next .artwork__pager-label::after { transform: rotate(-135deg); margin-right: 2px; }
.artwork__pager-title {
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 1.35;
  color: #767676;
  transition: color .15s;
}
.artwork__pager-link:hover .artwork__pager-title { color: #000; }

.artwork__back-wrap { margin-top: 40px; padding-bottom: 65px; text-align: center; }

/* ---------------------------------------------------------------- full-screen view (old popup zoom) */
/* white page, the image as large as the window allows, thin black chevrons and a cross (artwork.js) */
.zoom {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #fff;
  color: #000;
}
.zoom::backdrop { background: #fff; }
.zoom__stage {
  position: absolute;
  inset: 15px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom__picture { width: 100%; height: 100%; }
.zoom__picture img { width: 100%; height: 100%; object-fit: contain; }
.zoom__close,
.zoom__prev,
.zoom__next {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
.zoom__close { top: 8px; right: 8px; width: 44px; height: 44px; }
.zoom__close .icon { width: 22px; height: 22px; }
.zoom__prev,
.zoom__next { top: 50%; width: 44px; height: 64px; margin-top: -32px; }
.zoom__prev { left: 10px; }
.zoom__next { right: 10px; }
.zoom__prev .icon,
.zoom__next .icon { width: 13px; height: 24px; }
.zoom__prev[hidden],
.zoom__next[hidden] { display: none; }
.zoom:focus-visible { outline: none; } /* the dialog itself takes focus when it opens */
.zoom :focus-visible { outline-offset: -2px; }
html.zoom-open { overflow: hidden; }

/* ---------------------------------------------------------------- about, contact, 404 and legal pages */
.page__title { margin-top: 30px; margin-bottom: 0; padding: 0 20px; }
.page--contact .contact { padding-top: 60px; }
.page__actions { padding: 15px 20px 80px; text-align: center; }
.page__text {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0 20px;
  font-size: 18px;
  font-weight: var(--fw-light);
  line-height: 1.55;
  text-align: center;
}
.page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1000px; /* the six pills fit on one row on desktop */
  margin: 40px auto 0;
  padding: 0 20px 100px;
}
/* Narrower than one row: the row width is limited so that the pills wrap into balanced rows, 3 + 3 (tablets), then
   2 + 2 + 2 (phones), then one column, and never leave one pill alone ("5 + 1", "3 + 2 + 1"). The pills are 101 to
   169 px wide: one row needs 836 px, 3 + 3 423-581 px, 2 + 2 + 2 296-400 px of row. The 3 + 3 band starts at 899 px,
   so that a desktop window with a classic scrollbar (up to about 20 px) still has room for the one row above it. */
@media (max-width: 899px) {
  .page__links { max-width: 560px; }
}
@media (max-width: 479px) {
  .page__links { max-width: 440px; }
}
@media (max-width: 339px) {
  .page__links { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 319px) {
  .page__links { flex-direction: column; align-items: center; }
}
.page--not-found .page__title { margin-top: 90px; }
.page__legal {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0 20px 80px;
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
}
.page__legal > * + * { margin-top: 1em; }
.page__legal h2 { font-size: 24px; font-weight: var(--fw-semibold); line-height: 1.35; margin-top: 1.5em; }
.page__legal h3,
.page__legal h4 { font-size: 19px; font-weight: var(--fw-semibold); line-height: 1.4; margin-top: 1.25em; }
.page__legal a { text-decoration: underline; }

/* ================================================================ 961-1200 px (container 960) */
@media (max-width: 1200px) {
  :root { --content-w: 940px; }
  .hero__content { max-width: 960px; }
  .hero__title { font-size: 130px; }

  .intro__heading,
  .gallery__heading,
  .hub__title,
  .page__title { max-width: 780px; font-size: 48px; }
  .intro__text,
  .hub__intro { max-width: 780px; }
  .divider::before { width: 620px; }

  .gallery__grid { grid-template-columns: repeat(3, 300px); column-gap: 20px; max-width: 960px; }

  .about-me__heading { font-size: 38px; }
  .about-me__row { grid-template-columns: 383px 577px; max-width: 960px; }
  .about-me__name { font-size: 20px; }

  .instagram__heading { max-width: 620px; }
  .instagram__mosaic { grid-template-columns: 460px 220px 220px; grid-template-rows: 220px 220px; }

  .contact__inner { max-width: 620px; }
  .contact__heading { font-size: 38px; }
  .contact__name { font-size: 20px; }
  .contact__email { margin-top: 24.8px; font-size: 16px; }

  .site-footer__copy { max-width: 460px; font-size: 14px; }

  .breadcrumb { max-width: 960px; padding-left: 10px; padding-right: 10px; }
  .artwork__layout { grid-template-columns: 460px 460px; column-gap: 20px; max-width: 1000px; }
  .artwork > .breadcrumb { max-width: 1000px; padding-left: 30px; padding-right: 30px; }
  .artwork__title { font-size: 22px; }
  .artwork__story { max-width: 620px; }
  .artwork__pager { max-width: 940px; }
}

/* ================================================================ 641-960 px (container 640) */
@media (max-width: 960px) {
  :root { --content-w: 600px; }
  :root { --row-gap: 60px; }

  .hero__content { max-width: 640px; }
  .hero__title { margin-top: 30px; margin-bottom: 18px; font-size: 70px; line-height: 70px; }
  .hero__tagline { margin-top: 10px; font-size: 20px; }
  .hero__descr { padding-bottom: 0; }

  .intro__avatar { margin-bottom: 74px; }
  .intro__heading,
  .gallery__heading,
  .hub__title,
  .page__title { max-width: 640px; }
  .intro__text,
  .hub__intro { max-width: 600px; }
  .divider::before { width: 600px; }

  .gallery__grid { grid-template-columns: repeat(2, 280px); column-gap: 40px; max-width: 640px; }

  .about-me__heading { margin-bottom: 45px; }
  .about-me__row { display: block; max-width: 640px; }
  .about-me__text { margin-bottom: 45px; padding: 0 20px 0 40px; }
  .about-me__media { padding: 0 20px; }
  .about-me__photo { max-width: 90%; margin: 0 auto; }

  .instagram__heading { max-width: 600px; }
  .instagram__mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 10px;
    max-width: 640px;
    margin: 70px auto 10px;
    padding: 0 20px;
  }
  .instagram__tile { aspect-ratio: 1 / 1; }
  .instagram__tile--big { grid-row: auto; grid-column: 1 / -1; }

  .contact__inner { max-width: 600px; }

  .site-footer__copy { max-width: 600px; }

  .breadcrumb { max-width: 640px; padding-left: 20px; padding-right: 20px; }
  .artwork__layout { display: block; max-width: 640px; padding: 0 30px; }
  .artwork > .breadcrumb { max-width: 640px; padding-left: 30px; padding-right: 30px; }
  .artwork__info { padding-top: 25px; }
  .artwork__pager { max-width: 580px; }
}

/* instagram heading: 48 px between 641 and 899 px, as before */
@media (min-width: 641px) and (max-width: 899px) {
  .instagram__heading { font-size: 48px; }
}

/* ================================================================ 481-640 px */
@media (max-width: 640px) {
  .hero__title { margin-bottom: 25px; font-size: 34px; line-height: 38px; }
  .hero__tagline { margin-top: 8px; font-size: 16px; }
  .hero__descr { padding: 0 10px; line-height: 1.45; }
  .hero__arrow { bottom: 18px; }
  .hero__arrow .icon { scale: .7; }
  /* phones: at the bottom of the hero (in a short window the Explore Artworks pill reaches the window bottom);
     while the tall consent banner is open, in the top corner: above the banner it would sit on the pill */
  .hero__play { right: 20px; bottom: 20px; width: 40px; height: 40px; }
  html.consent-open .hero__play { top: 20px; bottom: auto; }
  .hero__play .icon { width: 22px; height: 22px; }

  .intro__heading,
  .gallery__heading,
  .hub__title,
  .page__title { max-width: none; font-size: 30px; }
  .intro__text,
  .hub__intro { max-width: none; line-height: 1.45; }
  /* the hub intro is three times longer than the home intro: on phones it takes the size of the about text,
     so the artworks are not three screens away */
  .hub__intro { font-size: 18px; }

  .gallery__grid { grid-template-columns: 1fr 1fr; column-gap: 20px; max-width: none; padding: 0 20px; }
  .card__more { display: flex; height: 45px; }

  .about-me__heading { font-size: 30px; }
  .about-me__name { font-size: 18px; }
  .about-me__descr { line-height: 1.45; }

  .instagram__heading { max-width: none; margin-left: 20px; margin-right: 20px; font-size: 30px; }

  .contact__inner { max-width: none; padding: 0 20px; }
  .contact__heading { font-size: 30px; }
  .contact__name { font-size: 18px; }
  .contact__email { margin-top: 20.3px; font-size: 14px; line-height: 1.45; }

  .site-footer__copy { max-width: none; font-size: 12px; line-height: 1.45; }

  .breadcrumb { max-width: none; }
  .artwork__layout { max-width: none; margin: 0 20px; }
  .artwork > .breadcrumb { max-width: none; padding-left: 50px; padding-right: 50px; }
  .artwork__pager { width: calc(100% - 100px); }
  .artwork__title { font-size: 20px; }
  .artwork__status { font-size: 20px; }
  .artwork__prev,
  .artwork__next { width: 24px; height: 24px; margin-top: -12px; }
  .artwork__prev { left: 5px; }
  .artwork__next { right: 5px; }
  .artwork__thumbs { gap: 4px; margin-top: 3px; }
  .artwork__info { padding-top: 30px; }
  .artwork__thumb { width: 40px; height: 40px; }

  /* full-screen view on phones: the image uses the full width, white round arrows over it (old zoom) */
  .zoom__stage { inset: 60px 0; }
  .zoom__prev,
  .zoom__next { width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
  .zoom__prev { left: 10px; }
  .zoom__next { right: 10px; }
  .zoom__prev .icon,
  .zoom__next .icon { width: 7px; height: 13px; }
}

/* phone windows in split screen (title from the top edge, "POLINA SHVEDKO" on one line up to the corner): the
   play button stays at the hero bottom, under the open banner, until the banner is answered */
@media (min-width: 326px) and (max-width: 479px) and (max-height: 440px) {
  html.consent-open .hero__play { top: auto; bottom: 20px; }
}

/* short windows of the 961-1200 px band: the second title line ("SHVEDKO ART", 130 px) reaches the bottom
   corner, so the play button takes the top corner (free above the title's 74 px margin) */
@media (min-width: 961px) and (max-width: 1060px) and (max-height: 500px) {
  .hero__play { top: 20px; bottom: auto; }
}

/* separator fades: 120 px from 600 px down */
@media (max-width: 600px) {
  .divider::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 120px, #000 calc(100% - 120px), rgba(0, 0, 0, 0));
  }
}

/* ================================================================ <= 480 px */
@media (max-width: 480px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .card__more { height: 50px; }

  .artwork__layout { margin: 0; padding: 0 20px; }
  .artwork > .breadcrumb { padding-left: 20px; padding-right: 20px; }
  .artwork__pager { width: calc(100% - 40px); }
}

/* the hero e-mail line is 16 px below 480 px (old rule: 28 px from 480 px up) */
@media (max-width: 479px) {
  .hero__descr { font-size: 16px; }
}

/* below 360 px the Explore Artworks pill wraps to two lines and stays centred, as the old pill did */
@media (max-width: 359px) {
  .hero__cta { max-width: 100%; white-space: normal; }
}

/* short windows (laptops at 768 px, landscape phones, 200 % zoom, phones in split screen): the centred hero text
   would reach the arrow and, on phones, the play button, so the zone at the bottom stays free (below 326 px wide
   up to 480 px tall: the pill has two lines there) */
@media (min-width: 961px) and (max-height: 820px), (min-width: 641px) and (max-height: 520px), (max-height: 440px), (max-width: 325px) and (max-height: 480px) {
  .hero__content { padding-bottom: 80px; }
}

/* ================================================================ navigation row on narrow screens */
/* The five links need about 667 px at the desktop spacing. Narrower: tighter spacing, the gap to the logo
   outside the scrolling row (scrolled text never touches the logo), links snap to the row start just after the
   left fade, and the first word only of a long label ("Oil" as in the old nav; the rest stays for screen
   readers). */
@media (max-width: 680px) {
  .site-nav__links {
    margin-left: 0;
    padding-left: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--fade-start);
  }
  .site-nav__item { scroll-snap-align: start; }
  .site-nav__link { padding: 0 8px; letter-spacing: .06em; }  /* phones: the flag of the other language is the last item of the scrolling row (the hub links need the room) */
  .site-nav__langs { display: none; }
  .site-nav__item--lang { display: block; }
  .site-nav__item--lang .site-nav__lang { display: flex; height: var(--nav-h); min-width: 0; }
}
@media (max-width: 640px) {
  :root { --content-w: none; }
  .site-nav__more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ================================================================ motion */
/* smooth in-page scrolling (Explore Artworks -> #gallery-oil) as on the old site; :focus-within limits it to
   link activation, so scripted scrolling (window.scrollTo, find in page) stays instant */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }

  /* page changes cross-fade (cross-document view transitions; browsers without them load pages as before). The
     nav stays in place; the card image that was clicked grows into the artwork's main image (nav.js names the
     card image "artwork-image" on the way out, and on the way back the card of the artwork just seen) */
  @view-transition { navigation: auto; }
  .site-nav { view-transition-name: site-nav; }
  .artwork__main > picture:not([hidden]) { view-transition-name: artwork-image; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .25s; }
  ::view-transition-group(artwork-image) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, 0, .2, 1); }
  ::view-transition-old(artwork-image),
  ::view-transition-new(artwork-image) { height: 100%; object-fit: cover; }

  /* lazy images fade in once loaded: nav.js (Web Animations, opacity only, so nothing moves) */

  /* the full-screen view fades in; artwork.js fades the image in when it switches (Web Animations) */
  .zoom[open],
  .zoom[open]::backdrop { animation: fade-in .2s ease; }
}
@keyframes fade-in {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}