:root {
    --gap: clamp(1.5rem, 3vw, 3rem);
}

/* THEME

   The site runs on two grounds: the off-white every section uses, and the dark
   brown the prints are shown against so the artworks are read on one tone
   throughout. baseof puts .light or .dark on the body; nothing below names a
   colour of its own, so a page changes ground by changing that one class.

   Panels that keep a light surface whatever the page does — the sidebar — take
   the light set again for their own subtree. Tokens inherit, so re-declaring
   them on the panel is enough; no rule inside it needs to know. */
.light,
.sidebar {
    --bg: #F9FAF5;
    --text: rgba(37, 28, 29, 0.6);
    --text-strong: #251C1D;
    --text-subtle: rgba(37, 28, 29, 0.6);
    --rule: rgba(0, 0, 0, 0.2);
    --rulelight: rgba(0, 0, 0, 0.1);
    --button-bg: #181212;
    --button-text: white;
    /* The chevrons and arrows are drawn dark, so a light page leaves them be. */
    --icon-filter: none;
}
.dark {
    --bg: #4d3b2c;
    --text: rgba(249, 250, 245, 0.8);
    --text-strong: white;
    --text-subtle: rgba(249, 250, 245, 0.6);
    --rule: rgba(249, 250, 245, 0.2);
    /* The near-black button sinks into the brown, so the ground and the type
       swap over: on a dark page the call to action is the light one. */
    --button-bg: #F9FAF5;
    --button-text: #251C1D;
    --icon-filter: brightness(0) invert(1);
}

* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(11px, 2.5vw, 13px); line-height: 1.55; height: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem;}
body {
    background: var(--bg);
    color: var(--text);
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1.1rem;
}
h1, h2 {line-height: 1.2;}
h1 {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.015em;
    color: var(--text-strong);
}
h2, .h2 {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 3.75rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.015em;
    color: var(--text-strong);
}
p:not(:last-child) {margin-bottom: 1.6em;}
img {max-width: 100%; display: block;}
a:has(> img) {display: block;}
ul {list-style-type: disc;}
.sidebar-body > ul {margin-left: 1em; margin-bottom: 1.6em;}
a {
    color: var(--text);
    text-underline-offset: 0.2rem;
    text-decoration-color: rgba(37, 28, 29,0.3);
}

/* INDEX BUTTON */

.button {
    font-size: 1.1rem;
    border-radius: 0.5rem;
    background: var(--button-bg);
    color: var(--button-text);
    padding: 1rem 2rem;
    text-decoration: none;
    display: inline-block;
    font-weight: 400;
}
.button.rounded {
    border-radius: 2rem;
}
.button.small {
    padding: 0.75rem 1.75rem;
}
.button.ghost {
    background: none;
    border: 1px solid var(--rule);
    color: var(--text);
    font-weight: 350;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Hovered, the outline comes up towards the type it is drawn in — the print
   swatches answer the pointer the same way. The picked one is styled after this,
   so it keeps its own border rather than being pulled back down. */
.button.ghost:hover {
    border-color: color-mix(in srgb, currentColor 85%, transparent);
}
.button.ghost.active {
    color: var(--text-strong);
    border-color: var(--text-strong);
    font-weight: 400;
}

.index-button {
    display: flex;
    position: fixed;
    bottom: 2rem;
    width: fit-content;
    right: 0rem;
    margin-right: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.3); 
    font-weight: 350;
    color: white;
    backdrop-filter: blur(1rem);
    transform: translate(0, calc(100% + 2rem));
    transition: transform 0.4s ease;
    box-shadow: 0rem 0rem 0.25rem rgba(0, 0, 0, 0.1);
}
.index-button.visible {
    transform: translate(0, 0);
}
.index-button.visible.removed {
    transform: translate(0, calc(100% + 2rem));
}
.index-button ul {
    display: flex;
    list-style: none;
    margin-inline: 1.25rem 2rem;
    gap: 1.5rem;
}
.index-button a {
    padding: 1rem 0rem;
    display: block;
    text-decoration: none;
    color: var(--text);
    border-radius: 0.25rem;
}
.index-button > a {
    color: var(--button-text);
    background: var(--button-bg);
    margin: 0.35rem;
    padding: 0.65rem 1.25rem;
}
.index-button li.active a {
    color: var(--text-strong);
    font-weight: 500;
}
.index-button li.active a {position: relative;}
.index-button li.active a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-strong);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* MAIN */

/* The page is one column filling the window: the content, and the footer at the
   end of it. main is what grows, so a page with less in it than the window is
   tall no longer leaves the footer stranded halfway up with nothing under it —
   the end of the page and the bottom of the screen are the same line. It only
   grows: a page with more in it than that is left to run on and scroll. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
main {width: 100%; flex: 1 0 auto;}
.main-content section {margin: 11rem 0;}
.main-content section:first-child {margin-top: 13rem;}
.main-content section .container {width: 100%; max-width: 55rem; margin-inline: auto; padding-inline: 1.5rem;}
@media (max-width: 60rem) {
    .main-content {padding-top: 3rem;}
    .main-content section {margin: 7rem 0;}
    .main-content section:first-child {margin-top: 9rem;}
    html {scroll-padding-top: 5rem;}
}

/* DETAILS */

.main-content section.section-details .container {display: flex; gap: 3rem var(--gap);}
.main-content section.section-details .container > .details {flex: 1;}
.main-content section.section-details .container > .details + div {flex: 1;}
.main-content section.section-details dd {color: var(--text-strong); margin-block: 0 1.6rem; font-weight: 400;}
@media (min-width: 70rem) {
    .main-content section.section-details .container > .details {
        margin-right: -3rem;
    }
    .main-content section.section-details .container > .details + div {
        margin-right: -3rem;
    }
}
@media (max-width: 40rem) {
    .main-content section.section-details .container {
        flex-direction: column;
    }
}



/* IMAGE */

.main-content section.section-image {padding: 0;}
.main-content section.section-image img {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: cover;
}


/* IMAGES */

.main-content section.section-images .container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    max-width: 84rem;
}
.main-content section.section-images .container p:has(img.portrait) {
    width: calc(50% - (var(--gap) / 2));
}
.main-content section.section-images p {flex-grow: 1;}
.main-content section.section-images img {width: 100%;}
@media (max-width: 40rem) {
    .main-content section.section-images .container {
        flex-direction: column;
        gap: 3vw;
    }
    .main-content section.section-images .container p:has(img.portrait) {
        width: 100%;
    }
}


/* TILES

   Every overview is drawn as the same tile: one image with the whole of it a
   link, and a gradient over the lower half so the text on it can be read —
   clear down to 40%, black at 80% by the bottom edge. What a section changes is
   the crop, how many tiles go in a row and what the overlay carries, so those
   stay with the sections below. */
.main-content section.section-tiles .container {max-width: 84rem;}
/* The expedition grid takes the width the print carousel takes: the page itself,
   held off the edges by the same 1.5rem the container already gives it and
   nothing more, so the row of tiles reaches as far as the row of prints does.
   Its own section holds nothing but the filters and the grid, so there is no
   running text here to be pulled out to that width with them. */
.main-content section.section-masterclasses .container {max-width: none;}
.main-content .image-tiles {
    display: grid;
    gap: 0.6rem;
    list-style: none;
}
.main-content .image-tiles li {
    position: relative;
    overflow: hidden;
}
.main-content .image-tiles a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: white;
    font-weight: 400;
}
.main-content .image-tiles a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
}
.main-content .image-tiles img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
/* The picture comes forward under the pointer. The tile clips it, so the
   frame stays put and only the photograph moves. */
.main-content .image-tiles li:hover img {
    transform: scale(1.1);
}
.main-content .image-tiles .tile-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
}
.main-content .image-tiles .title {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

/* The commissioned and personal work overviews: landscape, two to a row, with
   the title the whole of the overlay. */
.main-content section.section-tiles ul.tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}
/* Two to a row is right for a handful of pieces; past four the page runs long,
   so the grid asks the fifth tile whether it exists and goes to three. */
.main-content section.section-tiles ul.tiles:has(> li:nth-child(5)) {
    grid-template-columns: repeat(3, 1fr);
}
.main-content section.section-tiles .tiles img {
    aspect-ratio: 3 / 2;
}
/* One line of text is all the overlay holds, so it is given the whole tile to
   sit in the middle of rather than the strip along the bottom. The gradient the
   expedition tiles use would darken the picture at its centre, so this one takes
   an even wash instead — enough to seat the title, with its own shadow doing the
   rest. */
.main-content section.section-tiles .tiles a::after {
    background: rgba(0, 0, 0, 0.3);
}
.main-content section.section-tiles .tile-content {
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    text-shadow: 0 0.1rem 0.75rem rgba(0, 0, 0, 0.5);
}
/* The photographs are left to themselves until the pointer asks which one it is
   on: the wash comes up with the title it is there to carry. Where there is no
   pointer to ask with, both simply stay put. */
