/* Editorial pages use the UDEL palette and the current blog typeface. */
.udel-blog-archive,
.single-article #udel-main {
    --udel-blog-ink: #19171d;
    --udel-blog-muted: #5e5860;
    --udel-blog-paper: #f6f3ef;
    --udel-blog-line: #e4dcd3;
    --udel-blog-link: #743d13;
    --udel-blog-accent: #e59b44;
}
.udel-blog-archive {
    background: #fff;
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Book, Arial, sans-serif;
}
.udel-blog-wrap {
    width: min(1240px, calc(100% - clamp(32px, 7vw, 96px)));
    margin-inline: auto;
}
.udel-blog-hero {
    padding-block: clamp(20px, 2.45vw, 38px);
    background: var(--udel-blog-paper);
    border-bottom: 1px solid var(--udel-blog-line);
}
.udel-blog-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--udel-blog-muted);
    font-size: 14px;
}
.udel-blog-breadcrumbs a {
    color: var(--udel-blog-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.udel-blog-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(20px, 5vw, 68px);
}
#udel-main .udel-blog-hero h1 {
    max-width: 850px;
    margin: 0;
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    font-size: clamp(31px, 3.65vw, 55px);
    line-height: 1.08;
    letter-spacing: -.025em;
}
.udel-blog-hero-lead {
    max-width: 48ch;
    margin: 15px 0 0;
    color: var(--udel-blog-muted);
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.5;
}
.udel-blog-hero .udel-blog-author-panel {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--udel-blog-line);
    border-radius: 8px;
}
.udel-blog-index {
    padding-block: clamp(20px, 2.25vw, 32px) clamp(36px, 6vw, 86px);
}
.udel-blog-topics > p {
    margin: 0 0 10px;
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
}
.udel-blog-topics ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.udel-blog-topics li {
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.udel-blog-topics a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 12px;
    border: 1px solid var(--udel-blog-line);
    border-radius: 6px;
    background: #fff;
    color: var(--udel-blog-link);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
}
.udel-blog-topics a:hover {
    background: var(--udel-blog-paper);
    border-color: var(--udel-blog-accent);
}
.udel-blog-topics a span {
    display: inline-grid;
    min-width: 24px;
    min-height: 24px;
    place-items: center;
    background: var(--udel-blog-paper);
    color: var(--udel-blog-muted);
    border-radius: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.udel-blog-topic {
    margin-top: clamp(24px, 3.1vw, 52px);
}
#udel-main .udel-blog-topic h2,
.udel-blog-reads h2 {
    margin: 0 0 .75em;
    color: #1b1920;
    font-size: clamp(23px, 2.05vw, 34px);
    line-height: 1.2;
}
.udel-blog-topic h2,
.single-article #udel-main .b-item :is(h2, section)[id] {
    scroll-margin-top: clamp(88px, 8vw, 130px);
}
:is(.single-article, .post-type-archive-article) #udel-main :is(h1, h2, h3, h4, h5, h6)::before {
    content: none;
}
.udel-blog-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}
#udel-main .udel-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    margin: 0;
    float: none;
    overflow: hidden;
    border: 1px solid var(--udel-blog-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}
#udel-main .udel-blog-card:hover,
#udel-main .udel-blog-card:focus-within {
    border-color: var(--udel-blog-accent);
}
#udel-main .udel-blog-card:focus-within {
    outline: 2px solid var(--udel-blog-link);
    outline-offset: 3px;
}
.udel-blog-card-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--udel-blog-paper);
}
.udel-blog-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.udel-blog-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: clamp(16px, 1.6vw, 23px);
}
#udel-main .udel-blog-card h3 {
    margin: 0;
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.27;
    letter-spacing: 0;
}
#udel-main .udel-blog-card .new_item__txt-tit {
    display: block;
    height: auto !important;
    overflow: visible;
    color: var(--udel-blog-ink);
    font: inherit;
    line-height: inherit !important;
    letter-spacing: inherit;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.udel-blog-card .new_item__txt-tit::after {
    position: absolute;
    inset: 0;
    content: "";
}
#udel-main .udel-blog-card:hover .new_item__txt-tit,
#udel-main .udel-blog-card:focus-within .new_item__txt-tit {
    color: var(--udel-blog-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.udel-blog-card-author {
    margin: 0;
    color: var(--udel-blog-ink);
    font-size: 14px;
    line-height: 1.4;
}
.udel-blog-card-author strong { font-family: PragmaticaWeb-Bold, Arial, sans-serif; }
.udel-blog-card-author span {
    color: var(--udel-blog-muted);
    margin-inline-end: 3px;
}
.udel-blog-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0 0 8px;
    color: var(--udel-blog-muted);
    font-size: 15px;
    line-height: 1.5;
}
.udel-blog-card-cta {
    margin-top: auto;
    color: var(--udel-blog-link);
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
}
.udel-blog-author-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-family: PragmaticaWeb-Book, Arial, sans-serif;
    letter-spacing: 0;
}
.udel-blog-avatar {
    display: block;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 27%;
}
.udel-blog-author-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.udel-blog-author-label,
.udel-blog-author-role {
    color: var(--udel-blog-muted);
    font-size: 13px;
    line-height: 1.3;
}
.udel-blog-author-panel a {
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-color: var(--udel-blog-accent);
    text-underline-offset: 3px;
}
.single-article #udel-main .content_single {
    width: min(100%, 860px);
    margin-inline: auto;
    padding: clamp(18px, 3.4vw, 46px);
    background: #fff;
}
.single-article #udel-main .kama_breadcrumbs {
    max-width: 860px;
    margin-inline: auto;
}
.single-article #udel-main .content_single .b-item_tit {
    margin: 0;
}
.single-article #udel-main .content_single h1 {
    margin: 0;
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    font-size: clamp(30px, 3.45vw, 52px);
    line-height: 1.12;
    letter-spacing: -.022em;
    overflow-wrap: anywhere;
}
.udel-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 22px;
    padding-block: 14px;
    margin-block: 12px 19px;
    border-bottom: 1px solid var(--udel-blog-line);
}
.udel-blog-date {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--udel-blog-muted);
    font-family: PragmaticaWeb-Book, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}
