/* Grid */
.grid-d-24 {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 8px;
}

.grid-span-2 {
    grid-column: span 2;
}

.grid-span-4 {
    grid-column: span 4;
}

/* 
    Pages 
*/

/* Home Page */
.home-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 24px 8px;
    padding: 80px 8px 8px;
    min-height: calc(100dvh - 88px - 4rem);
    align-content: start;
}

@media screen and (min-width: 640px) {
    .home-page {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .home-page {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1280px) {
    .home-page {
        grid-template-columns: repeat(6, 1fr);
        min-height: calc(100dvh - 88px - 4rem);
    }
}

/*
    Home Page: Splash Sequence
*/
body[data-splash-stage="logo"] .home-page > *,
body[data-splash-stage="select"] .home-page > * {
    display: none;
}

body[data-splash-stage="images"] .home-page .card:not(:has(.card-media)),
body[data-splash-stage="cycling"] .home-page .card:not(:has(.card-media)) {
    display: none;
}

body[data-splash-stage="images"] .home-page .card-title,
body[data-splash-stage="images"] .home-page .card-description,
body[data-splash-stage="images"] .home-page .card-info,
body[data-splash-stage="cycling"] .home-page .card-title,
body[data-splash-stage="cycling"] .home-page .card-description,
body[data-splash-stage="cycling"] .home-page .card-info {
    display: none;
}

body[data-splash-stage]:not([data-splash-stage="reveal"]) .footer {
    display: none;
}


/*
    Listing Page (Projects, Publications, Posts)
*/
.listing-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 48px 8px;
    padding: 80px 8px 8px;
    min-height: 100svh;
    align-content: start;
}

.listing-page-title {
    grid-column: 1;
}

.listing-page-toggle {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    grid-column: 2;
    grid-row: 1;
}

.listing-page-filters {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.listing-page .card {
    grid-column: 1/-1;
}

@media screen and (min-width: 768px) {
    .listing-page {
        grid-template-columns: repeat(4, 1fr);
    }

    .listing-page .card {
        grid-column: auto;
    }

    .listing-page-title {
        grid-column: 1;
    }

    .listing-page-filters {
        grid-column: 2/-2;
    }

    .listing-page-filters.full {
        grid-column: 2/-1;
    }

    .listing-page-toggle {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        grid-column: -2/-1;
        grid-row: 1;
    }
}

/*
    Listing Page: Projects

    The page itself is a plain block, with the columns on its two children:
    a sticky head (the filter + sort bar and the Highlights/Archive toggle)
    and the body below it. A sticky *grid item* is confined to its own grid
    area, so a bar placed on row 1 of a page-wide grid would have nowhere to
    travel - it has to sit outside that grid to follow the list down.
*/
.listing-page.projects-page {
    display: block;

    /* The height of .projects-head: one .line-container row of .text-small.
       What anything else that sticks on this page has to clear, so it comes
       to rest under the head instead of behind it. */
    --projects-head-height: 1.5rem;
}

.projects-head,
.projects-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 8px;
}

.projects-head {
    position: sticky;
    padding-top: 1px;
    top: calc(var(--header-height) + 1px);
    z-index: 2;
    background-color: white;
}

.projects-body {
    margin-top: 48px;
}

@media screen and (min-width: 768px) {
    .listing-page.projects-page {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .projects-head,
    .projects-body {
        grid-template-columns: repeat(4, 1fr);
    }

    .listing-page-filters.full {
        grid-column: 2/-1;
    }

}



/* Project Page */
.project-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 3rem 8px;
    padding: 5rem 8px 8px;
    min-height: 100dvh;
    align-content: start;
}

.project-page-header {
    display: contents;
}

.project-page-header-title {
    display: grid !important;
    grid-column: 1/-1;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.project-page-header-year {
    grid-column: 1;
}

.project-page-header-categories {
    grid-column: 2;
}

.project-page-text {
    display: none !important;
}

.project-page-text.active {
    display: block !important;
}

.project-page-text-button {
    grid-column: span 1;
    order: 1;
    width: fit-content;
    height: fit-content;
}

.project-page-text {
    order: 3;
}

.project-page-gallery {
    order: 4;
}

.project-page-credits {
    order: 5;
}

.project-page-description,
.project-page-text,
.project-page-credits {
    grid-column: 1/-1;
}

.project-page-credits {
    margin: 3rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
}

.project-page-credit-label,
.project-page-credit-value {
    margin: 0;
    border-top: var(--line-width) solid black;
    padding: 4px 0 8px;

}

.project-page-gallery {
    grid-column: 1/-1;
    display: grid;
    gap: 3rem 8px;
}

.project-page-gallery-item {
    cursor: pointer;
    border-top: var(--line-width) solid black;
    padding-top: 4px;
    height: fit-content;
}

.project-page-gallery-item:hover .dotted {
    border-top: var(--line-width) solid black;
    background-image: none;
    padding-top: 3px;
}

.project-page-gallery-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.project-page-gallery-item.is-filtered-out {
    display: none;
}

/* Project Page: Gallery Drawings
   data-drawing comes from the representation type's own "Technical Drawing"
   toggle (see arx_is_drawing), so a type can be renamed freely. */
body[data-drawings-bg="true"] .project-page-gallery-item[data-drawing="true"] picture {
    background-color: rgb(250, 250, 250);
}

body[data-drawings-bg="true"] .project-page-gallery-item[data-drawing="true"] img {
    mix-blend-mode: multiply;
}

/* Project Page: Tablet */
@media screen and (min-width: 640px) {
    .project-page-header {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 3rem 8px;
        z-index: 1;
    }

    .project-page-header-title {
        grid-column: 1/6;
    }

    .project-page-header-year {
        grid-column: 6/7;
    }

    .project-page-header-categories {
        grid-column: 7/9;
    }

    .project-page-text,
    .project-page-description,
    .project-page-credits {
        grid-column: 1/3;
    }

    .project-page-gallery {
        grid-column: 1/-1;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Project Page: Laptop */
@media screen and (min-width: 1024px) {
    .project-page-header {
        position: sticky;
        top: var(--header-height);
        padding: 4px 8px 4px;
        margin: 0 -8px;
        background-color: white;
    }

    .project-page-header-title {
        grid-column: 1/5;
    }

    .project-page-header-year {
        grid-column: 5/6;
    }

    .project-page-header-categories {
        grid-column: 7/9;
    }

    .project-page-text,
    .project-page-description,
    .project-page-credits {
        grid-column: 1;
    }

    .project-page-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*
    Publication Page (single)
*/
.publication-page,
.post-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 2rem 8px;
    padding: 5rem 8px 8px;
    min-height: 100dvh;
    align-content: start;
}

/* Breadcrumb */
.publication-page-breadcrumb,
.post-page-breadcrumb {
    display: none;
    grid-column: 1/3;
    height: fit-content;
}

.publication-page-header,
.post-page-header {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
    row-gap: 4px;
    align-items: start;
}

.publication-page-title,
.post-page-title {
    grid-column: 1/3;
    grid-row: 1;
}

.publication-page-date,
.post-page-date {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: fit-content;
}

.publication-page-categories {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.publication-page-author {
    grid-column: 1/-1;
    grid-row: 3;
    width: fit-content;
}

.publication-page-cover,
.post-page-cover,
.publication-page-content,
.post-page-content {
    grid-column: 1/-1;
}

.publication-page-cover,
.post-page-cover {
    border-top: var(--line-width) solid black;
    padding-top: 4px;
}

.publication-page-cover .figure-caption,
.post-page-cover .figure-caption {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.3em;
}

.publication-page-cover-tags,
.post-page-cover-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* Article Body */
.publication-page-content,
.post-page-content {
    border-top: var(--line-width) solid black;
    padding-top: 4px;
}

.publication-page-content .block-text,
.post-page-content .block-text {
    font-size: 16px;
    line-height: 1.375em;
}

.publication-page-content .block-text p:not(:last-child),
.post-page-content .block-text p:not(:last-child) {
    margin-bottom: 1em;
}

/* Publication + Post Page: Tablet */
@media screen and (min-width: 640px) {
    .publication-page,
    .post-page {
        grid-template-columns: repeat(12, 1fr);
    }

    .publication-page-header,
    .post-page-header {
        grid-template-columns: repeat(12, 1fr);
    }

    .publication-page-title,
    .post-page-title {
        grid-column: 1/7;
    }

    .publication-page-author {
        grid-column: 7/11;
        grid-row: 1;
    }

    .publication-page-date,
    .post-page-date {
        grid-column: 11/13;
        justify-self: start;
    }

    .publication-page-categories {
        grid-column: 7/13;
    }

    .publication-page-cover,
    .post-page-cover,
    .publication-page-content,
    .post-page-content {
        grid-column: 1/9;
    }
}

/*
    Publication + Post Page: Desktop
*/
@media screen and (min-width: 1024px) {
    .publication-page,
    .post-page {
        grid-template-columns: repeat(24, 1fr);
    }

    .publication-page-breadcrumb,
    .post-page-breadcrumb {
        display: block;
    }

    /* Publication */
    .publication-page-header {
        grid-column: 5/17;
        position: sticky;
        top: var(--header-height);
        z-index: 1;
        /* Same treatment as .project-page-header: a white band wide enough to
           cover the gaps between the cells, so the body text doesn't show
           through them on the way past. */
        padding: 4px 0;
        background-color: white;
    }

    /* Title, author, date and categories each get their own cells - the date
       and categories used to share 11/13, and the categories covered the
       year. */
    .publication-page-title {
        grid-column: 1/6;
    }

    .publication-page-author {
        grid-column: 6/9;
        grid-row: 1;
    }

    .publication-page-date {
        grid-column: 9/11;
        grid-row: 1;
    }

    .publication-page-categories {
        grid-column: 11/13;
        grid-row: 1;
        width: 100%;
    }

    .publication-page-cover,
    .publication-page-content {
        grid-column: 5/17;
    }

    /* Post */
    .post-page-header {
        grid-column: 5/15;
        grid-template-columns: repeat(10, 1fr);
    }

    .post-page-title {
        grid-column: 1/9;
    }

    .post-page-date {
        grid-column: 9/11;
    }

    .post-page-cover,
    .post-page-content {
        grid-column: 5/15;
    }

    .post-page-content {
        border-top: 0;
        padding-top: 0;
    }
}

/* Publication Page: Wide - two columns narrower on the left. The header's
   own grid drops to 10 columns to match, so its cells keep lining up with
   the page's. */
@media screen and (min-width: 1601px) {
    .publication-page-header,
    .publication-page-cover,
    .publication-page-content {
        grid-column: 7/17;
    }

    .publication-page-header {
        grid-template-columns: repeat(10, 1fr);
    }

    .publication-page-title {
        grid-column: 1/5;
    }

    .publication-page-author {
        grid-column: 5/7;
    }

    .publication-page-date {
        grid-column: 7/9;
    }

    .publication-page-categories {
        grid-column: 9/11;
    }
}


/*
    Projects Page: filter + sort bar

    One element above both views (highlights grid and archive table), doing
    the filtering and the sorting together - see snippets/projects-sort-head.
    Only the grid placement is held back for the wide layout; everything the
    controls look like applies at every width.
*/
.projects-bar {
    grid-column: 1/-1;
    display: grid;
    gap: 8px;
}

/* Title at one end of the cell, its icons at the other. While searching, the
   input is the one thing that grows, so it fills the space between them.

   Scoped through .projects-bar for the weight: every cell is also a
   .line-container, and that rule - further down this file, same weight -
   would otherwise win with its `display: block`, dropping the arrows onto a
   line of their own. Specificity rather than !important, which would beat
   the rule below it and put Location and Year back on the narrow layout. */
.projects-bar .projects-bar-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* .line-container > a is 100% wide, which inside a flex cell makes the title
   eat the row and push the icons to the far edge. Here it is just one item
   among the others. */
.projects-bar .projects-bar-label {
    width: auto;
}

/* Narrow layout: only the project name (with its search) and the category
   filter. Location and Year earn their place beside the table that shows
   those columns, which is wide-layout only. Scoped through .projects-bar so
   it outranks .projects-bar-cell whatever order the rules end up in. */
.projects-bar .projects-bar-location,
.projects-bar .projects-bar-year {
    display: none;
}

/* The icons travel together at the far end of the cell, so space-between has
   only the title and this group to separate. */
.projects-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.projects-bar-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Negative margin pulls the hit area back out of the line, so the arrows
   stay comfortable to click without adding height to the bar. */
.projects-bar-sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: -6px;
    opacity: 0.35;
}

.projects-bar-sort-btn svg {
    display: block;
    width: 10px;
    height: 10px;
}

.projects-bar-sort-btn-asc svg {
    rotate: 180deg;
}

.projects-bar-sort-btn:hover,
.projects-bar-sort-btn.active {
    opacity: 1;
}

/* Search: the input takes the label's place inside the Project cell, and the
   icon becomes a close icon. Both states live in the markup; only
   .is-searching decides which one shows. */
.projects-bar-search-input,
.projects-bar-project.is-searching .projects-bar-label,
.projects-bar-project.is-searching .projects-bar-search-icon-open,
.projects-bar-search-icon-close {
    display: none;
}

.projects-bar-project.is-searching .projects-bar-search-input,
.projects-bar-project.is-searching .projects-bar-search-icon-close {
    display: block;
}

.projects-bar-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: black;
    font: inherit;
}

/* The caret and the swapped-in close icon already say the field is live, so
   the site-wide focus ring would only box in the hairline. */
.projects-bar-search-input:focus,
.projects-bar-search-input:focus-visible {
    outline: none;
}

/* Safari draws its own clear button on type="search"; the close icon in the
   bar is the one that clears here. */
.projects-bar-search-input::-webkit-search-decoration,
.projects-bar-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.projects-bar-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: -6px;
    flex-shrink: 0;
    opacity: 0.35;
}

.projects-bar-search-toggle:hover,
.projects-bar-project.is-searching .projects-bar-search-toggle {
    opacity: 1;
}

.projects-bar-search-icon svg {
    display: block;
    width: 10px;
    height: 10px;
}

.projects-bar-search-icon-close svg {
    rotate: 45deg;
}

/* Projects Page: filter + sort bar - Desktop */
@media screen and (min-width: 1024px) {
    /* Shares its line with the Highlights/Archive toggle, which holds the
       fourth page column. Inside, it is the archive table's own nine columns
       with the same 4px gap, so every title sits over the column it sorts. */
    .projects-bar {
        grid-row: 1;
        grid-column: 1 / -2;
        grid-template-columns: repeat(9, 1fr);
    }

    .projects-bar .projects-bar-location,
    .projects-bar .projects-bar-year {
        display: flex;
    }

    .projects-bar-project {
        grid-column: 1 / 3;
    }

    .projects-bar-categories {
        grid-column: 4 / 5;
    }

    .projects-bar-location {
        grid-column: 6 / 7;
    }

    .projects-bar-year {
        grid-column: 8 / 9;
    }
}


/* Projects Page: Archive */
.projects-page-archive {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 48px 8px;
    align-content: start;
}

.archive-list {
    display: grid;
    gap: 16px 4px;
}

.archive-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4px 8px;
    margin-bottom: 1rem;
    position: relative;
}

/* Archive-only projects: catalogued, but with no page to open. They fall
   back only once the pointer is on the list - the difference matters when
   you are about to click, not while the table is just being read - and the
   hover treatment further down leaves them alone. */
.archive-list:hover .archive-row-no-page {
    opacity: 0.5;
}

.archive-cell-thumb.line-container {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    padding: 4px 0 0;
}

.archive-cell-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
}

