/* Reset defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root variables for consistent theming */
:root {
    --transition-speed: 0.3s;
    --grid-gap: 1rem;
    --container-padding: 2rem;

    /* Colors */
    --color-text: #222;
    --color-text-light: #eee;
    --color-text-muted: #666;
    --color-text-muted-light: #aaa;
    --color-background: rgb(255, 255, 255);
    --color-background-alt: #f5f5f5;
    --color-hover: darkorange;
    --color-link: #007bff;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;

    /* Typography */
    --font-size-xs: 0.8rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: 2.6rem;

    /* Border radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* Layout */
    --max-width: 1440px;
    --header-height: 5rem;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: 300;
    line-height: 1.8;
    margin-top: var(--header-height);
    --text-color: var(--color-text);
}

/* --------- header & navigation --------- */

header {
    background: var(--color-background);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    width: 100%;
    max-width: var(--max-width);
    z-index: 1000;
    height: var(--header-height);
}

body.page-home {
    --text-color: var(--color-text-light);
    margin-top: 0;
    background: #000;
}

body.page-home header {
    background: rgba(0, 0, 0, 0.5);
}

body.page-other header {
    position: fixed;
    background: rgb(255, 255, 255);
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    color: var(--text-color);
    text-decoration: none;
    font-family: "Comfortaa";
    /* Comfortaa only exists from 300 to 700, so these are its extremes */
    font-weight: 300;
    font-size: var(--font-size-3xl);
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo .light-text {
    font-weight: 300;
    opacity: 0.6;
}

.logo .extra-bold {
    font-weight: 700;
    opacity: 0.8;
}

.logo .small-text {
    font-size: 0.65rem;
    font-weight: 300;
    opacity: 0.5;
    letter-spacing: 0.05em;
    /* The logo is a flex column, so this block is as wide as the wordmark
       above it. Justifying the only line spreads it to exactly that width,
       at whatever size the wordmark happens to be. Nudge the font-size if
       the word gaps look too loose or too tight. */
    text-align: justify;
    text-align-last: justify;
}

nav {
    display: flex;
    justify-content: flex-end;
}

.nav-links {
    display: flex;
    gap: var(--spacing-xs);
    list-style: none;
    align-items: center;
}

/* Dot between items. Decorative, so the second content declaration gives it
   empty alt text and screen readers skip it; browsers that do not understand
   that syntax keep the first declaration and still draw the dot. */
.nav-links li + li::before {
    content: "\00B7";
    content: "\00B7" / "";
    margin-right: var(--spacing-xs);
    color: var(--color-text-muted);
    opacity: 0.55;
}

.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 300;
    font-size: var(--font-size-lg);
    transition: color var(--transition-speed);
    font-family: "Comfortaa";
    text-transform: lowercase;
}

.nav-links a:hover {
    color: var(--color-hover);
}

.nav-links li.active a {
    font-weight: 500;
}

.menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: var(--font-size-xl);
    cursor: pointer;
    padding: var(--spacing-xs);
}

/* --------- hero section --------- */

.hero {
    height: 100vh;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    overflow: hidden;
    z-index: -10;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.1s ease;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
}

.hero img,
.hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.tagline {
    position: fixed;
    bottom: 8rem;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--color-text-light);
    font-family: "Comfortaa";
    font-weight: 300;
    font-size: var(--font-size-base);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.scroll-hint {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-light);
    opacity: 0.6;
    z-index: 1;
    animation: bounce 2s ease infinite;
    text-decoration: none;
    cursor: pointer;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

/* --------- home grid --------- */

.home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem;
    position: relative;
    margin-top: 100vh;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border-radius: 12px 12px 0 0;
}

.home-grid-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md);
}

.home-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.home-grid-item:hover img {
    transform: scale(1.05);
}

.home-grid-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}

.home-grid-label {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-light);
    font-family: "Comfortaa";
    font-weight: 300;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.home-grid-triptych {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 2px;
}

.home-grid-triptych img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center center;
}

.home-grid-triptych:not(.home-grid-stacked) img:nth-child(1) {
    object-position: left center;
}

.home-grid-triptych .home-grid-label {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
}