.udel-blog-date time { color: var(--udel-blog-ink); }
.single-article #udel-main .content_single .b-item {
    width: 100%;
    margin-inline: 0;
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Book, Arial, sans-serif;
    font-size: clamp(17px, 1.25vw, 19px);
    line-height: 1.6;
    letter-spacing: 0;
}
.single-article #udel-main .b-item :is(p, li) {
    font-size: inherit;
    line-height: inherit;
}
.single-article #udel-main .b-item :is(h2, h3, h4) {
    margin-block: 1.3em .5em;
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    letter-spacing: -.012em;
    line-height: 1.22;
}
.single-article #udel-main .b-item h2 { font-size: clamp(23px, 2vw, 31px); }
.single-article #udel-main .b-item h3 { font-size: clamp(19px, 1.52vw, 24px); }
.single-article #udel-main .b-item a {
    color: var(--udel-blog-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.single-article #udel-main .b-item .udel-article-thumbnail {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 18px;
    border-radius: 8px;
}
.udel-blog-opening,
.udel-blog-next {
    margin-block: 0 1.25em;
    padding: clamp(15px, 2vw, 24px);
    border-radius: 8px;
    background: var(--udel-blog-paper);
}
.udel-blog-next { margin-block: 1.6em 0; }
.single-article #udel-main .b-item .udel-blog-next h2 { margin-top: 0; }
.udel-blog-next p:last-child { margin-bottom: 0; }
.udel-blog-contents {
    margin: 0 0 1.3em;
    border: 1px solid var(--udel-blog-line);
    border-radius: 8px;
}
.udel-blog-contents summary {
    min-height: 44px;
    padding: 12px 16px;
    color: var(--udel-blog-ink);
    font-family: PragmaticaWeb-Bold, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
}
.udel-blog-contents nav { padding: 0 17px 13px; }
.udel-blog-contents ol {
    margin: 0;
    padding-inline-start: 1.25em;
}
.udel-blog-contents li + li { margin-top: .35em; }
.udel-blog-back { margin-block: 1.2em 0; }
.udel-blog-reads {
    clear: both;
    margin-block: clamp(2rem, 5vw, 5rem);
}
.udel-blog-reads ul {
    margin: 0;
    padding: 0 0 0 1.2em;
    font-size: clamp(16px, 1.18vw, 21px);
    line-height: 1.5;
}
.udel-blog-reads li + li { margin-top: .45em; }
.udel-blog-reads a {
    color: #743d13;
    text-decoration: underline;
    text-underline-offset: .18em;
    overflow-wrap: anywhere;
}
.udel-blog-topics a:focus-visible,
.udel-blog-author-panel a:focus-visible,
.udel-blog-contents summary:focus-visible,
.udel-blog-breadcrumbs a:focus-visible,
.single-article #udel-main .b-item a:focus-visible,
.udel-blog-reads a:focus-visible {
    outline: 2px solid #743d13;
    outline-offset: 3px;
}
@media (max-width: 960px) {
    .udel-blog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 690px) {
    .udel-blog-hero-layout { grid-template-columns: minmax(0, 1fr); }
    .udel-blog-hero .udel-blog-author-panel { width: fit-content; max-width: 100%; }
}
@media (max-width: 600px) {
    .udel-blog-hero { padding-block: 17px; }
    .udel-blog-hero-layout { gap: 14px; }
    .udel-blog-breadcrumbs { margin-bottom: 12px; }
    .udel-blog-hero-lead { margin-top: 8px; }
    .udel-blog-hero .udel-blog-author-panel { padding: 10px 12px; }
    .udel-blog-hero .udel-blog-avatar { flex-basis: 48px; width: 48px; height: 48px; }
    .udel-blog-topics ul { gap: 6px; }
    .udel-blog-topics a { gap: 6px; min-height: 44px; padding-inline: 9px; font-size: 14px; }
    .udel-blog-topics a span { min-width: 20px; min-height: 20px; font-size: 12px; }
    .udel-blog-card-grid { grid-template-columns: minmax(0, 1fr); }
    .single-article #udel-main .content_single { padding: 0; background: transparent; }
    .udel-blog-meta { margin-top: 9px; gap: 9px; }
}
