@font-face {
    font-family: "Archivo Narrow";
    src: url("../fonts/archivo-narrow/ArchivoNarrow-Variable-Portfolio.9969eec9698f.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Variable-Portfolio.810a02f0465e.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Condensed";
    src: url("../fonts/roboto-condensed/RobotoCondensed-Variable-Portfolio.b525b617d047.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --display-font: "Archivo Narrow", "Inter", Arial, sans-serif;
    --photo-height: calc(100svh - 5rem);
    color-scheme: dark;
    --black: #000;
    --near-black: #111;
    --dark-gray: #303030;
    --mid-gray: #858585;
    --mid-gray-on-light: #595959;
    --light-gray: #dedede;
    --white: #fff;
    --page-gutter: clamp(1rem, 3vw, 2.5rem);
    --section-space: clamp(4rem, 10vw, 9rem);
    --intro-top-space: 3.375rem;
    --content-width: 100rem;
    --reading-width: 43rem;
    --focus-width: 0.2rem;
    background: var(--black);
    color: var(--white);
    font-family: "Inter", Arial, sans-serif;
    font-size: 100%;
    line-height: 1.55;
}

html:lang(ru),
html:lang(uk) {
    --display-font: "Roboto Condensed", "Inter", Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: min(20rem, 100%);
    margin: 0;
    overflow-wrap: anywhere;
    background: var(--black);
    color: var(--white);
}

img,
picture {
    display: block;
    max-width: 100%;
}

picture {
    width: 100%;
}

picture img {
    width: 100%;
    height: auto;
}

h1,
h2,
h3,
.eyebrow,
.wordmark,
.menu,
.primary-navigation,
.language-navigation,
.text-action,
.button,
.image-link__label,
.feature-card__overlay,
.report-card__overlay,
.story-meta dt,
.detail-navigation,
.site-footer a {
    font-family: var(--display-font);
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 0.92;
    text-transform: uppercase;
}


h1,
h2,
h3,
p,
dl {
    margin-block-start: 0;
}

h1,
h2 {
    max-width: 16ch;
    margin-block-end: 1.5rem;
    font-size: clamp(3.2rem, 14vw, 9rem);
}

h2 {
    font-size: clamp(2.75rem, 11vw, 7rem);
}

h3 {
    font-size: clamp(1.75rem, 7vw, 3rem);
}

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.22em;
    text-transform: uppercase;
}

a:hover {
    text-decoration-thickness: 0.18em;
}

:focus-visible {
    outline: var(--focus-width) solid currentcolor;
    outline-offset: 0.25rem;
}

#main-content:focus {
    outline: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    z-index: 100;
    inset-inline-start: 1rem;
    top: -10rem;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    color: var(--black);
    font-weight: 700;
}

.skip-link:focus {
    top: 1rem;
}

.site-header {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: start;
    min-height: 4.5rem;
    padding: 0.75rem var(--page-gutter);
    border-bottom: 1px solid var(--dark-gray);
    background: var(--black);
}

.wordmark,
.menu summary,
.primary-navigation a,
.language-navigation a,
.site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.wordmark {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
}

.wordmark__brand {
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    line-height: 1;
}

.wordmark__art {
    padding: 0.08em 0.12em 0.1em;
    background: var(--white);
    color: var(--black);
}

.wordmark__byline {
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
}

.menu {
    grid-column: 2;
    grid-row: 1;
}

.desktop-navigation {
    display: none;
}

.menu summary {
    min-width: 3.25rem;
    cursor: pointer;
    list-style: none;
    justify-content: flex-end;
}

.menu summary::-webkit-details-marker {
    display: none;
}

.menu[open] summary {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.primary-navigation,
.language-navigation ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-navigation {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    padding: 0.5rem var(--page-gutter) 1.5rem;
    border-bottom: 1px solid var(--dark-gray);
    background: var(--black);
}

.primary-navigation a,
.language-navigation a {
    text-decoration: none;
}

.primary-navigation a[aria-current="page"],
.language-navigation a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.3em;
}

.language-navigation {
    grid-column: 1 / -1;
}

.language-navigation ul {
    flex-wrap: wrap;
    gap: 0 1rem;
}

.language-navigation a {
    color: var(--light-gray);
    font-size: 0.8rem;
}

.eyebrow {
    margin-block-end: 1rem;
    color: var(--mid-gray);
    font-size: 0.9rem;
}

