/* Local variable fonts: every weight from 200 to 900, including real italics. */
@font-face {
  font-family: 'Crimson Pro'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/crimson-pro-normal-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: 'Crimson Pro'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('fonts/crimson-pro-italic-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: 'Crimson Pro'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/crimson-pro-normal-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('fonts/crimson-pro-italic-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/crimson-pro-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Crimson Pro'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('fonts/crimson-pro-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* Base styles. */
:root { color-scheme: light; font-family: 'Crimson Pro', Georgia, serif; font-weight: 400; color: #000; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 20; left: 16px; top: -100px; background: white; padding: 12px; }
.skip-link:focus { top: 10px; }

/* Desktop composition from the Figma frame. */
.navigation, .counter { font-size: .875rem; line-height: .905; letter-spacing: -.04em; }
.name, .contacts-trigger, .counter { position: fixed; z-index: 5; top: 50%; transform: translateY(-50%); }
.name { left: 16px; min-height: 44px; display: flex; align-items: center; max-width: calc((100vw - min(609px, 62vw)) / 2 - 32px); }
.contacts-trigger { right: 16px; min-height: 44px; }
.counter { left: 50%; transform: translate(-50%, -50%); color: white; mix-blend-mode: difference; pointer-events: none; font-variant-numeric: tabular-nums; }
.counter[hidden] { display: none; }
.gallery { width: min(609px, 62vw); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 100px; padding-block: max(80px, calc((100svh - 456.75px) / 2)); outline: none; }
.gallery-status { margin: 0; font-size: .875rem; letter-spacing: -.04em; }
.photograph { margin: 0; width: 100%; max-width: calc((100svh - 100px) * var(--photo-ratio, 1.333333)); flex: none; }
.photograph img { width: 100%; height: auto; aspect-ratio: var(--photo-ratio, auto); display: block; object-fit: contain; }
.photograph figcaption { text-align: center; font-size: .875rem; letter-spacing: -.04em; line-height: 1.2; margin-top: 100px; overflow-wrap: anywhere; }
.photo-error { position: relative; }
.photo-error::after { content: 'Image unavailable'; position: absolute; inset: 0; display: grid; place-content: center; background: #f5f5f5; color: #333; font-size: 1rem; }

/* Keep navigation outside the photographs on a phone. */
@media (max-width: 699px) {
  .navigation { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: flex-start; gap: 24px; padding: calc(12px + env(safe-area-inset-top)) 16px 16px; background: linear-gradient(white 80%, #ffffff00); }
  .name, .contacts-trigger { position: static; transform: none; font-size: 1rem; line-height: 1.15; letter-spacing: -.025em; }
  .name { flex: 1; min-width: 0; max-width: none; }
  .contacts-trigger { flex: none; }
  .counter { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 1rem; line-height: 1; padding: 8px; }
  .gallery { width: calc(100% - 32px); gap: 56px; padding-top: max(108px, calc((100svh - (100vw - 32px) * .75) / 2)); padding-bottom: 100px; }
  .photograph { max-width: calc(max(100px, 100svh - 160px) * var(--photo-ratio, 1.333333)); }
  .photograph figcaption { margin-top: 56px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }