:root {
    --coal: #222222;
    --ember: #e53935;
    --fire: #ff6f00;
    --warm: #ffc107;
    --cream: #fff8e8;
    --muted: #6f675d;
}

body {
    color: var(--coal);
    background: var(--cream);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-header,
footer {
    background: var(--coal);
    color: #fff;
}

.brand {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -.04em;
    text-decoration: none;
}

.nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.menu-toggle {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
    padding: .55rem;
    border: 1px solid #555;
    border-radius: .6rem;
    background: transparent;
}

.menu-toggle span {
    display: block;
    height: 2px;
    margin: 4px 0;
    border-radius: 1px;
    background: #fff;
    transition: transform .18s ease, opacity .18s ease;
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.main-menu {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    margin-top: .9rem;
    scrollbar-width: none;
}

.main-menu::-webkit-scrollbar {
    display: none;
}

.main-menu a {
    flex: 0 0 auto;
    padding: .35rem .65rem;
    border-radius: 999px;
    color: #d4d4d4;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.main-menu a:hover,
.main-menu a.active {
    color: var(--coal);
    background: var(--warm);
}

.language-switcher,
.language-switcher a {
    color: #bbb;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
}

.language-switcher a.active {
    color: var(--warm);
}

@media (max-width: 767.98px) {
    .menu-toggle {
        display: block;
    }

    .main-menu {
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        margin-top: .75rem;
    }

    .has-menu-js .main-menu {
        display: none;
    }

    .has-menu-js .main-menu.is-open {
        display: flex;
    }

    .main-menu a {
        width: 100%;
        padding: .65rem .75rem;
        border-radius: .5rem;
    }
}

.hero {
    overflow: hidden;
    background: radial-gradient(circle at 70% 45%, #ffe59a 0, #fff8e8 42%, #fff3d1 100%);
}

.page-hero {
    background: radial-gradient(circle at 75% 30%, #ffe59a 0, #fff8e8 42%, #fff3d1 100%);
}

.page-title {
    max-width: 820px;
    font-size: clamp(3rem, 10vw, 6rem);
    letter-spacing: -.035em;
    line-height: 1;
}

.page-intro {
    max-width: 720px;
}

.eyebrow {
    color: var(--ember);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(3.2rem, 13vw, 6.8rem);
    font-weight: 950;
    letter-spacing: -.055em;
    line-height: .96;
}

.lead,
.section-copy {
    color: var(--muted);
}

.score-wrap {
    width: 174px;
    padding: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 14px 36px rgba(34, 34, 34, .12);
}

.score-ring {
    display: grid;
    width: 154px;
    height: 154px;
    place-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 60%, transparent 61%),
        conic-gradient(var(--ember) calc(var(--score) * 1%), #f0e7d5 0);
    text-align: center;
}

.score-ring strong {
    font-size: 3.5rem;
    font-weight: 950;
    letter-spacing: -.1em;
    line-height: .8;
}

.score-ring span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.verdict {
    color: var(--ember);
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -.04em;
}

.bracio {
    width: min(100%, 330px);
    filter: drop-shadow(0 20px 12px rgba(34, 34, 34, .16));
}

.coal {
    fill: #3d3d3d;
    stroke: var(--coal);
    stroke-linejoin: round;
    stroke-width: 8;
}

.bracio-high .coal {
    fill: var(--ember);
}

.bracio-medium .coal {
    fill: #56514e;
}

.bracio-angry .coal {
    fill: #343434;
}

.eye {
    fill: #fff;
}

.mouth,
.arm,
.leg,
.eyebrow-line {
    fill: none;
    stroke: var(--coal);
    stroke-linecap: round;
    stroke-width: 7;
}

.eyebrow-line {
    stroke-width: 6;
}

.flame {
    stroke: var(--fire);
    stroke-linejoin: round;
    stroke-width: 4;
}

.flame-main {
    fill: var(--warm);
}

.flame-small,
.spark {
    fill: var(--warm);
    stroke: var(--fire);
    stroke-width: 4;
}

.weather-section,
.how-section {
    background: #fff;
}

.forecast-section {
    background: #fff8e8;
}

.forecast-best {
    display: flex;
    max-width: 760px;
    flex-direction: column;
    gap: .2rem;
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    border-left: .35rem solid var(--fire);
    border-radius: .5rem;
    background: #fff;
}

.forecast-best span {
    color: var(--ember);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.forecast-best strong {
    font-size: 1.1rem;
}

.forecast-table {
    width: 100%;
    min-width: 620px;
    overflow: hidden;
    border: 1px solid #eadfc7;
    border-collapse: separate;
    border-radius: 1rem;
    border-spacing: 0;
    background: #fff;
}

.forecast-table th,
.forecast-table td {
    padding: .85rem 1rem;
    border-right: 1px solid #f0e8da;
    border-bottom: 1px solid #f0e8da;
    vertical-align: middle;
}

.forecast-table tr:last-child th,
.forecast-table tr:last-child td {
    border-bottom: 0;
}

.forecast-table th:last-child,
.forecast-table td:last-child {
    border-right: 0;
}

.forecast-table thead th {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.forecast-table tbody th {
    min-width: 7.5rem;
}

.forecast-slot strong,
.forecast-slot span,
.forecast-slot small {
    display: block;
}

.forecast-slot-content {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.forecast-slot .bracio {
    width: 44px;
    flex: 0 0 44px;
    filter: none;
}

.forecast-slot strong {
    color: var(--ember);
    font-size: 1.8rem;
    letter-spacing: -.06em;
    line-height: 1;
}

.forecast-slot span {
    margin-top: .25rem;
    font-size: .8rem;
    font-weight: 850;
}

.forecast-slot small {
    margin-top: .2rem;
    color: var(--muted);
    font-weight: 700;
}

.forecast-slot-good,
.forecast-slot-excellent {
    background: #fff8d8;
}

.section-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    font-weight: 950;
    letter-spacing: -.035em;
}

.weather-card {
    height: 100%;
    padding: 1rem;
    border: 1px solid #eee6d9;
    border-radius: 1rem;
    background: #fffdfa;
}

.weather-card span {
    display: block;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.weather-card strong {
    display: block;
    margin-top: .5rem;
    font-size: 1.8rem;
    letter-spacing: -.07em;
}

.weather-card small {
    font-size: .8rem;
    letter-spacing: 0;
}

.ranking-list {
    overflow: hidden;
    max-width: 720px;
    border: 1px solid #eadfc7;
    border-radius: 1rem;
    background: #fff;
}

.ranking-row {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #f0e8da;
}

.ranking-row:last-child {
    border-bottom: 0;
}

.ranking-link {
    color: var(--coal);
    text-decoration: none;
    transition: background-color .18s ease;
}

.ranking-link:hover {
    color: var(--coal);
    background: #fff8e8;
}

.ranking-link small {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}

.ranking-position {
    color: var(--muted);
    font-weight: 800;
}

.ranking-score {
    min-width: 2.75rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: var(--warm);
    font-weight: 950;
    text-align: center;
}

.how-section .section-copy {
    max-width: 620px;
    font-size: 1.15rem;
}

.search-panel {
    max-width: 760px;
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid #eadfc7;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 14px 36px rgba(34, 34, 34, .08);
}

.form-label {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.form-control {
    border-color: #eadfc7;
}

.form-control:focus {
    border-color: var(--fire);
    box-shadow: 0 0 0 .25rem rgba(255, 111, 0, .16);
}

.btn-fire {
    color: #fff;
    background: var(--ember);
    font-weight: 850;
}

.btn-fire:hover {
    color: #fff;
    background: #c62828;
}

.btn-location {
    border: 1px solid var(--coal);
    color: var(--coal);
    font-size: .85rem;
    font-weight: 850;
}

.btn-location:hover {
    color: #fff;
    background: var(--coal);
}

.location-status {
    color: var(--muted);
    font-size: .85rem;
}

.result-card {
    display: flex;
    max-width: 760px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #eadfc7;
    border-radius: 1rem;
    background: #fff;
}

.result-card h2,
.about-card h2 {
    font-weight: 950;
    letter-spacing: -.025em;
}

.result-card .score-wrap {
    flex: 0 0 auto;
    transform: scale(.75);
    margin: -1.25rem;
}

.result-link {
    display: inline-block;
    margin-top: .9rem;
    color: var(--coal);
    font-size: .86rem;
    font-weight: 850;
}

.about-hero .bracio {
    max-width: 245px;
}

.about-card {
    height: 100%;
    padding: 1.4rem;
    border: 1px solid #eadfc7;
    border-radius: 1rem;
    background: #fff;
}

.about-card p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.7;
}

.privacy-list {
    display: grid;
    gap: 1rem;
    max-width: 880px;
}

.privacy-card h2 {
    font-size: 1.35rem;
}

.credits-work {
    margin-top: 1rem;
    color: var(--coal) !important;
    font-weight: 800;
}

.credits-vat {
    font-size: .86rem;
}

.credits-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--ember);
    font-weight: 900;
}

.mascot-hero .bracio {
    max-width: 260px;
}

.mascot-states-intro {
    max-width: 680px;
}

.mascot-card {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid #eadfc7;
    border-radius: 1rem;
    background: #fff;
}

.mascot-card-stage {
    display: grid;
    min-height: 230px;
    margin: -1.25rem -1.25rem 1.25rem;
    place-items: center;
    border-radius: 1rem 1rem 0 0;
    background: #fff8e8;
}

.mascot-card-medium .mascot-card-stage {
    background: #fff3d1;
}

.mascot-card-high .mascot-card-stage {
    background: #ffe6a0;
}

.mascot-card .bracio {
    max-width: 180px;
}

.mascot-card h3 {
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.mascot-card p:last-child {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.65;
}

.mascot-philosophy {
    background: #fff;
}

.mascot-philosophy-card {
    max-width: 760px;
}

.error-hero .bracio {
    max-width: 270px;
}

.error-search-panel {
    margin-top: 0;
}

.footer-meta {
    display: block;
    margin-top: .35rem;
    color: #bdbdbd;
}

.footer-meta a {
    color: var(--warm);
}

@media (min-width: 992px) {
    .hero .container {
        min-height: 650px;
        display: grid;
        align-items: center;
    }

    .main-menu {
        gap: .5rem;
    }
}