:root {
    --ink: #11120f;
    --chrome: #171814;
    --footer: #24231d;
    --footer-links-surface: #2d2a22;
    --paper: #f2eadc;
    --acid: #b8c58f;
    --line: rgba(20, 20, 17, 0.28);
    --line-on-dark: rgba(242, 234, 220, 0.24);
    --line-on-dark-subtle: rgba(242, 234, 220, 0.28);
    --line-on-dark-strong: rgba(242, 234, 220, 0.35);
    --line-on-dark-emphasis: rgba(242, 234, 220, 0.5);
    --paper-muted: rgba(242, 234, 220, 0.55);
    --paper-surface: rgba(242, 234, 220, 0.035);
    --paper-surface-hover: rgba(242, 234, 220, 0.1);
    --acid-surface: rgba(184, 197, 143, 0.16);
    --acid-surface-hover: rgba(184, 197, 143, 0.1);
    --nav-surface: rgba(23, 24, 20, 0.88);
    --shadow-soft: 0 0.45rem 1.5rem rgba(0, 0, 0, 0.2);
    --radius-pill: 999px;
    --transition-ui: 180ms ease;
    --transition-image: 420ms ease;
    --section-min-height: 100svh;
    --action-padding: 0.88rem 1.2rem;
    --action-letter-spacing: 0.1em;
    --blur-ui: 12px;
    --blur-image: 3px;
    --blur-layer: 2px;
    --image-saturation: 0.9;
    --image-contrast: 1.04;
    --image-layer-inset: -1rem;
    --image-layer-scale: 1.015;
    --overlay-hero: linear-gradient(rgba(17, 18, 15, 0.38), rgba(17, 18, 15, 0.62));
    --overlay-archive: linear-gradient(to bottom, rgba(17, 18, 15, 0.5), rgba(17, 18, 15, 0.82));
    --overlay-statement: linear-gradient(105deg, rgba(17, 18, 15, 0.56), rgba(17, 18, 15, 0.8));
    --overlay-gate: linear-gradient(rgba(17, 18, 15, 0.42), rgba(17, 18, 15, 0.66));
    --placeholder-default: linear-gradient(135deg, var(--chrome), var(--footer));
    --placeholder-home: linear-gradient(135deg, #4f4f3b, #58553b);
    --placeholder-albums: linear-gradient(135deg, #222413, #151c0c);
    --placeholder-about-geography: linear-gradient(135deg, #2f301f, #323920);
    --placeholder-about-criminalized: linear-gradient(135deg, #28361d, #28331b);
    --placeholder-about-pardes: linear-gradient(135deg, #272e1b, #19230d);
    --placeholder-ascend-telegram: linear-gradient(135deg, #11110c, #282b20);
    --placeholder-ascend-photographed: linear-gradient(135deg, #11140d, #1a2212);
    --placeholder-ascend-exhibit: linear-gradient(135deg, #261c16, #2a261b);
    --placeholder-gate: linear-gradient(135deg, #202a29, #263131);
    --section-separation: clamp(0.5rem, 1vw, 1rem);
    --pad: clamp(1rem, 2.5vw, 2.5rem);
    --page-top: clamp(7rem, 10vw, 10rem);
    --page-bottom: clamp(8rem, 14vw, 14rem);
    --action-size: clamp(1rem, 1.2vw, 1.15rem);
    --feature-size: clamp(2.75rem, 5vw, 5.5rem);
    --statement-size: clamp(1.8rem, 3.4vw, 3.5rem);
    --supporting-size: clamp(1.2rem, 1.8vw, 1.65rem);
    --font-sans: "Jost", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    --font-identity: var(--font-sans);
    --font-display: "Cardo", "Iowan Old Style", Georgia, serif;
    --font-hebrew: "Noto Sans Hebrew", "SF Hebrew", "Arial Hebrew", Arial, sans-serif;
    --font-serif: var(--font-display);
    --background-home: url("assets/optimized/section-home-path.jpg");
    --background-albums: url("assets/optimized/background-albums.jpg");
    --background-about-geography: url("assets/optimized/section-about-geography.jpg");
    --background-about-criminalized: url("assets/optimized/section-about-criminalized-v2.jpg");
    --background-about-pardes: url("assets/optimized/section-about-pardes.jpg");
    --background-ascend-telegram: url("assets/optimized/section-ascend-telegram.jpg");
    --background-ascend-photographed: url("assets/optimized/section-ascend-photographed.jpg");
    --background-ascend-exhibit: url("assets/optimized/section-ascend-exhibit.jpg");
    --background-alternate: url("assets/optimized/background-agave.jpg");
}

* {
    box-sizing: border-box;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    min-height: 100%;
    background: var(--chrome);
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: var(--section-min-height);
    margin: 0;
    background: var(--ink);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    font-kerning: normal;
    font-optical-sizing: auto;
    line-height: 1;
    text-rendering: optimizeLegibility;
}

.site-header,
.enter-link,
.album-number,
.primary-action,
.footer-links,
.album-heading,
.album-nav,
.album-grid figcaption {
    font-family: var(--font-sans);
}

a {
    color: inherit;
    text-decoration: none;
}

.arrow-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.06em;
    font-style: normal;
}

.arrow-icon--forward::before,
.arrow-icon--back::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.06em;
    left: 0.06em;
    border-top: 0.08em solid currentColor;
    transform: translateY(-50%);
}

.arrow-icon--forward::after,
.arrow-icon--back::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.06em;
    width: 0.34em;
    height: 0.34em;
    border-right: 0.08em solid currentColor;
    border-bottom: 0.08em solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: center;
}

.arrow-icon--back {
    transform: scaleX(-1);
}

.site-header {
    position: fixed;
    z-index: 20;
    top: calc(0.8rem + env(safe-area-inset-top));
    right: max(var(--pad), env(safe-area-inset-right));
    left: auto;
    width: max-content;
    max-width: calc(100% - 1.5rem);
    padding: 0;
    color: var(--paper);
    pointer-events: none;
}

.site-header a {
    pointer-events: auto;
}

.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-identity);
    font-weight: 600;
}

.wordmark-he {
    font-family: var(--font-hebrew);
    font-size: 1.16em;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 0.86;
    text-transform: none;
}

.site-header nav {
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 0.12rem;
    padding: 0.22rem;
    border: 1px solid var(--line-on-dark-subtle);
    border-radius: var(--radius-pill);
    background: var(--nav-surface);
    box-shadow: var(--shadow-soft);
    font-family: var(--font-identity);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(var(--blur-ui));
    backdrop-filter: blur(var(--blur-ui));
}

.site-header nav a {
    position: relative;
    padding: 0.58rem clamp(0.72rem, 1.35vw, 1rem);
    border-radius: var(--radius-pill);
    border-bottom: 0;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--transition-ui), color var(--transition-ui);
}

.site-header nav a::after {
    content: none;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    background: var(--paper-surface-hover);
}

.site-header a[aria-current="page"] {
    color: var(--acid);
}

.site-header nav a[aria-current="page"] {
    background: var(--acid-surface);
}

.age-gate {
    --section-image: var(--background-alternate);
    --section-placeholder: var(--placeholder-gate);
    --section-overlay: var(--overlay-gate);
    --section-image-opacity: 0.28;
    --section-layer-inset: 0;
    --section-layer-position: fixed;
    display: none;
    position: fixed;
    z-index: 100;
    inset: 0;
    isolation: isolate;
    overflow-y: auto;
    place-items: center;
    padding-top: max(var(--pad), env(safe-area-inset-top));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
    padding-left: max(var(--pad), env(safe-area-inset-left));
    background: var(--ink);
    color: var(--paper);
}

.age-gate::after,
.hero::after,
.archive::after,
.statement-block::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--blur-layer));
    backdrop-filter: blur(var(--blur-layer));
}

