/* ============================================================
   Reset — the design system's own, no longer borrowed
   ============================================================ */
/* None of the three stylesheets shipped a reset, so every page silently
   depended on Tailwind Preflight arriving from cdn.tailwindcss.com for its box
   model. Measured on a live page by disabling that stylesheet, losing it meant:
   box-sizing fell back to content-box everywhere (every padded box grows),
   <body>/<h1>/<h2>/<p> regained UA margins, <ul> regained its discs, <img>
   became inline and lost its max-width cap, and form controls and <svg> fell
   back to Arial.

   This is a faithful subset of Preflight covering exactly those properties, so
   it is a no-op while the CDN is still loaded and the safety net once it is
   not. Keep it first in the cascade: everything below is written expecting it.
   Sources are Tailwind's preflight.css; only the rules this project actually
   relies on are reproduced. */

*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    margin: 0;
    line-height: inherit;
}

/* Headings inherit their type. Every heading in this project is sized by a
   class (.page-head__title, .panel__title, .eyebrow); left to the UA they would
   jump to the browser's own scale the moment Preflight went away. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p,
figure,
blockquote,
dl,
dd,
hr,
pre {
    margin: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

/* Form controls do not inherit type from their ancestors on their own. */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

:-moz-focusring {
    outline: auto;
}

textarea {
    resize: vertical;
}

::placeholder {
    opacity: 1;
}

/* Block-level media, capped to its container. The item tiles and character
   portraits are laid out on the assumption that an <img> is a block. */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

[hidden] {
    display: none !important;
}

/* Blood Legacy Rohan — landing page styles (self-contained, not shared with base.html) */

:root {
    /* The whole site is dark. Declaring it stops the UA painting form controls,
       scrollbars and autofilled inputs with light-scheme defaults. */
    color-scheme: dark;
    --bg: #070607;
    --bg-2: #0e0c0e;
    --card: #121014;
    --line: rgba(255, 255, 255, 0.08);
    --crimson: #c8102e;
    --crimson-2: #e5243f;
    --blood: #7a0a1c;
    --gold: #d4af37;
    --gold-2: #e8c766;
    --text: #f3efea;
    --muted: #a8a29e;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.font-display {
    font-family: Cinzel, Georgia, serif;
}

/* Brand colour utilities.
   These look like Tailwind classes but are defined here as real CSS on purpose:
   only landingpage.html carries an inline `tailwind.config` registering the
   crimson/gold palette, so on any page using base.html the Play CDN would emit
   nothing for them and the class would be inert. Defining them here makes the
   markup portable across every template, with or without that config. */
.text-gold {
    color: var(--gold);
}

.text-gold-2 {
    color: var(--gold-2);
}

.text-crimson {
    color: var(--crimson);
}

.text-crimson-2 {
    color: var(--crimson-2);
}

.hover\:text-gold:hover {
    color: var(--gold);
}

:focus-visible {
    outline: 2px solid var(--gold-2);
    outline-offset: 3px;
}

/* Own this rather than borrowing it from the Tailwind Play CDN. The shell and
   every form uses .sr-only for live regions and labels; if that CDN is ever
   dropped or blocked, an undefined .sr-only turns hidden announcements into
   visible page text. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--gold);
    color: #000;
    border-radius: 0.5rem;
    font-weight: 600;
}

.skip-link:focus {
    top: 1rem;
}

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled,
.site-header.is-open {
    background: rgba(7, 6, 7, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line);
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.9rem;
    border-radius: 0.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 6px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: var(--text);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.mobile-menu {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-menu.is-open {
        display: block;
    }
}

.mobile-menu .nav-link {
    display: flex;
    width: 100%;
    min-height: 48px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
        background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-primary {
    background: linear-gradient(180deg, var(--crimson-2), var(--crimson));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 30px -10px rgba(200, 16, 46, 0.8);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 16px 36px -10px rgba(229, 36, 63, 0.9);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

.btn-gold {
    background: linear-gradient(180deg, var(--gold-2), var(--gold));
    color: #1a1400;
    box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.6);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -10px rgba(232, 199, 102, 0.8);
}

.btn-sm {
    min-height: 40px;
    padding: 0 1.1rem;
    font-size: 0.875rem;
}

/* Without this a disabled button is pixel-identical to a live one. */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Icons inside buttons, so pages stop sizing each SVG by hand. */
.btn > svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 6, 7, 0.96) 0%, rgba(7, 6, 7, 0.8) 40%, rgba(7, 6, 7, 0.3) 100%),
        linear-gradient(180deg, rgba(7, 6, 7, 0.35) 0%, rgba(7, 6, 7, 0.1) 40%, var(--bg) 100%);
}

@media (max-width: 1023px) {
    .hero__bg {
        background-position: 70% center;
    }

    .hero__overlay {
        background:
            linear-gradient(180deg, rgba(7, 6, 7, 0.75) 0%, rgba(7, 6, 7, 0.85) 60%, var(--bg) 100%);
    }
}

