/* CSS for layout/content */
  
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Work — Figma "Lux / Work" (4988:5132) and "Work / List View" (4988:5237)
 *
 * page-work.php: a filter bar over two views of the projects, Grid and Index,
 * of which js/work.js shows one at a time. The view not in use, and anything
 * the filters leave out, carries the hidden attribute.
 */

.work [hidden] {
    display: none !important;
}

.entry-content > .work {
    margin-top: calc(2 * var(--three-spacer));
}

/* Filter bar: Hide/Show Filters over the filter pills, with the view switch on
 * the right — level with the first row of pills when they're open, otherwise
 * with the toggle. */
.work__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--two-spacer) var(--three-spacer);
    padding: var(--two-spacer) 0;
    border-top: 1px solid var(--wp--preset--color--text-10);
}

.work__filters-toggle {
    grid-column: 1;
    justify-self: start;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--wp--preset--color--text-80);
    cursor: pointer;
}

.work__filters {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px var(--one-spacer);
    max-width: 850px;
}

.work__switch {
    grid-column: 2;
    grid-row: 1;
}

.work__bar.is-open .work__switch {
    grid-row: 2;
}

.work__grid,
.work__index,
.work__empty {
    margin-top: var(--three-spacer);
}

.work__empty {
    color: var(--wp--preset--color--text-50);
}

/* Grid — Project Card (4988:6818), two to a row. */
.work__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--four-spacer) var(--three-spacer);
}

.project-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--one-point-five-spacer);
    color: inherit;
    text-decoration: none;
}

.project-card__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--two-spacer);
}

/* Title — Location. Below 1080px the location drops below a long title; from
 * there the title wraps instead and the location stays on its first line. */
.project-card__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--one-spacer);
    min-width: 0;
}

.project-card__location {
    color: var(--wp--preset--color--text-50);
}

.project-card__dash {
    margin-right: var(--one-spacer);
}

.project-card__link:hover .project-card__title {
    color: var(--wp--preset--color--text-50);
}

/* Figma "metadata - date": Geist Mono 18px. */
.project-card__year {
    flex: 0 0 auto;
    font-family: var(--wp--preset--font-family--geist-mono);
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--wp--preset--color--text-50);
}

.project-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 675 / 480;
    object-fit: cover;
}

@media (min-width: 782px) {
    .work__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: calc(2 * var(--three-spacer));
    }
}

@media (min-width: 1080px) {
    .project-card__heading {
        flex-wrap: nowrap;
    }

    .project-card__location {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Index — Work / Index Entry (4988:4418). A table from 1080px; below that each
 * row stacks, year beside the rest. Projects with a featured image link through,
 * and that link covers the whole row; the rest are listed without one. */
.work__index {
    display: block;
    width: 100%;
    font-size: 1.125rem;
    line-height: 1.3;
    text-align: left;
}

.work__index thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.work__index tbody {
    display: block;
}

.work__index th,
.work__index td {
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

/* Rows sit slightly grey; a row that links comes up to full text colour on hover.
 * 65% falls between the palette's Text 80% and Text 50% (the column headings),
 * so it's mixed from Text and follows the colour mode with it. */
.project-index-entry {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--zero-point-five-spacer) var(--two-spacer);
    padding: var(--two-spacer) 0;
    border-top: 1px solid var(--wp--preset--color--text-10);
    color: color-mix(in srgb, var(--wp--preset--color--text) 65%, transparent);
}

.project-index-entry > * {
    grid-column: 2;
}

.project-index-entry__year {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--wp--preset--font-family--geist-mono);
}

.project-index-entry__detail {
    font-size: 1rem;
    color: var(--wp--preset--color--text-50);
}

.project-index-entry__detail:empty {
    display: none;
}

.project-index-entry__link {
    color: inherit;
    text-decoration: none;
}

.project-index-entry__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.project-index-entry--linked:hover,
.project-index-entry--linked:focus-within {
    color: var(--wp--preset--color--text);
}

/* Column widths are the design's 89 / 205 / 322 / 205 / 440px, each plus its
 * 30px gutter, as shares of the 1381px table. */
@media (min-width: 1080px) {
    .work__index {
        display: table;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .work__index thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: table-header-group;
        color: var(--wp--preset--color--text-50);
    }

    .work__index tbody {
        display: table-row-group;
    }

    .work__index thead th {
        padding-bottom: var(--two-spacer);
    }

    .work__index th:nth-child(1) { width: 8.617%; }
    .work__index th:nth-child(2) { width: 17.017%; }
    .work__index th:nth-child(3) { width: 25.489%; }
    .work__index th:nth-child(4) { width: 17.017%; }
    .work__index th:nth-child(5) { width: 31.861%; }

    .project-index-entry {
        display: table-row;
    }

    .project-index-entry > *,
    .work__index thead th {
        padding-right: var(--three-spacer);
    }

    .project-index-entry > :last-child,
    .work__index thead th:last-child {
        padding-right: 0;
    }

    /* Empty cells too, which the stacked layout hides — every column holds its place. */
    .project-index-entry > *,
    .project-index-entry__detail:empty {
        display: table-cell;
        padding-top: var(--two-spacer);
        padding-bottom: var(--two-spacer);
    }

    .project-index-entry__detail {
        font-size: inherit;
        color: inherit;
    }
}

/* Sightlines — Figma "Lux / Perspectives" (4988:5303)
 *
 * page-sightlines.php: the Work page's filter bar under a "Filters" label, over
 * a grid of Sightlines Cards (4988:4521) — four columns from 1080px, two from
 * 782px, one below. A Large card takes two columns and a Small one one, and
 * every card is 470px tall. The grid packs densely, so a gap a Large card
 * leaves at the end of a row takes the next Small card that fits.
 */
.entry-content > .sightlines {
    /* 50px in Figma, from the heading's baseline */
    margin-top: var(--four-spacer);
}

/* Figma "caption": 14px. */
.sightlines__label {
    grid-column: 1;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--wp--preset--color--text-50);
}