.age-gate::after {
    position: fixed;
}

.age-gate-pending {
    overflow: hidden;
}

.age-gate-pending .age-gate {
    display: grid;
}

.age-gate-panel,
.hero > *,
.archive > *,
.statement-content {
    position: relative;
    z-index: 1;
}

.age-gate-panel {
    width: min(40rem, 100%);
    text-align: center;
}

.age-gate h2 {
    margin: 0;
    font-weight: 400;
}

.age-gate h2 > bdi,
.age-gate h2 > span,
.age-gate-title-he span,
.age-gate-title-he > bdi,
.age-gate-title-en span,
#age-gate-description span {
    display: block;
}

.age-gate-title-he {
    font-family: var(--font-hebrew);
    font-size: clamp(2.15rem, 3.5vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 0.98;
}

.age-gate-title-en {
    margin-top: clamp(1rem, 2vw, 1.4rem);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.02;
}

#age-gate-description {
    width: min(30rem, 100%);
    margin: clamp(1.8rem, 3vw, 2.5rem) auto 0;
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    letter-spacing: -0.01em;
    line-height: 1.45;
}

.age-gate-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    width: min(25rem, 100%);
    margin: clamp(1.65rem, 3vw, 2.25rem) auto 0;
}

.age-gate-actions button,
.age-gate-actions a {
    width: 100%;
    min-width: 0;
    min-height: 3.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.82rem 1.15rem;
    border: 1px solid var(--line-on-dark-emphasis);
    border-radius: var(--radius-pill);
    background: var(--paper-surface);
    color: inherit;
    font-family: var(--font-identity);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui);
}