.lede {
    max-width: var(--reading-width);
    font-size: clamp(1.1rem, 2.5vw, 1.45rem);
    line-height: 1.5;
}

.hero__copy,
.section,
.page-heading,
.story-heading,
.photograph-detail__heading,
.photograph-detail__information,
.error-page {
    padding: var(--section-space) var(--page-gutter);
}

.hero__copy,
.page-heading,
.story-heading {
    min-height: 0;
    padding-block-start: var(--intro-top-space);
}

.hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero__copy h1 {
    max-width: 22ch;
    font-size: clamp(3.1rem, 9.5vw, 7rem);
}


.portrait-preview__layout {
    display: grid;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    max-width: var(--content-width);
    margin-inline: auto;
}

.portrait-preview__copy h2 {
    max-width: 12ch;
}

.portrait-preview__image {
    display: block;
    min-width: 0;
}

.portrait-preview__image img {
    width: 100%;
    height: auto;
    max-height: var(--photo-height);
    object-fit: contain;
}

.section--light,
.page-heading--light {
    background: var(--white);
    color: var(--black);
}

.section--light .eyebrow {
    color: var(--dark-gray);
}

.page-heading--light .eyebrow,
.section--light .price span:not(.price__prefix) {
    color: var(--mid-gray-on-light);
}

.section-heading {
    max-width: var(--content-width);
    margin-inline: auto;
    margin-block-end: clamp(2rem, 7vw, 5rem);
}

.text-action,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin-block-start: 1rem;
    padding: 0.7rem 0;
}

.button {
    padding-inline: 1.25rem;
    border: 2px solid currentcolor;
    text-decoration: none;
}

.button:hover,
.button:active {
    background: var(--white);
    color: var(--black);
}

.section--light .button:hover,
.section--light .button:active {
    background: var(--black);
    color: var(--white);
}

.feature-card,
.report-card a,
.image-link {
    position: relative;
    display: block;
    overflow: hidden;
}

