/* ================================================
   CONTACT & BLOG PAGES — Eden Atelier
   ================================================
   Shared by contact.html and blog.html. Header,
   navbar and hamburger come from style.css; the
   footer comes from footer.css. Everything below is
   specific to these two pages.
   ================================================ */

/* ================================================
   SHARED — painterly bits, borrowed from the home page
   ================================================ */

/* A watercolour wash sitting behind a big italic serif title, the same move
   the About section makes with the artist's name. The stroke is the studio
   periwinkle; the text stays dark and legible on the pale part of it. */
.brushed-title {
    position: relative;
    display:  inline-block;
}

.brushed-title::before {
    content:        '';
    position:       absolute;
    left:           50%;
    top:            52%;
    width:          128%;
    aspect-ratio:   736 / 339;
    transform:      translate(-50%, -50%) rotate(-2.5deg);
    background:     url('images/brush-stroke-2.webp') center / contain no-repeat;
    filter:         saturate(0.7) hue-rotate(-38deg) brightness(1.06);
    opacity:        0.5;
    z-index:        -1;
    pointer-events: none;
}

/* AF / EN switch — a small painted pill */
.lang-toggle {
    display:       inline-flex;
    flex-shrink:   0;
    border:        1px solid #d8d0e4;
    border-radius: 999px;
    overflow:      hidden;
    background:    #ffffff;
}

.lang-toggle button {
    appearance:     none;
    border:         none;
    background:     transparent;
    padding:        6px 16px;
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.08em;
    color:          #9a958c;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background-color var(--transition-fast), color var(--transition-fast);
}

.lang-toggle button + button {
    border-left: 1px solid #ece7f2;
}

.lang-toggle button.is-active {
    background: #787e9f;
    color:     #ffffff;
}

.lang-toggle button:not(.is-active):hover {
    color: #4c5170;
}


/* ================================================
   CONTACT
   ================================================ */
/* The page is a left column of plain prose — what the studio makes to order,
   and how to reach it — beside a single quiet card holding the form. The only
   colour is a painted stroke behind the title and a soft brush mark low on
   the page, so the room stays quiet but not clinical. */
.contact-page {
    position:    relative;
    max-width:   1200px;
    margin:      0 auto;
    padding:     clamp(48px, 7vw, 88px) clamp(18px, 4vw, 48px) clamp(72px, 9vw, 120px);
    font-family: 'Jost', sans-serif;
    color:       #2c2c2c;
    overflow:    hidden;   /* keeps the decorative brush from adding scroll */
}

/* A single faint brush sweep, bottom-right, echoing the home page's
   painted marks. Purely decorative, and gone on small screens. */
.contact-page::after {
    content:        '';
    position:       absolute;
    right:          -6%;
    bottom:         4%;
    width:          min(46vw, 560px);
    aspect-ratio:   598 / 430;
    background:     url('images/brush-1.webp') center / contain no-repeat;
    opacity:        0.10;
    transform:      rotate(-8deg);
    pointer-events: none;
    z-index:        0;
}

.contact-head,
.contact-body {
    position: relative;
    z-index:  1;
}

/* ---- Masthead ---- */
.contact-head {
    max-width:     760px;
    margin:        0 0 clamp(44px, 6vw, 72px);
}

.contact-head-eyebrow {
    display:        block;
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color:          #9a7218;
    margin-bottom:  clamp(16px, 2vw, 24px);
}

.contact-head-title {
    font-family: var(--font-serif);
    font-size:   clamp(44px, 6vw, 76px);
    font-weight: 500;
    font-style:  italic;
    line-height: 0.96;
    color:       #1a1614;
    margin:      0;
}

.contact-head-lead {
    max-width:   54ch;
    margin:      clamp(20px, 2.6vw, 30px) 0 0;
    font-family: var(--font-serif);
    font-size:   17.5px;
    font-weight: 300;
    line-height: 1.75;
    color:       #6b6259;
}

/* ---- Two columns ---- */
.contact-body {
    display:               grid;
    grid-template-columns:  1fr 1fr;
    gap:                    clamp(40px, 6vw, 84px);
    align-items:            start;
}