.age-gate-actions button:hover,
.age-gate-actions button:focus-visible,
.age-gate-actions a:hover,
.age-gate-actions a:focus-visible {
    border-color: currentColor;
    background: var(--acid-surface-hover);
    color: var(--acid);
}

.age-gate-actions button:focus-visible,
.age-gate-actions a:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px currentColor;
}

.hero,
.archive,
.statement-block {
    position: relative;
    isolation: isolate;
    min-height: var(--section-min-height);
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
}

.hero {
    --section-image: var(--background-home);
    --section-placeholder: var(--placeholder-home);
    --section-overlay: var(--overlay-hero);
    --section-position: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    padding: 6rem var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
}

.hero-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    max-width: 62rem;
    font-family: var(--font-serif);
}

.hero-copy h1 {
    margin: 0;
    font-size: var(--feature-size);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.04;
    text-wrap: balance;
}

.enter-link,
.primary-action {
    display: inline-flex;
    justify-content: center;
    max-width: 100%;
    padding: var(--action-padding);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    background: var(--paper-surface);
    font-family: var(--font-identity);
    font-size: var(--action-size);
    font-weight: 600;
    letter-spacing: var(--action-letter-spacing);
    text-align: center;
    text-transform: uppercase;
    transition: background-color var(--transition-ui), color var(--transition-ui);
}

.enter-link {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    width: fit-content;
    margin-top: clamp(1.5rem, 3vw, 3rem);
    gap: 1.5rem;
}

.enter-link:hover,
.enter-link:focus-visible {
    background: var(--acid-surface-hover);
    color: var(--acid);
}

.archive,
.about {
    padding: var(--page-top) var(--pad) var(--page-bottom);
}

.about {
    min-height: var(--section-min-height);
}

.archive {
    --section-image: var(--background-albums);
    --section-placeholder: var(--placeholder-albums);
    --section-overlay: var(--overlay-archive);
    --section-position: center;
    padding: 0;
}

.albums-index-page {
    --line: var(--line-on-dark-strong);
    background: var(--ink);
    color: var(--paper);
}

.album-list {
    width: 100%;
    margin: 0;
}

body::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    height: calc(15rem + env(safe-area-inset-top));
    background: linear-gradient(
        to bottom,
        var(--ink) 0,
        rgba(17, 18, 15, 0.96) calc(4.25rem + env(safe-area-inset-top)),
        rgba(17, 18, 15, 0.52) calc(8rem + env(safe-area-inset-top)),
        transparent 100%
    );
    pointer-events: none;
}

.album-link {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    overflow: hidden;
    padding-top: calc(clamp(6rem, 9vw, 9rem) + env(safe-area-inset-top));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    padding-bottom: max(clamp(3rem, 7vw, 6rem), env(safe-area-inset-bottom));
    padding-left: max(var(--pad), env(safe-area-inset-left));
    color: var(--paper);
    transition: color var(--transition-ui);
}

.album-link::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 18, 15, 0.12) 25%, rgba(17, 18, 15, 0.78) 100%);
    pointer-events: none;
}