@media (hover: hover) {
    .main-content section.section-tiles .tiles a::after,
    .main-content section.section-tiles .tile-content {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .main-content section.section-tiles .tiles li:hover a::after,
    .main-content section.section-tiles .tiles li:hover .tile-content {
        opacity: 1;
    }
}
@media (max-width: 60rem) {
    .main-content section.section-tiles ul.tiles:has(> li:nth-child(5)) {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 40rem) {
    .main-content section.section-tiles ul.tiles,
    .main-content section.section-tiles ul.tiles:has(> li:nth-child(5)) {
        grid-template-columns: 1fr;
        gap: 3vw;
    }
}
/* An overview is one screen's worth: the photographs, and the footer under them
   with nothing to scroll for. Nothing here is measured against the window —
   the grid keeps its crop, the footer keeps its place, and what gives way is the
   air. main already holds whatever room the footer leaves, so the grid is centred
   in it: a tall window opens the air up around the photographs, a shorter one
   closes it to the margins below and no further. The footer takes the smaller of
   its two heights on a page that is only tiles, which is what buys the last of
   the room. Too little for even that and the page scrolls like any other — with
   the photographs whole, which is the point of not measuring them.

   The margin above is what the closing costs: on a short window it is all that
   is left between the top tile and the name in the header, so it is kept clear
   of it by a good margin rather than by the least that fits. */
@media (min-width: 60rem) {
    body:has(.main-content > section.section-tiles:only-child) {
        main {display: grid; align-content: center;}
        .main-content section.section-tiles {margin-block: 12rem 4rem;}
        footer a.logo {padding-block: 4rem;}
    }
}


/* EXPEDITIONS */

/* Portrait, as many to a row as fit, and the overlay carries the dates, the
   place and the state of the booking under the title. */
.main-content section.section-masterclasses {margin-top: -4rem;}
/* The filters sit centred above the grid; they are buttons, so they have to be
   told to take the page's type. */
.main-content section.section-masterclasses .masterclass-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.main-content section.section-masterclasses .masterclass-filters .button {
    font-family: inherit;
    cursor: pointer;
}
/* The row is asked how many tiles of about the right width it can hold rather
   than being told a number, so a tile stays the size a tile is — near the 25rem
   the carousel gives a print — and it is the count that answers the window:
   seven across a wide monitor, five at 1920, four on a laptop, three on a small
   one, two on a tablet, one on a phone. The change falls where the tiles would
   otherwise be squeezed rather than at a width picked in advance, and because the
   tracks are 1fr the row is filled edge to edge whatever the count.

   What the row is given is the narrowest a tile may be; anything narrower and it
   drops a column instead. From a laptop up that is 24rem, which is where the
   count above comes from. Further down, holding to 24rem starts costing a whole
   column at a time — two tiles of 36rem around 1000px, where three of 24rem
   belong — so from about there the floor follows the window down at 26vw until it
   rests at 19rem, which is what keeps two tiles beside each other on a small
   tablet rather than one the height of the screen. min() takes it under even that
   on a phone, where the one tile in the row is as wide as the row. A tile is
   between 19 and 31rem wherever the window is, against the 26rem it was fixed at
   before.

   auto-fill and not auto-fit: the filters leave as few as two tiles standing, and
   a collapsing track would hand them the whole row between them — portrait tiles
   half again as tall as the screen. The empty tracks stay, so a filtered grid
   reads at the size the one it came from did. */
.main-content section.section-masterclasses ul.masterclass-tiles {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(19rem, 26vw, 24rem)), 1fr));
}
.main-content section.section-masterclasses .masterclass-tiles img {
    aspect-ratio: 3 / 4;
}
/* These tiles keep their gradient, so the wash the other overviews use is laid
   over it as a second layer of its own: the gradient seats the text at rest, the
   wash comes up on hover and holds it while the picture moves underneath.

   The z-index is the whole of it. A scaled image paints in the same layer as the
   positioned pseudo-elements, and it comes after this one in the markup, so
   without being lifted the wash would be hidden behind the very picture it is
   there to cover. The overlay is lifted the same way and is written later, so it
   still reads over both. */
.main-content section.section-masterclasses .masterclass-tiles a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.main-content section.section-masterclasses .masterclass-tiles li:hover a::before {
    opacity: 1;
}
/* The overlay lifts a little under the pointer, with the wash that comes up
   behind it — just enough movement to answer the hover. */
.main-content section.section-masterclasses .tile-content {
    transition: transform 0.3s ease;
}
.main-content section.section-masterclasses .masterclass-tiles li:hover .tile-content {
    transform: translateY(-1rem);
}
.main-content section.section-masterclasses .tile-content .title {
    margin-block: 0.75rem 1.25rem;
}
.main-content section.section-masterclasses .tile-content .location {
    margin-block: 1rem;
}
/* The pin rides along with the place name rather than being laid out beside it,
   so the line stays centered with the rest of the tile. */