.archive-cell-project,
.archive-cell-location {
    grid-column: 2;
}

.archive-cell-categories,
.archive-cell-year {
    display: none !important;
}

.archive-cell-meta {
    display: grid !important;
    grid-column: 2;
    grid-template-columns: 4.5rem 1fr;
    gap: 8px;
}

/* Archive: Preview Panel */
.archive-preview {
    display: none;
}

.archive-preview-item {
    display: none;
}

.archive-preview-item.active {
    display: block;
}

/* One picture per representation type, only the selected one showing - the
   same arrangement as a card's media, driven by the same code. */
.archive-preview-picture {
    display: none;
}

.archive-preview-picture.active {
    display: block;
}

body[data-drawings-bg="true"] .archive-preview-picture[data-drawing="true"] {
    background-color: rgb(250, 250, 250);
}

body[data-drawings-bg="true"] .archive-preview-picture[data-drawing="true"] .archive-preview-picture-image {
    mix-blend-mode: multiply;
}

/* Projects Page: Archive - Tablet */
@media screen and (min-width: 768px) {
    .archive-row {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 4px;
    }

    .archive-row {
        margin-bottom: 0;
    }

    .archive-cell-thumb,
    .archive-cell-meta {
        display: none !important;
    }

    .archive-cell-project,
    .archive-cell-location {
        border-top: var(--line-width) solid black;
        padding-top: 3.5px;
    }

    .archive-cell-project::before,
    .archive-cell-location::before {
        content: none;
    }

    .archive-cell-project {
        grid-column: 1 / 4;
    }
    
    .archive-cell-categories,
    .archive-cell-year {
        display: block !important;
    }

    .archive-cell-categories {
        grid-column: 4 / 6;
    }

    .archive-cell-location {
        grid-column: 6 / 8;
    }

    .archive-cell-year {
        grid-column: 8 / 9;
    }
}