.album-cover {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: var(--image-placeholder, var(--placeholder-default));
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--image-placeholder, var(--placeholder-default));
    filter: blur(var(--blur-image)) saturate(var(--image-saturation)) contrast(var(--image-contrast));
    transform: scale(var(--image-layer-scale));
    transition: opacity var(--transition-image), filter 300ms ease, transform 500ms ease;
}

.js img[data-placeholder-image] {
    opacity: 0;
}

.js img[data-placeholder-image].is-loaded {
    opacity: 1;
}

.album-link:hover .album-cover img,
.album-link:focus-visible .album-cover img {
    filter: blur(var(--blur-image)) saturate(1.06) contrast(1.03);
    transform: scale(1.035);
}

.album-link:hover,
.album-link:focus-visible {
    color: var(--acid);
}

.album-identity {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.12em;
    font-family: var(--font-serif);
    font-size: var(--statement-size);
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.15;
    text-align: center;
}

.album-identity-date {
    display: block;
    color: var(--acid);
}

.album-number {
    grid-area: number;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.editorial-block {
    width: var(--editorial-width, min(100%, 92rem));
    margin-left: var(--editorial-indent, 0);
    padding: clamp(5rem, 9vw, 9rem) 0;
    border-bottom: 1px solid var(--editorial-line, var(--line));
}

.editorial-heading {
    max-width: 12ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--feature-size);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 0.92;
    text-wrap: balance;
}

.editorial-copy {
    width: min(100%, var(--editorial-copy-width, 34rem));
    margin: clamp(1.75rem, 3vw, 3rem) 8% 0 auto;
    font-family: var(--font-serif);
    font-size: var(--supporting-size);
    letter-spacing: -0.008em;
    line-height: 1.48;
}

.editorial-copy > p {
    margin: 0;
}

.about,
.join-page-content {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: var(--ink);
    color: var(--paper);
}

.about-page,
.join-page {
    --line: var(--line-on-dark-strong);
    background: var(--ink);
    color: var(--paper);
}

.section-sequence {
    display: grid;
    gap: var(--section-separation);
    margin: 0;
    background: var(--ink);
}

.statement-sequence {
    margin: 0;
}

.statement-block {
    --section-overlay: var(--overlay-statement);
    --section-position: center;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-top: calc(clamp(6rem, 9vw, 9rem) + env(safe-area-inset-top));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    padding-bottom: clamp(6rem, 9vw, 9rem);
    padding-left: max(var(--pad), env(safe-area-inset-left));
}

.age-gate::before,
.hero::before,
.archive::before,
.statement-block::before {
    content: "";
    position: var(--section-layer-position, absolute);
    z-index: 0;
    inset: var(--section-layer-inset, var(--image-layer-inset));
    background-image: var(--section-overlay), var(--section-image), var(--section-placeholder, var(--placeholder-default));
    background-position: var(--section-position);
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--blur-image)) saturate(var(--image-saturation)) contrast(var(--image-contrast));
    opacity: var(--section-image-opacity, 1);
    transform: scale(var(--image-layer-scale));
    pointer-events: none;
}

.statement-content {
    width: min(100%, 72rem);
}

.statement-text {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--statement-size);
    letter-spacing: -0.012em;
    line-height: 1.15;
    text-wrap: pretty;
}

.statement-text strong {
    font-weight: 700;
}

