:root {
    --warcry-color-background: oklch(14.48% 0 0);
    --warcry-color-surface: oklch(20.46% 0 0);
    --warcry-color-surface-alt: oklch(26.86% 0 0);
    --warcry-color-text: oklch(98.51% 0 0);
    --warcry-color-foreground: oklch(93% 0 0);
    --warcry-color-text-muted: oklch(71.55% 0 0);
    --warcry-color-border: oklch(30.92% 0 0);
    --warcry-color-primary: oklch(63.16% 0.2109 143.07);
    --warcry-color-primary-hover: oklch(69.50% 0.2315 143.15);
    --warcry-color-primary-link: oklch(74% 0.24 143.15);
    --warcry-color-primary-link-hover: oklch(80% 0.22 145);
    --warcry-color-primary-soft: oklch(63.16% 0.2109 143.07 / 0.2);
    --warcry-color-secondary: oklch(44.79% 0.1083 151.33);
    --warcry-color-secondary-hover: oklch(50.60% 0.1494 146.02);
    --warcry-color-secondary-soft: oklch(44.79% 0.1083 151.33 / 0.35);
    --warcry-color-accent: oklch(80.01% 0.1824 151.80);
    --warcry-color-accent-hover: oklch(86.49% 0.1748 152.98);
    --warcry-space-2: 0.5rem;
    --warcry-space-3: 0.75rem;
    --warcry-space-4: 1rem;
    --warcry-space-6: 1.5rem;
    --warcry-space-8: 2rem;
    --warcry-radius-2: 0.5rem;
    --warcry-header-brand-size: clamp(1.75rem, 2.8vw, 2.5rem);
    --warcry-header-link-size: clamp(1.35rem, 3vw, 2rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--warcry-color-background);
    background-image: url("/assets/images/background/page_pg.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--warcry-color-text);
    font-family: "Inter", "Segoe UI", "Noto Sans", sans-serif;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.warcry__brand {
    font-family: "Forum", "Times New Roman", serif;
}

a {
    color: var(--warcry-color-primary-link);
    text-decoration: none;
    transition: color 180ms ease;
}

a:hover,
a:focus-visible {
    color: var(--warcry-color-primary-link-hover);
}

.warcry__container {
    margin-inline: auto;
    width: min(100% - 2rem, 72rem);
}

.warcry__header {
    background: transparent;
    border: 0;
    font-family: "Forum", "Times New Roman", serif;
    inline-size: 100%;
    padding-inline: clamp(var(--warcry-space-4), 4vw, var(--warcry-space-8));
    position: sticky;
    top: 0;
    z-index: 10;
}

.warcry__header-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    inline-size: 100%;
    min-height: clamp(5.5rem, 11vh, 7rem);
    gap: var(--warcry-space-4);
}

.warcry__header-left {
    align-items: center;
    display: flex;
    gap: var(--warcry-space-8);
}

.warcry__brand {
    align-items: center;
    display: inline-flex;
    line-height: 0;
}

.warcry__brand-logo {
    display: block;
    inline-size: auto;
    max-inline-size: min(48vw, 24rem);
    block-size: clamp(2.75rem, 5vw, 4rem);
}

.warcry__brand:hover,
.warcry__brand:focus-visible {
    opacity: 0.9;
}

.warcry__nav-list {
    align-items: center;
    display: flex;
    gap: var(--warcry-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.warcry__nav-link {
    border-radius: var(--warcry-radius-2);
    color: var(--warcry-color-foreground);
    display: inline-block;
    font-size: var(--warcry-header-link-size);
    font-weight: 600;
    line-height: 1;
    padding: var(--warcry-space-3) var(--warcry-space-4);
    transition: color 180ms ease;
}

.warcry__nav-link:hover,
.warcry__nav-link:focus-visible {
    color: var(--warcry-color-primary-link);
}

.warcry__nav-link--active {
    background: var(--warcry-color-primary-soft);
    color: var(--warcry-color-accent-hover);
}

.warcry__header-cta {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    position: relative;
    transition: opacity 180ms ease, transform 180ms ease;
}

.warcry__header-cta-image {
    block-size: clamp(3.25rem, 6vw, 4.75rem);
    display: block;
    inline-size: auto;
    max-inline-size: min(42vw, 22rem);
}

.warcry__header-cta-label {
    color: var(--warcry-color-foreground);
    font-size: clamp(0.8rem, 1.15vw, 1.06rem);
    font-weight: 600;
    inline-size: 78%;
    left: 50%;
    letter-spacing: 0.015em;
    pointer-events: none;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 0 oklch(10% 0 0 / 0.75);
    text-transform: uppercase;
    top: 50%;
    transform: translate(-50%, -52%);
    white-space: nowrap;
}

.warcry__header-cta:hover,
.warcry__header-cta:focus-visible {
    opacity: 0.94;
    transform: translateY(-1px);
}

.warcry__button {
    align-items: center;
    background: var(--warcry-color-primary);
    border: 1px solid var(--warcry-color-primary);
    border-radius: var(--warcry-radius-2);
    color: var(--warcry-color-background);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    justify-content: center;
    line-height: 1.2;
    padding: var(--warcry-space-2) var(--warcry-space-4);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.warcry__button:hover,
.warcry__button:focus-visible {
    background: var(--warcry-color-primary-hover);
    border-color: var(--warcry-color-primary-hover);
}

.warcry__button--secondary {
    background: var(--warcry-color-secondary);
    border-color: var(--warcry-color-secondary);
    color: var(--warcry-color-text);
}

.warcry__button--secondary:hover,
.warcry__button--secondary:focus-visible {
    background: var(--warcry-color-secondary-hover);
    border-color: var(--warcry-color-secondary-hover);
}

.warcry__button--ghost {
    background: var(--warcry-color-primary-soft);
    border-color: var(--warcry-color-border);
    color: var(--warcry-color-accent);
}

.warcry__button--ghost:hover,
.warcry__button--ghost:focus-visible {
    background: var(--warcry-color-secondary-soft);
    color: var(--warcry-color-accent-hover);
}

.warcry__main {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100vh;
    padding-block: 0 var(--warcry-space-8);
}

.warcry__hero {
    align-items: center;
    display: flex;
    justify-content: center;
    inline-size: 100%;
    padding-block-start: clamp(var(--warcry-space-4), 9vh, 6rem);
    padding-inline: var(--warcry-space-4);
}

.warcry__hero-logo {
    block-size: auto;
    display: block;
    inline-size: min(90vw, 48rem);
    max-inline-size: 100%;
}

.warcry__footer {
    border-top: 1px solid var(--warcry-color-border);
    margin-top: var(--warcry-space-8);
    padding-block: var(--warcry-space-6);
}

.warcry__footer-copy {
    color: var(--warcry-color-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 42rem) {
    .warcry__header-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        padding-block: var(--warcry-space-3);
    }

    .warcry__header-left {
        align-items: flex-start;
        flex-direction: column;
    }

    .warcry__nav-list {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .warcry__nav-link {
        font-size: clamp(1.2rem, 7vw, 1.6rem);
    }
}