.main-content section.section-masterclasses .tile-content .location svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
    vertical-align: -0.15em;
}
.main-content section.section-masterclasses .tile-content .button {
    background: #fff;
    color: #251C1D;
    margin-block: 1.5rem 1.75rem;
}
.main-content section.section-masterclasses .tile-content .button.unavailable {
    background: rgba(255, 255, 255, 0.3);
    font-weight: 400;
    color: white;
    backdrop-filter: blur(1rem);
}
/* How wide a tile is no longer follows from how wide the window is — the same
   window holds three narrow tiles or one broad one — so the overlay asks the tile
   it sits in. Below 22rem of tile the title comes down a step and the padding
   with it, which is what a narrow column needs and what the single tile on a
   phone, being wider than that, does not get. */
.main-content section.section-masterclasses .masterclass-tiles li {
    container-type: inline-size;
}
@container (max-width: 22rem) {
    .main-content section.section-masterclasses .tile-content {
        padding: 1.5rem 1.25rem 1.25rem;
    }
    .main-content section.section-masterclasses .tile-content .title {
        font-size: 1.35rem;
    }
    .main-content section.section-masterclasses .tile-content .button {
        margin-block: 1.25rem 1.25rem;
    }
}

/* TEXT */
/* A page without a hero opens on its first text section — title and all — so
   that one section is centered. The rest of the page reads as usual. */
body:not(.hashero) .main-content section.section-text.first.centered {text-align: center;}
.main-content section.section-text p:has(img) + h2 {margin-top: 9rem;}
.main-content section.section-text .subtitle {
    color: var(--text-strong);
    font-weight: 500;
    font-size: 1.25rem;
}
.main-content section.section-text strong {
    color: var(--text-strong);
    font-weight: 400;
}
.main-content section.section-text .h2 + .subtitle {
    font-weight: 400;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1.8rem;
    margin-bottom: 1.75rem;
    color: var(--text-subtle);
}
.main-content section.section-text .title + .subtitle {
    font-size: 0.85rem;
    color: var(--text-subtle);
    margin-top: -3.25rem;
    margin-bottom: 3.75rem;
}



/* SLIDER */

.main-content section.section-slider div.carousel > ul {padding-inline: 1.5rem; scroll-padding-inline: 1.5rem;}
.main-content section.section-slider > h2 {padding-inline: 1.5rem; margin-bottom: 2.25rem;}
.main-content section.section-slider > h2 button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: url(/img/down.svg) center center / 0.9rem no-repeat;
    filter: var(--icon-filter);
    cursor: pointer;
    font-size: 0;
    vertical-align: middle;
}
.main-content section.section-slider > h2 button.prev {transform: rotate(90deg); float: right;}
.main-content section.section-slider > h2 button.next {transform: rotate(-90deg); float: right;}
.main-content section.section-slider > h2 button:disabled {opacity: 0.5; cursor: default;}
.main-content section.section-slider div.carousel .content {color: var(--text-strong); font-weight: 400;}
.main-content section.section-slider div.carousel .title {margin-top: .7rem;}
.main-content section.section-slider div.carousel .subtitle {font-size: 0.85rem; position: relative; bottom: 0.25rem; margin-bottom: 0.9rem;}
.main-content section.section-slider div.carousel .read-more {margin-top: 1rem;}
.main-content section.section-slider div.carousel .counter {
    position: absolute;
    opacity: 0.5;
    margin-top: 0.5rem;
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 0;
    transform: scaleX(1.3);
    transform-origin: left center;
}
.main-content section.section-slider #itinerary + div.carousel .title, 
.main-content section.section-slider #itinerary + div.carousel .read-more,
.main-content section.section-slider #itinerary + div.carousel .content {padding-left: 4.5rem;}
.main-content section.section-slider #itinerary + div.carousel .title {color: var(--text-strong); font-weight: 500; font-size: 1.25rem;}
.main-content section.section-slider #itinerary + div.carousel .content,
.main-content section.section-slider #itinerary + div.carousel .read-more {color: var(--text);}

body.home footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
body.home footer * {color: white;}
body.home footer .logo {display: none;}

footer > div:first-child{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 1rem 1.5rem;
}
footer a {display: inline-block; font-size: 1rem; color: var(--text-strong); font-weight: 400; text-decoration: none; text-align: center;}
footer a:first-child {position: absolute; text-align: left; left: 1.5rem;}
footer a:last-child {position: absolute; text-align: right; right: 1.5rem;}
footer a:hover {text-decoration: none;}
footer a.instagram-link {display: inline-flex; align-items: center; gap: 0.4em;}
footer a.instagram-link svg {width: 1em; height: 1em; flex-shrink: 0;}
footer a.logo {
    display: inline-block;
    text-decoration: none;
    color: var(--text-strong);
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.015em;
    padding-block: 9rem;
}