.contact-info {
    display:        flex;
    flex-direction: column;
    gap:            clamp(36px, 5vw, 52px);
}

/* What Saartjie makes to order — prose, split by hairlines, not cards. */
.contact-uses .use {
    padding-top:  22px;
    border-top:   1px solid #e8e1d3;
}

.contact-uses .use:first-child {
    padding-top: 0;
    border-top:  none;
}

.contact-uses .use + .use {
    margin-top: 22px;
}

.use-title {
    font-family: var(--font-serif);
    font-size:   21px;
    font-weight: 500;
    font-style:  italic;
    color:       #211d19;
    margin:      0 0 8px;
}

.use-text {
    font-family: var(--font-serif);
    font-size:   15.5px;
    font-weight: 300;
    line-height: 1.7;
    color:       #6b6259;
    margin:      0;
}

/* Direct contact details, set as a definition list */
.contact-direct {
    display:       grid;
    grid-template-columns: repeat(2, 1fr);
    gap:           26px 28px;
    margin:        0;
    padding-top:   clamp(28px, 4vw, 40px);
    border-top:    1px solid #e8e1d3;
}

.contact-direct dt {
    font-family:    var(--font-display);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          #9a958c;
    margin-bottom:  7px;
}

.contact-direct dd {
    margin:      0;
    font-family: var(--font-serif);
    font-size:   15.5px;
    line-height: 1.6;
    color:       #4c463e;
}

.contact-direct a {
    color:         #4c463e;
    text-decoration: none;
    border-bottom: 1px solid #d9d2c4;
}

.contact-direct a:hover {
    border-bottom-color: #787e9f;
}

/* ---- The form card ---- */
.contact-form-card {
    background:    #ffffff;
    border:       1px solid #ece5d7;
    border-radius: 16px;
    padding:      clamp(28px, 4vw, 44px);
    box-shadow:   0 1px 3px rgba(30, 24, 15, 0.07);
}

.contact-form-label {
    position:       relative;
    display:        block;
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          #9a958c;
    margin-bottom:  30px;
    padding-bottom: 16px;
}

/* A short painted stroke under the label — the one flourish on the card. */
.contact-form-label::after {
    content:        '';
    position:       absolute;
    left:           0;
    bottom:         0;
    width:          64px;
    height:         9px;
    background:     url('images/brush-stroke.webp') left center / contain no-repeat;
    opacity:        0.85;
}

/* ---- Form ---- */
.contact-form {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   22px;
}