.statement-block--left .statement-content {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

.statement-block--center .statement-content {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.statement-block--right .statement-content {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}

.about-block--geography {
    --section-image: var(--background-about-geography);
    --section-placeholder: var(--placeholder-about-geography);
}

.about-block--criminalized {
    --section-image: var(--background-about-criminalized);
    --section-placeholder: var(--placeholder-about-criminalized);
}

.about-block--pardes {
    --section-image: var(--background-about-pardes);
    --section-placeholder: var(--placeholder-about-pardes);
}

.join-page-block--telegram {
    --section-image: var(--background-ascend-telegram);
    --section-placeholder: var(--placeholder-ascend-telegram);
}

.join-page-block--photographed {
    --section-image: var(--background-ascend-photographed);
    --section-placeholder: var(--placeholder-ascend-photographed);
}

.join-page-block--exhibit {
    --section-image: var(--background-ascend-exhibit);
    --section-placeholder: var(--placeholder-ascend-exhibit);
}

.statement-actions {
    margin-top: clamp(2.5rem, 5vw, 5rem);
}

.join-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: flex-start;
}

.statement-block--right .join-actions {
    align-items: flex-end;
}

.join-page .primary-action {
    color: var(--paper);
}

.join-page .primary-action:hover,
.join-page .primary-action:focus-visible {
    background: var(--acid-surface-hover);
    color: var(--acid);
}

.primary-action {
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.primary-action:hover,
.primary-action:focus-visible {
    color: var(--acid);
}

.site-footer {
    display: grid;
    gap: var(--section-separation);
    margin-top: var(--section-separation);
    border-top: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-identity);
}

.footer-brand {
    display: grid;
    justify-items: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    padding: clamp(3.5rem, 7vw, 6rem) var(--pad);
    background: var(--footer);
    text-align: center;
}

.footer-wordmark {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1;
}

.footer-identity-he {
    font-family: var(--font-hebrew);
    font-size: 1.08em;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

.footer-identity-en {
    margin: 0;
    font-family: var(--font-identity);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.footer-identity-copyright {
    font-family: var(--font-identity);
    font-size: clamp(1.125rem, 1.8vw, 1.6rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.06em;
    opacity: 0.74;
}

.footer-links-section {
    display: grid;
    justify-items: center;
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-right: max(var(--pad), env(safe-area-inset-right));
    padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + env(safe-area-inset-bottom));
    padding-left: max(var(--pad), env(safe-area-inset-left));
    background: var(--footer-links-surface);
}

.footer-links {
    display: grid;
    width: min(30rem, 100%);
    border-top: 1px solid var(--line-on-dark);
}

.footer-link {
    padding: 1rem;
    border-bottom: 1px solid var(--line-on-dark);
    text-align: center;
    transition: color var(--transition-ui), background-color var(--transition-ui);
}

.footer-link-name {
    font-family: var(--font-identity);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-link:hover,
.footer-link:focus-visible {
    background: var(--paper-surface);
    color: var(--acid);
}

.album-page {
    min-height: var(--section-min-height);
    background: var(--ink);
    color: var(--paper);
}

.album-view {
    min-height: calc(100svh - 3rem);
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 7rem var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
}

.album-heading {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
    align-items: start;
}

.album-heading--detail {
    grid-template-columns: 1fr;
}

.album-heading.album-heading--detail h1 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.08em 0.24em;
    max-width: 100%;
    line-height: 0.96;
    text-transform: none;
}

.album-heading-date {
    display: inline-flex;
    gap: 0.24em;
}

.album-heading-date time {
    color: var(--acid);
}

.album-heading-separator {
    color: var(--paper-muted);
}

.album-heading h1 {
    max-width: 90vw;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--feature-size);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 0.84;
    text-transform: uppercase;
}

.album-description {
    margin: 1.25rem 0 0;
    font-family: var(--font-serif);
    font-size: var(--supporting-size);
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(5rem, 10vw, 10rem) 0;
}

.album-grid figure {
    grid-column: span 6;
    margin: 0;
    background: var(--image-placeholder, var(--placeholder-default));
}

.album-grid figure:nth-child(3n + 2) {
    grid-column: 7 / span 4;
    margin-top: 12vw;
}

.album-grid figure:nth-child(3n) {
    grid-column: 2 / span 5;
}

.album-grid figure.layout-hero {
    grid-column: 1 / span 8;
}

.album-grid figure.layout-wide {
    grid-column: 2 / span 10;
}

.album-grid figure.layout-small-left {
    grid-column: 1 / span 5;
}

.album-grid figure.layout-small-right {
    grid-column: 8 / span 5;
}

.album-grid figure.layout-close {
    grid-column: 3 / span 8;
}

.album-grid figure.layout-full,
.album-grid figure.layout-panorama {
    grid-column: 1 / -1;
}

.album-grid figure.layout-portrait {
    grid-column: 4 / span 6;
}

.album-grid figure.layout-sex-portrait {
    grid-column: 4 / span 5;
    margin-top: clamp(3rem, 8vw, 8rem);
    margin-bottom: clamp(3rem, 8vw, 8rem);
}

.album-grid img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--image-placeholder, var(--placeholder-default));
    transition: opacity var(--transition-image);
}

