/* IT Leaders Network: tokens and base styles. The design system is in docs/design.md. */

:root {
    --ink: #0B1220;
    --ink-2: #344054;
    --muted: #667085;
    --line: #E4E7EC;
    --paper: #F8F8F6;
    --surface: #FFFFFF;
    --accent: #0B6E5F;
    --accent-hover: #08594D;
    --accent-tint: #E7F2EF;
    --highlight: #C2710C;
    --danger: #B42318;
    --success: #067647;

    /* Secondary text on --ink sections; --muted is below AA contrast there. */
    --on-ink: #FFFFFF;
    --on-ink-muted: #A4ACB9;
    --on-ink-line: #243044;

    /* Form control borders need 3:1 against the page (WCAG 1.4.11); --line is too faint. */
    --line-strong: #858D9A;
    --danger-tint: #FEF3F2;
    --danger-line: #FECDCA;
    --success-tint: #ECFDF3;
    --success-line: #ABEFC6;
    /* --highlight darkened to pass AA as small text (5.5:1 on white). */
    --warning: #9A5A0A;

    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --content-width: 1200px;
    --reading-width: 720px;
    --gutter: 20px;

    --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 960px) {
    :root {
        --gutter: 32px;
    }
}

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--accent-hover);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

svg {
    display: block;
}

.mono {
    font-family: var(--font-mono);
}

.container {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

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

/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}

.button--primary {
    background: var(--accent);
    color: var(--on-ink);
}

.button--primary:hover {
    background: var(--accent-hover);
    color: var(--on-ink);
}

.button--secondary {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--ink);
}

.button--secondary:hover {
    border-color: var(--ink-2);
    color: var(--ink);
}

.button--on-ink {
    background: var(--on-ink);
    color: var(--ink);
}

.button--on-ink:hover {
    background: var(--accent-tint);
    color: var(--ink);
}

.button--small {
    min-height: 36px;
    padding: 6px 14px;
    font-size: var(--text-sm);
}

.button--block {
    width: 100%;
}

/* Alerts and flash messages */

.alert {
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.alert--error {
    border-color: var(--danger-line);
    background: var(--danger-tint);
    color: var(--danger);
}

.alert--success {
    border-color: var(--success-line);
    background: var(--success-tint);
    color: var(--success);
}

.alert--info {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink-2);
}

.flash {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-5);
}

/* Forms */

.form {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

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

@media (min-width: 640px) {
    .form__pair {
        grid-template-columns: 1fr 1fr;
    }
}

.form__note {
    color: var(--muted);
    font-size: var(--text-sm);
}

/* Holds the Turnstile widget's height while it loads, so the button doesn't jump. */
.turnstile {
    min-height: 65px;
}

.field {
    display: grid;
    gap: 6px;
    align-content: start;
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 500;
}

.field__hint {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.field__error {
    color: var(--danger);
    font-size: var(--text-sm);
    font-weight: 500;
}

.input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

/* Browsers ignore line-height on selects, so match the text inputs' height directly. */
select.input:not(.input--small) {
    height: calc(1.6em + 22px);
}

.input:focus-visible {
    border-color: var(--accent);
    outline-offset: 0;
}

.field--error .input {
    border-color: var(--danger);
}

/* The corner-bracket motif from the logo: heavy square corners, top-left and bottom-right. */

.frame {
    position: relative;
}

.frame::before,
.frame::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.frame::before {
    top: -1px;
    left: -1px;
    border-top: 4px solid var(--accent);
    border-left: 4px solid var(--accent);
}

.frame::after {
    right: -1px;
    bottom: -1px;
    border-right: 4px solid var(--accent);
    border-bottom: 4px solid var(--accent);
}

/* Shown above the header while an admin is logged in as a member. */

.impersonation {
    background: var(--ink);
    color: var(--on-ink);
    font-size: var(--text-sm);
}

.impersonation :focus-visible {
    outline-color: var(--on-ink);
}

.impersonation__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-3);
}

/* The logo's square node, in the highlight colour so the bar can't be mistaken for the header. */
.impersonation__text::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: var(--space-3);
    background: var(--highlight);
    vertical-align: 0.05em;
}

.impersonation form {
    margin: 0;
}

/* Admin > Settings > Site banner: a notice above the header, e.g. planned maintenance. */

.site-banner {
    border-bottom: 1px solid var(--line);
    background: var(--accent-tint);
    color: var(--ink);
    font-size: var(--text-sm);
}

.site-banner__text {
    padding-block: var(--space-3);
}

.site-banner__text::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: var(--space-3);
    background: var(--accent);
    vertical-align: 0.05em;
}

/* Header */

