:root {
    --cream: #f3dfb4;
    --paper: #d9b979;
    --gold: #c49242;
    --dark-gold: #81531e;
    --brown: #392013;
    --dark-brown: #140b06;
    --black-brown: #090604;
    --green: #71c85b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;

    color: var(--cream);
    background: var(--black-brown);

    font-family: "Roboto Slab", Georgia, serif;
}

a {
    color: inherit;
}

.ranch {
    position: relative;
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(10, 6, 3, 0.18),
            rgba(10, 6, 3, 0.42)
        ),
        url("../img/ranch-background-v2.png") center top / cover no-repeat fixed;
}

.topbar {
    min-height: 105px;
    padding: 14px 5vw;

    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(190px, 1fr);
    align-items: center;
    gap: 28px;

    position: relative;
    z-index: 10;

    background:
        linear-gradient(
            rgba(35, 19, 10, 0.96),
            rgba(20, 11, 6, 0.96)
        );

    border-bottom: 3px solid #65401e;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.48),
        inset 0 -1px rgba(238, 186, 98, 0.2);
}

.brand {
    display: inline-flex;
    flex-direction: column;

    width: fit-content;

    text-decoration: none;
}

.brand-name {
    font-family: "Rye", Georgia, serif;
    font-size: clamp(36px, 4.8vw, 60px);
    line-height: 1;
    letter-spacing: 2px;

    text-shadow: 
        0 5px 0 rgba(0, 0, 0, 0.45),
        0 10px 18px rgba(0,0,0,.35);
}

.brand-tagline {
    margin-top: 8px;

    color: var(--gold);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.navigation {
    display: flex;
    align-items: center;
    gap: 9px;
}

.navigation a {
    padding: 12px 15px;

    color: rgba(243, 223, 180, 0.78);
    text-decoration: none;

    border-bottom: 2px solid transparent;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.navigation a:hover,
.navigation a.active {
    color: var(--cream);
    border-color: var(--gold);
    background: rgba(196, 146, 66, 0.08);
}

.clock-box {
    justify-self: end;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.clock-box span {
    color: var(--gold);

    font-family: "Rye", Georgia, serif;
    font-size: 25px;
    letter-spacing: 2px;
}

.clock-box small {
    margin-top: 5px;

    color: rgba(243, 223, 180, 0.63);
    font-size: 11px;
}

.hero {
    min-height: 620px;
    padding: 70px 5vw 42px;

    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hero::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 22px;

    background:
        linear-gradient(
            180deg,
            #5a351b 0%,
            #3d2111 45%,
            #241208 100%
        );

    border-top: 1px solid rgba(218, 165, 84, 0.28);
    border-bottom: 3px solid #160b06;

    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.55),
        inset 0 2px 3px rgba(255, 208, 130, 0.08);

    z-index: 1;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;

    height: 170px;

    background:
        linear-gradient(
            transparent,
            rgba(10, 6, 3, 0.82)
        );

    pointer-events: none;
}

.status-sign {
    padding: 9px 15px;

    position: absolute;
    top: 25px;
    left: 5vw;

    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--cream);
    background: rgba(28, 15, 8, 0.82);

    border: 1px solid rgba(222, 173, 91, 0.55);
    border-radius: 6px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.38);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.status-light {
    width: 9px;
    height: 9px;

    background: var(--green);
    border-radius: 50%;

    box-shadow: 0 0 11px rgba(113, 200, 91, 0.85);

    animation: pulse 1.8s ease-in-out infinite;
}

.hero-sign {
    width: min(620px, 92%);
    padding: 32px 38px;

    margin-top: 35px;

    position: relative;
    z-index: 2;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #7a4b24 0%,
            #6a3e1d 22%,
            #5a3418 48%,
            #472714 72%,
            #32190d 100%
        );

    border: 4px solid #6b4320;
    border-radius: 12px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.58),
        inset 0 0 32px rgba(216, 163, 75, 0.12);
}