/* Projects Page: Archive - Desktop */
@media screen and (min-width: 1024px) {
    .projects-page-archive {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto 1fr;
        align-items: start;
    }

    /* The header row lives inside .archive-list, so it is placed by the list,
       not by this grid - giving it a grid-column here would force the list to
       open that many implicit columns and scatter every project into a cell
       of its own. Being inside the list is also what lets it stay sticky for
       the whole length of the table rather than just its own row. */
    .archive-list {
        grid-column: 1 / 10;
    }

    /* Comes to rest just under the sticky head, not behind it. */
    .archive-preview {
        display: block;
        grid-row: 1;
        grid-column: 10 / 13;
        position: sticky;
        top: calc(var(--header-height) + var(--projects-head-height) + 1.5rem);
        align-self: start;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease;
        border-top: var(--line-width) solid black;
        padding-top: 4px;
    }

    .archive-preview:has(.archive-preview-item.active) {
        opacity: 1;
        visibility: visible;
    }

    .archive-preview-item img {
        display: block;
        width: 100%;
        aspect-ratio: 3/2;
        object-fit: cover;
        object-position: var(--focus, 50% 50%);
    }

    .archive-preview-text {
        margin-top: 8px;
    }

    /* Rows other than the hovered one drop to the same dotted hairline the
       rest of the site uses (.line-container.dotted), drawn as a pseudo
       element off the shared --dotted-line-* variables. Rows with no page
       are listed too: there is nothing to open, so pointing at one should
       not single it out. */
    .archive-list:hover .archive-row:not(:hover) .archive-cell,
    .archive-list:hover .archive-row-no-page .archive-cell {
        border-top: 0;
        padding-top: 3px;
    }

    .archive-list:hover .archive-row:not(:hover) .archive-cell::before,
    .archive-list:hover .archive-row-no-page .archive-cell::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-inline: auto;
        width: round(down, 100%, var(--dotted-line-pitch));
        height: var(--dotted-line-height);
        background-image: var(--dotted-line-image);
        background-repeat: repeat-x;
        background-position: top left;
        background-size: var(--dotted-line-pitch) var(--dotted-line-height);
    }
}