.site-header {
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    min-height: 64px;
    padding-block: var(--space-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.brand:hover {
    color: var(--ink);
}

.brand__mark {
    width: 24px;
    height: 24px;
    fill: var(--accent);
}

.brand__muted {
    color: var(--muted);
}

.site-header__note {
    display: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
}

@media (min-width: 640px) {
    .site-header__note {
        display: block;
    }
}

/* On phones a menu button beside the logo opens the links as a panel underneath (the rules under
   "Phone menu" below). From 640px the links sit on the logo's line and the button goes. Without
   JavaScript there's no button and the links wrap under the logo. */
.site-header__menus {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.primary-nav {
    display: flex;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .primary-nav {
        gap: var(--space-4);
    }
}

.primary-nav__link {
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}

.primary-nav__link:hover,
.primary-nav__link[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.site-nav form {
    margin: 0;
}

/* "Apply to join" is just "Apply" on phones. The header wraps both words in one span so the
   button's gap doesn't widen the space before "to join". */
.site-nav__wide {
    display: none;
}

@media (min-width: 640px) {
    .site-nav {
        gap: var(--space-4);
    }

    .site-nav__wide {
        display: inline;
    }
}

.site-nav__link {
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}

.site-nav__link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Phone menu. The header partial sets data-menu on the header as it loads ("closed", then "open"
   when the button is pressed), so these rules only apply with JavaScript. The bell, or "Log in"
   for visitors, is shown beside the button, outside the panel. */
.site-header__tools {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.menu-toggle__icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.menu-toggle__icon--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
    display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
    display: block;
}

@media (max-width: 639.98px) {
    .site-header[data-menu] .site-header__tools {
        display: flex;
    }

    /* The bell and "Log in" sit beside the menu button on phones, so they go from the panel. */
    .site-header[data-menu] .site-nav .bell,
    .site-header[data-menu] .site-nav__link--login {
        display: none;
    }

    .site-header[data-menu="closed"] .site-header__menus {
        display: none;
    }

    .site-header[data-menu="open"] .site-header__menus {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--line);
    }

    .site-header[data-menu="open"] .primary-nav,
    .site-header[data-menu="open"] .site-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Each link is a 44px row, the size of a finger. */
    .site-header[data-menu="open"] .primary-nav__link,
    .site-header[data-menu="open"] .site-nav__link {
        padding-block: var(--space-3);
        font-size: var(--text-md);
    }

    .site-header[data-menu="open"] .primary-nav__link[aria-current="page"] {
        text-decoration: none;
        color: var(--accent);
    }

    .site-header[data-menu="open"] .site-nav form,
    .site-header[data-menu="open"] .site-nav .button {
        margin-top: var(--space-2);
    }

    .site-header[data-menu="open"] .site-nav .button {
        align-self: flex-start;
    }

    .site-header[data-menu="open"] .site-nav__wide {
        display: inline;
    }
}

/* Hero */

.hero {
    padding-block: var(--space-7) var(--space-8);
}

.hero__grid {
    display: grid;
    gap: var(--space-7);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 10px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* The logo's square node. */
.status::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
}

.hero__title {
    max-width: 15ch;
    margin-top: var(--space-5);
    font-size: var(--text-3xl);
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.hero__lead {
    max-width: 56ch;
    margin-top: var(--space-5);
    color: var(--ink-2);
    font-size: var(--text-lg);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.roles {
    align-self: end;
    padding: var(--space-5);
    border: 1px solid var(--line);
    background: var(--surface);
}

.roles__heading {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.roles__list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.roles__list li {
    padding-block: 10px;
    border-top: 1px solid var(--line);
}

.roles__list li.roles__more {
    color: var(--muted);
}

@media (min-width: 640px) {
    .hero__title {
        font-size: var(--text-4xl);
    }
}

@media (min-width: 960px) {
    .hero {
        padding-block: var(--space-9);
    }

    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        column-gap: var(--space-8);
        align-items: end;
    }

    .roles {
        max-width: 320px;
        justify-self: end;
        width: 100%;
    }
}

/* Sections */

.section {
    padding-block: var(--space-6);
}

/* On pages with several sections, every second one is white against the off-white page, to separate
   them without lines. Only the sections shown count, so it still alternates when some are hidden. */
main > section:nth-of-type(even):not(.section--ink) {
    background: var(--surface);
}

.section__grid {
    display: grid;
    gap: var(--space-6);
}

.section__title {
    font-size: var(--text-2xl);
}

.section__text {
    max-width: 36ch;
    margin-top: var(--space-3);
    color: var(--ink-2);
}

@media (min-width: 960px) {
    .section {
        padding-block: var(--space-7);
    }

    .section__grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        column-gap: var(--space-8);
    }
}

/* Ledger: numbered rows separated by hairlines, used instead of feature cards. */

.ledger {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.ledger__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.ledger__row:last-child {
    border-bottom: 0;
}

.ledger__index {
    padding-top: 3px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.ledger__title {
    font-size: var(--text-xl);
}

.ledger__text {
    max-width: 60ch;
    margin-top: var(--space-2);
    color: var(--ink-2);
}

.ledger .tag {
    grid-column: 2;
    justify-self: start;
}

@media (min-width: 640px) {
    .ledger__row {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        align-items: start;
    }

    .ledger .tag {
        grid-column: auto;
        margin-top: 3px;
    }
}

.tag {
    display: inline-block;
    padding: 2px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
}

.tag--open {
    background: var(--accent-tint);
    color: var(--accent);
}

.tag--later {
    border-color: var(--line);
    background: var(--surface);
    color: var(--muted);
}

.tag--pinned {
    background: #FDF1E2;
    color: var(--warning);
}

.ledger__link {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

/* "What's here" on the home page: the list runs full width under the heading, and on wide screens
   each row reads across: number, name, description and link, tag. */
.ledger--wide {
    margin-top: var(--space-6);
}

@media (min-width: 960px) {
    .ledger--wide .ledger__body {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        column-gap: var(--space-5);
    }

    .ledger--wide .ledger__title {
        grid-row: 1 / span 2;
        font-size: var(--text-lg);
    }

    .ledger--wide .ledger__text,
    .ledger--wide .ledger__link {
        grid-column: 2;
    }

    .ledger--wide .ledger__text {
        max-width: 72ch;
        margin-top: 0;
    }

    .ledger--wide .ledger__link {
        margin-top: var(--space-2);
    }
}

/* News list */

.news {
    padding-block: var(--space-7) var(--space-9);
}



.news__title {
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
}

.news__intro {
    margin-top: var(--space-3);
    color: var(--ink-2);
}

.filters {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-bottom: var(--space-1);
    overflow-x: auto;
}

.chip {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--ink-2);
    color: var(--ink);
}

.chip[aria-current="page"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
}

.news-list {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.filter-count + .news-list {
    margin-top: var(--space-3);
}

.news-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.news-item__media {
    display: block;
    text-decoration: none;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--line);
}

.news-item__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The feed's logo, for a story without an image. It fills the box like a photo; white shows
   through a transparent background instead of the grey. */
.news-item__media .news-item__logo {
    background: var(--surface);
}

/* Stands in for a missing image: the source's name inside the logo's corner bracket. */
.news-placeholder {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--accent-tint);
    color: var(--accent);
}

.news-placeholder::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 14px;
    height: 14px;
    border-top: 3px solid var(--accent);
    border-left: 3px solid var(--accent);
}

.news-placeholder__name {
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-item__meta,
.forum-latest__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.news-item__source,
.forum-latest__category {
    color: var(--ink-2);
    font-weight: 500;
}

.news-item__title {
    margin-top: var(--space-1);
    font-size: var(--text-lg);
    line-height: 1.3;
}

.news-item__title a,
.forum-latest__title a {
    color: var(--ink);
    text-decoration: none;
}

.news-item__title a:hover,
.forum-latest__title a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.news-item__title a[target="_blank"]::after {
    content: " \2197";
    color: var(--muted);
    font-size: 0.8em;
}

.news-item__excerpt {
    display: none;
    margin-top: var(--space-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

@media (min-width: 640px) {
    .news-item {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: var(--space-5);
    }

    .news-item__excerpt {
        display: block;
    }

    .news-placeholder__name {
        font-size: var(--text-xs);
    }
}

@media (min-width: 960px) {
    .news .pagination {
        max-width: 880px;
    }
}

/* Latest news on the home page: two columns of compact rows on wide screens. */

.latest__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
}

.latest__list {
    display: grid;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.news-item--compact .news-item__title {
    font-size: var(--text-md);
}

@media (min-width: 640px) {
    .news-item--compact {
        grid-template-columns: 136px minmax(0, 1fr);
        gap: var(--space-4);
    }
}

@media (min-width: 960px) {
    .latest__list {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-7);
    }
}

/* Latest from the forum on the home page: text-only rows in the same list as the news. */

.forum-latest {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--line);
}

.forum-latest__title {
    margin-top: var(--space-1);
    font-size: var(--text-md);
    line-height: 1.3;
}

/* Share links at the foot of an article. */

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.share__title {
    font-size: var(--text-sm);
    font-weight: 600;
}

.share__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Links and the button share one box model, so they line up at the same height. */
.share__list .chip {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}

.share__copy {
    font-family: inherit;
    cursor: pointer;
}

.share__status {
    flex-basis: 100%;
    color: var(--success);
    font-size: var(--text-sm);
}

.share__status:empty {
    display: none;
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.pagination__status {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Editorial policy under the news list. */

.news-about {
    display: grid;
    gap: var(--space-3);
     margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.news-about__title {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Articles */

.article__standfirst {
    margin-top: var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-lg);
}

.article__byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    color: var(--muted);
    font-size: var(--text-sm);
}

.article__image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
}

.article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.prose blockquote {
    margin-left: 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--accent);
    color: var(--ink);
}

.prose ol {
    padding-left: var(--space-5);
}

.prose a {
    color: var(--accent);
}

.article__more {
    margin-top: var(--space-7);
}

/* Dark section */

.section--ink {
    background: var(--ink);
    color: var(--on-ink);
}

.section--ink :focus-visible {
    outline-color: var(--on-ink);
}

.join {
    max-width: var(--reading-width);
}

.join__lead {
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
    line-height: 1.45;
}

.join__text {
    margin-top: var(--space-5);
    color: var(--on-ink-muted);
}

.join__note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--on-ink-line);
    color: var(--on-ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.join__note::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--on-ink);
}

.join__action {
    margin-top: var(--space-6);
}

/* Account pages: one narrow column. */

.auth {
    padding-block: var(--space-7) var(--space-9);
}

.auth__panel {
    max-width: 520px;
    margin-inline: auto;
}

.auth__eyebrow {
    margin-bottom: var(--space-3);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auth__title {
    font-size: var(--text-2xl);
}

.auth__intro {
    margin-top: var(--space-3);
    color: var(--ink-2);
}

.auth__text {
    margin-top: var(--space-4);
    color: var(--ink-2);
}

.auth__panel > .alert {
    margin-top: var(--space-5);
}

.auth__alt {
    margin-top: var(--space-5);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.details {
    margin: var(--space-6) 0 0;
    border-top: 1px solid var(--ink);
}

.details__row {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.details dt {
    color: var(--muted);
    font-size: var(--text-sm);
}

.details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.details__empty {
    color: var(--muted);
}

/* A small link after a value, such as "Change" after the agency's website. */
.details__action {
    margin-left: var(--space-3);
    font-size: var(--text-sm);
}

.auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-5);
    font-size: var(--text-sm);
}

@media (min-width: 640px) {
    .details__row {
        grid-template-columns: 160px minmax(0, 1fr);
        gap: var(--space-4);
    }

    /* Label above value, for narrow columns such as the admin job page's sidebar. */
    .details--stacked .details__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
}

/* 2FA setup and recovery codes */

.steps {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps__item {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    counter-increment: step;
}

.steps__title {
    font-size: var(--text-lg);
}

.steps__title::before {
    content: counter(step) ". ";
    color: var(--muted);
    font-family: var(--font-mono);
}

.steps__item .form {
    margin-top: 0;
}

.qr {
    width: 200px;
    height: 200px;
    padding: var(--space-2);
    border: 1px solid var(--line);
    background: var(--surface);
}

.secret {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-5);
    margin: var(--space-6) 0;
    padding: var(--space-5);
    border: 1px solid var(--line);
    background: var(--surface);
    font-family: var(--font-mono);
    list-style: none;
}

/* Admin area */

.admin-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.admin-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    min-height: 64px;
    padding-block: var(--space-3);
}

/* Admin menu: links and drop-downs (<details>), see layouts/admin.php. */

.admin-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.admin-nav__link:hover {
    background: var(--paper);
    color: var(--ink);
}

.admin-nav__link[aria-current="page"],
.admin-nav__link.is-current {
    background: var(--accent-tint);
    color: var(--accent);
}

.admin-nav__group {
    position: relative;
}

summary.admin-nav__link {
    list-style: none;
}

summary.admin-nav__link::-webkit-details-marker {
    display: none;
}

/* A small chevron, pointing up while the menu is open. */
summary.admin-nav__link::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.admin-nav__menu[open] > summary.admin-nav__link::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

.admin-nav__submenu {
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 8px 24px rgb(11 18 32 / 0.08);
}

.admin-nav__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.admin-nav__sublink:hover {
    background: var(--paper);
    color: var(--ink);
}

.admin-nav__sublink[aria-current="page"] {
    background: var(--accent-tint);
    color: var(--accent);
}

.count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: center;
}

.admin-header__end {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
}

.admin-header__end form {
    margin: 0;
}

.admin-main {
    padding-block: var(--space-6) var(--space-9);
}

.admin-title {
    font-size: var(--text-2xl);
}

.admin-intro {
        margin-top: var(--space-3);
    color: var(--ink-2);
}

.admin-main > .alert {
    max-width: var(--reading-width);
    margin-top: var(--space-5);
}

.admin-form {
    max-width: 560px;
}

.admin-subtitle {
    margin-top: var(--space-7);
    font-size: var(--text-xl);
}

/* A section heading with a button beside it: the row takes the heading's space above. */
.admin-heading--section {
    margin-top: var(--space-7);
}

.admin-heading--section .admin-subtitle {
    margin-top: 0;
}

.settings-section {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.settings-section form {
    margin: 0;
}

/* The section's gap does the spacing (account page). */
.settings-section .auth__text {
    margin-top: 0;
}

.share-preview {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1200 / 630;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.share-preview--empty {
    display: grid;
    place-items: center;
    padding: var(--space-4);
    border-style: dashed;
    color: var(--muted);
    font-size: var(--text-sm);
    text-align: center;
}

.share-upload {
    display: grid;
    gap: 6px;
}

.share-upload__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.share-upload__row .input {
    flex: 1 1 240px;
    width: auto;
}

.admin-main > .alert + .alert {
    margin-top: var(--space-3);
}

.admin-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
}

.admin-alert {
    max-width: 560px;
    margin-top: var(--space-4);
}

.data-table__sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.data-table tr.is-muted td {
    opacity: 0.6;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.row-actions form {
    margin: 0;
}

.form__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.confirm--section {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.preview {
    max-width: 560px;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--success-line);
    border-radius: var(--radius-sm);
    background: var(--success-tint);
    font-size: var(--text-sm);
}

.preview__list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
}

.editor-layout {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-5);
}

.editor-layout__main .form {
    margin-top: 0;
}

.editor-layout__side {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.editor-side__title {
    font-size: var(--text-md);
}

.editor-side__status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

@media (min-width: 960px) {
    .editor-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
        align-items: start;
    }

    .editor-layout__side {
        position: sticky;
        top: var(--space-5);
    }
}

/* Two classes, to win over quill.snow.css, which loads after this file. */
.editor.ql-container {
    min-height: 360px;
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: var(--text-md);
}

.editor .ql-editor {
    min-height: 360px;
    line-height: 1.6;
}

.editor-thumb {
    max-width: 240px;
    border-radius: var(--radius-sm);
}

.data-table {
    width: 100%;
    margin-top: var(--space-4);
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table th {
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    border-bottom: 1px solid var(--ink);
    font-weight: 600;
    text-align: left;
}

.data-table td {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: top;
}

.is-warning {
    color: var(--warning);
}

.is-danger {
    color: var(--danger);
    font-weight: 500;
}

.empty {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    color: var(--muted);
    text-align: center;
}

/* Cards, two across on phones and tablets, four on wide screens (Jim, 05/10/2026). */
.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
}

.stats__item {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.stats dt {
    color: var(--muted);
    font-size: var(--text-sm);
}

.stats dd {
    margin: var(--space-1) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stats dd.stats__link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: 0;
}

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

.applications {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.application {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.application__name {
    font-size: var(--text-xl);
}

.application__title {
    margin-top: var(--space-1);
    color: var(--ink-2);
}

.application__meta {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
}

.application__meta dt {
    color: var(--muted);
}

.application__meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.application__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
}

.application__actions form {
    margin: 0;
}

@media (min-width: 960px) {
    .application {
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) auto;
        align-items: start;
    }

    .application__meta div {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        gap: var(--space-3);
    }

    .application__actions {
        justify-content: flex-end;
    }
}

.confirm summary {
    list-style: none;
}

.confirm summary::-webkit-details-marker {
    display: none;
}

.confirm__panel {
    display: grid;
    gap: var(--space-3);
    max-width: 320px;
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--danger-line);
    border-radius: var(--radius-sm);
    background: var(--danger-tint);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.button--danger {
    background: var(--danger);
    color: var(--on-ink);
}

.button--danger:hover {
    background: #912018;
    color: var(--on-ink);
}

.confirm__panel--plain {
    border-color: var(--line);
    background: var(--paper);
}

.confirm__form {
    display: grid;
    gap: var(--space-3);
}

/* Admin member page: account details, with the actions alongside on wide screens. */

.member-admin {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.member-admin__main > .admin-subtitle:first-child {
    margin-top: 0;
}

.member-actions {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.member-actions__title {
    font-size: var(--text-md);
}

.member-actions > .details:first-child {
    margin-top: 0;
}

.member-actions form {
    margin: 0;
}

.member-actions__note {
    color: var(--muted);
    font-size: var(--text-sm);
}

.member-admin__heading {
    margin-top: var(--space-7);
}

.member-admin__heading .admin-subtitle {
    margin-top: 0;
}

@media (min-width: 960px) {
    .member-admin {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }
}

/* Search and filter forms: the news page and Admin > Audit log. */

.filter-form {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    margin-top: var(--space-5);
}

.filter-form__buttons {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    font-size: var(--text-sm);
}

.filter-count {
    margin-top: var(--space-6);
    color: var(--muted);
    font-size: var(--text-sm);
}

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

@media (min-width: 960px) {
    .filter-form--audit {
        grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) auto;
    }

    .filter-form--news,
    .filter-form--feed-items,
    .filter-form--admin-jobs {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) auto;
    }
}

.fieldset {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0 0 var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--line);
}

.fieldset__legend {
    margin-bottom: var(--space-3);
    padding: 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.checkbox__input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--accent);
}

.checkbox__label {
    font-weight: 500;
}

/* Forum */

.forum {
    padding-block: var(--space-6) var(--space-9);
}

.forum__thread {
    max-width: calc(880px + 2 * var(--gutter));
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--muted);
    font-size: var(--text-sm);
}