.feature-card img,
.report-card img,
.image-link img {
    transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.feature-card:hover img,
.report-card a:hover img,
.image-link:hover img {
    transform: scale(1.01);
    opacity: 0.9;
}

.feature-card__overlay,
.report-card__overlay,
.image-link__label {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    min-height: 35%;
    padding: 1rem;
    background: linear-gradient(to top, rgb(0 0 0 / 88%), rgb(0 0 0 / 0%));
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.feature-card__title,
.report-card__title {
    max-width: 11ch;
    font-size: clamp(2rem, 7vw, 5rem);
    line-height: 0.92;
    text-decoration: none;
}

.image-link__label {
    align-items: end;
    justify-content: start;
    min-height: 28%;
    font-size: 0.9rem;
}

.report-list {
    display: grid;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
    padding: var(--page-gutter);
}

.gallery-item,
.report-card {
    min-width: 0;
    margin: 0;
}

.caption {
    max-width: var(--reading-width);
    margin: 0.75rem 0 1.5rem;
    color: var(--light-gray);
    font-size: 0.9rem;
}

.split-preview {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.split-preview img {
    width: 100%;
    height: auto;
    max-height: var(--photo-height);
    object-fit: contain;
}

.price {
    max-width: none;
    font-variant-numeric: tabular-nums;
}

.price span {
    display: block;
    margin-block-start: 0.8rem;
    color: var(--mid-gray);
    font-size: 1rem;
    line-height: 1;
}

.price .price__prefix {
    margin-block: 0 0.4rem;
    color: inherit;
    font-size: clamp(1.25rem, 3vw, 2rem);
}

.pricing-layout .price {
    margin-block-end: 0;
    font-family: var(--display-font);
    font-size: clamp(4rem, 11vw, 8rem);
    font-weight: 500;
    line-height: 0.95;
    text-transform: uppercase;
}

.page-type-pricingpage .page-heading {
    padding-block-end: clamp(2rem, 5vw, 4rem);
}

.page-heading,
.story-heading,
.photograph-detail__heading {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.story-meta {
    display: grid;
    gap: 1rem;
    max-width: var(--reading-width);
    margin-block: 2.5rem 0;
}

.story-meta div {
    display: grid;
    grid-template-columns: minmax(6rem, 0.45fr) 1fr;
    gap: 1rem;
    border-top: 1px solid var(--dark-gray);
    padding-block-start: 0.75rem;
}

.story-meta dt {
    color: var(--mid-gray);
}

.story-meta dd {
    margin: 0;
}

.about-layout,
.pricing-layout,
.contact-layout {
    display: grid;
    gap: clamp(2.5rem, 8vw, 7rem);
    max-width: var(--content-width);
    margin-inline: auto;
}

.pricing-layout {
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block-start: clamp(1.5rem, 4vw, 3rem);
}

.pricing-layout__aside {
    margin-block-start: -0.5rem;
}

.pricing-layout__aside p:last-child,
.pricing-layout .prose > :last-child {
    margin-block-end: 0;
}

.pricing-layout .prose h2 {
    margin-block-start: 0;
}

.prose {
    max-width: var(--reading-width);
    font-size: 1.05rem;
}

.prose h2,
.privacy-panel h2 {
    margin-block-start: 3rem;
    font-size: clamp(2.25rem, 8vw, 4.5rem);
}

.prose img {
    height: auto;
}

.privacy-panel {
    max-width: var(--reading-width);
    margin-block-start: clamp(2rem, 5vw, 3.5rem);
    border-top: 1px solid var(--dark-gray);
    padding-block-start: 1.5rem;
}

.privacy-panel h2 {
    margin-block-start: 0;
}

.contact-layout {
    align-items: start;
}

.contact-layout > .prose {
    min-width: 0;
}

.contact-methods {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    min-width: 0;
}

.contact-method {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-height: 4rem;
    text-decoration: none;
    text-transform: none;
}

.contact-method__icon {
    width: clamp(2rem, 3vw, 2.75rem);
    height: clamp(2rem, 3vw, 2.75rem);
    flex: none;
}

.contact-method__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.contact-method__label {
    color: var(--mid-gray);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-method__value {
    overflow-wrap: anywhere;
    font-family: var(--display-font);
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    line-height: 1.05;
    text-transform: none;
}

.contact-method:hover .contact-method__value,
.contact-method:focus-visible .contact-method__value {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.inquiry-form {
    display: grid;
    gap: 1.5rem;
    margin-block-start: 2rem;
}

.form-field {
    display: grid;
    gap: 0.5rem;
}

.form-field label {
    font-weight: 650;
}

.form-field input:not([type="checkbox"]),
.form-field textarea {
    width: 100%;
    min-height: 2.75rem;
    border: 2px solid var(--mid-gray);
    border-radius: 0;
    padding: 0.75rem;
    background: var(--black);
    color: var(--white);
    font: inherit;
}

.form-field textarea {
    min-height: 12rem;
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--white);
    outline: var(--focus-width) solid var(--white);
    outline-offset: 0.2rem;
}

.form-field--checkbox {
    grid-template-columns: 2rem 1fr;
    align-items: start;
}

.form-field--checkbox input {
    grid-column: 1;
    grid-row: 1;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.15rem 0;
}

.form-field--checkbox label {
    grid-column: 2;
    grid-row: 1;
}

.form-field--checkbox .errorlist,
.form-field--checkbox .help-text {
    grid-column: 2;
}

.help-text {
    color: var(--light-gray);
    font-size: 0.9rem;
}

.errorlist {
    margin: 0;
    padding-inline-start: 1.25rem;
    color: var(--white);
    font-weight: 700;
}

.form-field--error input,
.form-field--error textarea {
    border-width: 0.25rem;
    border-color: var(--white);
}

.error-summary,
.form-status {
    margin-block: 1.5rem;
    border: 0.2rem solid var(--white);
    padding: 1.25rem;
}

.error-summary h3 {
    margin-block-end: 0.75rem;
    font-size: 1.5rem;
}

.error-summary p,
.form-status p {
    margin: 0;
}

button.button {
    width: fit-content;
    border-radius: 0;
    background: var(--black);
    color: var(--white);
    cursor: pointer;
    font-size: 1rem;
}

.viewer-launch__status {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--light-gray);
    font-size: 0.8rem;
    font-weight: 650;
    text-align: center;
}

.photograph-viewer {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    background: var(--black);
    color: var(--white);
}

.photograph-viewer::backdrop {
    background: var(--black);
}

.photograph-viewer__layout {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.photograph-viewer__header,
.photograph-viewer__controls {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem var(--page-gutter);
    background: var(--black);
}

.photograph-viewer__header {
    justify-content: space-between;
    border-bottom: 1px solid var(--dark-gray);
}

.photograph-viewer__header h2 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.4rem, 5vw, 2rem);
}

.photograph-viewer__instructions {
    margin: 0;
    padding: 0.6rem var(--page-gutter);
    background: var(--near-black);
    color: var(--light-gray);
    font-size: 0.85rem;
}

.photograph-viewer__status {
    display: block;
    margin-block-start: 0.4rem;
}

.photograph-viewer__status:empty {
    display: none;
}

.photograph-detail__image[data-zoom-trigger] img {
    cursor: zoom-in;
}

.photograph-viewer__canvas {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    background: var(--near-black);
    cursor: grab;
    touch-action: none;
}

.photograph-viewer__canvas:active {
    cursor: grabbing;
}

.photograph-viewer__canvas img {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    max-height: var(--photo-height);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.photograph-viewer__controls {
    justify-content: center;
    border-top: 1px solid var(--dark-gray);
}

.viewer-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 2px solid var(--white);
    border-radius: 0;
    padding: 0.55rem 0.8rem;
    background: var(--black);
    color: var(--white);
    font: 600 0.9rem/1 var(--display-font);
    letter-spacing: 0.025em;
    text-transform: uppercase;
    cursor: pointer;
}

.viewer-control:hover,
.viewer-control:active {
    background: var(--white);
    color: var(--black);
}

[data-viewer-scale] {
    min-width: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.photograph-detail__stage {
    display: grid;
    grid-template-rows: auto auto;
    background: var(--near-black);
}

.photograph-detail__viewport {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: start center;
    overflow: hidden;
}

.photograph-detail__image {
    display: grid;
    width: 100%;
    place-items: center;
}

.photograph-detail__image picture {
    display: grid;
    width: 100%;
    place-items: center;
}

.photograph-detail__image img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--photo-available-height, calc(100svh - 12rem));
    object-fit: contain;
}

.photo-stage__footer {
    z-index: 3;
    display: grid;
    gap: 0.25rem;
    padding: 0.25rem var(--page-gutter);
    border-top: 1px solid var(--dark-gray);
    background: var(--black);
}

.photo-stage__metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
}

.photo-stage__context,
.photo-stage__metadata dl,
.photo-stage__metadata dd {
    margin: 0;
}

.photo-stage__context,
.photo-stage__metadata dt {
    font-family: var(--display-font);
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.photo-stage__metadata dl div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.photo-stage__metadata dt {
    color: var(--mid-gray);
}

.photo-stage__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.photo-stage__action {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 2.75rem;
    justify-content: center;
    border: 0;
    border-radius: 0;
    padding: 0.35rem 0.5rem;
    background: transparent;
    color: var(--white);
    font: 500 clamp(0.64rem, 2.5vw, 0.9rem)/1.1 var(--display-font);
    letter-spacing: 0.025em;
    text-align: center;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
}

.photo-stage__action[hidden] {
    display: none;
}

.photo-stage__action:hover,
.photo-stage__action:active {
    text-decoration-thickness: 0.18em;
}

.photo-stage__navigation {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    display: flex;
    width: 34%;
    align-items: center;
    gap: 0.8rem;
    padding: var(--page-gutter);
    color: var(--white);
    font: 500 0.9rem/1 var(--display-font);
    letter-spacing: 0.025em;
    text-decoration: none;
    text-transform: uppercase;
}

.photo-stage__navigation--previous {
    inset-inline-start: 0;
    justify-content: flex-start;
    background: linear-gradient(to right, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%));
}

.photo-stage__navigation--next {
    inset-inline-end: 0;
    justify-content: flex-end;
    background: linear-gradient(to left, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%));
}

