.hp {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.hp-title {
    font-size: var(--type-h1);
    line-height: var(--leading-h1);
    font-weight: 600;
}

.hp-strapline {
    margin-top: var(--space-2);
    font-size: var(--type-h3);
    line-height: var(--leading-h3);
    color: var(--text-muted);
}

.hp-prose {
    font-family: var(--font-prose);
    font-size: var(--type-body);
    line-height: var(--leading-body);
    max-width: var(--prose-measure);
}

.hp-prose > * + * {
    margin-top: var(--space-4);
}

.hp-prose--centred {
    margin-left: auto;
    margin-right: auto;
}

.hp-list {
    padding-left: var(--space-5);
}

.hp-list li + li {
    margin-top: var(--space-2);
}

.hp-figure {
    margin: 0;
}

.hp-image {
    display: block;
    width: 100%;
    aspect-ratio: var(--hp-ratio, 3 / 2);
    object-fit: cover;
    background: var(--bg-surface);
    border: var(--border-hairline-width) solid var(--border-hairline);
    border-radius: var(--radius-card);
}

.hp-caption {
    margin-top: var(--space-2);
    font-size: var(--type-small);
    line-height: var(--leading-dense);
    color: var(--text-muted);
}

.hp-footnote {
    font-size: var(--type-small);
    color: var(--text-muted);
}

/* A full-width photograph with the title on a plate over its foot */

.hp-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 48rem) {
    .hp-hero--overlay {
        display: grid;
        grid-template-areas: "stack";
        gap: 0;
    }

    .hp-hero--overlay > * {
        grid-area: stack;
    }

    .hp-hero--overlay .hp-hero__plate {
        align-self: end;
        justify-self: start;
        max-width: 48ch;
        margin: var(--space-5);
        padding: var(--space-4) var(--space-5);
        background: var(--bg-page);
        border: var(--border-strong-width) solid var(--border-strong);
        border-radius: var(--radius-card);
    }
}

/* A portrait photograph beside the introduction */

.hp-split {
    display: grid;
    gap: var(--space-5);
}

.hp-split__text > * + * {
    margin-top: var(--space-4);
}

@media (min-width: 48rem) {
    .hp-split--with-image {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: start;
    }
}

/* A centred introduction above a row of captioned photographs */

.hp-measure > * + *,
.hp-centred > * + * {
    margin-top: var(--space-4);
}

.hp-centred {
    text-align: center;
}

.hp-centred .hp-prose {
    text-align: left;
}

.hp-row {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .hp-row--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* A mosaic of photographs with a text panel set into it */

.hp-mosaic {
    display: grid;
    gap: var(--space-4);
}

.hp-mosaic__panel {
    padding: var(--space-5);
    background: var(--bg-surface);
    border: var(--border-hairline-width) solid var(--border-hairline);
    border-radius: var(--radius-card);
}

.hp-mosaic__panel > * + * {
    margin-top: var(--space-4);
}

@media (min-width: 48rem) {
    .hp-mosaic--with-images {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: dense;
        align-items: start;
    }

    .hp-mosaic__panel,
    .hp-mosaic__one,
    .hp-mosaic__four {
        grid-column: span 2;
    }
}

/* Alternating bands of photograph and text */

.hp-band {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: var(--border-hairline-width) solid var(--border-hairline);
}

.hp-band__heading {
    margin-bottom: var(--space-3);
}

@media (min-width: 48rem) {
    .hp-band--with-image {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }

    .hp-band--with-image.hp-band--reversed .hp-band__figure {
        order: 2;
    }
}

/* Words only, in the prose face at the prose measure */

.hp--written {
    max-width: var(--prose-measure);
    gap: var(--space-4);
}

.hp--written .hp-title,
.hp-opening {
    font-family: var(--font-prose);
}

.hp-opening {
    font-size: var(--type-h3);
    line-height: var(--leading-h3);
}

/* Four cards as entry points */

.hp-cards {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: var(--border-hairline-width) solid var(--border-hairline);
    border-radius: var(--radius-card);
}

.hp-card__link a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-weight: 500;
}