.field {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* The writing line paints itself in when the field has focus — a brush
   sweep from the left over the resting hairline. */
.field::after {
    content:          '';
    position:         absolute;
    left:             0;
    right:            0;
    bottom:           0;
    height:           2px;
    background:       linear-gradient(90deg, #787e9f, #a9adc9);
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events:   none;
}

.field:focus-within::after {
    transform: scaleX(1);
}

/* Message and subject run the full width of the form */
.field-wide {
    grid-column: 1 / -1;
}

.field label {
    font-family:    var(--font-display);
    font-size:      10.5px;
    font-weight:    600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          #6b6259;
}

/* Ruled lines rather than boxes — four outlined rectangles stacked up read as
   a form to fill in; a writing line reads as a letter to write. */
.field input,
.field textarea {
    width:         100%;
    padding:       10px 2px;
    border:        none;
    border-bottom: 1px solid #ddd8d0;
    border-radius: 0;
    background:    transparent;
    font-family:   'Jost', sans-serif;
    font-size:     16px;
    color:         #2c2c2c;
    transition:    border-color var(--transition-fast);
}

.field textarea {
    min-height: 150px;
    resize:     vertical;
}

.field input:focus,
.field textarea:focus {
    outline:             none;
    border-bottom-color: #787e9f;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #b3ada4;
}

.contact-submit {
    grid-column:    1 / -1;
    justify-self:   start;
    margin-top:     10px;
    padding:        15px 42px;
    border:         none;
    border-radius:  999px;
    background:     #787e9f;
    color:          #ffffff;
    font-family:    var(--font-display);
    font-size:      11.5px;
    font-weight:    500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background-color var(--transition-fast);
}

.contact-submit:hover {
    background: #5f6587;
}

/* Confirmation line shown by pages.js once the mail client is handed off */
.form-note {
    grid-column: 1 / -1;
    margin:      0;
    font-family: var(--font-serif);
    font-style:  italic;
    font-size:   15px;
    color:       #6b6259;
}

.form-note[hidden] {
    display: none;
}

/* Select matches the ruled-line inputs */
.field select {
    width:         100%;
    padding:       10px 2px;
    border:        none;
    border-bottom: 1px solid #ddd8d0;
    border-radius: 0;
    background:    transparent;
    font-family:   'Jost', sans-serif;
    font-size:     16px;
    color:         #2c2c2c;
    cursor:        pointer;
    transition:    border-color var(--transition-fast);
}

.field select:focus {
    outline:             none;
    border-bottom-color: #787e9f;
}

.field-opt {
    font-weight:     400;
    letter-spacing: 0.04em;
    text-transform: none;
    color:          #b3ada4;
}


/* ================================================
   BLOG — journal index + article pages
   ================================================ */

/* Shared page wrapper for blog.html and the post pages. Relative + clipped so
   a title's brush wash can spill without adding scrollbars. */
.journal-page {
    position:    relative;
    max-width:   1100px;
    margin:      0 auto;
    padding:     clamp(44px, 6.5vw, 84px) clamp(18px, 4vw, 48px) clamp(72px, 9vw, 120px);
    font-family: 'Jost', sans-serif;
    color:       #2c2c2c;
    overflow:    hidden;
}

/* ---- Masthead ---- */
.journal-masthead {
    max-width: 760px;
    margin:    0 0 clamp(8px, 2vw, 16px);
}

.journal-kicker {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   clamp(18px, 2.4vw, 28px);
}

.journal-eyebrow {
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color:          #9a7218;
}

.journal-title {
    font-family: var(--font-serif);
    font-size:   clamp(44px, 7vw, 92px);
    font-weight: 500;
    font-style:  italic;
    line-height: 0.96;
    color:       #1a1614;
    margin:      0;
}

.journal-note {
    max-width:   50ch;
    margin:      clamp(20px, 2.6vw, 32px) 0 0;
    font-family: var(--font-serif);
    font-size:   17.5px;
    font-weight: 300;
    line-height: 1.75;
    color:       #6b6259;
}

/* ---- The journal, as an index ----
   Newest entry runs wide as a lead; every entry after it stacks as a compact
   row. Add entries newest-first. */
.journal-list {
    margin-top:  clamp(40px, 6vw, 68px);
    border-top:  1px solid #e8e1d3;
    padding-top: clamp(36px, 5vw, 56px);
}

.journal-lead,
.journal-item {
    display:         block;
    text-decoration: none;
    color:           inherit;
}

/* ---- Lead entry — image in a painted frame beside the standfirst ---- */
.journal-lead {
    display:               grid;
    grid-template-columns: 1.08fr 1fr;
    gap:                   clamp(30px, 5vw, 64px);
    align-items:           center;
    padding-bottom:        clamp(40px, 5vw, 60px);
}

.journal-lead-media {
    position:      relative;
    aspect-ratio:  4 / 3;
    border-radius: 4px;
    overflow:      visible;
}

/* The painted wash that sits behind and just off the photo. */
.journal-lead-media::before {
    content:        '';
    position:       absolute;
    inset:          -7% -9% -11% -7%;
    background:     url('images/brush-stroke-2.webp') center / 100% 100% no-repeat;
    filter:         saturate(0.7) hue-rotate(-38deg) brightness(1.04);
    opacity:        0.42;
    z-index:        0;
    pointer-events: none;
}

.journal-lead-media img {
    position:      relative;
    z-index:       1;
    display:       block;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 3px;
    box-shadow:    0 16px 34px -14px rgba(58, 48, 38, 0.4);
    transition:    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.journal-lead:hover .journal-lead-media img {
    transform: scale(1.02);
}

.journal-lead-title {
    font-family: var(--font-serif);
    font-size:   clamp(28px, 3.6vw, 44px);
    font-weight: 500;
    font-style:  italic;
    line-height: 1.12;
    color:       #1a1614;
    margin:      12px 0 16px;
    transition:  color var(--transition-fast);
}

.journal-lead-excerpt {
    font-family: var(--font-serif);
    font-size:   16.5px;
    font-weight: 300;
    line-height: 1.7;
    color:       #6b6259;
    margin:      0 0 24px;
    max-width:   44ch;
}

/* ---- Later entries — compact rows ---- */
.journal-item {
    display:               grid;
    grid-template-columns: 132px 1fr;
    gap:                   clamp(20px, 3vw, 36px);
    align-items:           center;
    padding:               clamp(24px, 3vw, 32px) 0;
    border-top:            1px solid #e8e1d3;
}

.journal-item-media {
    aspect-ratio:  1;
    overflow:      hidden;
    background:    #F3EFE6;
    border-radius: 3px;
    box-shadow:    inset 0 0 0 1px rgba(30, 24, 15, 0.09);
}

.journal-item-media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.journal-item:hover .journal-item-media img {
    transform: scale(1.04);
}

.journal-item-title {
    font-family: var(--font-serif);
    font-size:   clamp(19px, 1.8vw, 23px);
    font-weight: 500;
    font-style:  italic;
    line-height: 1.25;
    color:       #211d19;
    margin:      8px 0;
    transition:  color var(--transition-fast);
}

.journal-item-excerpt {
    font-family: var(--font-serif);
    font-size:   15px;
    font-weight: 300;
    line-height: 1.6;
    color:       #6b6259;
    margin:      0;
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:           hidden;
}

.journal-lead:hover .journal-lead-title,
.journal-item:hover .journal-item-title {
    color: #4c5170;
}

.journal-lead:hover .post-link {
    background:    #787e9f;
    border-color: #787e9f;
    color:        #ffffff;
}

/* ---- Shared post bits ---- */
.post-meta {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-family:    var(--font-display);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          #9a7218;
    margin-bottom:  14px;
}

.post-meta-dot {
    color: #d5cec3;
}

.post-title {
    font-family:   var(--font-serif);
    font-size:     23px;
    font-weight:   500;
    font-style:    italic;
    line-height:   1.25;
    color:         #211d19;
    margin:        0 0 10px;
}

/* The "read more / write to the studio" link — a small painted pill */
.post-link {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        11px 22px;
    border:         1px solid #b9bcd0;
    border-radius:  999px;
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          #4c5170;
    text-decoration: none;
    transition:     background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.post-link::after {
    content:   '\2192';
    font-size: 13px;
}

.post-link:hover {
    background:    #787e9f;
    border-color: #787e9f;
    color:        #ffffff;
}

/* ================================================
   BLOG POST — a single article page (posts/*.html)
   ================================================ */
.post-article {
    max-width: 720px;
    margin:    0 auto;
}

.post-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-bottom:   clamp(28px, 4vw, 44px);
}

.post-back {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    font-family:     var(--font-display);
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    color:           #787e9f;
    text-decoration: none;
}

.post-back::before { content: '\2190'; font-size: 13px; }

.post-back:hover { color: #4c5170; }

.post-head {
    margin-bottom: clamp(28px, 4vw, 44px);
}

.post-article .post-title {
    font-size:   clamp(32px, 4.6vw, 52px);
    line-height: 1.08;
    margin:      0;
}

/* Lead image — big, with a soft periwinkle-tinted shadow, so opening a post
   feels like arriving somewhere. */
.post-media {
    overflow:      hidden;
    background:    #F3EFE6;
    border-radius: 4px;
    box-shadow:    0 22px 46px -18px rgba(90, 84, 120, 0.5);
}

.post-media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.post-article .post-media {
    aspect-ratio:  16 / 9;
    margin:        0 0 clamp(32px, 5vw, 52px);
}

.post-article .post-body-text {
    font-family: var(--font-serif);
    font-size:   18px;
    font-weight: 300;
    line-height: 1.85;
    color:       #4c463e;
}

.post-article .post-body-text p {
    margin: 0 0 24px;
}

/* Drop cap on the opening paragraph — one painterly flourish. */
.post-body-text .has-dropcap::first-letter {
    float:        left;
    font-size:    3.4em;
    line-height:  0.86;
    padding:      6px 10px 0 0;
    font-style:   italic;
    font-weight:  500;
    color:        #787e9f;
}

/* The one line worth stopping on, set apart on a painted rule. */
.post-article .post-body-text p.post-callout {
    margin:       clamp(28px, 4vw, 40px) 0;
    padding-left: 26px;
    border-left:  3px solid #787e9f;
    font-size:    1.28em;
    font-style:   italic;
    line-height:  1.5;
    color:        #35303a;
}

/* ---- Photo strip inside the article ---- */
.post-gallery {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   18px;
    margin-top:            clamp(36px, 5vw, 52px);
}

.post-gallery img {
    display:       block;
    width:         100%;
    aspect-ratio:  1;
    object-fit:    cover;
    background:    #F3EFE6;
    border-radius: 3px;
    box-shadow:    inset 0 0 0 1px rgba(30, 24, 15, 0.09);
}

/* ---- Closing call to action ---- */
.post-cta {
    margin-top:    clamp(40px, 6vw, 64px);
    padding:       clamp(28px, 4vw, 44px);
    text-align:    center;
    background:    #faf7f1;
    border:        1px solid #ece5d7;
    border-radius: 14px;
}

.post-cta-text {
    margin:      0 0 20px;
    font-family: var(--font-serif);
    font-size:   19px;
    font-style:  italic;
    color:       #4c463e;
}

@media (max-width: 560px) {
    .post-gallery { grid-template-columns: 1fr; }
}


/* ================================================
   RESPONSIVE
   Breakpoints match style.css / gallery.css
   ================================================ */
@media (max-width: 860px) {
    /* Form drops under the info column */
    .contact-body {
        grid-template-columns: 1fr;
        gap: clamp(36px, 7vw, 52px);
    }

    /* Lead post stacks: image over standfirst */
    .journal-lead {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .journal-lead-media {
        aspect-ratio: 16 / 10;
    }

    .journal-lead-media::before {
        inset: -5% -6% -8% -6%;
    }
}

@media (max-width: 560px) {
    .journal-page {
        padding: 40px 20px 64px;
    }

    .contact-form,
    .contact-direct {
        grid-template-columns: 1fr;
    }

    /* The language switch moves to its own line, top-right of the article —
       the usual spot for one — with the studio kicker under it, rather than
       being orphaned on a half-line between the eyebrow and the title. */
    .journal-kicker {
        flex-direction: column;
        align-items:    flex-start;
        gap:            18px;
        margin-bottom:  24px;
    }
    .journal-kicker .lang-toggle {
        order:      -1;
        align-self: flex-end;
    }

    /* Compact rows stack their thumbnail above the text */
    .journal-item {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .journal-item-media {
        aspect-ratio: 16 / 10;
        max-width:    280px;
    }

    /* No decorative brush crowding a small screen */
    .contact-page::after { display: none; }
}


/* ================================================
   GALLERY LANDING — collection chooser
   ================================================
   A masthead, three collections, a way out. Each collection is a titled
   header on white followed by a full-bleed band of work.

   The band is #f3efe6 because that is the exact ground every photograph in
   images/gallery/ was shot on. The files are 1000x1000 squares with the piece
   floating in the middle, so once the band matches, the edge of each file
   stops existing and the row reads as work hung on one continuous wall. That
   is what does the work here — not borders, not cards, not frames drawn in
   CSS. The pieces already carry their own frames and plinths in the
   photograph, and anything the page added on top of that only ever fought
   with them.
   ================================================ */
.gallery-landing {
    position:       relative;
    overflow:       hidden;   /* keeps the decorative brushwork inside the page */
    padding-bottom: clamp(72px, 8vw, 112px);
    background:     #ffffff;
}

/* ---- Brushwork ----
   A few loose strokes of studio colour bled into the margins, so the white
   page reads as the paper the work was laid out on rather than a blank
   template. Everything here sits behind the collections and takes no clicks. */
.gallery-landing > * {
    position: relative;
    z-index:  1;
}

.gallery-landing::before,
.gallery-landing::after {
    content:        '';
    position:       absolute;
    z-index:        0;
    pointer-events: none;
    background:     url('images/brush-1.webp') center / contain no-repeat;
    aspect-ratio:   598 / 430;
    opacity:        0.07;
}

.gallery-landing::before {
    top:       3vw;
    left:      -6vw;
    width:     min(520px, 46vw);
    transform: rotate(-9deg);
}

.gallery-landing::after {
    right:     -8vw;
    bottom:    14vw;
    width:     min(620px, 52vw);
    transform: rotate(7deg) scaleX(-1);
}

/* A periwinkle wash brushed in behind each collection title — the same painted
   wall-label treatment the gallery grid gives its section headings. */
.gallery-landing .collection-title {
    position:  relative;
    isolation: isolate;
}

.gallery-landing .collection-title::before {
    content:        '';
    position:       absolute;
    z-index:        -1;
    left:           -3%;
    top:            52%;
    width:          min(420px, 84%);
    aspect-ratio:   736 / 339;
    transform:      translateY(-50%) rotate(-2deg);
    background:     url('images/brush-stroke-2.webp') left center / contain no-repeat;
    filter:         saturate(0.7) hue-rotate(-38deg) brightness(1.06);
    opacity:        0.32;
    pointer-events: none;
}

/* One stroke under the closing mark, tying the foot of the page to the heads. */
.landing-close-mark {
    position:  relative;
    isolation: isolate;
}

.landing-close-mark::after {
    content:        '';
    position:       absolute;
    z-index:        -1;
    left:           50%;
    top:            50%;
    width:          180px;
    aspect-ratio:   736 / 339;
    transform:      translate(-50%, -42%) rotate(-3deg);
    background:     url('images/brush-stroke.webp') center / contain no-repeat;
    opacity:        0.16;
    pointer-events: none;
}


/* ================================================
   MASTHEAD
   ================================================
   A catalogue title page. The title lockup holds the left, the contents hold
   the right, and the two sit on a common baseline.

   This replaced a centred eyebrow / title / note stack with three boxed links
   under it. Centred type reads as a banner and told the reader nothing they
   could act on: three names in a row, no sense of what was behind any of
   them. A numbered contents list with the size of each collection against it
   is what a catalogue actually opens with, and every row of it is a way in.
   ================================================ */
.masthead {
    max-width: 1440px;
    margin:    0 auto;
    padding:   clamp(64px, 8vw, 128px) clamp(20px, 4vw, 56px) 0;
}

.masthead-eyebrow {
    display:        block;
    font-family:    var(--font-display);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color:          #9a7218;
    margin-bottom:  clamp(18px, 2.2vw, 30px);
}

.masthead-title {
    font-family: var(--font-serif);
    /* Set on two lines and about twice .page-title. At this size the italic
       is the point — it is the one place on the site the serif gets to be a
       picture rather than a label. */
    font-size:   clamp(60px, 8.4vw, 124px);
    font-weight: 500;
    font-style:  italic;
    line-height: 0.86;
    color:       #1a1614;
    margin:      0;
}

.masthead-note {
    max-width:   34ch;
    margin:      clamp(22px, 2.6vw, 34px) 0 0;
    font-family: var(--font-serif);
    font-size:   clamp(16px, 1.35vw, 18px);
    font-weight: 300;
    line-height: 1.75;
    color:       #6b6259;
}

/* ================================================
   COLLECTIONS
   ================================================ */
.collection {
    margin-top: clamp(80px, 9vw, 132px);
}

/* ---- Header ----
   The numeral is set large and pale and sits in its own column, which is what
   makes a run of collections read as a numbered catalogue rather than as
   three headings that happen to follow each other. */
.collection-head {
    display:               grid;
    grid-template-columns: auto 1fr auto;
    /* Start, not end. Aligned to the end the numeral baselined against the
       bottom of the whole heading block — which is the last line of the note,
       not the title — so a big figure sat beside the small italic text and
       hung below the rule. */
    align-items:           start;
    column-gap:            clamp(16px, 2vw, 30px);
    max-width:             1440px;
    margin:                0 auto clamp(28px, 3.5vw, 44px);
    padding:               0 clamp(20px, 4vw, 56px) clamp(16px, 2vw, 24px);
    border-bottom:         1px solid #e6e0d3;
}

.collection-numeral {
    font-family: var(--font-serif);
    font-size:   clamp(52px, 7vw, 104px);
    font-weight: 400;
    font-style:  italic;
    /* Tightened and nudged up so the figure's cap lands level with the cap of
       the title beside it. The two type sizes are far enough apart that
       nothing aligns on its own. */
    line-height: 0.74;
    margin-top:  0.06em;
    color:       #e2dbcb;
    user-select: none;
}

.collection-title {
    font-family: var(--font-serif);
    font-size:   clamp(34px, 4vw, 58px);
    font-weight: 400;
    line-height: 1;
    color:       #241f1a;
    margin:      0 0 12px;
}

.collection-note {
    max-width:   50ch;
    font-family: var(--font-serif);
    font-size:   clamp(16px, 1.35vw, 18px);
    font-style:  italic;
    line-height: 1.6;
    color:       #6b6259;
    margin:      0;
}

.collection-link {
    align-self:      end;
    font-family:     var(--font-display);
    font-size:       11px;
    font-weight:     500;
    letter-spacing:  0.22em;
    text-transform:  uppercase;
    color:           #241f1a;
    text-decoration: none;
    white-space:     nowrap;
    padding-bottom:  6px;
    border-bottom:   1px solid #cbc3b2;
    transition:      color        var(--transition-default),
                     border-color var(--transition-default);
}

.collection-link:hover,
.collection-link:focus-visible {
    color:               #0e0d10;
    border-bottom-color: #241f1a;
}

.collection-link-arrow {
    display:     inline-block;
    margin-left: 4px;
    transition:  transform var(--transition-fast);
}

.collection-link:hover .collection-link-arrow,
.collection-link:focus-visible .collection-link-arrow {
    transform: translateX(4px);
}


/* ---- The band ---- */
.wall {
    background: #ffffff;   /* white page; the studio photos carry their own near-white ground */
    padding:    clamp(36px, 4.5vw, 64px) 0 clamp(44px, 5vw, 76px);
}

.wall-row {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Barely any gutter, and very little padding. Each file already carries
       roughly a sixth of its width as empty ground on every side, so the
       breathing room is inside the photographs — adding more here only
       shrinks the work. */
    gap:                   0 clamp(0px, 0.6vw, 12px);
    align-items:           start;
    max-width:             1440px;
    margin:                0 auto;
    padding:               0 clamp(8px, 2vw, 32px);
    list-style:            none;
}

/* ---- Three arrangements, one set of parts ----
   Three collections laid out identically would read as the same block printed
   three times. Nothing below changes the components; each only says how the
   row stands. */

/* 01 — hung. Two heights, because a gallery wall is never flush, and with the
   file edges invisible the stagger is the only thing telling you there are
   four separate pieces up there. */
.wall--hung .work:nth-child(even) {
    margin-top: clamp(20px, 3.4vw, 52px);
}

/* 02 — a centrepiece. The middle column is half again as wide, so the piece in
   it is also taller (the files are square) and rises above the two flanking
   it. Bottom-aligned, so the three stand on one line. */
.wall--focal .wall-row {
    grid-template-columns: 1fr 1.42fr 1fr;
    align-items:           end;
    max-width:             1240px;
}

/* 03 — a shelf. Alternating widths and a common bottom edge: pots stand on
   something, they do not hang. */
.wall--shelf .wall-row {
    grid-template-columns: 1.18fr 0.82fr 1.18fr 0.82fr;
    align-items:           end;
}

.work-link {
    display:         block;
    text-decoration: none;
    color:           inherit;
}

.work-img {
    display:    block;
    width:      100%;
    height:     auto;
    /* The image's own ground is the wall, so scaling it grows the piece
       without ever revealing an edge. */
    transform:  scale(1);
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.work-link:hover .work-img,
.work-link:focus-visible .work-img {
    transform: scale(1.035);
}

/* ---- The bottom edge ----
   Every file in images/gallery/ leaves exactly the same 84px of bone below
   its content, and the object shots end that content on a hard horizontal
   line — the far edge of a plinth, or the last row of a cast shadow. Against
   a bone band that line reads as a piece that has been cut off at the bottom.

   Fading out the bottom quarter solves it for every one of them at once: the
   plinth or the shadow simply loses itself in the wall, which is what an
   object photographed on a seamless ground should do anyway. The stops were
   picked by eye against the worst cases — a shorter fade left the pitcher's
   plinth a solid block with a cut base, a longer one started eating the
   beadwork off the bottom of the bust.

   Objects only. A painting's bottom edge is its FRAME, and a frame that
   dissolves looks broken rather than soft — so .wall--hung never gets this. */
.wall--object .work-img {
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 95%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 95%);
}

/* ---- Wall label ---- */
.work-label {
    display:    block;
    text-align: center;
    margin-top: 6px;
    padding:    0 8px;
}

.work-name {
    display:     block;
    font-family: var(--font-serif);
    font-size:   18px;
    line-height: 1.3;
    color:       #241f1a;
}

.work-medium {
    display:        block;
    font-family:    var(--font-display);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          #9a9382;
    margin-top:     6px;
    transition:     color var(--transition-default);
}

.work-link:hover .work-medium,
.work-link:focus-visible .work-medium {
    color: #6b6259;
}


/* ================================================
   CLOSING
   ================================================ */
.landing-close {
    max-width:      680px;
    margin:         clamp(72px, 8vw, 112px) auto 0;
    padding:        0 24px;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

/* A small mark instead of a rule. A hairline here would read as one more
   collection divider, and this is the end of the page, not another seam. */
.landing-close-mark {
    display:       block;
    font-size:     15px;
    line-height:   1;
    color:         #cbc3b2;
    margin-bottom: clamp(20px, 2.4vw, 30px);
}

.landing-close-lead {
    font-family: var(--font-serif);
    font-size:   clamp(19px, 1.9vw, 24px);
    font-style:  italic;
    line-height: 1.5;
    color:       #241f1a;
    margin:      0;
}

.landing-close-note {
    margin:      clamp(26px, 3vw, 36px) 0 0;
    font-family: var(--font-serif);
    font-size:   16px;
    line-height: 1.7;
    color:       #6b6259;
}

.landing-close-note a {
    color:               #241f1a;
    border-bottom:       1px solid #cbc3b2;
    padding-bottom:      1px;
    transition:          border-color var(--transition-default);
}

.landing-close-note a:hover {
    border-bottom-color: #241f1a;
}


/* ================================================
   NARROW
   ================================================ */

/* Below this the four-up rows lose too much to the gutters, and the header's
   three columns stop fitting on one line. */
@media (max-width: 900px) {
    .masthead-note {
        max-width: 46ch;
    }

    .collection-head {
        grid-template-columns: auto 1fr;
        row-gap:               18px;
    }

    /* The link drops under the title block rather than squeezing a third
       column out of a phone. */
    .collection-link {
        grid-column: 2;
        justify-self: start;
    }

    .wall-row,
    .wall--focal .wall-row,
    .wall--shelf .wall-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap:               clamp(12px, 3vw, 28px);
        align-items:           start;
    }

    /* At two-up the stagger would drop the whole right-hand column, which
       reads as a mistake rather than a hang. Straight rows instead. */
    .wall--hung .work:nth-child(even) {
        margin-top: 0;
    }

    /* Three pieces in a two-column grid leaves the last one alone on its row;
       centring it keeps the block symmetrical. */
    .wall--focal .work:last-child {
        grid-column: 1 / -1;
        max-width:   min(50%, 420px);
        margin:      0 auto;
    }
}

@media (max-width: 560px) {
    .masthead {
        padding-top: 40px;
    }

    .collection-numeral {
        font-size:   40px;
        line-height: 0.8;
    }

    .work-name   { font-size: 16px; }
    .work-medium { font-size: 9px; letter-spacing: 0.14em; }
}