img{height:auto}
/* wp-img-auto-sizes-contain-inline-css */

img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}


/* global-styles-inline-css */

:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}


/* assets/css/main.css */
/*
 * Cameron Krone. The look is the 2018-2025 site's, measured from the live pages on 2026-10-22;
 * sizes and spacing match those pages at 1440px and 390px wide.
 */

/* Fonts ------------------------------------------------------------------------------------ */

@font-face {
    font-family: "SweetSans";
    src: url("fonts/SweetSansPro-Medium.f87f10a2.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ScotchModern";
    src: url("fonts/ScotchModernDisplay.6014726a.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LeJeune";
    src: url("fonts/LeJeunePoster-Light.67e51821.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Base ------------------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #fff;
    color: #000;
    font: 300 14px/23px "SweetSans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
}

h1 {
    font: 300 120px/100px "LeJeune", serif;
    text-transform: uppercase;
}

h2 {
    font: 500 24px/1.2 "LeJeune", serif;
    color: #393939;
}

h3 {
    font: 300 21px/27px "ScotchModern", serif;
}

h4 {
    font: 400 10px/11px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h5 {
    font-size: 19px;
    font-weight: 500;
    color: #393939;
}

h6 {
    font: 500 15px/1.4 "SweetSans", sans-serif;
}

p {
    font-family: "ScotchModern", serif;
}

a {
    color: #000;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

ul {
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

/* Selected text is soft grey on every page, never the computer's accent colour. */
::selection {
    background: #e0e0e0;
    color: #000;
}

/* The browser's find (Cmd/Ctrl+F) highlights in the same greys, never its default orange or
   yellow. Browsers without ::search-text keep their own colours. */
::search-text {
    background: #e0e0e0;
    color: #000;
}

::search-text:current {
    background: #b8b8b8;
    color: #000;
}

[hidden] {
    display: none !important;
}

/* Moving between pages cross-fades the content while the header stays put (browsers that support
   cross-page view transitions; the rest change pages as before). */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
}

.site-header {
    view-transition-name: site-header;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* Phones and tablets: pages swap at once. The cross-fade made the sticky header and the page jump
   on iPhone (Cam, 26 Oct 2026). */
@media (max-width: 1000px) {
    @view-transition {
        navigation: none;
    }
}

/* Grid pictures fade up as they come into view (site.js adds .reveal only when it can run). */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

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

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Short pages (404, search, a short policy) keep the footer at the foot of the window. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.site-content {
    position: relative;
    flex-grow: 1;
}

/* Header ----------------------------------------------------------------------------------- */

/* Above every picture, so the menu and its line stay whole while pages scroll under it. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2500;
}

.header-bar {
    position: relative;
    height: 41px;
    border-bottom: 1px solid #000;
    background: rgba(255, 255, 255, 0);
    transition: background-color 0.2s ease;
}

.scrolled .header-bar,
.page-template-work-template .header-bar {
    background: #fff;
}

.main-menu {
    float: left;
    padding-left: 26px;
}

.main-menu ul {
    display: flex;
}

.main-menu a {
    display: block;
    padding: 0 24px;
    font: 400 10px/40px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.main-menu a:hover,
.main-menu .current-menu-item > a {
    text-decoration: underline;
}

.logo {
    position: absolute;
    top: 2px;
    right: 38px;
    width: 230px;
    height: 40px;
    background: url("assets/theme/img/logo.97637a64.svg") no-repeat top left / contain;
}

.home .logo {
    opacity: 0;
}

@media (max-width: 1000px) {
    /* Phones: the name and menu stay at the top while the page scrolls. */
    .site-header {
        position: sticky;
    }

    .site-header .header-bar {
        background: #fff;
    }

    /* Phones: the name, then the menu as one row under it; no menu button. */
    .header-bar {
        height: auto;
        padding-top: 52px;
    }

    .logo,
    .home .logo {
        top: 10px;
        right: auto;
        left: 50%;
        height: 34px;
        margin-left: -115px;
        /* The name is 200px wide here and logo.svg has more space on its right than its left,
           so this puts the letters, not the box, on the centre line. */
        background-position: 16px 0;
        opacity: 1;
    }

    .main-menu {
        float: none;
        padding: 0 15px;
        background: #fff;
    }

    .main-menu ul {
        justify-content: space-between;
    }

    .main-menu a {
        padding: 0;
        font-size: 10px;
        line-height: 34px;
    }
}

/* Footer ----------------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    z-index: 100;
    display: flex;
    padding: 20px 45px;
    border-top: 1px solid #000;
    background: #fff;
    font: 300 9px/9px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Two columns, flush left and flush right (Cam, 2026-10-22: "clean right and left alignment"). */
.footer-col-1 {
    max-width: 380px;
}

.footer-col-2 {
    margin-left: auto;
    text-align: right;
}

.footer-col p {
    font-family: inherit;
}

/* The copyright notice is justified: straight edges on both sides. */
.footer-text {
    text-align: justify;
    text-align-last: left;
}

.footer-col .copyright,
.footer-col .footer-email {
    margin-bottom: 12.5px;
}

.footer-col-2 p:not(.footer-email) {
    margin-bottom: 5px;
}

@media (max-width: 1000px) {
    .site-footer {
        display: block;
        padding: 15px;
    }

    .footer-col-1 {
        margin-bottom: 25px;
    }

    /* Phones: two links on each side (email and Instagram, cookie settings and privacy), on the
       same two lines; the "Email" label goes. */
    .footer-col-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        text-align: left;
    }

    .footer-col-2 p {
        margin: 0 !important;
    }

    .footer-label {
        display: none;
    }

    .footer-col-2 p:nth-of-type(2) {
        grid-area: 2 / 1;
    }

    .footer-col-2 p:nth-of-type(3) {
        grid-area: 1 / 2;
        text-align: right;
    }

    .footer-col-2 p:nth-of-type(4) {
        grid-area: 2 / 2;
        text-align: right;
    }
}

.back-to-top {
    position: fixed;
    right: 33px;
    bottom: calc(40px + var(--sg-consent-h, 0px));
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 11px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.show-top-link .back-to-top {
    opacity: 1;
    visibility: visible;
}

/* Over the footer it steps aside, so it never covers the footer's links. */
.show-top-link.at-footer .back-to-top {
    opacity: 0;
    visibility: hidden;
}


/* Page builder rows (project pages, About) -------------------------------------------------- */

.full-width {
    width: 100%;
    overflow-x: clip;
}

@media (min-width: 1001px) {
    .full-width,
    .page-column {
        padding-top: var(--top-pad, 0);
    }
}

.vc_row {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
}

.vc_row::after,
.full_section_inner::after {
    content: "";
    display: table;
    clear: both;
}

.full_section_inner {
    position: relative;
    z-index: 20;
}

.vc_column_container {
    float: left;
    width: 100%;
    min-height: 1px;
}

.vc_column-inner {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.vc_column-inner::after {
    content: "";
    display: table;
    clear: both;
}

@media (min-width: 768px) {
    .vc_col-sm-1 { width: 8.33333333%; }
    .vc_col-sm-2 { width: 16.66666667%; }
    .vc_col-sm-3 { width: 25%; }
    .vc_col-sm-4 { width: 33.33333333%; }
    .vc_col-sm-5 { width: 41.66666667%; }
    .vc_col-sm-6 { width: 50%; }
    .vc_col-sm-7 { width: 58.33333333%; }
    .vc_col-sm-8 { width: 66.66666667%; }
    .vc_col-sm-9 { width: 75%; }
    .vc_col-sm-10 { width: 83.33333333%; }
    .vc_col-sm-11 { width: 91.66666667%; }
    .vc_col-sm-12 { width: 100%; }
}

.vc_col-xs-6 {
    float: left;
    width: 50%;
}

@media (max-width: 767px) {
    .vc_hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .vc_hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .vc_hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
    .vc_hidden-lg { display: none !important; }
}

.wpb_single_image.vc_align_left {
    text-align: left;
}

.wpb_single_image.vc_align_center {
    text-align: center;
}

.wpb_single_image.vc_align_right {
    text-align: right;
}

.vc_single_image-wrapper {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

.vc_single_image-img {
    vertical-align: top;
}

/* No project picture is taller than the window (below the header): tall ones keep their shape
   and narrow instead. */
.full-width .vc_single_image-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
}

.wpb_text_column a {
    color: #000;
}

.wpb_text_column img {
    max-width: 100%;
}

.wpb_text_column img.aligncenter {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .vc_row.wpb_row {
        padding: 0 !important;
    }

    body:not(.page-about) .vc_row.wpb_row:last-of-type {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .vc_row.wpb_row .vc_column_container {
        padding-bottom: 20px !important;
    }

    .vc_row.wpb_row .vc_column_container > .vc_column-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .full-width .vc_column_container > .vc_column-inner {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    .wpb_single_image.wpb_content_element {
        padding: 0 !important;
    }
}

@media (max-width: 600px) {
    /* Full width before the picture arrives, so its space is held from the start and nothing below
       moves when it loads (Cam, 26 Oct 2026). */
    .vc_single_image-wrapper {
        display: block;
    }

    .wpb_single_image img,
    .full-width .vc_single_image-img {
        width: 100%;
        height: auto;
    }

    .full-width .vc_single_image-img {
        max-height: none;
    }
}

/* Project pages: the title, the credits as labelled columns, space, then the pictures; the
   next project after them. ---------------------------------------------------------------- */

.page-title,
.entry-head {
    position: relative;
}

.page-title {
    margin: 112px 50px 0;
    text-align: center;
}

/* Previous and next at the two ends of the title's line: grey arrows, black with the name opening
   on hover. */
.project-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.project-nav a {
    display: flex;
    gap: 8px;
    max-width: 22%;
    color: #999;
    font: 400 10px/1.3 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    pointer-events: auto;
}

.project-nav a[rel="next"] {
    text-align: right;
}

.project-nav a:hover {
    color: #000;
}

.project-nav .nav-name {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.35s ease, opacity 0.25s ease;
}

.project-nav a:hover .nav-name,
.project-nav a:focus-visible .nav-name {
    max-width: 260px;
    opacity: 1;
}

.page-title h1 {
    font-size: 72px;
    line-height: 1;
    text-transform: none;
    text-wrap: balance;
}

.page-child .full-width {
    padding-top: 34px;
}

.project-credits {
    padding: 0 50px 56px;
}

.project-credits dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 56px;
    margin: 0;
}

.project-credits dt {
    margin-bottom: 8px;
    font: 400 10px/1.2 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.project-credits dd {
    max-width: 280px;
    margin: 0;
    font: 300 16px/1.4 "ScotchModern", serif;
}

.next-project {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
    margin: 100px 50px 70px;
    padding-top: 28px;
    border-top: 1px solid #000;
}

.next-project small {
    display: flex;
    gap: 28px;
    margin-bottom: 16px;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.next-project .next-label {
    color: #000;
    text-decoration: none;
}

/* The next project's label and name underline on hover, so they read as links. */
.next-project .next-label:hover,
.next-name:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.next-project small a {
    white-space: nowrap;
}

.next-project .all-work {
    color: #000;
    text-underline-offset: 3px;
}

.next-name {
    font: 300 96px/0.9 "LeJeune", serif;
    color: #000;
    text-decoration: none;
}

.next-picture img {
    display: block;
    width: 220px;
    height: 280px;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.next-picture:hover img {
    opacity: 0.85;
}

.back-to-work {
    padding-top: 80px;
}

@media (max-width: 1000px) {
    .page-title {
        margin: 30px 15px 0;
    }

    .project-nav {
        display: none;
    }

    .page-title h1 {
        font-size: 40px;
    }

    .page-child .full-width {
        padding-top: 22px;
    }

    .project-credits {
        padding: 0 15px 34px;
    }

    .project-credits dl {
        gap: 14px 28px;
    }

    .project-credits dd {
        font-size: 15px;
    }

    .next-project {
        gap: 18px;
        margin: 0 15px 40px;
        padding-top: 20px;
    }

    .next-project {
        margin-top: 60px;
    }

    .next-project small {
        gap: 18px;
    }

    .next-name {
        font-size: 44px;
    }

    .next-picture img {
        width: 110px;
        height: 140px;
    }
}

/* Phones: credits two by two, centred, so none sits alone on a second row; an odd count goes one
   per line (Cam, 25 Oct 2026). Without :has() the last odd one spans the row instead. */
@media (max-width: 767px) {
    .project-credits dl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 28px;
        max-width: 360px;
        margin: 0 auto;
        text-align: center;
    }

    .project-credits dl > div:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .project-credits dl:has(> div:last-child:nth-child(odd)) {
        grid-template-columns: 1fr;
    }

    .project-credits dd {
        max-width: none;
        text-wrap: balance;
    }
}

/* About: selected clients in short columns under the text. */
/* Four lists of eight, one name to a line, so the columns end level (Cam, 24 Oct 2026); two by two
   when the text column is too narrow for four, one column on phones. */
.about-text {
    container-type: inline-size;
}

.about-clients {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 20px 16px;
    padding-top: 40px;
}

.about-clients h5,
.about-clients p {
    white-space: nowrap;
}

@container (max-width: 559px) {
    .about-clients {
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        column-gap: 48px;
    }
}

.about-clients h5 {
    margin: 0 0 8px;
    font: 400 10px/1.2 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.about-clients p {
    margin: 0;
    font: 300 15px/1.45 "ScotchModern", serif;
}

/* Phones: the four groups two by two, names a size up, so the whole list fits on one screen and the
   rows end level (Cam, 25 Oct 2026). The size follows the width so the longest name fits its column. */
@media (max-width: 600px) {
    .about-clients {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 24px;
    }

    .about-clients p {
        font-size: min(19px, 4.4vw);
    }
}

/* About and Contact: the pair sits in the middle of the window under the header, both ways. Its
   height is the picture's, the same on both pages, so the picture stays put between them. ------ */

.page-about .site-content,
.page-contact .site-content {
    min-height: 100vh;
    min-height: calc(100dvh - var(--sg-consent-h, 0px));
}

@media (min-width: 1001px) {
    .page-about .site-content,
    .page-contact .site-content {
        display: flex;
        align-items: center;
        padding-top: 41px;
    }

    .page-about .site-content > .full-width {
        width: 100%;
    }
}

/* Home: the name with the clients under it at the foot of the left half, the slideshow on the
   right. On phones the picture comes first, then the name and clients. ---------------------- */

.home-container {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height: 100vh;
    /* Ends at the cookie banner's top while it shows, full height once it's gone. */
    height: calc(100dvh - var(--sg-consent-h, 0px));
}

.home-container .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 34px;
    margin-top: 40px;
    padding: 72px 36px 44px 50px;
}

.home-container .info h1 {
    font-size: 9vw;
    line-height: 0.85;
}

.home-container .clients p {
    display: none;
}

.home-container .clients h4 {
    margin: 0 0 12px;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* The client line in small capitals; each name links to its project, underlined on hover only. */
.home-container .clients h3 {
    max-width: 78%;
    text-wrap: balance; /* Lines of even length (Cam, 24 Oct 2026). */
    font: 400 10px/1.8 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.home-container .clients a {
    color: #000;
    text-decoration: none;
    text-underline-offset: 3px;
}

.home-container .clients a:hover {
    text-decoration: underline;
}

.home-work-link {
    margin-top: -16px;
    color: #000;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-underline-offset: 3px;
}

.home-slider {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

.home-slider .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home-slider .slide.is-active {
    opacity: 1;
    z-index: 1;
}

.home-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Text only, set over the picture on the same line as "View the work" (both 44px up): black on
   a light picture, white on a dark one (home.js reads the picture); white until it knows. No box
   behind it (Cam, 24 Oct 2026). */
.slide-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 44px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    pointer-events: none;
    transition: color 0.3s ease;
}

.home-slider:not([data-tone]) .slide-caption {
    color: #fff;
}

.home-slider[data-tone="light"] {
    --tone: #000;
}

.home-slider[data-tone="dark"] {
    --tone: #fff;
}

.home-slider[data-tone] .slide-caption {
    color: var(--tone);
}

.slide-dots {
    display: none;
}

/* A thin line along the bottom runs out the 3 seconds to the next picture. */
.slide-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    width: 0;
    height: 2px;
    background: var(--tone, #fff);
}

.slide-timer.run {
    animation: ck-slide-timer 3s linear forwards;
}

@keyframes ck-slide-timer {
    to {
        width: 100%;
    }
}

.slide-caption span:empty {
    visibility: hidden;
}

@media (max-width: 1000px) {
    .home-container {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .home-slider {
        order: -1;
        aspect-ratio: 3 / 4;
    }

    .home-container .info {
        gap: 18px;
        margin: 0;
        padding: 30px 15px 36px;
    }

    .home-container .info h1 {
        font-size: 56px;
        line-height: 0.9;
    }

    .home-container .clients h4 {
        margin-bottom: 10px;
    }

    .home-container .clients h3 {
        max-width: none;
    }

    /* Phones: the name on one line, dots in place of the count. */
    .slide-caption {
        left: 15px;
        right: 15px;
        bottom: 16px;
        align-items: center;
    }

    .slide-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .slide-count {
        display: none;
    }

    .slide-dots {
        display: flex;
        flex: none;
        gap: 6px;
    }

    .slide-dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.3;
    }

    .slide-dots i.on {
        opacity: 1;
    }

    .home-work-link {
        margin-top: -6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-slider .slide {
        transition: none;
    }

    .slide-timer {
        display: none;
    }
}

/* Work: a bar of filters and Pictures / List on the header's text line (50px in), then the grid
   of pictures (default) or the list of names. ---------------------------------------------- */

.work-container {
    margin: 0 50px;
    padding-top: 78px;
}

.work-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 48px;
    margin-bottom: 28px;
}

.work-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 48px;
}

.work-bar button {
    padding: 0;
    border: 0;
    background: none;
    color: #999;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.work-bar button:hover,
.work-bar button[aria-pressed="true"] {
    color: #000;
}

.work-bar button[aria-pressed="true"] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Search: the word "Search" in the bar opens one thin underlined field (Cam, 24 Oct 2026). */
.work-search {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-left: auto;
}

.work-search input {
    width: 200px;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: none;
    color: #000;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-appearance: none;
    appearance: none;
}

.work-search input:focus {
    outline: none;
}

.work-search input::placeholder {
    color: #999;
}

.work-search input::-webkit-search-cancel-button {
    display: none;
}

.work-none {
    margin: 0 0 90px;
    color: #999;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.work-count {
    margin-left: 6px;
    color: #999;
}

.work-bar button:focus-visible {
    outline: none;
    color: #000;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 28px;
    margin: 0 0 90px;
    padding: 0;
    list-style: none;
}

/* A lone project on the grid's last row is hidden (work.js). */
.work-tile.is-orphan {
    display: none;
}

.work-tile a,
.work-tile > div {
    display: block;
    color: #000;
    text-decoration: none;
}

/* The project's second picture fades in over the first on hover, where there's a mouse. */
.work-picture {
    position: relative;
    display: block;
    margin-bottom: 10px;
}

.work-picture img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.work-picture .work-film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.work-picture .work-film.is-playing {
    opacity: 1;
}

.work-picture .work-second {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
}

@media (hover: hover) {
    .work-tile a:hover .work-second {
        opacity: 1;
    }
}

.work-name,
.work-kind,
.work-note {
    display: block;
    font: 400 10px/1.3 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.work-kind,
.work-tile .work-note {
    margin-top: 3px;
    color: #999;
}

/* A portrait reads "Portrait" like every other kind, and its sitter's role only under the Portrait filter. */
.work-kind .kind-role,
[data-showing="Portrait"] .work-kind .kind-all {
    display: none;
}

[data-showing="Portrait"] .work-kind .kind-role {
    display: inline;
}

@media (max-width: 1000px) {
    .work-container {
        margin: 0 15px;
        padding-top: 20px;
    }

    /* Phones: the filters on one line that scrolls sideways, fading at the edge. */
    .work-bar {
        flex-wrap: nowrap;
        gap: 24px;
        margin: 0 -15px 20px 0;
        padding-right: 30px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }

    .work-bar::-webkit-scrollbar {
        display: none;
    }

    .work-filter {
        flex-wrap: nowrap;
        gap: 22px;
    }

    .work-bar button {
        white-space: nowrap;
    }

    .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
        margin-bottom: 50px;
    }
}

/* Journal ---------------------------------------------------------------------------------- */

.journal-container {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding-top: 100px;
}

.journal-heading {
    padding-bottom: 45px;
    text-align: center;
}

.journal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 20px;
}

.journal-item {
    flex: 0 0 24%;
    width: 24%;
    margin-bottom: 30px;
}

.journal-image {
    display: block;
}

.journal-image img {
    display: block;
    width: 100%;
}

.journal-item h3 {
    margin-top: 10px;
    font: 400 10px/1.3 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.journal-item h3 a {
    text-decoration: none;
}

.journal-more {
    padding: 10px 0 20px;
    text-align: center;
    font: 400 10px/24px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .journal-container {
        padding-top: 25px;
    }

    .journal-item {
        flex-basis: 32%;
        width: 32%;
    }
}

@media (max-width: 900px) {
    .journal-container {
        width: 700px;
    }
}

@media (max-width: 768px) {
    .journal-heading {
        padding: 1px 0 26px;
    }

    .journal-grid {
        margin: 0;
    }
}

@media (max-width: 720px) {
    .journal-container {
        width: 480px;
    }

    .journal-item {
        flex-basis: 49%;
        width: 49%;
    }
}

@media (max-width: 600px) {
    .journal-container {
        width: auto;
        margin: 0 20px;
    }

    .journal-item {
        flex-basis: 100%;
        width: 100%;
    }
}

/* Centred column: journal entries and plain pages ------------------------------------------ */

.page-column {
    width: 1100px;
    margin: 0 auto;
}

.journal-entry {
    padding: 80px 0 23px;
}

.post-image img {
    display: block;
    width: 100%;
}

.post-content {
    padding-top: 21px;
}

/* Entry title and credits, set like a project page's. */
.post-content .entry-title {
    margin: 30px 0 22px;
    font: 300 72px/1 "LeJeune", serif;
    color: #000;
    text-align: center;
    text-wrap: balance;
}

.entry-credits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 56px;
    margin: 0 0 40px;
}

.entry-credits dt {
    margin-bottom: 8px;
    font: 400 10px/1.2 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.entry-credits dd {
    margin: 0;
    font: 300 16px/1.4 "ScotchModern", serif;
}

.next-project.is-entry {
    margin: 50px 0;
}

.post-content p {
    margin-bottom: 15px;
}

.post-content .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 25px 0 15px;
}

.post-content .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 4;
}

.post-content .wp-caption {
    display: inline-block;
    width: 100% !important;
    max-width: 100%;
}

.post-content .wp-caption-text,
.post-content figcaption {
    display: none;
}

.post-content .wp-block-gallery.has-nested-images {
    gap: 25px !important;
    margin-bottom: 14px;
}

/* Block galleries show two to a row as well. */
.post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: calc(50% - 12.5px) !important;
    flex-grow: 0 !important;
}

@media (max-width: 1200px) {
    .page-column {
        width: 950px;
    }
}

@media (max-width: 1000px) {
    .page-column {
        width: 768px;
    }

    .journal-entry {
        padding-top: 30px;
    }
}

@media (max-width: 768px) {
    .page-column {
        width: 600px;
    }

    .post-content img {
        width: 100%;
        margin-bottom: 20px;
    }

    .post-content .wp-block-gallery.has-nested-images figure.wp-block-image,
    .post-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
        width: 100% !important;
    }

    .post-content .gallery {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .post-content .gallery img {
        height: auto;
        aspect-ratio: auto;
    }
}

@media (max-width: 600px) {
    .page-column {
        width: auto;
        margin: 0 20px;
    }
}

@media (max-width: 578px) {
    .post-content {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .post-content .entry-title {
        margin: 20px 0 16px;
        font-size: 40px;
    }

    .entry-credits {
        gap: 12px 28px;
        margin-bottom: 26px;
    }

    .next-project.is-entry {
        margin: 36px 0;
    }
}

@media (max-width: 480px) {
    .post-content {
        padding-top: 1px;
    }
}

/* Contact: a picture beside the details (the page's featured image), or the details alone. -- */

.contact-container {
    padding: 150px 20px;
    text-align: center;
}

/* About and Contact share one layout: the picture (a slow slideshow) on the left, the text on the
   right, the same sizes on both, so clicking between them nothing moves. On opening, the picture
   and then each line of text fade up in turn. */
/* Mirrored about the page's centre line: the picture ends at the gap's left edge, the text starts at
   its right edge, and the text column is as wide as the picture. The picture is as large as the
   window allows (4:5, at most 560px wide). */
.pair-layout {
    --pair-w: min(560px, calc((100dvh - 41px - 120px) * 0.8));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 80px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 50px;
    text-align: left;
}

.pair-picture {
    position: relative;
    justify-self: end;
    width: min(100%, var(--pair-w));
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.pair-text {
    justify-self: start;
    width: min(100%, var(--pair-w));
}

.pair-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.pair-slide.is-active {
    opacity: 1;
}

/* The still's credit sits under it in small grey capitals, as the Work tiles are labelled, so the
   picture stays clean (Cam, 24 Oct 2026). */
.pair-picture:has(.pair-caption) {
    overflow: visible;
}

.pair-caption {
    position: absolute;
    left: 0;
    top: calc(100% + 12px);
    color: #999;
    font: 400 9px/1 "SweetSans", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pair-text h4 + h4 {
    margin-top: 18px;
}

/* About and Contact settle in with one soft fade after the page cross-fade: picture and text
   together, no stagger or slide, so the page arrives once rather than in steps. */
@keyframes ck-arrive {
    from {
        opacity: 0;
    }
}

.pair-picture,
.pair-text {
    animation: ck-arrive 0.45s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .pair-picture,
    .pair-text {
        animation: none;
    }

    .pair-slide {
        transition: none;
    }
}

.page-about .full-width {
    padding-top: 0;
}

.contact-item + .contact-item {
    margin-top: 30px;
}

.contact-item dt {
    font: 400 10px/11px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-item dd {
    margin-top: 4px;
    font: 300 14px/23px "ScotchModern", serif;
}

/* The labels say what each line is, so the links underline only on hover (Cam, 23 Oct 2026). */
.contact-item dd a {
    color: inherit;
    text-decoration: none;
}

.contact-item dd a:hover,
.contact-item dd a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .contact-container {
        padding: 80px 20px;
    }

    .pair-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 24px 15px 60px;
    }

    .pair-picture,
    .pair-text {
        justify-self: stretch;
        width: auto;
    }
}

/* Privacy policy: section titles in a left rail, text on the right, hairlines between ------- */

.privacy-policy {
    padding: 100px 0 100px;
}

.privacy-head {
    padding-bottom: 50px;
}

.privacy-head h1 {
    font-size: 48px;
    line-height: 1;
    text-transform: capitalize;
}

.privacy-updated {
    margin-top: 20px;
    font: 400 10px/11px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.privacy-section {
    display: grid;
    grid-template-columns: 33.333% 66.667%;
    padding: 30px 0;
    border-top: 1px solid #000;
}

.privacy-section:last-child {
    border-bottom: 1px solid #000;
}

.privacy-section h2 {
    padding-right: 30px;
    font: 400 10px/23px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
}

.privacy-text p {
    font: 300 14px/23px "ScotchModern", serif;
}

.privacy-text p + p {
    margin-top: 12px;
}

@media (max-width: 768px) {
    .privacy-policy {
        padding: 50px 0;
    }

    .privacy-head {
        padding-bottom: 30px;
    }

    .privacy-section {
        display: block;
        padding: 20px 0;
    }

    .privacy-section h2 {
        margin-bottom: 10px;
        padding: 0;
    }
}

/* Search results and other plain lists ----------------------------------------------------- */

.archive-list {
    padding: 100px 0 50px;
}

@media (max-width: 1000px) {
    .archive-list {
        padding: 30px 0;
    }
}

/* Not found: the project title's size and the menu's labels, centred in the window -------- */

.error404 .site-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.not-found {
    padding: 110px 50px 90px;
    text-align: center;
}

.not-found h1 {
    font-size: 120px;
    line-height: 100px;
}

.not-found p {
    margin-top: 30px;
    font: 300 14px/23px "ScotchModern", serif;
}

.not-found-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 48px;
    margin-top: 40px;
}

.not-found-links a {
    font: 400 10px/11px "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.not-found-work {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 56px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.not-found-work a {
    display: block;
    color: #000;
    text-decoration: none;
}

.not-found-work img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: 8px;
}

.not-found-work span {
    font: 400 10px/1.3 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .not-found {
        padding: 40px 15px 60px;
    }

    .not-found-work {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
        margin-top: 36px;
    }

    .not-found h1 {
        font-size: 48px;
        line-height: 1;
    }
}

/* Cookie banner: text and buttons on the footer's margins (45px, 15px on phones). */
:root {
    --sg-consent-gutter: 45px;
}

@media (max-width: 1000px) {
    :root {
        --sg-consent-gutter: 15px;
    }
}

/* Production (inc/production.php): the Work grid without filters; films before a project's pictures. */
.work-container.production {
    padding-top: 78px;
}

.production-film {
    width: calc(100% - 20%);
    margin: 0 auto 6%;
    text-align: center;
}

/* The frame takes the film's own width, so the controls under it line up with its edges. */
.film-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    text-align: left;
}

.film-frame video {
    cursor: pointer;
}

.film-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 14px;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.film-bar[hidden] {
    display: none;
}

.film-bar button {
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    text-underline-offset: 3px;
}

.film-bar button:hover,
.film-bar button:focus-visible {
    outline: none;
    text-decoration: underline;
}

.film-play {
    min-width: 3.6em;
    text-align: left;
}

.film-sound {
    min-width: 6.4em;
    text-align: left;
}

/* A hairline that fills as the film runs; click or arrow keys to move through it. */
.film-line {
    position: relative;
    flex: 1;
    height: 13px;
    cursor: pointer;
}

.film-line::before,
.film-line span {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    height: 1px;
}

.film-line::before {
    right: 0;
    background: #d6d6d6;
}

.film-line span {
    width: 0;
    background: #000;
}

.film-line:focus-visible {
    outline: none;
}

.film-line:focus-visible::before {
    background: #999;
}

.production-film video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /* A vertical film fits the window under the header instead of running a screen and a half (Cam, 24 Oct 2026). */
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
    margin: 0 auto;
    background: #000;
}

@media (max-width: 1000px) {
    .work-container.production {
        padding-top: 20px;
    }

    .production-film {
        width: 100%;
    }
}

/* Personal: The Grand Tour ------------------------------------------------------------------------ */

/* One picture to a screen under the fixed header; the title and the first picture share the first. */
.personal {
    padding: 41px 50px 0;
}

.personal-lead {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 41px);
    height: calc(100svh - 41px);
}

.personal-open {
    padding: 48px 0 28px;
    text-align: center;
}

.personal-kicker {
    margin: 0 0 18px;
    font: 400 10px/1.2 "SweetSans", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
}

.personal-title {
    margin: 0 0 18px;
    font: 300 72px/1 "LeJeune", serif;
    color: #000;
}

.personal-intro p {
    max-width: 34em;
    margin: 0 auto;
    font: 17px/1.5 "ScotchModern", serif;
    color: #222;    text-wrap: balance;
}

.personal-shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: calc(100vh - 41px);
    height: calc(100svh - 41px);
    margin: 0;
    padding: 28px 0;
}

.personal-lead .personal-shot {
    flex: 1;
    min-height: 0;
    height: auto;
    padding-top: 0;
}

.personal-shot img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100% - 92px);
    object-fit: contain;
}

/* The place in small capitals, a line about it in the serif, then the coordinates. */
.personal-cap {
    margin: 0;
    text-align: center;
}

.personal-cap span {
    display: block;
}

.personal-place,
.personal-cap a {
    font: 400 10px/1.7 "SweetSans", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000;
}

.personal-line {
    margin-top: 4px;
    font: 15px/1.4 "ScotchModern", serif;
    color: #555;
}

.personal-at {
    margin-top: 6px;
    font: 400 9px/1.5 "SweetSans", sans-serif;
    letter-spacing: 2px;
    color: #999;
    white-space: pre;
}

.personal-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    height: calc(100vh - 41px);
    height: calc(100svh - 41px);
}

.personal-end img {
    display: block;
    width: auto;
    height: 58vh;
}

/* Index: like Top, at the left; it opens every picture as a contact sheet over the page. */
.personal-index-open {
    position: fixed;
    left: 33px;
    bottom: calc(40px + var(--sg-consent-h, 0px));
    z-index: 3000;
    padding: 9px 11px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* On Personal, Index and Top have no border and sit on a frosted, half-clear ground, so they read like the
   menu beside the pictures and over any picture they pass (Cam, 25 Oct 2026: phones first, then all widths). */
.page-template-page-personal-php .back-to-top,
.personal-index-open {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.at-footer .personal-index-open {
    opacity: 0;
    visibility: hidden;
}

.personal-index-open:focus,
.personal-index-close:focus,
.personal-index-grid a:focus {
    outline: none;
}

.personal-index {
    position: fixed;
    inset: 0;
    z-index: 4000;
    overflow-y: auto;
    padding: 0 50px 60px;
    background: #fff;
}

.personal-index[hidden] {
    display: none;
}

.personal-index-head {
    position: sticky;
    top: 0;
    z-index: 2; /* above the thumbnails, which Safari lifts into their own layer as they fade */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 41px;
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
    background: #fff;
}

.personal-index-head p {
    margin: 0;
}

.personal-index-close {
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font: 400 10px/1 "SweetSans", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.personal-index-close:hover {
    text-decoration: underline;
}

.personal-index-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 30px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.personal-index-grid a {
    display: grid;
    gap: 10px;
    color: #000;
    text-align: center;
    text-decoration: none;
}

.personal-index-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.personal-index-grid a:hover img {
    opacity: 0.8;
}

.personal-index-grid .personal-place {
    font-size: 9px;
    line-height: 1.5;
}

html:has(.personal-index:not([hidden])) {
    overflow: hidden;
}

/* Tablets and phones: the header scrolls with the page, so pictures take their own height. */
@media (max-width: 1000px) {
    .personal {
        padding: 0 30px;
    }

    .personal-lead,
    .personal-shot,
    .personal-end {
        display: flex;
        height: auto;
    }

    .personal-shot {
        padding: 26px 0 40px;
    }

    .personal-shot img {
        width: 100%;
        max-height: none;
    }

    .personal-end {
        padding: 30px 0 60px;
    }

    .personal-end img {
        width: 72%;
        height: auto;
    }
}

@media (max-width: 767px) {
    .personal {
        padding: 0 15px;
    }

    .personal-open {
        padding: 40px 0 28px;
    }

    .personal-title {
        font-size: 44px;
    }

    .personal-intro p {
        font-size: 15px;
    }

    /* Phones: Index and Top sit smaller (Cam, 25 Oct 2026). */
    .page-template-page-personal-php .back-to-top,
    .personal-index-open {
        padding: 7px 9px;
        font-size: 9px;
    }

    /* Phones: Index mirrors Top (same inset, same moment), so the first screen stays clear. */
    .personal-index-open {
        opacity: 0;
        visibility: hidden;
    }

    .show-top-link .personal-index-open {
        opacity: 1;
        visibility: visible;
    }

    .show-top-link.at-footer .personal-index-open {
        opacity: 0;
        visibility: hidden;
    }

    .personal-index {
        padding: 0 15px 40px;
    }

    .personal-index-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 12px;
    }

    /* Six words don't fit across a phone: Personal takes Instagram's place, which stays in the footer. */
    .main-menu ul:has(.menu-item-personal) .menu-item-instagram {
        display: none;
    }
}

/* ck-row-spacing */
.vc_custom_1540601341314{padding-bottom: 100px !important;}.vc_custom_1683620521339{padding-bottom: 100px !important;}
/* wp-block-styles-placeholder-inline-css */

:root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the block styles printed at wp_footer." }


/* wp-global-styles-placeholder-inline-css */

:root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the global-styles printed at wp_footer." }



/* find-in-page highlights */
::search-text{background:#e0e0e0;color:#000}::search-text:current{background:#b8b8b8;color:#000}