* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-surface-base);
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.6;
}

body.MenuOpen {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: var(--line-height-title);
    letter-spacing: -0.035em;
}

h1 {
    max-width: 860px;
    margin-bottom: 24px;
    font-size: var(--font-size-page-title);
}

h2 {
    max-width: 860px;
    margin-bottom: 22px;
    font-size: var(--font-size-section-title);
}

h3 {
    font-size: var(--font-size-card-title);
}

.Container {
    width: min(calc(100% - clamp(72px, 6.6vw, 128px)), var(--container));
    margin-right: auto;
    margin-left: auto;
}

.SkipLink {
    background: var(--color-surface-dark);
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 12px 18px;
    color: var(--color-surface-base);
    transform: translateY(-160%);
}

.SkipLink:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--color-brand-primary-focus);
    outline-offset: 4px;
}

.ContentPage {
    min-height: 65vh;
    padding: 96px 0;
}

.ContentPage__Inner {
    max-width: 920px;
}

.ContentPage__Inner--Centered {
    text-align: center;
}

.ContentPage__Inner > .Eyebrow,
.EntryContent > .Eyebrow {
    margin-bottom: 14px;
}

.ContentPage__Inner--Centered > p:not(.Eyebrow) {
    max-width: 720px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lead);
    line-height: var(--line-height-lead);
}

.ArchivePage__Description {
    max-width: 760px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lead);
    line-height: var(--line-height-lead);
}

.ArchivePage__Description > :last-child {
    margin-bottom: 0;
}

.EntryContent > * + * {
    margin-top: 24px;
}

.ArchiveGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.ArchiveCard {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-medium);
    padding: 32px;
}

.ArchiveCard h2 {
    margin-bottom: 14px;
    font-size: var(--font-size-card-title);
}

.ArchiveCard p {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.EntryContent p,
.EntryContent li {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lead);
    line-height: var(--line-height-lead);
}

/* Styling structured content tables */
.EntryContent .wp-block-table {
    margin: 32px 0;
    overflow-x: auto;
}

.EntryContent table {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--color-border-default);
    border-collapse: separate;
    border-radius: var(--radius-small);
    border-spacing: 0;
    width: 100%;
    margin: 32px 0;
    overflow: hidden;
}

.EntryContent .wp-block-table table {
    margin: 0;
}

.EntryContent th,
.EntryContent td {
    padding: 18px 20px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.EntryContent thead th {
    background: var(--color-surface-dark);
    color: var(--color-surface-base);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.EntryContent tbody tr:not(:last-child) > * {
    border-bottom: 1px solid var(--color-border-default);
}

.EntryContent tbody th {
    background: var(--color-surface-muted);
    width: 34%;
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: 650;
}

.EntryContent td {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

/* Styling structured content definition lists */
.EntryContent > dl {
    display: grid;
    grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-small);
    margin: 32px 0;
    overflow: hidden;
}

.EntryContent > dl dt,
.EntryContent > dl dd {
    border-bottom: 1px solid var(--color-border-default);
    padding: 16px 20px;
    overflow-wrap: anywhere;
}

.EntryContent > dl dt {
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.EntryContent > dl dd {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: 650;
}

.EntryContent > dl > :nth-last-child(-n + 2) {
    border-bottom: 0;
}

@media screen and (max-width: 760px){
    body {
        font-size: 17px;
    }

    .Container {
        width: calc(100% - 36px);
    }

    h1 {
        font-size: var(--font-size-page-title-mobile);
        overflow-wrap: anywhere;
    }

    .ArchiveGrid {
        grid-template-columns: 1fr;
    }

    .EntryContent th,
    .EntryContent td {
        padding: 14px;
        font-size: 14px;
    }

    .EntryContent > dl {
        grid-template-columns: 1fr;
    }

    .EntryContent > dl dt {
        border-bottom: 0;
        padding: 14px 16px 4px;
    }

    .EntryContent > dl dd {
        padding: 0 16px 14px;
    }

    .EntryContent > dl dd:not(:last-child) {
        border-bottom: 1px solid var(--color-border-default);
    }
}