/* drinkfive identity: cream, amber beer, leather brown, jersey red, warm charcoal. */
:root {
    --df-ink: #29221f;
    --df-green: #653d2b;
    --df-lime: #efaa35;
    --df-paper: #fffbf2;
    --df-muted: #716257;
    --df-line: #e4d7c1;
    --df-radius: 8px;
    --df-red: #ae3027;
    --df-amber: #efaa35;
    --df-leather: #653d2b;
    --df-sand: #f4e7d0;
    --df-footer: #2d221c;
}
body.df-site { background: var(--df-paper); color: var(--df-ink); }
::selection { background: #f5d494; color: var(--df-ink); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--df-red);
    outline-offset: 4px;
}
.df-header {
    background: var(--df-paper);
    border-top: 3px solid var(--df-amber);
    border-bottom-color: var(--df-line);
}
.df-header .df-header-inner {
    min-height: 124px;
    padding-block: 6px;
}
.df-header .df-brand {
    display: block;
    flex: 0 1 340px;
    width: 340px;
    max-width: 100%;
    font-size: 0;
    line-height: 0;
    letter-spacing: normal;
}
.df-header .df-brand-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.df-nav a:not(.df-nav-rankings):hover,
.df-nav a:not(.df-nav-rankings)[aria-current] {
    color: var(--df-red);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.df-nav a.df-nav-rankings {
    background: var(--df-red);
    color: #fffaf0;
    border-radius: 5px;
}
.df-nav a.df-nav-rankings:hover { background: #88251f; }
.df-menu-toggle { color: var(--df-ink); border-color: #c9b698; }
.df-hero {
    background: linear-gradient(115deg, #f7ead1 0%, #fff6e5 58%, var(--df-paper) 100%);
    border-bottom: 1px solid var(--df-line);
}
.df-button {
    background: var(--df-amber);
    color: var(--df-ink);
    border-color: #d59128;
    border-radius: 5px;
    box-shadow: 0 2px 0 rgb(101 61 43 / 10%);
}
.df-button:hover { background: #e29a25; }
.df-text-link { color: var(--df-leather); border-color: var(--df-leather); }
.df-text-link:hover { color: var(--df-red); border-color: var(--df-red); }
.df-rankings-card {
    background: var(--df-leather);
    color: #fff9ec;
    border: 1px solid #764a32;
    border-top: 3px solid var(--df-amber);
    box-shadow: 0 14px 30px rgb(77 45 27 / 9%);
}
.df-rankings-card p { color: #f0dfc8; font-size: 13px; }
.df-rankings-card > a { color: #ffd27c; font-size: 13px; }
.df-rankings-card > a:hover { color: #fff9ec; text-decoration: underline; }
.df-rankings-card a:focus-visible { outline-color: #ffd27c; }
.df-positions { border-color: #956c4d; }
.df-positions span { color: #f8e6c9; border-color: #956c4d; }
.df-slider-controls button { color: var(--df-ink); border-color: #c9b698; }
.df-slider-controls button:hover:not(:disabled) { background: var(--df-amber); }
.df-slider-controls button:disabled { background: transparent; }
.df-card-image, .df-story-image { background: var(--df-sand); }
.df-card-image { border: 1px solid #deceb3; }
.df-card-image > span {
    background: #fff9eb;
    color: var(--df-leather);
    border: 1px solid #e4d7c1;
    border-radius: 3px;
}
.df-card-date { font-size: 12px; letter-spacing: .1px; }
.df-card-author { font-size: 12px; }
.df-slider-card h3 { font-size: 20px; }
.df-slider-card a:hover h3, .df-story a:hover h3 {
    color: var(--df-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.df-story p { font-size: 13px; }
.df-story h3 { font-size: 17px; }
.df-content { line-height: 1.8; }
.df-content a { color: var(--df-red); text-underline-offset: 3px; }
.df-content a:hover { color: #78251d; }
.df-content .article-info { font-size: 13px; }
.df-content .tags a {
    color: var(--df-leather);
    background: var(--df-sand);
    border: 1px solid var(--df-line);
}
.df-content .pagination a, .df-content .pager a,
.df-content .readmore a {
    color: var(--df-leather);
    background: var(--df-sand);
    border: 1px solid var(--df-line);
}
.df-content .pagination a:hover, .df-content .pager a:hover,
.df-content .readmore a:hover { color: var(--df-ink); background: #f5d494; }
.df-content th { color: var(--df-ink); background: var(--df-sand); }
.df-content input:not([type="checkbox"]):not([type="radio"]),
.df-content textarea, .df-content select {
    color: var(--df-ink);
    background: #fffdf8;
    border: 1px solid #c9b698;
    border-radius: 4px;
    padding: 8px 10px;
    max-width: 100%;
}
.df-rankings-note, .alert { background: var(--df-sand); }
.df-category-label { color: var(--df-muted); }
.df-image-placeholder { background: var(--df-leather); color: #f8cc79; }
.df-footer { background: var(--df-footer); color: #f1e1c9; }
.df-footer .df-brand {
    display: block;
    width: 220px;
    max-width: 100%;
    line-height: 0;
}
.df-footer-wordmark { display: block; width: 100%; height: auto; }
.df-footer p { color: #d4bfa5; font-size: 12px; }
.df-footer-links { font-size: 13px; }
.df-footer-links a:hover { color: #ffd27c; text-decoration: underline; }
.df-footer a:focus-visible { outline-color: #ffd27c; }
.df-copyright { border-top-color: #5b4433; }
@media (max-width: 1000px) {
    .df-header .df-header-inner { gap: 20px; }
    .df-header .df-brand { width: 280px; flex-basis: 280px; }
}
@media (max-width: 760px) {
    .df-header .df-header-inner {
        min-height: 96px;
        padding-block: 4px;
        gap: 0;
    }
    .df-header .df-brand {
        width: min(260px, calc(100% - 100px));
        max-width: calc(100% - 100px);
        flex: 0 1 auto;
    }
    .df-nav { border-top: 1px solid var(--df-line); margin-top: 4px; }
    .df-nav a.df-nav-rankings { padding: 8px 15px; }
    .df-card-date { font-size: 12px; }
}