.home-grid-stacked {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.home-grid-stacked img:nth-child(3) {
    object-position: center bottom;
}

/* --------- photography grid --------- */

.photography-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.1rem var(--container-padding) 4rem;
}

.image-grid {
    columns: 3;
    gap: var(--grid-gap);
    margin-top: var(--spacing-lg);
    line-height: 0;
}

/* --------- image container --------- */

.image-container {
    margin-bottom: var(--grid-gap);
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform 0.3s;
    break-inside: avoid;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-text);
    padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 300;
    text-align: center;
    text-transform: lowercase;
    opacity: 0;
    transition: all 0.3s ease;
}

.image-container:hover .image-caption {
    opacity: 0.8;
    transform: translateY(0);
}

.image-container:hover .image-caption.gallery-ref {
    opacity: 0;
}

/* --------- lightbox --------- */

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: pointer;
    transition: all 0.5s ease;
    pointer-events: none;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: auto;
    backdrop-filter: blur(2px);
}

.lightbox img {
    border: 6px solid var(--color-background);
    max-width: 81vw;
    max-height: 76vh;
    border-radius: var(--radius-sm);
    transform: scale(0.2);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox.active img {
    transform: scale(1);
    opacity: 1;
}

.lightbox .image-caption {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
    transform: none;
    padding: 8px 0;
}

.lightbox .image-caption.gallery-ref {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    padding: 6px 0;
}

/* a small outlined button, centred under the caption */
.lightbox-enquire {
    display: table;
    margin: var(--spacing-xs) auto 0;
    padding: 6px 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    font-family: "Comfortaa";
    font-weight: 300;
    font-size: var(--font-size-xs);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.lightbox-enquire:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
}

/* --------- version tooltip --------- */

.version-hint {
    position: relative;
    display: inline-block;
    cursor: default;
}

.version-tooltip {
    visibility: hidden;
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    margin-bottom: 4px;
}

.version-hint:hover .version-tooltip {
    visibility: visible;
    opacity: 1;
}

/* --------- footer --------- */

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--color-text-muted);
    background-color: transparent;
    font-family: "Comfortaa";
    font-size: var(--font-size-xs);
    font-weight: 300;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
    position: relative;
}

body.page-home footer {
    background-color: rgba(0, 0, 0, 0.85);
    color: var(--color-text-muted-light);
    max-width: none;
}

body.page-other footer {
    color: #bbb;
}

.footer-social {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
}

.footer-social a {
    color: var(--color-text-muted-light);
    text-decoration: none;
    font-weight: 300;
    font-size: var(--font-size-sm);
    transition: color var(--transition-speed);
}

.footer-social a:hover {
    color: var(--color-text-light);
}

body.page-other .footer-social a {
    color: #999;
}

body.page-other .footer-social a:hover {
    color: #222;
}

/* --------- page heading --------- */

.page-heading {
    text-align: center;
    padding: 0 0 var(--spacing-xs) 0;
    color: var(--color-text);
    font-weight: 300;
    font-size: var(--font-size-lg);
}

/* --------- posts listing --------- */

.posts-body {
    color: var(--color-text);
}

.posts-list {
    max-width: min(800px, 90vw);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.posts-intro {
    max-width: min(560px, 90vw);
    margin: 0 auto var(--spacing-lg);
    padding: 0 var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
    line-height: 1.7;
}

.posts-year {
    color: var(--color-text-muted-light);
    font-size: var(--font-size-sm);
    font-weight: 300;
    margin: var(--spacing-md) 0 var(--spacing-xs);
    padding-left: var(--spacing-sm);
}

.posts-year:first-of-type {
    margin-top: 0;
}

.posts-item {
    background: var(--color-background-alt);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    transition: transform 0.2s ease;
}

.posts-item:hover {
    transform: translateY(-2px);
}

.posts-title {
    font-size: var(--font-size-xl);
    font-weight: 300;
    margin-bottom: 0;
}

.posts-title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s;
}

.posts-title a:hover {
    color: var(--color-link);
}

.posts-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.posts-summary {
    color: var(--color-text);
}

.posts-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--spacing-xs);
}

