@font-face {
    font-family: "BlackCat Cormorant";
    src: url("../assets/blackcat/fonts/cormorant-upright.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --blackcat-ink: #1c1415;
    --blackcat-surface: #251b1c;
    --blackcat-paper: #f4e9e3;
    --blackcat-muted: #bdaaa7;
    --blackcat-red: #c96461;
    --blackcat-pink: #dda5a0;
    --blackcat-display: "BlackCat Cormorant", Georgia, serif;
    --blackcat-heading: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --blackcat-sans: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --blackcat-width: 1160px;
    --blackcat-gutter: clamp(24px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--blackcat-ink); scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--blackcat-paper); background: var(--blackcat-ink); font: 15px/1.8 var(--blackcat-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blackcat-pink); outline-offset: 6px; }
::selection { color: var(--blackcat-ink); background: var(--blackcat-pink); }
.skip-link { position: fixed; z-index: 2000; top: 12px; left: 12px; padding: 10px 18px; color: var(--blackcat-ink); background: var(--blackcat-paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header__inner, .hero__inner, .server-entry__inner, .world-story__inner, .section__inner, .closing-cta__inner, .site-footer__inner { width: min(var(--blackcat-width), calc(100% - var(--blackcat-gutter) * 2)); margin-inline: auto; }

/* Quiet navigation; the artwork runs behind it without a decorative frame. */
.site-header { position: absolute; z-index: 1000; top: 0; width: 100%; background: linear-gradient(var(--blackcat-ink), transparent); }
.site-header__inner { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px; }
.brand__mark { display: block; width: 34px; height: 34px; flex: 0 0 34px; }
.brand__text { display: grid; gap: 3px; }
.brand__name { font: 600 26px/1 var(--blackcat-display); }
.brand__descriptor { color: var(--blackcat-muted); font-size: 8px; letter-spacing: .14em; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav > a { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; white-space: nowrap; transition: color 160ms ease; }
.site-nav > a:hover { color: var(--blackcat-pink); }
.site-nav__login { color: var(--blackcat-muted); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; color: var(--blackcat-paper); background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 5px 0; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
.is-nav-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
.is-nav-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 24px; padding: 12px 26px; border: 0; font-size: 13px; font-weight: 600; transition: background-color 180ms ease, color 180ms ease; }
.button span { transition: transform 180ms ease; }
.button:hover span { transform: translate(2px, -2px); }
.button--solid { color: #231415; background: var(--blackcat-red); }
.button--solid:hover, .button--solid:focus-visible { color: #231415 !important; background: var(--blackcat-pink); }
.button--small { min-height: 44px; padding: 10px 20px; }
.button--text { color: var(--blackcat-paper); background: transparent; }
.button--text:hover { color: var(--blackcat-pink); background: rgba(221, 165, 160, .05); }
.eyebrow, .server-entry__eyebrow { margin: 0 0 20px; color: var(--blackcat-pink); font-size: 10px; font-weight: 500; letter-spacing: .19em; line-height: 1.6; }

/* One background and one wordmark. No clipped foreground characters or stat panels. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--blackcat-ink); }
.hero__image, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__image { z-index: -2; object-fit: cover; object-position: center 42%; opacity: .38; filter: sepia(.35); }
.hero__veil { z-index: -1; background: linear-gradient(180deg, rgba(28,20,21,.12), rgba(28,20,21,.12) 45%, var(--blackcat-ink)), linear-gradient(90deg, rgba(28,20,21,.45), transparent 40% 60%, rgba(28,20,21,.45)); }
.hero__inner { padding-block: 162px 76px; }
.hero__copy { max-width: 880px; margin-inline: auto; text-align: center; animation: arrive 650ms ease-out both; }
.hero .eyebrow { margin-bottom: 18px; color: #d6bebb; font-size: 11px; letter-spacing: .28em; }
.hero h1 { margin: 0; color: #e3a29a; font: 500 clamp(100px, 13.5vw, 188px)/.85 var(--blackcat-display); letter-spacing: -.025em; }
.hero__subtitle { margin: 32px 0 0; font-size: clamp(17px, 2vw, 22px); font-weight: 400; letter-spacing: .25em; }
.hero__lede { margin: 18px 0 28px; color: var(--blackcat-muted); font-size: 14px; line-height: 1.9; }
.hero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.server-entry { background: var(--blackcat-ink); }
.server-entry__inner { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; align-items: center; gap: 44px; padding-block: 32px 58px; }
.server-entry__eyebrow { margin-bottom: 8px; font-size: 9px; }
.server-entry h2 { margin: 0; font-family: var(--blackcat-heading); font-size: 23px; font-weight: 500; line-height: 1.5; }
.server-entry__description { margin: 8px 0 0; color: var(--blackcat-muted); font-size: 13px; }
.server-entry__worlds { display: flex; justify-content: space-around; gap: 32px; margin: 0; padding: 0; list-style: none; }
.server-entry__worlds li { display: grid; gap: 2px; }
.server-entry__worlds span { color: var(--blackcat-muted); font: 500 17px/1.5 var(--blackcat-display); }
.server-entry__worlds strong { font: 500 42px/1 var(--blackcat-display); }
.server-entry__action { min-width: 132px; }
.server-entry__action::after { content: "↗"; margin-left: 18px; color: var(--blackcat-pink); }

.world-story { background: var(--blackcat-surface); }
.world-story__inner { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(40px, 7vw, 100px); padding-block: 90px; }
.world-story__visual { position: relative; min-width: 0; padding-block: 24px; }
.world-story__party { display: block; width: 100%; height: auto; filter: saturate(.68); }
.world-story__mandragora { position: absolute; width: 29%; height: auto; right: -3%; bottom: 0; }
.world-story h2, .section-heading h2, .closing-cta h2 { margin: 0; font-family: var(--blackcat-heading); font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; letter-spacing: .025em; line-height: 1.5; text-wrap: balance; }
.world-story__copy > p:not(.eyebrow) { max-width: 34em; margin: 18px 0 0; color: var(--blackcat-muted); font-size: 14px; }
.world-story__flags { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.world-story__flags figure { display: flex; margin: 0; align-items: center; gap: 8px; }
.world-story__flags img { display: block; width: 26px; height: 26px; object-fit: cover; }
.world-story__flags figcaption { color: #c9b6b1; font-size: 9px; letter-spacing: .04em; }

.section__inner { padding-block: 80px; }
.section-heading { margin-bottom: 40px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading p:last-child { max-width: 38em; margin: 14px 0 0; color: var(--blackcat-muted); font-size: 14px; }
.section-heading--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.section-heading--split > p { margin: 0 0 6px; }
.journey-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.journey-card { display: grid; position: relative; grid-template-columns: 32px 1fr; column-gap: 14px; align-content: start; padding-block: 10px 16px; min-width: 0; }
.journey-card__index { display: none; }
.journey-card__icon { grid-column: 1; grid-row: 1 / 3; width: 28px; height: 28px; margin-top: 6px; object-fit: contain; }
.journey-card__label { grid-column: 2; color: var(--blackcat-muted); font-size: 8px; letter-spacing: .09em; }
.journey-card strong { grid-column: 2; font-size: 18px; font-weight: 500; transition: color 160ms ease; }
.journey-card p { grid-column: 2; margin: 10px 0 0; color: var(--blackcat-muted); font-size: 12px; line-height: 1.9; }
.journey-card__arrow { grid-column: 2; color: var(--blackcat-pink); font-size: 19px; padding-top: 8px; transition: transform 160ms ease; }
.journey-card:hover strong { color: var(--blackcat-pink); }
.journey-card:hover .journey-card__arrow { transform: translateX(5px); }

.section--smoke { background: var(--blackcat-surface); }
.update-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; }
.update-row { position: relative; display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 6px 0 26px; }
.update-row:first-child { grid-row: 1 / 3; align-content: end; min-height: 290px; padding: 32px; isolation: isolate; background: #322526; }
.update-row:first-child::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, rgba(28,20,21,.28), rgba(28,20,21,.95)), url('../assets/blackcat/ffxi-traveler.jpg') center 64% / cover; opacity: .85; }
.update-row__number { display: none; }
.update-row__type { color: var(--blackcat-pink); font-size: 10px; letter-spacing: .13em; }
.update-row__content h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.5; }
.update-row:first-child h3 { font-size: 26px; }
.update-row__content p { max-width: 36em; margin: 9px 0 0; color: var(--blackcat-muted); font-size: 13px; line-height: 1.85; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; justify-self: start; color: var(--blackcat-pink); font-size: 12px; }
.text-link:hover { color: var(--blackcat-paper); text-decoration: underline; text-underline-offset: 5px; }

.section--parchment { background: var(--blackcat-ink); }
.section__inner--narrow { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 64px; }
.faq-item { margin-bottom: 8px; }
.faq-item__question { display: grid; width: 100%; grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 16px; min-height: 64px; align-items: center; padding: 12px; border: 0; color: var(--blackcat-paper); background: transparent; text-align: left; cursor: pointer; }
.faq-item__question:hover { background: rgba(221,165,160,.05); }
.faq-item__number { color: var(--blackcat-pink); font-size: 10px; }
.faq-item__question > span:nth-child(2) { font-size: 15px; font-weight: 400; line-height: 1.6; }
.faq-item__toggle { color: var(--blackcat-pink); font-size: 22px; line-height: 1; text-align: center; transition: transform 180ms ease; }
.faq-item.is-open .faq-item__toggle { transform: rotate(45deg); }
.faq-item__answer { padding: 0 48px 18px 54px; color: var(--blackcat-muted); font-size: 13px; }
.faq-item__answer p { margin: 0; }

.closing-cta { background: var(--blackcat-surface); }
.closing-cta__inner { padding-block: 58px; text-align: center; }
.closing-cta .eyebrow { margin-bottom: 14px; }
.closing-cta h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 26px; }
.acknowledgements__inner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; width: min(var(--blackcat-width), calc(100% - var(--blackcat-gutter) * 2)); margin-inline: auto; padding-block: 64px 32px; }
.acknowledgements .eyebrow { margin-bottom: 10px; }
.acknowledgements h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.5; }
.acknowledgements__copy { max-width: 44em; color: var(--blackcat-muted); font-size: 14px; line-height: 1.9; }
.acknowledgements__copy p { margin: 0; }
.acknowledgements__copy p + p { margin-top: 12px; }
.acknowledgements__copy strong { color: var(--blackcat-pink); font-weight: 500; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 34px; padding-block: 44px 26px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand strong { font: 500 26px/1 var(--blackcat-display); }
.footer-brand div > span { display: block; margin-top: 8px; color: var(--blackcat-muted); font-size: 8px; letter-spacing: .12em; }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer-nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--blackcat-muted); font-size: 12px; }
.footer-nav a:hover { color: var(--blackcat-pink); }
.site-footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--blackcat-muted); font-size: 10px; }

@media (max-width: 1100px) {
    .site-nav { gap: 15px; }
    .brand__descriptor { display: none; }
    .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 48px; }
    .section__inner--narrow { gap: 36px; }
}
@media (max-width: 960px) {
    html { scroll-padding-top: 84px; }
    body.is-nav-open { overflow: hidden; }
    .site-header { position: fixed; background: rgba(28,20,21,.97); }
    .site-header__inner { min-height: 72px; }
    .brand__descriptor { display: block; }
    .menu-toggle { display: block; }
    .site-nav { position: absolute; top: 72px; inset-inline: 0; display: grid; gap: 0; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; padding: 16px var(--blackcat-gutter) 28px; background: var(--blackcat-surface); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease; }
    .is-nav-open .site-nav { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
    .site-nav > a { min-height: 48px; padding-block: 10px; font-size: 14px; }
    .site-nav .button { margin-top: 12px; }
    .hero__inner { padding-top: 148px; }
    .server-entry__inner { grid-template-columns: minmax(0, 1fr) 180px; gap: 16px 28px; }
    .server-entry__action { grid-column: 1 / -1; justify-self: start; padding-inline: 0; }
    .world-story__inner { gap: 32px; padding-block: 64px; }
    .world-story h2 { font-size: 30px; }
    .update-list { gap: 0 36px; }
    .section__inner--narrow { grid-template-columns: 1fr; gap: 20px; }
    .section__inner--narrow .section-heading { margin-bottom: 12px; }
    .site-footer__inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
    :root { --blackcat-gutter: 24px; }
    .hero__inner { padding-block: 130px 52px; }
    .hero .eyebrow { font-size: 9px; letter-spacing: .17em; margin-bottom: 24px; }
    .hero h1 { font-size: clamp(84px, 22vw, 132px); }
    .hero__subtitle { margin-top: 24px; font-size: 16px; letter-spacing: .14em; }
    .hero__lede { margin-block: 16px 24px; font-size: 13px; }
    .hero__actions { gap: 8px; }
    .hero__actions .button { flex: 1 1 130px; padding-inline: 14px; gap: 12px; }
    .hero__image { object-position: 48% center; opacity: .28; }
    .server-entry__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 24px 12px; padding-block: 16px 40px; }
    .server-entry__copy { grid-column: 1 / -1; }
    .server-entry h2 { font-size: 21px; }
    .server-entry__worlds { gap: 28px; justify-content: flex-start; }
    .server-entry__worlds strong { font-size: 36px; }
    .server-entry__action { grid-column: 2; padding-inline: 0; min-width: 0; font-size: 12px; }
    .server-entry__action::after { margin-left: 2px; }
    .world-story__inner { display: flex; flex-direction: column-reverse; gap: 36px; padding-block: 52px 40px; }
    .world-story__visual { width: 100%; max-width: 420px; padding-top: 0; }
    .world-story__mandragora { right: 0; }
    .world-story h2, .section-heading h2 { font-size: 28px; }
    .world-story__flags { gap: 14px; }
    .world-story__flags figcaption { font-size: 8px; }
    .section__inner { padding-block: 52px; }
    .section-heading { margin-bottom: 28px; }
    .section-heading--split { display: block; }
    .section-heading--split > p { margin-top: 12px; }
    .journey-grid { grid-template-columns: 1fr; gap: 12px; }
    .journey-card { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 0 14px; padding-block: 12px; }
    .journey-card__arrow { grid-column: 3; grid-row: 1 / 4; align-self: center; padding: 0; }
    .journey-card p { margin-top: 5px; }
    .update-list { display: block; }
    .update-row { padding: 28px 0 0; }
    .update-row:first-child { min-height: 260px; padding: 26px; margin-bottom: 8px; }
    .update-row:first-child h3 { font-size: 23px; }
    .update-row__content h3 { font-size: 20px; }
    .faq-item__question { padding-inline: 0; gap: 10px; grid-template-columns: 22px minmax(0, 1fr) 20px; }
    .faq-item__answer { padding: 0 28px 18px 32px; }
    .closing-cta__inner { padding-block: 46px; }
    .acknowledgements__inner { grid-template-columns: 1fr; gap: 20px; padding-block: 44px 20px; }
    .site-footer__inner { padding-block: 36px 24px; }
    .footer-nav { gap: 4px 20px; }
    .site-footer__bottom { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}