/* About Page */
.about-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px 8px;
    padding: 80px 8px 8px;
    min-height: 100dvh;
    align-content: start;
}

.about-page-label {
    align-self: start;
    height: fit-content;
}

.about-page-label-intro {
    display: none;
}

.about-page-section {
    margin-bottom: 3rem;
}

.about-page-team,
.about-page-prizes {
    display: flex;
    flex-direction: column;
}

.about-page-team-group,
.about-page-prize {
    border-top: var(--line-width) solid black;
}

.about-page-intro {
    padding-top: 4px !important;
}

.about-page-intro p:not(:last-child),
.about-page-info p:not(:last-child) {
    margin-bottom: 1em;
}

/* About Page: Team */
.about-page-team {
    gap: 48px;
}

/* One entry per member - partners first, then everyone else, in the order
   set by the Equipa structure in the Panel. Members without a photo keep an
   empty frame so the grid stays regular. */
.about-page-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 8px;
}

.about-page-team-member {
    display: flex;
    flex-direction: column;
    border-top: var(--line-width) solid black;
    padding-top: 4px;
}

.about-page-team-member-photo {
    aspect-ratio: 1/1;
    background-color: rgb(250, 250, 250);
    overflow: hidden;
    margin-bottom: 4px;
}

.about-page-team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
}

