.registrations-page {
    --reg-accent: #c8901f;
    --reg-meta: #55575c;
    --reg-rule: #97a2b3;        /* the dashed separators */
    --reg-box-line: #c9ccd2;    /* the dashed logo frame */
    --reg-box-empty: #f2f3f5;   /* fill when a body has no logo yet */
    --reg-card-line: #e6e9ef;

    --reg-card-body: var(--secondary-color);
    --reg-card-body: color-mix(in srgb, var(--secondary-color) 30%, #fff);

    --reg-max-w: 75rem;

    --reg-logo-col: 13rem;
    --reg-date-col: 13rem;
    --reg-gap: 2.5rem;

    --reg-logo-max-h: 8rem;
}

.reg-intro {
    max-width: 62ch;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.reg-table {
    max-width: var(--reg-max-w);
    margin-bottom: 4rem;
}

.reg-head {
    display: grid;
    grid-template-columns: var(--reg-logo-col) minmax(0, 1fr) var(--reg-date-col);
    column-gap: var(--reg-gap);
    padding-bottom: .85rem;
    border-bottom: 1px dashed var(--reg-rule);
}

.reg-head-label {
    font-size: .95rem;
    font-weight: 700;
    color: var(--reg-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .3rem;
}

.reg-org {
    display: grid;
    grid-template-columns: var(--reg-logo-col) minmax(0, 1fr) var(--reg-date-col);
    column-gap: var(--reg-gap);
    /* Centred rather than start-aligned so the logo sits against the middle of a
       three entry stack instead of hanging off its first line. */
    align-items: center;
    padding: 2rem 0;
}

.reg-org + .reg-org {
    border-top: 1px dashed var(--reg-rule);
}

.reg-org-head {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.reg-org-logo {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: .75rem;
    border: 1px dashed var(--reg-box-line);
    border-radius: .25rem;
    background: #fff;
}

/* A body with no logo yet still draws its frame, so the row keeps its shape. */
.reg-org-logo.is-empty {
    background: var(--reg-box-empty);
}

.reg-org-logo img {
    max-width: 100%;
    max-height: var(--reg-logo-max-h);
    object-fit: contain;
}

.reg-org-name {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    /* Ministry names run to two lines; balance keeps the second one from being a
       single orphaned word under a full first line. */
    text-wrap: balance;
    color: var(--primary-color);
}

.reg-org-entries {
    grid-column: 2 / -1;
}

.reg-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--reg-date-col);
    column-gap: var(--reg-gap);
    align-items: baseline;
}

.reg-entry + .reg-entry {
    margin-top: 1.35rem;
}

.reg-entry-label {
    grid-column: 1 / -1;
    margin: 0 0 .15rem;
    font-size: .85rem;
    color: var(--primary-color);
}

.reg-entry-number {
    margin: 0;
}

.reg-entry-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

.reg-entry-expiry {
    margin: 0;
    color: var(--reg-meta);
}

.reg-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.reg-empty {
    padding: 2.5rem 0;
    color: var(--reg-meta);
}

@media (max-width: 991.98px) {
    .registrations-page {
        --reg-logo-col: 10rem;
        --reg-date-col: 10.5rem;
        --reg-gap: 1.5rem;
        --reg-logo-max-h: 5.75rem;
    }

    .reg-entry-value {
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .registrations-page {
        --reg-logo-max-h: 2.75rem;
    }

    .reg-head {
        display: none;
    }

    .reg-org {
        display: block;
        padding: 0;
        margin-bottom: 1rem;
        border: 1px solid var(--reg-card-line);
        border-radius: .75rem;
        overflow: hidden;
        background: var(--reg-card-body);
    }

    .reg-org + .reg-org {
        border-top: 1px solid var(--reg-card-line);
    }

    .reg-org-head {
        flex-direction: row;
        align-items: center;
        gap: .75rem;
        padding: .75rem .9rem;
        background: #fff;
        border-bottom: 1px solid var(--reg-card-line);
    }

    .reg-org-logo {
        flex: 0 0 3.25rem;
        width: 3.25rem;
        aspect-ratio: 1;
        padding: .25rem;
    }

    .reg-org-name {
        text-align: left;
        font-size: .78rem;
    }

    .reg-org-entries {
        padding: 0 .9rem;
    }

    .reg-entry {
        display: block;
        padding: .9rem 0;
    }

    .reg-entry + .reg-entry {
        margin-top: 0;
        border-top: 1px solid var(--reg-card-line);
    }

    .reg-entry-number {
        margin-bottom: .15rem;
    }

    /* Out of the clip and back into the layout. */
    .reg-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }

    .reg-entry-number .reg-label {
        display: block;
        margin-bottom: .1rem;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--reg-accent);
    }

    .reg-entry-expiry .reg-label {
        margin-right: .4rem;
        font-size: .68rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--reg-meta);
    }

    .reg-entry-expiry {
        font-size: .9rem;
    }
}