.posts-tag {
    display: inline-block;
    background: #e0e0e0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}

/* --------- individual post --------- */

.post-body {
    color: var(--color-text);
}

.post-container {
    max-width: min(800px, 90vw);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.post-header {
    margin-bottom: var(--spacing-lg);
}

.post-title {
    font-size: var(--font-size-2xl);
    font-weight: 300;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.post-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
}

.post-content {
    color: var(--color-text);
}

.post-content p {
    margin-bottom: var(--spacing-md);
}

.post-content p:last-child {
    margin-bottom: 0;
}

.post-content figcaption {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* --------- toggle animation (used in centenary-aus-football post) --------- */

.toggle-animation {
    margin: var(--spacing-md) 0;
}

.toggle-animation button {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-text);
    background: var(--color-background);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 300;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.toggle-animation button:hover {
    background: var(--color-text);
    color: var(--color-background);
}

.toggle-animation video {
    display: none;
    width: 100%;
    height: auto;
    margin-top: var(--spacing-sm);
    border-radius: var(--radius-md);
}

.toggle-animation.active video {
    display: block;
}

.back-link {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    text-align: left;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--color-text);
}

.post-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: var(--spacing-lg);
}

.post-image-grid img {
    width: 100%;
    border-radius: var(--radius-sm);
}

/* --------- about / profile --------- */

.contact-container {
    max-width: 950px;
    margin: 0 auto;
    margin-top: var(--header-height);
    padding: var(--spacing-lg);
}

.contact-section {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.photo-column {
    flex: 1 1 40%;
    padding: var(--spacing-md);
}

.text-column {
    flex: 1 1 60%;
}

.contact-profile-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: var(--spacing-md);
}

.contact-content p {
    margin-bottom: var(--spacing-md);
    font-weight: 300;
}

/* --------- commissions --------- */

.proposal-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--container-padding) var(--spacing-xl);
}

.proposal-content {
    color: var(--color-text);
    font-weight: 300;
}

.proposal-content h1 {
    font-weight: 300;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-xs);
}

.proposal-content h2 {
    font-weight: 300;
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.proposal-content p {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.proposal-content a {
    color: var(--color-text);
    transition: color 0.2s;
}

.proposal-content a:hover {
    color: var(--color-hover);
}

.proposal-content hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: var(--spacing-xl) 0;
}

.proposal-content ul, .proposal-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-md);
}

.proposal-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

.proposal-content strong {
    font-weight: 400;
}

.proposal-video {
    position: relative;
    margin: var(--spacing-lg) 0;
}

.proposal-video:hover .video-caption {
    opacity: 0.8;
}

.proposal-video video {
    width: 100%;
    display: block;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}

.video-lightbox.active {
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.85);
    pointer-events: auto;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.video-lightbox video {
    width: auto;
    height: auto;
    max-width: 80vw;
    max-height: 75vh;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-lightbox.active video {
    opacity: 1;
}



.proposal-video-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
}

.proposal-video-pair .proposal-video,



.proposal-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
}

.proposal-image-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.commissions-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--container-padding) var(--spacing-xl);
}

.commissions-content {
    color: var(--color-text);
    font-weight: 300;
}

.commissions-content p {
    margin-bottom: var(--spacing-md);
}

.commissions-content strong {
    font-weight: 300;
    font-size: var(--font-size-xl);
    display: block;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
}

.commissions-content a {
    color: var(--color-text);
    transition: color 0.2s;
}

.commissions-content a:hover {
    color: var(--color-hover);
}

.commissions-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.commissions-images img,
.commissions-images video {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* --------- art section --------- */

.art-section {
    color: var(--color-text);
}

.art-projects-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--container-padding) 4rem;
}