.hero-sign > p:first-child {
    color: var(--paper);

    font-family: "Rye", Georgia, serif;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-sign h1 {
    margin-top: 8px;

    font-family: "Rye", Georgia, serif;
    font-size: clamp(42px, 7vw, 76px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 3px;

    text-shadow:
        0 5px 0 rgba(0, 0, 0, 0.35),
        0 0 25px rgba(227, 177, 91, 0.14);
}

.hero-sign h2 {
    margin-top: 10px;

    color: var(--paper);

    font-size: 17px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.star-divider {
    max-width: 430px;
    margin: 20px auto 4px;

    display: flex;
    align-items: center;
    gap: 13px;
}

.star-divider span {
    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}

.star-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.star-divider strong {
    color: var(--gold);
}

.greeting {
    margin-top: 22px;

    color: rgba(243, 223, 180, 0.75);

    font-size: 13px;
    letter-spacing: 1px;
}

.weather-preview {
    width: 260px;
    padding: 20px;

    position: absolute;
    z-index: 2;
    right: 4.5vw;
    bottom: 52px;

    background:
        linear-gradient(
            rgba(50, 28, 15, 0.95),
            rgba(24, 13, 7, 0.96)
        );

    border: 2px solid #79512a;
    border-radius: 8px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.panel-label {
    display: block;

    color: var(--paper);

    font-family: "Rye", Georgia, serif;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.weather-main {
    margin-top: 18px;

    display: flex;
    align-items: center;
    gap: 15px;
}

.weather-icon {
    font-size: 38px;
}

.weather-main strong,
.weather-main small {
    display: block;
}

.weather-main strong {
    font-size: 17px;
}

.weather-main small {
    margin-top: 5px;

    color: rgba(243, 223, 180, 0.58);
    font-size: 11px;
}

.preview-panels {
    padding: 0 3vw 30px;
    min-height: 320px;

    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.9fr);
    gap: 22px;

    background:
        linear-gradient(
            rgba(13, 8, 4, 0.72),
            rgba(13, 8, 4, 0.96)
        );
}

.wood-panel {
    padding: 22px;

    background:
        linear-gradient(
            rgba(214, 181, 121, 0.97),
            rgba(180, 139, 81, 0.97)
        );

    color: var(--brown);

    border: 4px solid #4c2d16;
    border-radius: 8px;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.48),
        inset 0 0 22px rgba(74, 41, 20, 0.22);
}

.panel-heading {
    margin-bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.panel-heading h2 {
    font-family: "Rye", Georgia, serif;
    font-size: clamp(18px, 2.2vw, 27px);
    font-weight: 400;
    text-transform: uppercase;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(95px, 1fr));
    gap: 10px;
}

.market-card {
    min-height: 165px;
    padding: 17px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--cream);
    text-align: center;

    background:
        linear-gradient(
            rgba(58, 33, 18, 0.98),
            rgba(26, 15, 8, 0.98)
        );

    border: 2px solid #765026;
    border-radius: 6px;

    box-shadow:
        inset 0 0 18px rgba(205, 150, 66, 0.08),
        0 7px 14px rgba(62, 34, 17, 0.24);

    transition:
        transform 170ms ease,
        border-color 170ms ease;
}

.market-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
}

.market-card span {
    color: var(--paper);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.market-card strong {
    margin: 19px 0;

    font-family: "Rye", Georgia, serif;
    font-size: 29px;
}

.market-card small {
    color: rgba(243, 223, 180, 0.52);
    font-size: 9px;
}

.link-groups {
    display: grid;
    gap: 12px;
}

.link-row {
    min-height: 72px;
    padding: 12px;

    display: grid;
    grid-template-columns: 48px repeat(3, 1fr);
    align-items: center;
    gap: 9px;

    background: rgba(245, 222, 176, 0.55);

    border: 2px solid rgba(74, 42, 20, 0.55);
    border-radius: 6px;
}

.row-icon {
    height: 44px;

    display: grid;
    place-items: center;

    color: var(--cream);
    background: var(--brown);

    border-radius: 5px;

    font-size: 20px;
}

.link-row a {
    padding: 10px 6px;

    color: var(--brown);
    text-align: center;
    text-decoration: none;

    background: rgba(255, 244, 216, 0.55);

    border: 1px solid rgba(75, 42, 20, 0.24);
    border-radius: 4px;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 150ms ease,
        background 150ms ease;
}

.link-row a:hover {
    transform: translateY(-2px);
    background: rgba(255, 248, 225, 0.95);
}

footer {
    padding: 25px 20px;

    text-align: center;

    background:
        linear-gradient(
            rgba(34, 18, 9, 0.98),
            rgba(14, 8, 4, 0.99)
        );

    border-top: 3px solid #62401f;
}

footer p {
    color: var(--paper);

    font-family: "Rye", Georgia, serif;
    font-size: clamp(14px, 2vw, 20px);
    line-height: 1.6;
}

footer span {
    display: block;
    margin-top: 15px;

    color: rgba(243, 223, 180, 0.38);

    font-size: 10px;
    letter-spacing: 2px;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@media (max-width: 1100px) {
    .topbar {
        grid-template-columns: 1fr auto;
    }

    .navigation {
        display: none;
    }

    .weather-preview {
        display: none;
    }

    .preview-panels {
        grid-template-columns: 1fr;
    }

    .market-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .topbar {
        padding: 18px;
    }

    .clock-box {
        display: none;
    }

    .hero {
        min-height: 420px;
        padding: 65px 15px 35px;
    }

    .status-sign {
        left: 15px;
    }

    .hero-sign {
        padding: 28px 18px;
    }

    .hero-sign::before {
        left: 38px;
    }

    .hero-sign::after {
        right: 38px;
    }

    .preview-panels {
        padding: 0 12px 18px;
    }

    .wood-panel {
        padding: 15px;
    }

    .market-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .link-row {
        grid-template-columns: 42px 1fr;
    }

    .link-row a {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------
   Ekstra western-detaljer
-------------------------------------------------- */

/* --------------------------------------------------
   Cowboyhatt i ren CSS
-------------------------------------------------- */

.cowboy-hat {
    position: absolute;
    z-index: 40;
    top: 4px;
    left: 12px;

    width: 118px;
    height: 88px;

    pointer-events: none;

    transform:
        rotate(-13deg)
        translateZ(0);

    filter:
        drop-shadow(0 10px 8px rgba(0, 0, 0, 0.58));

    animation: hatArrival 900ms ease-out both;
}

.hat-crown {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 27px;

    width: 67px;
    height: 55px;

    background:
        radial-gradient(
            ellipse at 50% 12%,
            rgba(255, 220, 158, 0.18),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #7c4b24 0%,
            #4f2b15 45%,
            #2e180d 100%
        );

    border: 2px solid #241207;
    border-radius: 48% 48% 25% 25% / 35% 35% 18% 18%;

    box-shadow:
        inset 8px 0 12px rgba(255, 210, 135, 0.08),
        inset -10px -8px 14px rgba(0, 0, 0, 0.38);
}

.hat-crown::before,
.hat-crown::after {
    content: "";

    position: absolute;
    top: 6px;

    width: 17px;
    height: 37px;

    background: rgba(20, 9, 4, 0.24);

    border-radius: 50%;
    filter: blur(1px);
}

.hat-crown::before {
    left: 13px;
    transform: rotate(-7deg);
}

.hat-crown::after {
    right: 13px;
    transform: rotate(7deg);
}

.hat-crease {
    position: absolute;
    z-index: 3;
    top: 5px;
    left: 50%;

    width: 12px;
    height: 39px;

    background:
        linear-gradient(
            rgba(19, 8, 3, 0.50),
            rgba(19, 8, 3, 0.08)
        );

    border-radius: 50%;

    transform: translateX(-50%);
}

.hat-band {
    position: absolute;
    z-index: 4;
    left: -1px;
    right: -1px;
    bottom: 6px;

    height: 10px;

    background:
        linear-gradient(
            #27140b,
            #130905
        );

    border-top: 1px solid rgba(216, 164, 87, 0.30);
    border-bottom: 1px solid #0d0603;

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.48);
}

.hat-band::after {
    content: "★";

    position: absolute;
    top: 50%;
    right: 7px;

    color: #bd8b3e;
    font-size: 7px;

    transform: translateY(-50%);
}

.hat-brim {
    position: absolute;
    z-index: 1;
    left: 2px;
    bottom: 15px;

    width: 114px;
    height: 29px;

    background:
        radial-gradient(
            ellipse at center,
            #6c3f20 0%,
            #4b2814 55%,
            #271309 100%
        );

    border: 2px solid #1c0d06;
    border-radius: 50%;

    box-shadow:
        inset 0 5px 8px rgba(215, 161, 91, 0.12),
        inset 0 -7px 9px rgba(0, 0, 0, 0.42);
}

.hat-brim::before,
.hat-brim::after {
    content: "";

    position: absolute;
    top: -4px;

    width: 37px;
    height: 17px;

    background: #3c1e0e;

    border-radius: 50%;
}

.hat-brim::before {
    left: -2px;
    transform: rotate(12deg);
}

.hat-brim::after {
    right: -2px;
    transform: rotate(-12deg);
}

.ranch-motto {
    position: absolute;
    z-index: 20;
    top: 16px;
    right: 28px;

    min-width: 210px;
    padding: 12px 22px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #332013;
    text-align: center;
    text-transform: uppercase;

    background:
        linear-gradient(
            145deg,
            #d4ae70,
            #a9793e
        );

    border: 3px solid #4b2c16;
    border-radius: 5px;

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.48),
        inset 0 0 16px rgba(255, 235, 185, 0.28);

    transform: rotate(1.2deg);

    font-family: "Rye", Georgia, serif;
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 1px;

    animation: mottoArrival 800ms 250ms ease-out both;
}

.ranch-motto::before,
.ranch-motto::after {
    content: "";

    position: absolute;
    top: 7px;

    width: 6px;
    height: 6px;

    background: #55351d;
    border-radius: 50%;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.48);
}

.ranch-motto::before {
    left: 8px;
}

.ranch-motto::after {
    right: 8px;
}

.ranch-motto strong {
    margin-top: 2px;
    font-size: 12px;
}

.sign-nails span {
    position: absolute;
    top: 12px;

    width: 9px;
    height: 9px;

    background:
        radial-gradient(
            circle at 35% 30%,
            #c9a16c,
            #4d2d17 60%
        );

    border-radius: 50%;

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.65);
}

.sign-nails span:first-child {
    left: 14px;
}

.sign-nails span:last-child {
    right: 14px;
}

.hero-sign {
    animation: signDrop 850ms 120ms ease-out both;
}

.weather-preview {
    animation: panelArrival 750ms 380ms ease-out both;
}

.preview-panels {
    animation: panelsRise 850ms 520ms ease-out both;
}

.market-card {
    position: relative;
    overflow: hidden;
}

.market-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 30%,
            rgba(255, 223, 155, 0.08) 48%,
            transparent 66%
        );

    transform: translateX(-120%);

    transition: transform 550ms ease;

    pointer-events: none;
}