.hero__logo {
    width: min(100%, 340px);
    height: auto;
    filter: drop-shadow(0 12px 30px rgba(200, 16, 46, 0.45));
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-2);
}

.eyebrow::before {
    content: "";
    width: 2rem;
    height: 1px;
    background: var(--gold);
}

.ember {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--crimson-2);
    box-shadow: 0 0 8px 2px rgba(229, 36, 63, 0.55);
    opacity: 0;
    animation: ember-rise 10s linear infinite;
    pointer-events: none;
}

@keyframes ember-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
    }

    12% {
        opacity: 0.9;
    }

    100% {
        transform: translate3d(48px, -100vh, 0) scale(0.25);
        opacity: 0;
    }
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.status-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(34, 197, 94, 0.7);
    animation: ping 1.8s var(--ease) infinite;
}

@keyframes ping {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.stat-chip {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
}

.stat-chip dt {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.stat-chip dd {
    margin-top: 0.15rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold-2);
}

.hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    color: var(--muted);
    animation: cue 2s var(--ease) infinite;
}

@keyframes cue {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 6px);
    }
}

/* ---------- Sections ---------- */
.section {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.section-alt {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
}

.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--gold);
}

.ornament::before,
.ornament::after {
    content: "";
    height: 1px;
    width: 4rem;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.ornament::after {
    background: linear-gradient(90deg, var(--gold), transparent);
}

.section-title {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.section-lead {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ---------- Cards ---------- */
.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--line);
    border-radius: 1rem;
    transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}

.card-hover:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.9);
}

.icon-badge {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: rgba(200, 16, 46, 0.12);
    border: 1px solid rgba(200, 16, 46, 0.35);
    color: var(--crimson-2);
}

.icon-badge svg {
    width: 1.5rem;
    height: 1.5rem;
}

.rate-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

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

.rate-row .rate-bar {
    grid-column: 1 / -1;
}

.rate-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.rate-bar > span {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blood), var(--crimson-2));
}

.rate-bar.is-gold > span {
    background: linear-gradient(90deg, #8a6d1f, var(--gold-2));
}

.step-number {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.08);
    color: var(--gold-2);
    font-family: Cinzel, Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
}

/* ---------- Classes ---------- */
.race-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.race-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.race-tab[aria-selected="true"] {
    background: rgba(200, 16, 46, 0.12);
    border-color: rgba(200, 16, 46, 0.45);
    color: var(--text);
}

.race-tab__thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    overflow: hidden;
}

.race-tab__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.race-tab__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.race-tab__role {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
}

@media (max-width: 1023px) {
    .race-tablist {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }
}

.race-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 560px;
    margin: 0 auto;
    background: radial-gradient(ellipse at 50% 85%, rgba(200, 16, 46, 0.28), transparent 60%);
}

.race-stage::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 4%;
    height: 10%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7), transparent 70%);
    z-index: 0;
}

.race-stage img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
    transition: opacity 0.25s var(--ease);
}

.race-stage img.is-swapping {
    opacity: 0;
}

.spec-card {
    padding: 1rem 1rem 1rem 1.15rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-left: 3px solid var(--spec, var(--crimson-2));
}

.spec-card h4 {
    color: var(--spec, var(--crimson-2));
}

.ability-list li {
    position: relative;
    padding-left: 1.25rem;
}

.ability-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: var(--gold);
}

/* ---------- News ---------- */
.news-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.news-item:last-child {
    border-bottom: 0;
}

.news-date {
    min-width: 3.25rem;
    text-align: center;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    line-height: 1.1;
}

.news-date b {
    display: block;
    font-size: 1.25rem;
    color: var(--text);
}

.news-date span {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tag-live {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.tag-maint {
    background: rgba(212, 175, 55, 0.14);
    color: var(--gold-2);
}

.tag-patch {
    background: rgba(200, 16, 46, 0.14);
    color: #fca5a5;
}

/* ---------- CTA band ---------- */
.cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cta-band__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}

.cta-band__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(7, 6, 7, 0.82) 30%, rgba(7, 6, 7, 0.82) 70%, var(--bg) 100%);
}

/* ---------- Footer ---------- */
.footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--muted);
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--gold-2);
}

.social-link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    color: var(--muted);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.social-link:hover {
    color: var(--text);
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(255, 255, 255, 0.04);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------- Back to top ---------- */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--gold-2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s, transform 0.25s var(--ease), background-color 0.2s;
}

.to-top:hover {
    background: var(--bg-2);
}

.to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 {
    transition-delay: 0.08s;
}

.reveal-delay-2 {
    transition-delay: 0.16s;
}

.reveal-delay-3 {
    transition-delay: 0.24s;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ember,
    .status-dot::after,
    .hero__scroll-cue {
        animation: none;
    }

    .ember {
        display: none;
    }

    .btn:hover,
    .card-hover:hover,
    .to-top {
        transform: none;
    }
}