.sightlines__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 470px;
    grid-auto-flow: row dense;
    gap: var(--three-spacer);
    margin-top: var(--three-spacer);
}

/* The card is its link, in the post's colour. On hover a gradient fades in
 * over it, up to the hue two before it round the spectrum (--sightline-hover,
 * from lux_sightline_summary()). Text and rule are Static Black in either mode. */
.sightline-card__link {
    position: relative;
    isolation: isolate;
    display: flex;
    height: 100%;
    overflow: hidden;
    padding: var(--two-spacer);
    background-color: var(--sightline-color);
    color: var(--wp--preset--color--black);
    text-decoration: none;
}

.sightline-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to top, var(--sightline-color), var(--sightline-hover));
    opacity: 0;
    transition: opacity 0.2s;
}

.sightline-card__link:hover::before,
.sightline-card__link:focus-visible::before {
    opacity: 1;
}

.sightline-card__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--five-spacer);
    min-width: 0;
    padding-top: var(--two-spacer);
    border-top: 1px solid currentColor;
}

/* Small: title at the top, date at the foot. */
.sightline-card__header {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--two-spacer);
}

.sightline-card__title {
    overflow-wrap: break-word;
}

/* Figma "metadata - date": Geist Mono 18px, at half strength. */
.sightline-card__date {
    flex: 0 0 auto;
    font-family: var(--wp--preset--font-family--geist-mono);
    font-size: 1.125rem;
    line-height: 1.15;
    opacity: 0.5;
    transition: opacity 0.2s;
}

/* The image multiplies into the card, so it reads as a duotone of whichever
 * colour is showing. It's greyed first so a colour photo does too. The blend
 * is on the wrapper, which is also what fades, so it holds through the fade. */
.sightline-card__media {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    mix-blend-mode: multiply;
}

.sightline-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

/* Small: the image waits at the foot of the card, 212px tall, and swaps in
 * for the date on hover. */
.sightline-card--small .sightline-card__media {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 212px;
    opacity: 0;
    transition: opacity 0.2s;
}

.sightline-card--small .sightline-card__link:hover .sightline-card__media,
.sightline-card--small .sightline-card__link:focus-visible .sightline-card__media {
    opacity: 1;
}

.sightline-card--small.has-image .sightline-card__link:hover .sightline-card__date,
.sightline-card--small.has-image .sightline-card__link:focus-visible .sightline-card__date {
    opacity: 0;
}

/* Large: title and date side by side over the image, 96px apart. Where the
 * card's too narrow for both, the date drops below the title. */
.sightline-card--large .sightline-card__header {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--one-spacer) 96px;
}

.sightline-card--large .sightline-card__title {
    flex: 1 1 20rem;
}

@media (min-width: 782px) {
    .sightlines__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sightline-card--large {
        grid-column: span 2;
    }
}

@media (min-width: 1080px) {
    .sightlines__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Project — Figma "Lux / Work / Lego Group Detail" (4988:5918)
 *
 * single-project.php: a link back to Work over the excerpt, then the project's
 * details (.project-meta) and its featured image, content and Project Team
 * (.project__body). Stacked below 1080px; from there it's the Sticky-header
 * group's grid, 12 columns on a 30px gutter, with the details in columns 1–3,
 * the body in 4–11 and 12 left empty. The heading runs across 1–9.
 *
 * Figma trims text to its cap height and baseline and measures gaps between
 * those. CSS measures between line boxes, which at Geist's metrics reach
 * roughly a quarter of the font size past the text, so the gaps here are the
 * design's less that overhang; each notes the design's value. */
.project {
    /* 75px in Figma: heading to columns, and between blocks in the body. */
    --project-gap: calc(var(--five-spacer) + var(--two-spacer));

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--project-gap);
}