@media (min-width: 48rem) {
    .hp-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .hp-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* A strip of dated photographs */

.hp-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .hp-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.hp-measure {
    max-width: var(--prose-measure);
}

/* The editor */

.hp-admin {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.hp-admin__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: var(--border-hairline-width) solid var(--border-hairline);
}

.hp-admin__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.hp-notice {
    padding-left: var(--space-3);
    border-left: var(--border-strong-width) solid var(--success);
}

.hp-layouts-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.hp-layouts {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-page);
    border: var(--border-hairline-width) solid var(--border-strong);
    border-radius: var(--radius-card);
}

.hp-layout--current {
    border: var(--border-strong-width) solid var(--link);
}

.hp-layout--chosen {
    background: var(--bg-surface);
    border-color: var(--link);
}

.hp-layout__choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
}

.hp-layout__choice input {
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    flex: none;
}

.hp-layout__choice label {
    margin: 0;
    font-weight: 600;
}

.hp-layout__description {
    color: var(--text-muted);
}

.hp-layout .chip {
    align-self: flex-start;
}

.hp-diagram {
    display: block;
    width: 100%;
    height: auto;
    background: var(--bg-page);
    border: var(--border-hairline-width) solid var(--border-hairline);
    border-radius: var(--radius-input);
}

.hp-diagram__photo {
    fill: var(--bg-surface);
    stroke: var(--border-strong);
    stroke-width: 1.5;
}

.hp-diagram__panel {
    fill: var(--bg-surface);
    stroke: var(--border-strong);
    stroke-width: 1;
}

.hp-diagram__title {
    fill: var(--text-primary);
}

.hp-diagram__line {
    fill: var(--text-muted);
}

.hp-admin .field {
    max-width: 44rem;
}

.hp-admin .field label {
    display: block;
}

.hp-admin .field input[type="text"],
.hp-admin .field input[type="search"],
.hp-admin .field textarea {
    display: block;
    width: 100%;
}

.hp-hint {
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: var(--type-small);
}

.field__error {
    margin-bottom: var(--space-1);
    color: var(--danger);
    font-weight: 500;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--danger);
}

.error-summary__title {
    font-size: var(--type-h3);
    line-height: var(--leading-h3);
}

.error-summary__list {
    margin-top: var(--space-2);
    padding-left: var(--space-5);
}

.error-summary__list li + li {
    margin-top: var(--space-1);
}

.error-summary__list a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: var(--danger);
}

.hp-image-field,
.hp-link-field {
    margin: 0;
    padding: var(--space-4);
    background: var(--bg-surface);
    border: var(--border-hairline-width) solid var(--border-hairline);
    border-radius: var(--radius-card);
}

.hp-image-field legend,
.hp-link-field legend {
    padding: 0 var(--space-2);
    font-weight: 600;
}

.hp-image-field__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.hp-thumb {
    width: 8rem;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--bg-page);
    border: var(--border-hairline-width) solid var(--border-strong);
    border-radius: var(--radius-input);
}

.hp-picker {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-picker__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: var(--border-hairline-width) solid var(--border-hairline);
    border-radius: var(--radius-card);
}

.hp-picker__search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.hp-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: var(--border-strong-width) solid var(--warning);
    border-radius: var(--radius-card);
}

.hp-preview__text {
    font-weight: 600;
}

@media print {
    .hp,
    .hp-split,
    .hp-mosaic,
    .hp-band,
    .hp-cards,
    .hp-row,
    .hp-strip {
        display: block;
    }

    .hp-hero--overlay .hp-hero__plate {
        margin: 0;
        border: 0;
    }

    .hp-figure,
    .hp-card,
    .hp-band {
        margin-bottom: var(--space-5);
        break-inside: avoid;
    }

    .hp-image {
        max-height: 10cm;
        border: 0;
    }

    .hp-mosaic__panel,
    .hp-card {
        background: none;
        border: 0;
        padding: 0;
    }
}