.about-page-team-member-name,
.about-page-team-member-role {
    margin: 0;
}

.about-page-team-member-name {
    margin-bottom: 4px;
}



.about-page-team-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 4px 0 24px;
}

.about-page-team-group-value p {
    margin: 0;
}

.about-page-team-group-full,
.about-page-team-group.active .about-page-team-group-excerpt {
    display: none;
}

.about-page-team-group.active .about-page-team-group-full {
    display: block;
}

/* About Page: Prizes */
.about-page-prizes {
    gap: 12px;
}

.about-page-prize {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 8px;
    padding-top: 3px;
}

/* Scoped through the list for the weight: .about-page-prize re-declares its
   display further down, inside the 1024px block, and at equal weight that
   later rule would win and show the hidden prizes again. */
.about-page-prizes .about-page-prize-extra {
    display: none;
}

.about-page-prizes.active .about-page-prize-extra {
    display: grid;
}

.about-page-prize-year {
    min-width: 0;
}

.about-page-prize-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.about-page-prize-title {
    margin: 0;
}

.about-page-prize-project p {
    margin: 0;
}

.about-page-prize-project a {
    text-decoration: underline;
}

.about-page-see-more {
    width: fit-content;
    margin-top: 1rem !important;
}

.about-page-prizes > .about-page-see-more {
    margin-left: 63px;
}