.forum__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
}

.forum__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.forum__title {
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
}

.forum__intro {
        margin-top: var(--space-3);
    color: var(--ink-2);
}

.forum-categories,
.thread-list {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.forum-category,
.thread-row {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.forum-category__name,
.thread-row__title {
    font-size: var(--text-lg);
    line-height: 1.3;
}

.forum-category__name a,
.thread-row__title a {
    color: var(--ink);
    text-decoration: none;
}

.forum-category__name a:hover,
.thread-row__title a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.forum-category__description,
.thread-row__meta {
    margin-top: var(--space-1);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.forum-category__stats,
.thread-row__stats {
    display: flex;
    gap: var(--space-5);
    margin: 0;
    font-size: var(--text-sm);
}

.forum-category__stats dt,
.thread-row__stats dt {
    color: var(--muted);
    font-size: var(--text-xs);
}

.forum-category__stats dd,
.thread-row__stats dd {
    margin: 0;
    font-family: var(--font-mono);
}

@media (min-width: 640px) {
    .forum-category,
    .thread-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-6);
    }

    .forum-category__stats,
    .thread-row__stats {
        justify-content: flex-end;
        text-align: right;
    }
}

.thread__header {
    padding-bottom: var(--space-4);
}

.thread__title {
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
}

.thread__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.thread__replies-title {
    margin-top: var(--space-7);
    font-size: var(--text-lg);
}

.mod-tools {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.mod-tools summary {
    cursor: pointer;
    font-weight: 500;
}

.mod-tools__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.inline-form {
    display: inline-flex;
    gap: var(--space-2);
    margin: 0;
}

.input--small {
    min-height: 36px;
    padding: 4px 8px;
    font-size: var(--text-sm);
}

.post {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.post--opening {
    border-top: 3px solid var(--accent);
}

.post__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    margin-bottom: var(--space-3);
}

.post__name {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

a.post__name:hover {
    color: var(--accent);
    text-decoration: underline;
}

.post__role {
    margin-left: var(--space-2);
    color: var(--muted);
    font-size: var(--text-sm);
}

.post__meta {
    display: flex;
    gap: var(--space-3);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.post__meta a {
    color: inherit;
    text-decoration: none;
}

.post__meta a:hover {
    text-decoration: underline;
}

.post__body {
    overflow-wrap: anywhere;
}

.post__body pre {
    overflow-x: auto;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.post__body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Posts sit inside the replies list, so browsers would start their bullets at the nested style. */
.post__body ul {
    list-style: disc;
}

.post__body ul ul {
    list-style: circle;
}

.post__body ul ul ul {
    list-style: square;
}

.post__removed {
    color: var(--muted);
    font-style: italic;
}

.is-muted {
    opacity: 0.6;
}

.post__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
}

.action:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.action.is-active {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
}

.action--static,
.action--static:hover {
    border-color: transparent;
    cursor: default;
}

.action--danger {
    color: var(--danger);
}

.action__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.report summary {
    list-style: none;
}

.report summary::-webkit-details-marker {
    display: none;
}

.report[open] {
    flex-basis: 100%;
}

.report__form {
    display: grid;
    gap: var(--space-2);
    max-width: 480px;
    margin-top: var(--space-2);
}

.report__form .button {
    justify-self: start;
}

.replies {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.replies--nested {
    margin-left: var(--space-4);
    padding-left: var(--space-4);
    border-left: 2px solid var(--line);
}

@media (min-width: 640px) {
    .replies--nested {
        margin-left: var(--space-7);
    }
}

.reply-form {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.reply-form .form {
    margin-top: var(--space-4);
}

.editor--compact.ql-container {
    min-height: 180px;
}

.editor--compact .ql-editor {
    min-height: 180px;
}

/* @mentions: a link to the member's profile, in posts and in the editor. */
.post__body a[href^="/members/"],
.editor .ql-editor a[href^="/members/"] {
    padding: 0 3px;
    border-radius: 4px;
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

.post__body a[href^="/members/"]:hover {
    text-decoration: underline;
}

/* Indented paragraphs from the editor's indent button (lists nest instead). */
.post__body .ql-indent-1 {
    padding-left: 2em;
}

.post__body .ql-indent-2 {
    padding-left: 4em;
}

.post__body .ql-indent-3 {
    padding-left: 6em;
}

.post__body .ql-indent-4 {
    padding-left: 8em;
}

.post__body .ql-indent-5 {
    padding-left: 10em;
}

.post__body .ql-indent-6 {
    padding-left: 12em;
}

.post__body .ql-indent-7 {
    padding-left: 14em;
}

.post__body .ql-indent-8 {
    padding-left: 16em;
}

.mention-list {
    position: absolute;
    z-index: 10;
    width: 280px;
    max-width: calc(100% - 8px);
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: 0 6px 16px rgb(11 18 32 / 0.08);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
}

.mention-list__option {
    display: grid;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.mention-list__option[aria-selected="true"],
.mention-list__option:hover {
    background: var(--accent-tint);
}

.mention-list__name {
    color: var(--ink);
    font-weight: 500;
}

.mention-list__title {
    color: var(--muted);
    font-size: var(--text-xs);
}

.mention-list__empty {
    padding: 6px 10px;
    color: var(--muted);
}

/* Notifications */

.bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--ink);
}

.bell:hover,
.bell[aria-current="page"] {
    background: var(--accent-tint);
    color: var(--accent);
}

.bell__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.bell__count {
    position: absolute;
    top: 1px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--paper);
    border-radius: 9px;
    background: var(--accent);
    color: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
}

.notifications {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.notification {
    border-bottom: 1px solid var(--line);
}

.notification form {
    margin: 0;
}

.notification__open {
    position: relative;
    display: grid;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
    border: 0;
    background: none;
    color: var(--ink-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notification__open:hover {
    background: var(--surface);
}

.notification__text strong {
    color: var(--ink);
    font-weight: 600;
}

/* Unread: a dot in the margin, and full-strength text. */
.notification.is-unread .notification__open::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.notification:not(.is-unread) .notification__text {
    color: var(--muted);
}

.notification__excerpt {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification__time {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Member profiles */

.profile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
}

.profile__mark {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
}

/* The logo's corner bracket, as on the news placeholders. */
.profile__mark::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--accent);
    border-left: 3px solid var(--accent);
}

.profile__name {
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
}

.profile__role {
    margin-top: var(--space-1);
    color: var(--ink-2);
}

.profile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-sm);
}

.profile__stats {
    display: flex;
    gap: var(--space-7);
    margin: var(--space-6) 0 0;
    padding-block: var(--space-4);
    border-block: 1px solid var(--line);
}

.profile__stats dt {
    color: var(--muted);
    font-size: var(--text-xs);
}

.profile__stats dd {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
}

.profile__own {
    margin-top: var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.activity {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.activity__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.activity__what {
    color: var(--ink-2);
}

.activity__what a {
    color: var(--ink);
    font-weight: 500;
}

.activity__time {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.reports {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.report-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.report-card__meta {
    color: var(--muted);
    font-size: var(--text-sm);
}

.report-card__reason {
    font-weight: 500;
}

.report-card__post {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.report-card__post footer {
    margin-top: var(--space-2);
    color: var(--muted);
}

.row-actions--start {
    justify-content: flex-start;
}

.search-form {
    display: flex;
    gap: var(--space-3);
    max-width: 560px;
    margin-top: var(--space-5);
}

/* Error pages */

.error {
    padding-block: var(--space-8) var(--space-9);
}

.error__panel {
    max-width: 560px;
    padding: var(--space-6);
    border: 1px solid var(--line);
    background: var(--surface);
}

.error__status {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.error__title {
    margin-top: var(--space-3);
    font-size: var(--text-2xl);
}

.error__message {
    margin-block: var(--space-3) var(--space-5);
    color: var(--ink-2);
}

.link-arrow {
    font-weight: 500;
    text-decoration: none;
}

.link-arrow::after {
    content: " \2192";
}

.link-arrow:hover {
    text-decoration: underline;
}

/* Footer */

.site-footer {
    padding-block: var(--space-6) var(--space-7);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--text-sm);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-3);
}

.site-footer__start {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-weight: 500;
}

.site-footer__mark {
    width: 16px;
    height: 16px;
    fill: var(--accent);
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.site-footer__nav a,
.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.site-footer__nav a:hover,
.link-button:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* 2px of padding makes the target 24px square (WCAG 2.5.8) without moving the line. */
.site-footer__social {
    display: inline-flex;
    margin: -2px 0;
    padding: 2px;
    color: var(--ink-2);
}

.site-footer__social:hover {
    color: var(--accent);
}

.site-footer__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (min-width: 960px) {
    .site-footer__inner {
        grid-template-columns: auto 1fr;
        column-gap: var(--space-7);
    }

    .site-footer__nav {
        justify-content: flex-end;
    }

    .site-footer__legal {
        grid-column: 1 / -1;
    }
}

/* Text pages: about, legal */

.page {
    padding-block: var(--space-7) var(--space-9);
}

.page__inner {
    max-width: calc(var(--reading-width) + 2 * var(--gutter));
}

.page__header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--ink);
}

/* A list straight after the header shares its line, rather than drawing a second one just below it. */
.page__header + .job-list,
.page__header + .details {
    border-top: 0;
}

.page__header:has(+ .job-list, + .details) {
    margin-bottom: var(--space-2);
}

.page__eyebrow {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page__title {
    margin-top: var(--space-2);
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
}

.page__updated {
    margin-top: var(--space-3);
    color: var(--muted);
    font-size: var(--text-sm);
}

.prose {
    color: var(--ink-2);
}

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

.prose__lead {
    color: var(--ink);
    font-size: var(--text-lg);
}

.prose h2 {
    margin-top: var(--space-7);
    color: var(--ink);
    font-size: var(--text-xl);
}

.prose h3 {
    margin-top: var(--space-5);
    color: var(--ink);
    font-size: var(--text-md);
}

.prose ul {
    padding-left: var(--space-5);
}

.prose li + li {
    margin-top: 6px;
}

.prose strong {
    color: var(--ink);
    font-weight: 600;
}

.table-wrap {
    overflow-x: auto;
}

.data-table__actions {
    white-space: nowrap;
}

/* Recruiter home: the agency and its recruiters. */

.recruiter__details {
    max-width: var(--reading-width);
}

.recruiter__section {
    margin-top: var(--space-8);
}

.recruiter__heading {
    font-size: var(--text-xl);
}

.recruiter__text {
    max-width: var(--reading-width);
    margin-top: var(--space-2);
    color: var(--ink-2);
}

.recruiter__action,
.recruiter__footer {
    margin-top: var(--space-6);
}

.recruiter__heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Jobs: the members' list, a job page, and previews for recruiters and admins. */

@media (min-width: 960px) {
    .filter-form--jobs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

.job-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.job-row {
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.job-row__title {
    font-size: var(--text-lg);
    line-height: 1.3;
}

.job-row__title a {
    color: var(--ink);
    text-decoration: none;
}

.job-row__title a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.job-row__employer {
    margin-top: var(--space-1);
    color: var(--ink-2);
}

.job-row__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-2);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.job-fact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.job-fact__icon {
    flex: none;
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.job__employer {
    color: var(--ink-2);
    font-weight: 500;
}

.job__title {
    margin-top: var(--space-2);
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
}

.job__posted {
    margin-top: var(--space-3);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.job__facts,
.job__description {
    margin-top: var(--space-6);
}

.job__apply {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.job__apply-note {
    color: var(--muted);
    font-size: var(--text-sm);
}

.job-status {
    margin-bottom: var(--space-5);
}

.job-actions {
    margin-bottom: var(--space-7);
}

.job-preview {
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.job-preview__label {
    margin-bottom: var(--space-4);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Admin job page: the dates on one line under the title. */
.admin-dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-sm);
}

.job-form .fieldset {
    margin-top: var(--space-4);
}

.choices {
    margin: 0;
    padding: 0;
    border: 0;
}

.choices .checkbox + .checkbox {
    margin-top: var(--space-2);
}

.section__text--wide {
    max-width: 60ch;
}

.jobs__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
}

.jobs__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    font-size: var(--text-sm);
}

.job-row__excerpt {
    margin-top: var(--space-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

/* "Email me new jobs like these", under the job list's filters. */
.alert-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

.alert-form .input {
    width: auto;
}

.alert-form__label {
    color: var(--ink-2);
}

.job-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.job-toolbar .breadcrumb {
    margin-bottom: 0;
}

/* Latest jobs on the home page: four across on wide screens, two by two on tablets. */
.job-cards {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.job-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.job-card__employer {
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
}

.job-card__title {
    font-size: var(--text-md);
    line-height: 1.3;
}

.job-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.job-card__title a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.job-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

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

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

/* Imported jobs: the employer's own listing rather than an agency's. */
.job-source {
    margin-left: var(--space-2);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
}

.admin-heading__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

/* Events: the public list, the home page's upcoming events, and event pages. */

/* Upcoming and Past events, with "Submit an event" beside them. */
.events__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.events__bar .filters {
    margin-top: 0;
    padding-bottom: 0;
}

@media (min-width: 960px) {
    .filter-form--events {
        grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) auto;
    }
}

.event-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.event-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
}

/* A calendar leaf: the day, with the month and year under it. The full date is in the text beside it. */
.event-date {
    display: grid;
    align-content: start;
    justify-items: center;
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--font-mono);
    line-height: 1.1;
}

.event-date__day {
    color: var(--ink);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.event-date__month {
    margin-top: var(--space-1);
    color: var(--muted);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.event-row__title {
    font-size: var(--text-lg);
    line-height: 1.3;
}

.event-card__title {
    font-size: var(--text-md);
    line-height: 1.3;
}

.event-row__title a,
.event-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.event-row__title a:hover,
.event-card__title a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.event-row__facts,
.event-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-2);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.event-row__excerpt {
    margin-top: var(--space-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
}

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

.event-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

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

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

.event__body {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.event__body .article__image {
    margin-bottom: 0;
}

.event__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.event__link-note {
    color: var(--muted);
    font-size: var(--text-sm);
}

/* The admin event page's sidebar: its own gap does the spacing. */
.editor-layout__side .details {
    margin-top: 0;
}

/* Admin > Events > Import: the problems found in a file, and the notes under the columns. */
.alert__list {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.import-notes {
    max-width: var(--reading-width);
    margin-top: var(--space-5);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.prose th {
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-weight: 600;
    text-align: left;
}

.prose td {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

/* Cookie banner: fixed to the bottom, never blocks the page. */

.consent {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    padding-block: var(--space-4);
    border-top: 1px solid var(--on-ink-line);
    background: var(--ink);
    color: var(--on-ink-muted);
    font-size: var(--text-sm);
}

.consent__inner {
    display: grid;
    gap: var(--space-3) var(--space-6);
    align-items: center;
}

.consent__title {
    color: var(--on-ink);
    font-size: var(--text-md);
}

.consent__title:focus {
    outline: none;
}

.consent__text p {
    margin-top: var(--space-1);
}

.consent a {
    color: var(--on-ink);
}

.consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (min-width: 960px) {
    .consent__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Motion: one short staggered reveal on load, off for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        animation: reveal 200ms var(--ease) both;
    }

    .reveal--2 {
        animation-delay: 60ms;
    }

    .reveal--3 {
        animation-delay: 120ms;
    }

    .reveal--4 {
        animation-delay: 180ms;
    }

    @keyframes reveal {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}