.album-grid figure.album-video {
    grid-column: 1 / -1;
    margin: clamp(3rem, 7vw, 7rem) 0;
}

.album-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--image-placeholder, var(--placeholder-default));
    object-fit: cover;
}

.album-grid figcaption {
    margin-top: 0.6rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.album-interlude {
    grid-column: 2 / span 9;
    margin: clamp(5rem, 11vw, 11rem) 0;
}

.album-interlude > p {
    max-width: 60rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--statement-size);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 0.96;
}

.album-interlude > span {
    display: block;
    width: min(38rem, 80%);
    margin-left: auto;
    font-family: var(--font-serif);
    font-size: var(--supporting-size);
    line-height: 1.25;
}

.album-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    padding-top: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.album-nav a:hover,
.album-nav a:focus-visible {
    color: var(--acid);
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .site-header nav {
        font-size: 0.65rem;
        letter-spacing: 0.025em;
    }

    .site-header nav a {
        padding: 0.45rem clamp(0.44rem, 2.2vw, 0.66rem);
    }

    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto auto 1fr;
        gap: 2rem;
    }

    .hero-copy h1 {
        font-size: clamp(2.2rem, 9vw, 3.75rem);
    }

    .hero-copy {
        justify-self: stretch;
        width: 100%;
    }

    .enter-link {
        justify-self: start;
        width: fit-content;
        margin-top: 0;
    }

    .album-link {
        min-height: 100svh;
        padding-top: calc(5rem + env(safe-area-inset-top));
        padding-right: max(clamp(1rem, 4vw, 1.5rem), env(safe-area-inset-right));
        padding-bottom: max(clamp(2.5rem, 10vw, 4rem), env(safe-area-inset-bottom));
        padding-left: max(clamp(1rem, 4vw, 1.5rem), env(safe-area-inset-left));
    }

    .editorial-block {
        width: 100%;
        margin-left: 0;
        padding: clamp(5rem, 22vw, 8rem) clamp(1rem, 4vw, 1.5rem);
    }

    .editorial-heading {
        max-width: 100%;
        font-size: clamp(2.5rem, 10vw, 4rem);
        letter-spacing: -0.025em;
        overflow-wrap: break-word;
    }

    .editorial-copy {
        width: min(100%, 30rem);
        margin: clamp(2rem, 9vw, 3.5rem) 0 0;
    }

    .statement-block {
        padding-top: calc(clamp(5rem, 22vw, 8rem) + env(safe-area-inset-top));
        padding-right: max(clamp(1rem, 4vw, 1.5rem), env(safe-area-inset-right));
        padding-bottom: clamp(5rem, 22vw, 8rem);
        padding-left: max(clamp(1rem, 4vw, 1.5rem), env(safe-area-inset-left));
    }

    .statement-content {
        width: min(100%, 26rem);
    }

    .statement-text {
        font-size: clamp(1.75rem, 7.8vw, 2.8rem);
        line-height: 1.18;
    }

    .album-heading {
        grid-template-columns: 1fr;
    }

    .album-grid figure,
    .album-grid figure:nth-child(3n + 2),
    .album-grid figure:nth-child(3n),
    .album-grid figure.layout-hero,
    .album-grid figure.layout-wide,
    .album-grid figure.layout-small-left,
    .album-grid figure.layout-small-right,
    .album-grid figure.layout-close,
    .album-grid figure.layout-full,
    .album-grid figure.layout-panorama,
    .album-grid figure.layout-portrait,
    .album-grid figure.layout-sex-portrait {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .album-grid figure.album-video {
        margin: 2rem 0;
    }

    .album-interlude {
        grid-column: 1 / -1;
    }

    .album-interlude > span {
        width: 100%;
    }

    .footer-links {
        width: 100%;
    }

}

@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(1.5rem);
        transition: opacity 500ms ease, transform 500ms ease;
    }

    [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-image: 0ms;
    }
}