/* About Page: Desktop */
@media screen and (min-width: 1024px) {
    .about-page {
        grid-template-columns: repeat(24, 1fr);
        column-gap: 8px;
        row-gap: 64px;
    }

    .about-page-label {
        grid-column: 1/3;
    }

    .about-page-label-intro {
        display: block;
    }

    .about-page-section {
        grid-column: 5/17;
    }

    .about-page-info {
        grid-column: 18/25;
        grid-row: 1;
        align-self: start;
    }

    /* Four columns: the label or the year in the first, everything else -
       the names, the prize, the "read more" button - in the other three. */
    .about-page-team-group,
    .about-page-prize {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 8px;
    }

    .about-page-team-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .about-page-team-group-label,
    .about-page-prize-year {
        grid-column: 1;
    }

    .about-page-team-group-value,
    .about-page-prize-content {
        grid-column: 2 / -1;
    }

    /* The prizes button is a sibling of the rows, not a cell of one, so it
       is pushed across by hand: one column plus one gap of the list's width,
       to start where the content column starts. */
    .about-page-prizes > .about-page-see-more {
        margin-left: calc((100% - 24px) / 4 + 8px);
    }
}

/* About Page: Wide - two columns narrower on each side of the section, one on
   the right of the info */
@media screen and (min-width: 1601px) {
    .about-page-section {
        grid-column: 7/15;
    }

    .about-page-info {
        grid-column: 18/22;
    }
}


/*
    Components
*/

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    border-top: var(--line-width) solid black;
    border-radius: 0;
    background-color: white;
    color: black;
    font: inherit;
    padding-right: 1rem;
}