.project__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 30px in Figma */
    gap: var(--two-spacer);
}

.project__back {
    font-size: 1.125rem;
    line-height: 1.15;
    color: var(--wp--preset--color--text-50);
    text-decoration: none;
}

.project__back:hover,
.project__back:focus-visible {
    color: var(--wp--preset--color--text);
}

/* Details — title, credit and lead, then label / value pairs. */
.project-meta {
    display: flex;
    flex-direction: column;
    /* 40px in Figma */
    gap: var(--three-spacer);
    /* 30px in Figma */
    padding-top: var(--two-point-five-spacer);
    border-top: 1px solid var(--wp--preset--color--text-10);
}

.project-meta__title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}

.project-meta__credit,
.project-meta__lead {
    font-size: 0.875rem;
    line-height: 1.4;
}

.project-meta__credit a:hover,
.project-meta__credit a:focus-visible {
    color: var(--wp--preset--color--text-50);
}

.project-meta__lead {
    color: var(--wp--preset--color--text-50);
}

.project-meta__details {
    display: flex;
    flex-direction: column;
    /* 40px in Figma */
    gap: 32px;
}

.project-meta__detail {
    display: flex;
    flex-direction: column;
    /* 20px in Figma */
    gap: 12px;
    font-size: 1rem;
    line-height: 1.2;
}

.project-meta__detail dt {
    color: var(--wp--preset--color--text-50);
}

.project-meta__detail dd {
    font-weight: 500;
}

/* 15px in Figma, to the top of the pills. */
.project-meta__detail--typology {
    gap: 11px;
}

/* Jump to Section, its arrow sitting on the baseline. */
.project-meta__jump {
    display: inline-flex;
    align-items: baseline;
    gap: var(--one-spacer);
    text-decoration: none;
}

.project-meta__jump:hover,
.project-meta__jump:focus-visible {
    color: var(--wp--preset--color--text-50);
}

/* The exported arrow is hard-coded #181717; follow the link colour. */
.project-meta__arrow path {
    fill: currentColor;
    stroke: currentColor;
}

.project-meta__typology {
    display: flex;
    flex-wrap: wrap;
    gap: var(--one-spacer);
    font-weight: 400;
}

/* Body — the blocks own their spacing: the same gap between all of them, with
 * consecutive paragraphs kept together as one body of text. Wide and full
 * blocks keep to the column. */
.project__body > * {
    margin-top: 0;
    margin-bottom: 0;
}

.project__body > * + * {
    margin-top: var(--project-gap);
}

.project__body > p + p {
    margin-top: var(--one-point-five-spacer);
}

.project__body > .alignwide,
.project__body > .alignfull {
    width: auto;
    max-width: none;
}

.project__image {
    display: block;
    width: 100%;
    height: auto;
}

/* Project Team — the Team repeater, two to a row, four from 782px. */
.project-team {
    /* 30px in Figma */
    padding-top: 23px;
    padding-bottom: var(--three-spacer);
    border-top: 1px solid var(--wp--preset--color--text-10);
}

.project-team__heading {
    color: var(--wp--preset--color--text-50);
}

.project-team__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 45px down and 30px across in Figma */
    gap: 37px var(--three-spacer);
    /* 60px in Figma */
    margin-top: var(--five-spacer);
    font-size: 1rem;
    line-height: 1.2;
}

.project-team__member {
    display: flex;
    flex-direction: column;
    /* 15px in Figma */
    gap: 7px;
}

.project-team__member dt {
    color: var(--wp--preset--color--text-50);
}

@media (min-width: 782px) {
    .project-team__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .project {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--three-spacer);
    }

    .project__header {
        grid-column: 1 / span 9;
    }

    .project-meta {
        grid-column: 1 / span 3;
        align-self: start;
    }

    .project__body {
        grid-column: 4 / span 8;
    }
}

/* The details dock near the top of the viewport and travel with the body until
 * it ends (a sticky grid item stays within its grid area, here the body's row).
 * Only where the window is tall enough to show them whole: a sticky column
 * taller than the window keeps its end out of reach until the body runs out. */
@media (min-width: 1080px) and (min-height: 800px) {
    .project-meta {
        position: sticky;
        top: var(--three-spacer);
    }
}