.art-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.art-project-card {
    background: var(--color-background-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.art-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.art-project-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-thumbnail {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.project-thumbnail img,
.project-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.art-project-card:hover .project-thumbnail img,
.art-project-card:hover .project-thumbnail video {
    transform: scale(1.05);
}

.project-info {
    padding: var(--spacing-md);
}

.project-title {
    font-size: var(--font-size-lg);
    font-weight: 300;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}

.project-subtitle {
    font-size: var(--font-size-sm);
    font-weight: 300;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.project-short-description {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Art project page header */
.art-project-page {
    max-width: 1400px;
    margin: 0 auto;
}

.project-header-section {
    max-width: 900px;
    margin: 0 auto var(--spacing-lg);
    padding: var(--spacing-lg) var(--container-padding) 0;
    text-align: center;
}

.project-page-title {
    font-size: var(--font-size-2xl);
    font-weight: 300;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.project-page-subtitle {
    font-size: var(--font-size-base);
    font-weight: 300;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.project-video-section {
    max-width: 900px;
    margin: 0 auto var(--spacing-lg);
    padding: 0 var(--container-padding);
}

.project-video-section video {
    width: 100%;
    display: block;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.video-caption {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 300;
    color: var(--color-text-muted);
    padding: var(--spacing-xs) 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-video-section:hover .video-caption {
    opacity: 0.8;
}

.video-lightbox-caption {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    padding: var(--spacing-xs) 0;
}

.project-video-pair {
    max-width: 900px;
    margin: 0 auto var(--spacing-lg);
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.project-video-pair .project-video-section {
    max-width: none;
    margin: 0;
    padding: 0;
}

.project-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    text-align: left;
}

.project-description p {
    margin-bottom: var(--spacing-md);
}

.project-description p:last-child {
    margin-bottom: 0;
}

.project-description .small-text {
    font-size: var(--font-size-sm);
}

/* --------- responsive: nav drawer (950px) ---------
   The horizontal row carries six items, the longest of which is
   "exhibitions", so it runs out of room alongside the logo well before the
   768px tablet breakpoint. At 1024px there was still about 15% of the width
   spare between the wordmark and "art", so the drawer takes over at 950px,
   which leaves roughly half that. */

@media (max-width: 950px) {
    .menu-btn {
        display: block;
    }

    .nav-links {
        width: 100vw;
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(30, 30, 30, 0.85);
        padding: var(--spacing-xs) var(--spacing-lg);
        gap: var(--spacing-xs);
        align-items: flex-end;
    }

    .nav-links a {
        color: var(--color-text-light);
    }

    body.page-other .nav-links {
        background: rgba(245, 245, 245, 0.97);
    }

    body.page-other .nav-links a {
        color: var(--color-text);
    }

    .nav-links.active {
        display: flex;
    }

    /* the row's separators make no sense in a vertical list */
    .nav-links li + li::before {
        content: none;
    }
}

/* --------- responsive: tablet (768px) --------- */

@media (max-width: 768px) {
    .logo a {
        font-size: var(--font-size-2xl);
    }

    .image-grid {
        columns: 2;
    }

    .footer-social {
        gap: var(--spacing-xs);
    }

    .footer-social a {
        white-space: nowrap;
        font-size: var(--font-size-sm);
    }

    .posts-list {
        padding: var(--spacing-sm);
    }

    .posts-item {
        padding: var(--spacing-sm);
    }

    .post-container {
        padding: var(--spacing-sm);
    }

    .contact-section {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .photo-column,
    .text-column {
        flex: 0 0 100%;
    }

    .art-projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }

    .project-thumbnail {
        height: 200px;
    }

    .project-header-section {
        padding: var(--spacing-md) var(--spacing-md) 0;
    }

    .project-description {
        font-size: var(--font-size-base);
    }
}

/* --------- responsive: mobile (480px) --------- */

@media (max-width: 480px) {
    .image-grid {
        columns: 1;
    }

    .home-grid {
        grid-template-columns: 1fr;
    }

    .tagline {
        font-size: var(--font-size-xs);
    }

    .post-image-grid {
        grid-template-columns: 1fr;
    }

    .commissions-images {
        grid-template-columns: 1fr;
    }

    .proposal-image-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .proposal-video-pair,
    .project-video-pair {
        grid-template-columns: 1fr;
    }

    .commissions-container,
    .proposal-container {
        padding: var(--spacing-md) var(--spacing-sm) var(--spacing-xl);
    }

    .art-projects-grid {
        grid-template-columns: 1fr;
    }

    .art-projects-container {
        padding: var(--spacing-md) var(--spacing-sm) 4rem;
    }

    .project-header-section {
        padding: var(--spacing-sm) var(--spacing-sm) 0;
    }

    .project-page-title {
        font-size: var(--font-size-xl);
    }
}

/* --------- exhibition --------- */

.exhibition-statement {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-text);
    text-align: center;
    /* The negative bottom margin takes back the half-leading under the last
       line (line-height 1.7, so 0.35em), which otherwise makes the gap from
       the text to the banner look bigger than the banner-to-box gap, even
       though both are spacing-lg. */
    margin: var(--spacing-md) auto -0.35em;
}

.exhibition-statement p {
    margin-bottom: var(--spacing-sm);
}

.exhibition-statement p:last-child {
    margin-bottom: 0;
}

.exhibition-details {
    max-width: 900px;
    margin: 0 auto var(--spacing-lg);
    /* equal top and bottom: the invitation line and the last row share a size
       and line-height, so equal padding gives equal visible gaps */
    padding: 1.25rem var(--container-padding);
    background: var(--color-background-alt);
    border-radius: var(--radius-lg);
}

.exhibition-details dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}


.exhibition-details dt {
    font-size: 0.72rem;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
}

.exhibition-details dd {
    font-size: 0.85rem;
    line-height: 1.5;
}

.exhibition-details a,
.exhibition-body a {
    color: var(--color-text);
    /* the border is the underline; without this the browser's default
       underline draws a second one just above it */
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.exhibition-details a:hover,
.exhibition-body a:hover {
    color: var(--color-hover);
    border-bottom-color: var(--color-hover);
}

.exhibition-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    font-weight: 300;
}

.exhibition-body h2 {
    font-weight: 300;
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.exhibition-body > h2:first-child {
    margin-top: 0;
}

.exhibition-body p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .exhibition-details dl {
        grid-template-columns: 1fr;
    }

    .exhibition-details,
    .exhibition-body {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* --------- exhibition: works, colophon, footnotes --------- */

.exhibition-works {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md) var(--spacing-sm);
    margin: var(--spacing-lg) 0 var(--spacing-xl);
}

.exhibition-works .image-container {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
}

.exhibition-works .image-container img {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* 2:1 works span two columns, so they fill the width of two squares plus the
   gap between them. Height stays one row, keeping every row aligned. */
.exhibition-works .image-container.wide {
    grid-column: span 2;
}

.exhibition-works .image-container.wide img {
    aspect-ratio: 2 / 1;
}

.exhibition-works .image-caption,
.exhibition-works .image-container:hover .image-caption {
    position: static;
    background: none;
    opacity: 1;
    transform: none;
    padding: 0;
    margin-top: var(--spacing-xs);
    text-align: left;
    text-transform: none;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.exhibition-works .image-caption span {
    display: block;
    color: var(--color-text-muted-light);
}

.lightbox .image-caption span {
    display: block;
    color: rgba(255, 255, 255, 0.45);
}

/* A line or two about each work, between its number and its size. Only in
   the lightbox: the grid stays number and size. The image gives up a little
   height to make room, so the enquire button still fits on screen. */
.exhibition-works .image-caption .story {
    display: none;
}

/* As wide as the image above it, less a sliver each side. Zero width with a
   percentage minimum means the text takes the width the image sets, and
   never widens the lightbox itself. */
.lightbox .image-caption .story {
    width: 0;
    min-width: 96%;
    margin: 6px auto 6px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    line-height: 1.5;
}

.lightbox .image-caption .story::before {
    content: "\201C";
}

.lightbox .image-caption .story::after {
    content: "\201D";
}

/* an empty story, a work not yet written about, shows nothing and leaves
   the image at full size */
.lightbox .image-caption .story:empty {
    display: none;
}

.lightbox-content:has(.story:not(:empty)) img {
    max-height: 68vh;
}

/* What the works are made of. Deliberately the same type as the practice
   paragraph above it, which it inherits from .exhibition-body p. The divider
   is what separates the two, not a change of size or colour. */
.exhibition-materials {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.exhibition-footnote {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.exhibition-footnote a {
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.exhibition-footnote a:hover {
    color: var(--color-hover);
    border-bottom-color: var(--color-hover);
}

@media (max-width: 768px) {
    .exhibition-works {
        grid-template-columns: repeat(2, 1fr);
    }

    /* on a 2-column grid a wide work takes the full row */
    .exhibition-works .image-container.wide {
        grid-column: span 2;
    }

    .exhibition-works .image-caption,
    .exhibition-works .image-container:hover .image-caption {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }
}

/* --------- exhibition: opening night --------- */

.exhibition-quote {
    margin: var(--spacing-xl) auto;
    max-width: 42rem;
    padding: 0;
    border: none;
    text-align: center;
}

.exhibition-quote p {
    font-size: var(--font-size-base);
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 var(--spacing-sm);
}

.exhibition-quote cite {
    display: block;
    text-align: right;
    font-style: normal;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* A small grey line under a section heading. It tucks up close to the
   heading, and the grid after it starts closer than it would after a
   heading alone. */
.exhibition-body .works-note,
.exhibition-body .opening-date {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: calc(var(--spacing-sm) * -1) 0 0;
}

.works-note + .exhibition-works,
.opening-date + .opening-photos {
    margin-top: var(--spacing-sm);
}

/* on a phone the sections sit closer together */
@media (max-width: 768px) {
    .exhibition-body h2 {
        margin-top: var(--spacing-lg);
    }

    .exhibition-works {
        margin-bottom: var(--spacing-lg);
    }
}

/* The walkthrough, under the photos. Always embedded on a desktop: the
   controls below come from embedded-video.js, with no fullscreen button.
   Phones keep their native controls. */
.opening-video {
    position: relative;
    margin: 0 0 var(--spacing-xl);
}

.opening-video video {
    width: 100%;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.opening-video.has-controls video {
    cursor: pointer;
}

.video-big-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    padding: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease;
}

.video-big-play:hover {
    background: rgba(0, 0, 0, 0.65);
}

.video-big-play svg,
.video-controls svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.opening-video.playing .video-big-play {
    display: none;
}

.video-controls {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-xs);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    color: #fff;
    transition: opacity 0.3s ease;
}

/* while it plays, the controls get out of the way until the mouse is over it */
.opening-video.playing .video-controls {
    opacity: 0;
}

.opening-video.playing:hover .video-controls,
.opening-video .video-controls:focus-within {
    opacity: 1;
}

.video-controls button {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
}

.video-seek {
    flex: 1;
    min-width: 0;
    accent-color: #fff;
    cursor: pointer;
}

.video-time {
    flex: none;
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* Photos come in mixed shapes, so the grid crops them all to 3:2 and the
   lightbox shows each one whole. */
.opening-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.opening-photos .image-container {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 0;
}

.opening-photos .image-container img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

@media (max-width: 768px) {
    .opening-photos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------- price tiers --------- */

.price-tiers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0 var(--spacing-xl);
}

.price-tier {
    background: var(--color-background-alt);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.price-tier .size {
    font-size: var(--font-size-lg);
    font-weight: 300;
    margin-bottom: 0.2rem;
}

.price-tier .edition {
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.price-tier .amount {
    font-size: var(--font-size-xl);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .price-tiers {
        grid-template-columns: 1fr;
    }
}

/* --------- price in lightbox, toggled per page --------- */

.exhibition-works .image-caption .price,
.lightbox .image-caption .price {
    display: none;
}

/* sits on the size line, after the edition */
body.show-prices .lightbox .image-caption .price {
    display: inline;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
}

body.show-prices .lightbox .image-caption .price::before {
    content: " \00b7  ";
    color: rgba(255, 255, 255, 0.45);
}

/* --------- art project grid ---------
   Equal columns rather than the masonry flow the photo galleries use.
   Every cell is square, so a 2:1 work keeps its full width and is
   letterboxed top and bottom rather than cropped or half-height. */

.image-grid.art-grid {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

.image-grid.art-grid .image-container {
    margin-bottom: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-grid.art-grid .image-container img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .image-grid.art-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .image-grid.art-grid {
        grid-template-columns: 1fr;
    }
}

/* --------- exhibition hero ---------
   A thin banner across the top of every exhibition page: a 4:1 slice through
   the middle of one work. Same width as the title block below it. */

/* One side gutter for every block on an exhibition page, so the title, the
   banner, the grey box and the text below all share the same edges at every
   width. It narrows in the same steps as the title block elsewhere. */
.exhibition-page {
    --gutter: var(--container-padding);
}

@media (max-width: 768px) {
    .exhibition-page { --gutter: var(--spacing-md); }
}

@media (max-width: 480px) {
    .exhibition-page { --gutter: var(--spacing-sm); }
}

.exhibition-page .project-header-section {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    /* half the old spacing-lg, matching the gap under the banner */
    margin-bottom: var(--spacing-sm);
}

.exhibition-page .exhibition-body {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* A past show has no details box, so the body follows the banner directly.
   Give it the gap the box would have left. */
.exhibition-hero + .exhibition-body {
    margin-top: var(--spacing-lg);
}

/* The box is inset by the gutter rather than padded by it, so its edges line
   up with the banner's instead of running wider, or edge to edge on a phone. */
.exhibition-page .exhibition-details {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(900px - 2 * var(--gutter));
}

.exhibition-hero {
    max-width: 900px;
    margin: 0 auto var(--spacing-sm);
    padding: 0 var(--gutter);
}

.exhibition-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-md);
}

@media (max-width: 600px) {
    /* 4:1 on a phone is a sliver; 3:1 keeps it a picture */
    .exhibition-hero img {
        aspect-ratio: 3 / 1;
    }
}

/* --------- add to calendar ---------
   A <details> chooser rather than a bare download. Google and Outlook open
   the calendar with the event already filled in, the .ics covers Apple and
   the rest. No JavaScript: <details> does the disclosure natively. */

.exhibition-details .add-to-calendar {
    display: inline-block;
    position: relative;
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-xs);
}

.exhibition-details .add-to-calendar > summary {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-text-muted);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    list-style: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* the default disclosure triangle would fight the button shape */
.exhibition-details .add-to-calendar > summary::-webkit-details-marker {
    display: none;
}

.exhibition-details .add-to-calendar > summary:hover,
.exhibition-details .add-to-calendar[open] > summary {
    color: var(--color-hover);
    border-color: var(--color-hover);
}

.exhibition-details .add-to-calendar ul {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 13rem;
    margin: 0;
    padding: var(--spacing-xs) 0;
    list-style: none;
    background: var(--color-background);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.exhibition-details .add-to-calendar li {
    margin: 0;
}

.exhibition-details .add-to-calendar li a {
    display: block;
    padding: 0.3rem var(--spacing-sm);
    white-space: nowrap;
    color: var(--color-text);
    border-bottom: none;
}

.exhibition-details .add-to-calendar li a:hover {
    color: var(--color-hover);
    background: var(--color-background-alt);
}

/* --------- the invitation line ---------
   Sits at the top of the details block while the show is upcoming, so the
   invitation reads before the practical detail rather than after it. */

.exhibition-invitation {
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.03em;
    /* the colour of the dt labels below it, so it reads as part of this box
       rather than competing with the exhibition title above */
    color: var(--color-text-muted);
}

@media (max-width: 480px) {
    /* the button stays on the opening-night line; the menu opens leftwards
       so it doesn't run off the right edge of the screen */
    .exhibition-details .add-to-calendar ul {
        right: 0;
        left: auto;
    }
}

/* --------- gallery video ---------
   A film below a gallery's photographs, full width of the grid, 16:9. */

.gallery-video {
    /* Twice the caption-to-video gap. The last photo already carries a 1rem
       bottom margin, so 1rem here makes 2rem visible above the caption,
       against the caption's 1rem below. Measured from the longest column;
       the masonry grid's shorter columns end higher. */
    margin-top: var(--spacing-sm);
}

.gallery-video-caption {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 300;
    color: var(--color-text-muted);
}

.gallery-video-frame {
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.gallery-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------- 404 --------- */

.notfound {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--container-padding);
    font-weight: 300;
}

.notfound-code {
    font-size: var(--font-size-sm);
    letter-spacing: 0.2em;
    color: var(--color-text-muted-light);
    margin-bottom: var(--spacing-sm);
}

.notfound h1 {
    font-weight: 200;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

.notfound-lede {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.notfound-links {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-xl);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.notfound-links li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.notfound-links a {
    color: var(--color-text);
    margin-right: 0.4rem;
}

.notfound-links a:hover {
    color: var(--color-hover);
}

.notfound-contact {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.notfound-contact a {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-hover);
}

/* data source credit, last thing on a series or exhibition page */
.data-credit {
    max-width: 900px;
    margin: var(--spacing-lg) auto 0;
    padding: 0 var(--container-padding);
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: left;
    opacity: 0.6;
}