select::-ms-expand {
    display: none;
}

/* Filter dropdown - shared by the representation type filter in the
   header and the project type filter on the Projects page. Opening and
   closing are handled by toggleDropdown()/closeDropdowns() in main.js,
   keyed on [data-dropdown]. */
.filter-select {
    position: relative;
    height: fit-content;
}

.filter-select-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font: inherit;
    color: black;
}

.filter-select .line-container-icon {
    flex-shrink: 0;
    transition: rotate 0.15s ease;
}

.filter-select.is-open .line-container-icon {
    rotate: 180deg;
}

.filter-select-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: white;
    z-index: 5;
    max-height: 40vh;
    overflow-y: auto;
}

.filter-select.is-open .filter-select-list {
    display: block;
}

.filter-select-option {
    display: block;
    width: 100%;
    padding: 4px 4px 6px;
}

.filter-select-list .filter-select-option {
    background-image: repeating-linear-gradient(to right,
        black 0px,
        black var(--line-width),
        transparent var(--line-width),
        transparent 5px);
    background-position: top left;
    background-size: auto var(--line-width);
    background-repeat: repeat-x;
}

.filter-select-option:hover,
.filter-select-option.active {
    background-image: none;
    border-top: var(--line-width) solid black;
    padding-top: 2px;
}

/* Line Container */
/* One thickness for every solid hairline on the site - the line-container
   rule and every border-top that imitates it. */
:root {
    --line-width: 1.25px;
}

.line-container {
    display: block;
    position: relative;
    background-color: white;
    border-top: var(--line-width) solid black;
    padding: 2px;
    margin-top: calc(var(--line-width) * -1);
    height: fit-content;
}

.line-container.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.line-container.dotted {
    padding-top: 4px;
    border-top: none;
}

/* The dot pattern itself lives here, in variables, because the archive's
   hover state draws the same hairline from its own rule (see "Projects Page:
   Archive - Desktop"). Change the dots once, both follow. */
:root {
    --dotted-line-pitch: 6px;
    --dotted-line-height: 2px;
    --dotted-line-image: radial-gradient(circle, black 1px, transparent 1px);
}

.line-container.dotted::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: round(down, 100%, var(--dotted-line-pitch));
    height: var(--dotted-line-height);
    background-image: var(--dotted-line-image);
    background-repeat: repeat-x;
    background-position: top left;
    background-size: var(--dotted-line-pitch) var(--dotted-line-height);
}

.line-container.dotted.link.active,
.line-container.dotted.link:hover {
    padding-top: 3px;
    border-top: var(--line-width) solid black;
}

.line-container.dotted.link.active::before,
.line-container.dotted.link:hover::before,
.project-page-gallery-item:hover .dotted::before {
    display: none;
}

.line-container > a {
    display: block;
    width: 100%;
}

.line-container-icon {
    translate: 0 1px;
    transition: rotate 0.15s ease;
}

.line-container.active .line-container-icon {
    rotate: 45deg;
}


/*
    Card
*/
.card {
    padding-bottom: 4px;
    position: relative;
    border-top: var(--line-width) solid black;
}

/* A project card with no image of the selected representation type drops out
   of the listing - see applyRepresentationType in main.js. */
.card.is-filtered-out {
    display: none;
}

/* Dropped by the Projects bar's name search - a separate class from the
   representation filter above, so the two can be on at once without one
   clearing the other's work. */
.card.is-search-hidden,
.archive-row.is-search-hidden {
    display: none;
}

/* Card: Media */
.card-media {
    margin-top: 4px;
    aspect-ratio: 3/2;
    background-color: rgb(250, 250, 250);
    margin-bottom: 4px;
}

.card-media-picture {
    display: none;
    margin-bottom: 4px;
    height: 100%;
    width: 100%;
}

.card-media-picture.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-media-picture-image {
    max-width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
}

/* Card: Media Drawings */
body[data-drawings-bg="true"] .card-media-picture[data-drawing="true"] {
    background-color: rgb(250, 250, 250);
}