.photo-stage__navigation--previous:hover,
.photo-stage__navigation--previous:focus-visible {
    background: linear-gradient(to right, rgb(0 0 0 / 68%), rgb(0 0 0 / 0%));
}

.photo-stage__navigation--next:hover,
.photo-stage__navigation--next:focus-visible {
    background: linear-gradient(to left, rgb(0 0 0 / 68%), rgb(0 0 0 / 0%));
}

.photo-stage__arrow {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    opacity: 0.72;
}

.photo-stage__navigation-label {
    opacity: 0;
    transition: opacity 180ms ease-out;
}

.photo-stage__navigation:hover .photo-stage__navigation-label,
.photo-stage__navigation:focus-visible .photo-stage__navigation-label {
    opacity: 1;
}

.photograph-detail__information {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.empty-state {
    min-height: 14rem;
    padding: 3rem 0;
    color: var(--mid-gray);
}

.error-page {
    min-height: 70vh;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem var(--page-gutter);
    border-top: 1px solid var(--dark-gray);
    color: var(--light-gray);
}

.site-footer p {
    margin: 0;
}

@media (min-width: 54rem) {
    :root {
        --intro-top-space: 2.25rem;
    }
    .site-header {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .wordmark {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .menu {
        display: none;
    }

    .desktop-navigation {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .primary-navigation {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(0.5rem, 2vw, 1.75rem);
        padding: 0;
        border: 0;
    }

    .primary-navigation a {
        font-size: 0.85rem;
    }

    .language-navigation {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .language-navigation ul {
        gap: 0 0.5rem;
    }

    .language-navigation a {
        font-size: 0.7rem;
    }

    .page-type-homepage .hero__copy {
        padding-block-end: clamp(2.5rem, 5vw, 5rem);
    }

    .hero__copy h1 {
        font-size: clamp(3.2rem, 7.3vw, 6.2rem);
        white-space: nowrap;
    }

    .photograph-detail__image img {
        max-height: var(--photo-available-height, calc(100svh - 10rem));
    }

    .photo-stage__toolbar {
        gap: 0.75rem;
    }

    .photo-stage__action {
        font-size: 0.9rem;
    }

    .gallery-item--wide {
        column-span: all;
    }



    .split-preview,
    .portrait-preview__layout,
    .about-layout,
    .contact-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .story-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 56rem;
    }
}

@media (min-width: 90rem) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        height: 4.5rem;
    }

    .desktop-navigation {
        grid-column: 2;
        grid-row: 1;
    }

    .language-navigation {
        grid-column: 3;
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    .feature-card__overlay,
    .report-card__overlay,
    .image-link__label {
        background: Canvas;
        color: CanvasText;
    }
}

/* Complete photographs flow down columns without row-height placeholders. */
.gallery-grid {
    column-count: 1;
    column-gap: clamp(0.5rem, 1.5vw, 1.25rem);
    padding: var(--page-gutter);
}

.gallery-item {
    display: block;
    break-inside: avoid;
    margin-block-end: clamp(0.5rem, 1.5vw, 1.25rem);
}

.gallery-item picture,
.about-layout__portrait picture,
.split-preview picture {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.gallery-item img,
.about-layout__portrait img,
.split-preview img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--photo-height);
    object-fit: contain;
    object-position: center top;
}

.page-type-homepage .section-heading,
.page-type-homepage .portrait-preview__layout {
    max-width: none;
    margin-inline: 0;
}

.page-type-homepage .gallery-grid {
    padding-inline: 0;
}

.collection-preview {
    position: relative;
    display: block;
    width: min(100%, calc(var(--photo-height) * 4 / 5));
    margin-inline: auto;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.collection-preview--landscape {
    width: min(100%, calc(var(--photo-height) * 16 / 9));
    aspect-ratio: 16 / 9;
}

.collection-preview__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

.collection-preview__frame.is-current {
    opacity: 1;
}

.collection-preview__frame img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.portrait-preview__image > img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.photo-stage__close {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    background: rgb(0 0 0 / 80%);
    color: var(--white);
}

.photo-stage__close:hover {
    background: var(--white);
    color: var(--black);
}

.photo-stage__toolbar .viewer-launch__status:empty {
    display: none;
}

.page-type-eventreportpage:has(.photograph-detail) > .site-footer,
.page-type-portraitsessionpage:has(.photograph-detail) > .site-footer,
.page-type-selectedworkpage:has(.photograph-detail) > .site-footer {
    padding-block: 0.25rem;
}

@media (min-width: 54rem) {
    .gallery-grid { column-count: 2; }
    .collection-preview--responsive {
        width: min(100%, calc(var(--photo-height) * 16 / 9));
        aspect-ratio: 16 / 9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .collection-preview__frame { transition: none; }
}

.photo-stage__image-frame {
    position: relative;
    display: grid;
    width: fit-content;
    max-width: 100%;
}

.photo-stage__image-frame picture {
    display: block;
    width: auto;
}

.image-link:hover img {
    transform: none;
}

.wordmark {
    font-family: "Archivo Narrow", "Inter", Arial, sans-serif;
}

.gallery-item .caption {
    margin-block: 0.5rem 0;
}

@media (max-width: 24rem) {
    .site-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu {
        grid-column: 1;
        grid-row: 2;
    }

    .language-navigation {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }
}