.market-card:hover::after {
    transform: translateX(120%);
}

.link-row a {
    position: relative;
    overflow: hidden;
}

.link-row a::after {
    content: "›";

    margin-left: 5px;

    opacity: 0;

    transform: translateX(-4px);

    display: inline-block;

    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.link-row a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

@keyframes hatArrival {
    from {
        opacity: 0;
        transform:
            translate(-35px, -30px)
            rotate(-25deg)
            scale(0.7);
    }

    to {
        opacity: 1;
        transform:
            translate(0, 0)
            rotate(-14deg)
            scale(1);
    }
}

@keyframes mottoArrival {
    from {
        opacity: 0;
        transform:
            translateY(-20px)
            rotate(3deg);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            rotate(1.2deg);
    }
}

@keyframes signDrop {
    from {
        opacity: 0;
        transform:
            translateY(-42px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes panelArrival {
    from {
        opacity: 0;
        transform: translateX(38px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes panelsRise {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    .ranch-motto {
        display: none;
    }
}

@media (max-width: 650px) {
    .cowboy-hat {
        top: 6px;
        left: 2px;

        transform:
            rotate(-13deg)
            scale(0.68);

        transform-origin: top left;
    }
}

@media (min-width: 651px) {
    .brand {
        margin-left: 78px;
    }
}

body {
    background: #120a05;
}

.ranch {
    background-color: #120a05;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

footer {
    position: relative;
    z-index: 5;
    background:
        linear-gradient(
            rgba(34, 18, 9, 0.99),
            rgba(14, 8, 4, 1)
        );
}

.hero {
    position: relative;
}

.hero-chain {
    position: absolute;
    top: 0;

    width: 42px;
    height: 140px;

    object-fit: cover;
    object-position: top;

    z-index: 2;

    filter: drop-shadow(
        2px 3px 3px rgba(0, 0, 0, 0.75)
    );
}

.hero-chain-left {
    left: calc(50% - 245px);
}

.hero-chain-right {
    right: calc(50% - 245px);
}

.hero-sign {
    position: relative;
    z-index: 3;
}