/* Public faction surfaces share the same cloth, lighting and typography. */
.ui-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.ui-icon--small { opacity: .55; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.icon-link:focus-visible { outline: 2px solid var(--coin-300); outline-offset: 5px; }
.site-nav .ui-icon--discord, .footer-nav .ui-icon--discord { width: 17px; height: 17px; }
.faction-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1.4rem; font: .95rem/1.4 var(--ui); color: #c7c0b4; }
.faction-member-count { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.recruitment-state { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: #b9b2a7; }
.recruitment-state i { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.recruitment-state.is-open { color: #b6c4a6; }
.recruitment-state.is-open i { background: currentColor; box-shadow: 0 0 8px #b6c4a622; }
.faction-links { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0 1.5rem; }
.faction-links a { font: .95rem/1.4 var(--ui); text-decoration: none; min-height: 44px; }
.faction-discord { color: #b7b4ad; text-decoration: none; }
.faction-discord:hover { color: #eee8dd; }
.faction-more { color: var(--coin-300); }
.faction-more .ui-icon { transition: transform .2s; }
.faction-more:hover .ui-icon { transform: translateX(3px); }
.faction-directory-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 3rem; color: #b8b2a7; font: .9rem/1.4 var(--ui); }
.faction-index .faction-catalog { margin-top: 1.5rem; gap: 1.5rem; }
.faction-card__leader { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.faction-leader-title { color: #b8b2a7; font: .875rem/1.4 var(--ui); }
.faction-card__leader-mobile { display: none; font: .9rem/1.4 var(--ui); color: #b8b2a7; margin-top: .75rem; }
.faction-back .ui-icon { transform: rotate(180deg); }
.faction-detail .faction-masthead { margin-bottom: 0; }
.faction-section-nav { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-block: 1rem 3rem; }
.faction-section-nav a { display: inline-flex; align-items: center; gap: .5rem; color: #d1c9bb; padding-block: .75rem; text-decoration: none; font-size: 1rem; }
.faction-section-nav .ui-icon { width: 14px; height: 14px; transform: rotate(90deg); color: var(--coin-300); }
.faction-section-nav a:hover { color: var(--coin-300); }
.faction-section-nav .faction-section-count { font-size: .9rem; color: #b8b2a7; }
#faction-about, #faction-members, #faction-join { scroll-margin-top: 7rem; }
.faction-aside > p { margin: 0; font-size: 1rem; line-height: 1.6; color: #c7c0b4; }
.faction-aside .button { white-space: normal; text-align: center; }
.faction-aside__contact { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.25rem; margin-top: .25rem; }
.faction-aside__contact .icon-link { justify-content: start; font-size: 1rem; min-height: 44px; }
.faction-aside__contact small { color: #b8b2a7; font-size: .875rem; }
.faction-aside .faction-pending { color: var(--coin-300); }
.faction-person__empty { display: grid; place-items: center; width: 64px; height: 128px; color: #928773; background: linear-gradient(0deg, #c3a87710, transparent); }
.faction-person__empty .ui-icon { width: 32px; height: 32px; }
.faction-person--leader .faction-person__empty { width: 88px; height: 176px; }
.faction-person canvas[data-skin-portrait] { width: 96px; height: 144px; }
.faction-person--leader canvas[data-skin-portrait] { width: 120px; height: 180px; }
.faction-card__leader canvas[data-skin-portrait] { width: 88px; height: 132px; }
@media (max-width: 1000px) { .faction-card__leader-mobile { display: block; } }
@media (max-width: 650px) {
    .faction-links a { min-height: 36px; }
    .faction-section-nav { gap: .5rem; }
}
.faction-standard {
    position: relative;
    width: 272px;
    max-width: 100%;
    padding: 16px 0 32px 16px;
    isolation: isolate;
}
.faction-standard__staff {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 12px;
    width: 4px;
    background: linear-gradient(90deg, #554733, #beaa79 45%, #66533a 80%);
    box-shadow: 3px 4px 5px #0005;
}
.faction-standard__staff::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -7px;
    width: 10px;
    height: 16px;
    background: linear-gradient(120deg, #d1bd8a, #6b5839);
    clip-path: polygon(50% 0, 100% 65%, 65% 100%, 35% 100%, 0 65%);
}
.faction-standard__cloth {
    position: relative;
    aspect-ratio: 4 / 3;
    filter: drop-shadow(8px 17px 12px #0006);
}
.faction-standard__cloth img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.faction-standard__cloth canvas {
    position: absolute;
    width: 106.25%;
    height: 112.5%;
    max-width: none;
    left: -3.125%;
    top: -6.25%;
    opacity: 0;
    pointer-events: none;
}
.faction-standard.is-painted canvas { opacity: 1; }
.faction-standard.is-painted img { opacity: 0; }
[data-faction-surface] { --faction-rgb: 113 83 57; }
.faction-arrival { color: var(--coin-300); font-size: 1.6rem; transition: transform .25s ease; }
a:hover > .faction-arrival, a:focus-visible > .faction-arrival { transform: translate(3px, -3px); }
.faction-index { position: relative; }
.faction-index .community-heading { margin-top: 1rem; }
.faction-index .community-heading h1 { font-size: clamp(3.5rem, 7vw, 6rem); }
.faction-index .community-intro { margin-top: 1rem; }
.faction-catalog { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-block: 2.5rem 3rem; }
.faction-card {
    position: relative;
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr) 88px;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: 2rem;
    border: 0;
    background: linear-gradient(100deg, rgb(var(--faction-rgb) / .3), rgb(var(--faction-rgb) / .12) 42%, rgb(var(--faction-rgb) / .025) 100%);
    border-radius: 3px;
    transition: background-color .25s;
}
.faction-card::before, .faction-masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/assets/images/home-grain.svg');
    opacity: .12;
    pointer-events: none;
}
.faction-card:hover, .faction-card:focus-within { background-color: #ffffff03; }
.faction-card > * { position: relative; min-width: 0; }
.faction-card__flag-link { display: block; }
.faction-card h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 500; letter-spacing: -.025em; margin: 0 0 .65rem; }
.faction-card h2 a { color: inherit; text-decoration: none; }
.faction-card h2 a:hover { color: var(--coin-300); }
.faction-card__copy p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: #d2cbbf; max-width: 36rem; }
.faction-card .faction-meta { margin-top: 1rem; }
.faction-card .faction-links { justify-content: start; gap: .5rem 1.5rem; padding: 0; margin-top: .9rem; }
.faction-card__leader { align-self: center; opacity: .88; }
.faction-card__leader canvas { width: 64px; height: 128px; filter: drop-shadow(8px 10px 8px #0006); }
.faction-card__leader .faction-person__empty { width: 64px; height: 128px; }
.faction-card__leader strong { font-size: .95rem; font-weight: 400; color: #c7c0b4; }
.faction-card__leader .faction-person { gap: 1rem; }
.faction-masthead {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr) 160px;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    margin-block: 2rem 3rem;
    padding: 3rem clamp(1.5rem, 4vw, 4rem);
    background: transparent;
}
.faction-masthead::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -32px 0;
    background: linear-gradient(100deg, rgb(var(--faction-rgb) / .28), rgb(var(--faction-rgb) / .12) 38%, transparent 85%);
    mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
    pointer-events: none;
}
.faction-masthead > * { position: relative; }
.faction-masthead .faction-standard { width: 336px; }
.faction-masthead h1 { margin: .5rem 0 1.25rem; font-size: clamp(2.75rem, 4vw, 4rem); letter-spacing: -.035em; }
.faction-masthead__summary { font: 1.4rem/1.5 var(--serif); color: #d2cbbf; max-width: 32rem; overflow-wrap: anywhere; }
.faction-masthead__leader-label { font-size: .95rem; color: #b8b2a7; }
.faction-masthead__leader { align-self: end; }
.faction-masthead__leader canvas { filter: drop-shadow(8px 12px 8px #0007); }
.faction-masthead__leader canvas[data-skin-portrait] { width: 160px; height: 240px; }
.faction-roster canvas[data-skin-portrait] { width: 112px; height: auto; }
.faction-masthead__leader strong { display: none; }
.faction-detail .faction-document { border: 0; padding-top: 0; grid-template-columns: minmax(0, 1fr) 18rem; }
.faction-detail .faction-prose p { color: #ccc8c0; font-size: 1.1rem; }
.faction-detail .faction-aside { align-self: start; background: #bca16f09; border: 0; border-radius: 3px; padding: 1.5rem; }
.faction-detail .faction-aside h2 { font-size: 1.6rem; }
.faction-detail .faction-people { grid-template-columns: repeat(auto-fill, minmax(100px, 120px)); }
.faction-detail .faction-roster { margin-top: 1.5rem; }
.faction-detail .faction-roster header h2 { margin-block: .5rem; }
.faction-index a:focus-visible, .faction-detail a:focus-visible { outline: 2px solid var(--coin-300); outline-offset: 5px; }
.faction-index .community-footnote, .faction-detail .community-footnote { color: #aaa396; }
@media (max-width: 1000px) {
    .faction-card { grid-template-columns: 176px minmax(0, 1fr); padding: 1.5rem; }
    .faction-card__leader { display: none; }
    .faction-masthead { grid-template-columns: 260px minmax(0, 1fr); }
    .faction-masthead__leader { display: none; }
}
@media (max-width: 650px) {
    .faction-index::before { inset-inline: 0; }
    .faction-index.community-page { padding-top: 1.5rem; }
    .faction-index .community-heading { margin-block: .5rem 1rem; gap: 1rem; }
    .faction-index .community-heading h1 { font-size: 3.3rem; }
    .faction-index .faction-directory-caption { margin-top: 1.75rem; }
    .faction-card { grid-template-columns: 112px minmax(0, 1fr); padding: 1.25rem 1rem; gap: 1rem; }
    .faction-card__copy { display: contents; }
    .faction-card__flag-link { grid-column: 1; grid-row: 1; }
    .faction-card .faction-standard { width: 112px; padding-bottom: 20px; }
    .faction-card h2 { grid-column: 2; grid-row: 1; font-size: clamp(1.45rem, 5vw, 2rem); margin: 0; }
    .faction-card__copy > :not(h2) { grid-column: 1 / -1; margin: 0; }
    .faction-card__copy p { font-size: 1.15rem; }
    .faction-card .faction-meta, .faction-card .faction-links { margin: 0; }
    .faction-card[data-long-name] h2 { grid-column: 1 / -1; grid-row: 1; }
    .faction-card[data-long-name] .faction-card__flag-link { grid-row: 2; }
    .faction-card[data-long-name] .faction-meta { grid-column: 2; grid-row: 2; align-self: start; gap: .5rem; }
    .faction-card[data-long-name] .faction-card__leader-mobile { grid-column: 2; grid-row: 2; align-self: end; }
    .faction-card[data-long-name] .faction-card__copy > p { grid-row: 3; }
    .faction-card[data-long-name] .faction-links { grid-row: 4; }
    .faction-masthead { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.5rem; gap: 1.5rem; }
    .faction-masthead .faction-standard { width: 272px; justify-self: center; }
    .faction-masthead h1 { font-size: 3rem; }
    .faction-detail .faction-document { grid-template-columns: minmax(0, 1fr); }
    .faction-detail .faction-people { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 1.5rem 1rem; }
    .faction-roster .faction-person { gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .faction-arrival, .faction-card { transition: none; }
}