.dm-media {
    --media-ink: #122b40;
    --media-muted: #50677a;
    --media-line: #cbd7e2;
    --media-link: #1f5b7b;
    --media-paper: #f5f6f8;
    --media-ice: #e5f1f9;
    --media-sand: #edddbb;
    color: var(--media-ink);
    background: var(--media-paper);
}

.dm-media [hidden] { display: none !important; }
.dm-media-wrap { width: min(100% - 64px, 1152px); margin-inline: auto; }
.dm-media a:focus-visible, .dm-media button:focus-visible, .dm-media :is(input, select):focus-visible {
    outline: 2px solid #23688c;
    outline-offset: 4px;
}

.dm-media-hero {
    padding-block: calc(var(--header-height, 68px) + clamp(26px, 4vw, 58px)) clamp(30px, 4vw, 60px);
    background: linear-gradient(115deg, #f5f8fb, #dcebf6 100%);
    border-block-end: 1px solid var(--media-line);
}

.dm-media-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(24px, 5vw, 80px);
}

.dm-media-hero__copy { align-self: center; }
.dm-media-kicker {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1.45;
}

.dm-media-hero h1 {
    max-inline-size: 16ch;
    margin-block: 12px 14px;
    font-size: clamp(2.25rem, 4.65vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    overflow-wrap: break-word;
}

.dm-media-hero__copy > p:not(.dm-media-kicker) {
    max-inline-size: 47ch;
    margin-block: 0 20px;
    color: var(--media-muted);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.56;
}

.dm-media-jump {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-block-size: 44px;
    padding-inline: 15px;
    border: 1px solid #a88752;
    border-radius: 999px;
    background: #f7ecd4;
    color: var(--media-ink);
    font-weight: 650;
    text-decoration: none;
}

.dm-media-jump:hover { background: var(--media-sand); }
.dm-media-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-inline-size: 0;
    overflow: hidden;
    isolation: isolate;
    min-block-size: 240px;
    padding: clamp(20px, 3vw, 40px);
    background: #163b55;
    color: #f5f9fd;
    border-radius: 4px;
    border-end-end-radius: 16px;
}

.dm-media-feature::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: -20%;
    inset-inline-end: -15%;
    inline-size: 78%;
    block-size: 80%;
    transform: rotate(-24deg);
    background: repeating-linear-gradient(0deg, #b7ddef29 0 1px, transparent 1px 14px);
    mask-image: linear-gradient(0deg, transparent, black);
    pointer-events: none;
}

.dm-media-feature .dm-media-kicker { color: var(--media-sand); }
.dm-media-feature__outlet { margin-block: 18px 5px; color: #d2e8f7; font-size: .81rem; }
.dm-media-feature a { color: inherit; font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.22; text-decoration-color: #c4e0ee; text-underline-offset: .17em; }
.dm-media-feature a:focus-visible { outline-color: var(--media-sand); }
.dm-media-feature a span { color: var(--media-sand); white-space: nowrap; }

.dm-media-directory { padding-block: 34px 64px; }
.dm-media-directory, .dm-media-card { scroll-margin-block-start: 86px; }
.dm-media-directory h2 { margin-block: 0 13px; font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.2; }
.dm-media-filters {
    display: grid;
    grid-template-columns: minmax(180px, .65fr) minmax(200px, 1fr) auto;
    align-items: end;
    gap: 10px 18px;
    margin-block: 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--media-line);
    border-radius: 8px;
    background: #fff;
}

.dm-media-field { display: grid; min-inline-size: 0; gap: 5px; }
.dm-media-field label { font-size: .8rem; font-weight: 650; }
.dm-media-field :is(input, select) {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: 7px 10px;
    border: 1px solid #879faf;
    border-radius: 5px;
    background: #fff;
    color: var(--media-ink);
    font: inherit;
    font-size: 1rem;
}

.dm-media-result { align-self: end; margin: 0; padding-block: 10px; color: var(--media-muted); white-space: nowrap; }
.dm-media-empty { padding: 18px; background: #fff; border: 1px solid var(--media-line); }
.dm-media-empty button { padding: 8px; min-block-size: 44px; font: inherit; color: var(--media-link); background: transparent; border: 0; text-decoration: underline; cursor: pointer; }
.dm-media-section + .dm-media-section { margin-block-start: 42px; }
.dm-media-section__heading { padding-block: 12px 14px; border-block-start: 1px solid var(--media-line); }
.dm-media-section__heading p { margin: 0; color: var(--media-muted); }
.dm-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dm-media-card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: clamp(16px, 2vw, 25px);
    background: #fff;
    border: 1px solid var(--media-line);
    border-block-start: 3px solid #76a3bb;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.dm-media-card--author { border-block-start-color: #b09360; }
.dm-media-card--preprint { border-block-start-color: #7a9e96; }
.dm-media-card__header .dm-media-kicker { color: var(--media-muted); }
.dm-media-card h3 { margin-block: 6px 8px; font-size: clamp(1.15rem, 1.8vw, 1.52rem); line-height: 1.25; }
.dm-media-card__summary { margin: 0; color: var(--media-muted); line-height: 1.54; }
.dm-media-sources { list-style: none; padding: 0; margin-block: 14px 0; }
.dm-media-source { margin: 0; padding-block: 10px; border-block-start: 1px solid var(--media-line); }
.dm-media-source__meta, .dm-media-source__author { margin: 0; color: var(--media-muted); font-size: .8rem; line-height: 1.45; }
.dm-media-source__author { margin-block-start: 3px; }
.dm-media-source a { display: flex; justify-content: space-between; gap: 9px; margin-block-start: 3px; font-weight: 600; }
.dm-media-source a, .dm-media-related a { color: var(--media-link); text-decoration: underline; text-underline-offset: .17em; }
.dm-media-related { margin-block-start: auto; padding: 10px 12px; background: var(--media-ice); border-radius: 4px; }
.dm-media-related p { margin: 0 0 2px; font-size: .76rem; font-weight: 700; }
.dm-media-related a { display: block; font-size: .88rem; }

@media (max-width: 700px) {
    .dm-media-wrap { width: calc(100% - 32px); }
    .dm-media-hero__layout, .dm-media-grid { grid-template-columns: minmax(0, 1fr); }
    .dm-media-feature { min-block-size: 0; }
    .dm-media-filters { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; }
    .dm-media-result { padding: 0; }
    .dm-media-source a { min-block-size: 44px; align-items: center; }
}