:root {
    --tdd-gold: #d6ab61;
    --tdd-gold-light: #f1d99a;
    --tdd-red: #7a2018;
    --tdd-black: #080604;
}

.tdd-header,
.tdd-header * {
    box-sizing: border-box;
}

.tdd-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    aspect-ratio: 1680 / 420;
    min-height: 250px;
    max-height: 420px;
    overflow: visible;
    background: #050403;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .78);
}

.tdd-header__art {
    position: absolute;
    inset: 0;
    background-image: url("../images/header/header-tdd-codex.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    user-select: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tdd-header__controls {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.tdd-header__control {
    position: absolute;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 0;
    color: var(--tdd-gold-light);
    pointer-events: auto;
    cursor: pointer;

    background:
        radial-gradient(circle at 50% 36%, rgba(112, 41, 23, .72), rgba(31, 13, 9, .96)),
        linear-gradient(#6e2418, #240b08);

    border: 1px solid #a87634;
    border-radius: 5px;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, .65),
        inset 0 0 0 2px rgba(255, 215, 145, .05),
        inset 0 0 17px rgba(172, 58, 24, .22);

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        color .16s ease;
}

.tdd-header__control::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(236, 191, 98, .24);
    border-radius: 3px;
}

.tdd-header__control:hover,
.tdd-header__control:focus-visible {
    color: #ffe5a6;
    border-color: #e0b15d;
    box-shadow:
        0 9px 20px rgba(0, 0, 0, .7),
        0 0 14px rgba(212, 145, 48, .28),
        inset 0 0 18px rgba(181, 65, 27, .28);
    transform: translateY(-2px);
    outline: none;
}

.tdd-header__control--menu {
    left: 28px;
    gap: 6px;
    align-content: center;
}

.tdd-header__control--menu span {
    display: block;
    width: 28px;
    height: 3px;
    background: currentColor;
    border-radius: 3px;
    box-shadow: 0 1px 1px #2d1308;
}

.tdd-header__control--search {
    right: 28px;
}

.tdd-header__control--search svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.tdd-search-panel {
    position: absolute;
    top: calc(100% - 8px);
    right: 28px;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: min(440px, calc(100vw - 30px));
    padding: 11px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    background: linear-gradient(180deg, #25180f, #0b0805);
    border: 1px solid #8d622d;
    border-radius: 5px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .75);
    transition: .17s ease;
}

.tdd-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tdd-search-panel input[type="search"] {
    min-width: 0;
    padding: 11px 12px;
    color: #eadfc8;
    background: #080604;
    border: 1px solid #6d4b23;
    border-radius: 3px;
    outline: none;
}

.tdd-search-panel input[type="search"]:focus {
    border-color: #d1a45c;
    box-shadow: 0 0 0 2px rgba(209, 164, 92, .14);
}

.tdd-search-panel button {
    padding: 0 16px;
    color: #f0d89e;
    background: linear-gradient(#7a251a, #3b0e0a);
    border: 1px solid #a37332;
    border-radius: 3px;
    cursor: pointer;
}

.tdd-mobile-bar {
    display: none;
}

@media (max-width: 900px) {
    .tdd-header {
        aspect-ratio: auto;
        min-height: 245px;
        max-height: none;
    }

    .tdd-header__art {
        height: 190px;
        background-position: center top;
        background-size: auto 190px;
    }

    .tdd-header__controls {
        display: none;
    }

    .tdd-mobile-bar {
        position: absolute;
        top: 188px;
        left: 0;
        right: 0;
        z-index: 8;
        display: grid;
        grid-template-columns: 64px 1fr 64px;
        align-items: center;
        min-height: 57px;
        padding: 0 8px;
        background: linear-gradient(
            180deg,
            rgba(34, 24, 15, .99),
            rgba(11, 8, 5, .99)
        );
        border-top: 1px solid rgba(202, 151, 70, .38);
        border-bottom: 1px solid #66421b;
        box-shadow: 0 9px 18px rgba(0, 0, 0, .5);
    }

    .tdd-mobile-bar__label {
        color: #d7b875;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .13em;
        font-size: .82rem;
    }

    .tdd-mobile-bar button {
        width: 45px;
        height: 43px;
        justify-self: center;
        color: #d7ae60;
        background: linear-gradient(#572418, #240c08);
        border: 1px solid #8d622d;
        border-radius: 4px;
        cursor: pointer;
    }

    .tdd-search-panel {
        top: 245px;
        right: 10px;
    }
}

@media (max-width: 520px) {
    .tdd-header {
        min-height: 220px;
    }

    .tdd-header__art {
        height: 165px;
        background-size: auto 165px;
    }

    .tdd-mobile-bar {
        top: 163px;
    }

    .tdd-search-panel {
        top: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tdd-header__control,
    .tdd-search-panel {
        transition-duration: .001ms !important;
    }
}

.tdd-search-panel{grid-template-columns:minmax(0,1fr) auto}
.tdd-search-suggestions{position:absolute;top:calc(100% - 8px);left:11px;right:11px;z-index:3;overflow:hidden;background:#0b0805;border:1px solid #765126;border-top:0;box-shadow:0 14px 25px rgba(0,0,0,.7)}
.tdd-search-suggestions[hidden]{display:none}
.tdd-search-suggestion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;padding:.62rem .72rem;color:#e4cfaa;text-decoration:none;border-top:1px solid rgba(111,76,35,.38)}
.tdd-search-suggestion:hover,.tdd-search-suggestion.is-active{color:#ffe3a0;background:rgba(91,31,19,.72)}
.tdd-search-suggestion small{color:#9d8964}