body[data-drawings-bg="true"] .card-media-picture[data-drawing="true"] .card-media-picture-image {
    mix-blend-mode: multiply;
}

/* Card: Title */
.card-title {
    margin-bottom: 6px;
}

/* Sits right under the title, before the tag row, carrying its own hairline.
   The positive margin replaces the -1px .line-container uses to sit flush on
   whatever is above it. */
.card-location {
    margin-top: 4px;
    margin-bottom: 6px;
}

.card-description {
    padding-top: 2px;
    margin-bottom: 8px;
}

.card-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}


/* 
    Footer 
*/

.footer {
    padding: 8px;
    margin-top: 6rem;
}

.footer-company,
.footer-address,
.footer-contacts,
.footer-copyright {
    border-top: var(--line-width) solid black;
    padding-top: 3px;
    grid-column: 1/-1;
}


@media screen and (min-width: 768px) {
    .footer-company {
        grid-column: 1/5;
    }

    .footer-address {
        grid-column: 5/9;
    }

    .footer-contacts {
        grid-column: 9/13;
    }

    .footer-copyright {
        grid-column: -7/-1;
    }

}


/* Error Page */
.error-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 80px 8px 8px;
    min-height: calc(100dvh - 88px - 4rem);
    align-content: start;
}

.error-page-text {
    margin: 0;
}

.error-page-link {
    width: fit-content;
}


/* Panel Guide Page */
.panel-guide-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 32px 8px;
    padding: 80px 8px 8px;
    min-height: 100svh;
    align-content: start;
}

@media screen and (min-width: 640px) {
    .panel-guide-page {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .panel-guide-page {
        grid-template-columns: repeat(12, 1fr);
    }
}

.panel-guide-title {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-guide-toc {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.panel-guide-content {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 32px 8px;
    align-content: start;
}

.panel-guide-block {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 12px 8px;
    align-content: start;
    margin-bottom: 4rem;
    scroll-margin-top: 80px;
}

.panel-guide-heading {
    grid-column: 1/-1;
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.panel-guide-idx {
    opacity: 0.5;
}

.panel-guide-intro,
.panel-guide-description {
    grid-column: 1/-1;
    margin: 0;
}

.panel-guide-subheading {
    grid-column: 1/-1;
    margin: 2rem 0 0;
    border-top: var(--line-width) solid black;
    padding-top: 3px;
    text-transform: uppercase;
}

.panel-guide-list {
    grid-column: 1/-1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.panel-guide-list li {
    border-top: var(--line-width) solid black;
    padding: 3px 0 6px;
    margin: 0;
}

.panel-guide-field {
    text-transform: uppercase;
    font-size: 10px;
    border: var(--line-width) solid black;
    padding: 1px 4px;
    white-space: nowrap;
}

.panel-guide-table {
    grid-column: 1/-1;
    width: 100%;
    border-collapse: collapse;
}

.panel-guide-table th,
.panel-guide-table td {
    text-align: left;
    padding: 6px 12px 6px 0;
    border-top: var(--line-width) solid black;
    vertical-align: top;
    font-weight: 400;
}

.panel-guide-table thead th {
    text-transform: uppercase;
    font-size: 10px;
    opacity: 0.6;
}

.panel-guide-note {
    grid-column: 1/-1;
    border-top: var(--line-width) solid black;
    padding-top: 4px;
    margin: 0;
    text-transform: uppercase;
}

.panel-guide-tree {
    grid-column: 1/-1;
    white-space: pre;
    overflow-x: auto;
    font-family: inherit;
    margin: 0;
    padding-top: 4px;
}

@media screen and (min-width: 1024px) {
    /* The TOC's grid area spans the full height of the content beside it,
       so sticky keeps it in view all the way down the guide. */
    .panel-guide-toc {
        grid-column: 1/3;
        align-self: start;
        position: sticky;
        top: 80px;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .panel-guide-title {
        grid-column: 1/3;
    }

    .panel-guide-content {
        grid-column: 4/10;
        grid-row: 2;
    }
}