@import url('design-2026/assets-map.css');

/* The supplied artwork is decorative. Text, data and controls remain native HTML. */
:root { --gold: #d6b98f; --line: #554536; --radius: 2px; --muted: #b5bec1; --text: #ece7dd; }
body { padding: 22px 28px 16px; background: linear-gradient(#05090adb,#05090ae8), url('design-2026/home/hero-home.webp') center top / cover fixed; }
.site-aura { background: radial-gradient(ellipse at 0 65%,#7f291522,transparent 45%); opacity: .3; }
.site-wrap { max-width: 1448px; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.site-header, .panel, .stats-bar, .legend-banner, .inf-hero, .inf-feature-card, .event-card {
  border: 1px solid #897052;
  border-image: url('design-2026/frame.svg') 30 / 13px / 3px stretch;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px #030809, 0 2px 10px #0009;
}
.panel { background: linear-gradient(110deg,#080e11,#060c0f); }
.panel::before { display: none; }
.page-hero { background-image: url('design-2026/home/hero-home.webp'); }
.auth-art { background-image: linear-gradient(0deg,#060c0ff2,#060c0f55),url('design-2026/join/hero-join.webp'); }
.panel-head { min-height: 38px; padding: 9px 13px; background: linear-gradient(100deg,#a87b3410,transparent); border-bottom: 1px solid #5c4a34; }
.panel-head h2 { font-size: 16px; letter-spacing: 1.1px; line-height: 1.2; font-weight: 600; }
.panel-head h2 > .icon { width: 23px; height: 23px; color: var(--gold); }
.panel-head > .text-link { font-size: 12px; }
.site-header { min-height: 64px; gap: 12px; padding: 0 14px; display: flex; background: linear-gradient(95deg,#080e11f9,#070b0df0); position: relative; z-index: 5; }
.desktop-nav { flex: 0 1 475px; min-width: 0; height: 40px; }
.desktop-nav a { padding: 0 10px; font-size: 13px; min-height: 35px; }
.brand { flex: 0 1 330px; height: 64px; min-width: 0; margin-right: auto; padding: 0; clip-path: none; background: none; border: 0; }
.clan-logo, .brand .clan-logo { display: flex; gap: 8px; height: 72px; }
.clan-logo > img, .brand .clan-logo > img { width: 62px; height: 70px; object-fit: contain; mix-blend-mode: normal; }
.clan-logo-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.clan-logo .clan-wordmark, .brand .clan-wordmark { font-family: 'Cinzel',Georgia,serif; font-size: clamp(25px,2.35vw,34px); letter-spacing: -.02em; color: #f4e9d5; text-shadow: 0 2px #6e3728, 0 3px 5px #000; }
.clan-logo-copy small { font-size: 8px; text-transform: uppercase; letter-spacing: 3px; color: #c8bcaa; }
.header-motto { font-size: 9px; letter-spacing: 1.8px; line-height: 1.45; flex-shrink: 0; }
.header-actions { gap: 13px; }
.header-actions .icon-button { width: 36px; height: 36px; min-height: 36px; border-color: #584b3d; }
.site-footer { min-height: 112px; margin-top: 14px; padding: 18px 14px; align-items: center; background: linear-gradient(0deg,#05090bf0,#05090b87),url('design-2026/home/hero-home.webp') center 65% / cover; border-top: 1px solid #8b6b4e; }
.footer-brand { gap: 10px; }
.footer-brand img { width: 54px; height: 64px; object-fit: contain; mix-blend-mode: normal; }
.footer-brand p { font-size: 10px; letter-spacing: 1.5px; }
.footer-center { letter-spacing: 1.4px; }
.footer-links { border-color: #6a5740; }
.button { border-radius: 2px; border-color: #f06864; background: linear-gradient(#8f101e,#3d0911 80%); box-shadow: inset 0 0 7px #fc3a424d, 0 0 9px #ed162623; text-transform: uppercase; letter-spacing: .65px; }
.button.ghost { background: linear-gradient(#10191ccc,#070c0fee); border-color: #77766c; box-shadow: inset 0 1px #a2a99a26; }
.button:hover { filter: brightness(1.16); }
input, select, textarea { border-radius: 2px; }
:focus-visible { outline: 2px solid #ffd295; outline-offset: 3px; }

.inf-hero { --hero-height: 238px; min-height: var(--hero-height); position: relative; isolation: isolate; margin: 4px 0 8px; overflow: hidden; background: #070c0f; }
.inf-hero__art { position: absolute; inset: 0 0 0 31%; z-index: -2; background-size: cover; }
.inf-hero__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#070c0f 0%,#070c0f22 12%,transparent 28%),linear-gradient(0deg,#03080a30,transparent 30%); }
.inf-hero__copy { width: 46%; padding: 24px 32px; min-height: var(--hero-height); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: linear-gradient(90deg,#060c0ff5,#060c0fe6 70%,transparent); }
.inf-hero__copy h1 { font-family: var(--serif); font-size: clamp(48px,5vw,74px); line-height: 1; font-weight: 600; letter-spacing: .005em; color: #f4ead7; text-shadow: 1px 2px #825132, 0 4px 4px #000; margin: 0 0 8px; }
.inf-hero__motto { color: #ed2032; font-family: var(--serif); font-size: clamp(19px,1.9vw,28px); font-weight: 700; letter-spacing: .095em; line-height: 1.05; text-transform: uppercase; margin: 0 0 14px; width: 100%; }
.inf-hero__copy p { color: #c5ced0; font-size: 16px; line-height: 1.35; max-width: 470px; margin: 0; }
.inf-hero__caption { font-family: var(--serif); font-size: 12px; text-transform: uppercase; letter-spacing: 2.5px; color: #b8b2a7; margin-top: 18px; }
.inf-hero--home { --hero-height: 365px; }
.inf-hero--home .inf-hero__art { background-image: url('design-2026/home/hero-home-three-warriors-v3.webp'); background-position: left center; }
.inf-hero--home .inf-hero__copy { width: 43%; padding: 26px 32px; }
.inf-hero--home h1, .inf-hero--join h1 { font-family: 'Cinzel',Georgia,serif; font-size: clamp(42px,4.6vw,68px); letter-spacing: -.03em; text-transform: none; }
.inf-hero--home .inf-hero__motto { padding-bottom: 13px; border-bottom: 1px solid #886746; margin-bottom: 14px; }
.inf-hero--home p { font-size: 16px; max-width: 435px; }
.inf-hero .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.inf-hero .hero-buttons .button { font-size: 13px; min-height: 46px; padding: 10px 15px; }
.inf-hero .hero-buttons .button .icon { display: block; width: 23px; height: 23px; }
.inf-hero--chat { --hero-height: 195px; }
.inf-hero--chat .inf-hero__copy { width: 53%; }
.inf-hero--chat .inf-hero__art { left: 39%; }
.inf-hero--chat .inf-hero__motto { font-size: clamp(17px,1.35vw,20px); }
.inf-hero--chat .inf-hero__copy p { max-width: 620px; }
.inf-hero--join { --hero-height: 306px; }
.inf-hero--join .inf-hero__copy { width: 42%; }
.inf-hero--roster { --hero-height: 205px; }
.inf-hero--events { --hero-height: 255px; }
.inf-hero--events .inf-hero__copy { width: 43%; }

.home-statline { grid-template-columns: minmax(0,1fr) 23%; padding: 0; gap: 0; margin: 0 0 10px; }
.stats-bar { min-height: 84px; }
.stat { padding: 12px 18px; gap: 16px; }
.stat > .icon { width: 40px; height: 40px; }
.stat strong { font-size: 28px; }
.stat span { font-size: 10px; letter-spacing: .6px; }
.legend-banner { display: flex; min-height: 84px; background: linear-gradient(90deg,#080c0b33,#090c0ea6),url('design-2026/events/hero-events.webp') center 75% / cover; }
.legend-banner span { text-shadow: 0 2px 3px #000; }
.inf-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 12px; scroll-margin-top: 12px; }
.inf-feature-card { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 132px; padding: 15px 42px 15px 43%; background-color: #080c0f; background-size: auto 100%; background-repeat: no-repeat; }
.inf-feature-card--storage { background-image: linear-gradient(90deg,transparent 35%,#080c0f 62%),url('design-2026/home/card-clan-storage.webp'); }
.inf-feature-card--guides { background-image: linear-gradient(90deg,transparent 35%,#080c0f 62%),url('design-2026/home/card-tactics-guides.webp'); }
.inf-feature-card--achievements { background-image: linear-gradient(90deg,transparent 34%,#080c0f 64%),url('design-2026/home/card-achievements.webp'); }
.inf-feature-card > div { flex: 1; }
.inf-feature-card h2 { font-family: var(--serif); font-size: 22px; line-height: 1.02; letter-spacing: .6px; color: #e5d5b8; margin: 0 0 9px; }
.inf-feature-card p { font-size: 13px; line-height: 1.25; color: #bfc3c4; margin: 0; }
.inf-circle-arrow { position: absolute; width: 30px; height: 30px; right: 11px; bottom: 20px; border: 1px solid #be3541; border-radius: 50%; display: grid; place-items: center; color: #eacbaa; }
.inf-circle-arrow .icon { width: 17px; height: 17px; }
.inf-feature-card:hover { filter: brightness(1.13); }
.home-dashboard { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 12px; padding: 0; }
.home-people { display: contents; }
.home-roster { grid-column: auto; width: 100%; }
.home-news { grid-column: auto; grid-row: auto; min-height: 242px; }
.home-conversation { grid-column: auto; padding: 0; }
.home-conversation .mini-chat { min-height: 242px; height: 100%; }
.home-roster .empty-state { padding: 28px 14px; }
.home-roster .empty-state > .icon { width: 36px; height: 36px; }
.home-roster .empty-state h3 { font-family: var(--serif); font-size: 24px; }
.home-roster .empty-state p { font-size: 13px; }
.home-members { grid-template-columns: repeat(3,minmax(0,1fr)); }
.mini-chat .chat-feed { flex: 1; height: 158px; min-height: 130px; max-height: 350px; }
.mini-chat .chat-login { padding: 10px; }
.clan-news-item > div { display: block; }
.clan-news-item h3 { font-size: 14px; }
.news-footline { padding: 18px; font-size: 10px; }
.inf-services { margin: 12px 0; }
.inf-services .service-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.inf-services .service-tile { flex: 1 1 220px; min-height: 58px; padding: 9px 15px; gap: 12px; background: #080f12c9; }
.inf-services .service-tile > .icon:first-child { width: 32px; height: 32px; margin: 0; }
.inf-services .service-tile h2 { font-size: 15px; margin: 0 0 3px; }
.inf-services .service-tile p { display: block; font-size: 11px; }
.inf-services .service-tile p br { display: none; }

.community-chat-grid { grid-template-columns: 225px minmax(0,1fr) 285px; gap: 10px; align-items: stretch; }
.community-channel-panel { min-width: 0; }
.community-channel-panel > nav { padding: 6px; }
.channel-link { min-height: 36px; font-size: 14px; }
.community-channel-forum { padding: 11px 10px; }
.community-channel-forum a { font-size: 13px; min-height: 30px; }
.community-channel-panel .community-online-panel { margin-top: 8px; border: 0; border-image: none; box-shadow: none; background: transparent; }
.community-channel-panel .person-row { padding: 7px 11px; gap: 10px; }
.community-channel-panel .person-row img { border: 1px solid #9c8260; width: 36px; height: 40px; }
.community-channel-panel .person-row b { font-size: 14px; overflow-wrap: anywhere; }
.community-chat-grid > .chat-panel { height: auto; min-height: 600px; display: flex; flex-direction: column; }
.community-chat-grid .chat-feed { height: 440px; min-height: 280px; flex: 1; max-height: 650px; background: radial-gradient(ellipse at 60% 65%,#27333928,transparent 70%); }
.community-chat-grid .message { padding: 10px 0; border-bottom: 1px solid #899e9b0a; }
.community-chat-grid .message > img { width: 43px; height: 49px; border: 1px solid #847154; border-radius: 2px; }
.community-chat-grid .message-name { color: #e5d3a9; font-size: 14px; }
.community-chat-grid .message-body { font-size: 14px; line-height: 1.4; }
.community-chat-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.community-chat-quicklinks a { min-height: 40px; padding: 9px 11px; font-size: 13px; }
.inf-chat-code { padding-bottom: 14px; }
.inf-chat-code ol { padding: 0 16px 0 35px; color: #c5c9c8; font-size: 14px; line-height: 1.5; }
.inf-chat-code li { margin: 8px 0; }
.inf-chat-code li::marker { color: var(--gold); }
.inf-chat-code > .text-link { margin-inline: 15px; font-size: 12px; }
.inf-chat-code > strong { display: block; color: #ef3040; font-family: var(--serif); text-transform: uppercase; letter-spacing: 2px; text-align: center; margin: 16px 8px 0; font-size: 19px; }
.inf-chat-hall { flex: 1; min-height: 208px; background: linear-gradient(90deg,transparent,#060a0d55),url('design-2026/chat/clan-hall.webp') center / cover; display: flex; justify-content: flex-end; align-items: center; padding: 15px; }
.inf-chat-hall > div { text-align: center; width: 47%; text-shadow: 0 2px 5px #000; }
.inf-chat-hall h2, .inf-chat-hall p { font-family: var(--serif); color: #f0d6a4; font-size: 23px; text-transform: uppercase; }
.inf-chat-hall .icon { width: 30px; height: 30px; }
.inf-chat-hall p { margin: 10px 0; }
.chat-search { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-bottom: 1px solid #3f3a2e; }
.chat-search input { font-size: 13px; min-height: 34px; padding: 6px 10px; }
.chat-search > .icon { flex: 0 0 17px; color: #b8bdba; }
.chat-search-empty { text-align: center; padding: 15px; color: #bcc3c5; }
.message[hidden], .chat-day[hidden] { display: none !important; }
.community-mobile-quicklinks { display: none; }

.inf-forum-rules { display: flex; align-items: center; min-height: 117px; gap: 18px; margin: 0 0 12px; overflow: hidden; }
.inf-forum-rules > img { align-self: stretch; width: 260px; object-fit: cover; }
.inf-forum-rules > div { padding: 12px 0; flex: 1; }
.inf-forum-rules h2 { font-size: 25px; font-family: var(--serif); color: #e5d3b1; margin: 4px 0; }
.inf-forum-rules p { font-size: 14px; color: #b7c0c1; margin: 0; }
.inf-forum-rules > .icon { margin: 15px; color: var(--gold); }
.community-forum-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 12px; align-items: start; }
.community-forum-main { display: contents; }
.community-categories { grid-column: 1; grid-row: 2; margin: 0; }
.community-forum-aside { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 12px; }
.inf-forum-toolbar { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.community-forum-search { flex: 1; display: flex; gap: 8px; margin: 0; padding: 0; background: transparent; border: 0; min-width: 0; }
.inf-search-field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 70px; border: 1px solid #53615f; padding-left: 10px; background: #071014; }
.inf-search-field > .icon { width: 18px; flex-shrink: 0; }
.inf-search-field input { border: 0; box-shadow: none; background: transparent; min-width: 0; width: 100%; }
.community-forum-search select { width: 150px; min-width: 90px; font-size: 13px; }
.inf-forum-toolbar > .button { flex-shrink: 0; font-size: 11px; min-height: 40px; padding: 9px; }
.inf-forum-toolbar .icon-button { flex-shrink: 0; width: 37px; min-height: 40px; }
.inf-forum-table-head, .inf-forum-category { display: grid; grid-template-columns: minmax(0,1.5fr) 65px 82px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 14px; }
.inf-forum-table-head { min-height: 34px; padding-block: 8px; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; color: #aeb9ba; border-bottom: 1px solid #655039; }
.inf-forum-category { border-bottom: 1px solid #59482f88; min-height: 82px; }
.inf-forum-category:last-child { border-bottom: 0; }
.inf-forum-category.active { background: linear-gradient(90deg,#6a10182b,transparent); }
.inf-forum-category-title { display: flex; gap: 15px; align-items: center; min-width: 0; }
.inf-forum-category-title > .icon { width: 55px; height: 55px; flex: 0 0 55px; color: var(--gold); }
.inf-forum-category-title h2 { font-family: var(--serif); color: #e9d4b0; font-size: 23px; line-height: 1.05; margin: 0 0 5px; }
.inf-forum-category-title p { font-size: 12px; line-height: 1.25; color: #aeb8bb; margin: 0; }
.inf-forum-count { text-align: center; color: #dedfdc; font-size: 16px; }
.inf-forum-last { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.inf-forum-last img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; border: 1px solid #ac8860; }
.inf-forum-last small { display: block; color: #acb5b5; font-size: 11px; margin-top: 3px; }
.community-pinned-topics { grid-column: 1; grid-row: 3; margin: 0; }
.community-latest-topics { grid-column: 1; grid-row: 4; margin: 0; }
.community-knowledge { display: none; }
.inf-forum-online > p { padding: 12px 14px 4px; margin: 0; color: #b9c2c3; font-size: 14px; }
.inf-online-avatars { display: flex; flex-wrap: wrap; padding: 12px; gap: 9px; }
.inf-online-avatars img { border-radius: 50%; border: 1px solid #bd9d6e; object-fit: cover; }
.inf-clan-quote { padding: 16px 20px; text-align: center; }
.inf-clan-quote blockquote { font-family: var(--serif); font-size: 25px; font-style: italic; line-height: 1.2; color: #e6c49a; margin: 0 0 12px; }
.inf-clan-quote > .icon { width: 55px; height: 55px; }
.inf-clan-quote > strong { display: block; font-family: 'Cinzel',serif; color: #e5d8bb; }

.inf-join-overview { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; margin-bottom: 12px; }
.inf-join-about > p { padding: 13px 18px 0; margin: 0; color: #bfc8c9; font-size: 14px; line-height: 1.4; }
.inf-join-signature { display: flex; align-items: center; gap: 18px; padding: 12px 18px; }
.inf-join-signature > .icon { width: 46px; height: 46px; }
.inf-join-signature > span { text-transform: uppercase; font-size: 11px; letter-spacing: 2px; color: #c0b3a0; }
.inf-requirement-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 10px; }
.community-requirements .community-requirement { display: flex; flex-direction: column; align-items: center; padding: 14px 10px; border: 1px solid #68543d; background: #080e1199; gap: 12px; margin: 0; }
.community-requirement > .icon { width: 42px; height: 42px; margin: 0; }
.community-requirement p { font-size: 13px; line-height: 1.35; text-align: center; margin: 0; }
.community-rules-link { display: block; padding: 0 12px 10px; font-size: 12px; }
.inf-join-benefits > p { display: flex; align-items: center; gap: 12px; padding: 0 16px; margin: 10px 0; color: #c0c8c9; font-size: 13px; }
.inf-join-benefits .icon { width: 27px; height: 27px; flex: 0 0 27px; color: var(--gold); }
.community-join-grid { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.community-application { grid-column: auto; grid-row: auto; min-width: 0; }
.community-application .field { margin-bottom: 10px; }
.community-application .form-grid { gap: 0 10px; }
.community-application .field > span { font-size: 12px; }
.community-application input { min-height: 37px; font-size: 13px; }
.community-application textarea { font-size: 13px; }
.community-application-intro { font-size: 13px; }
.community-application-form { padding: 0 12px 14px; }
.community-application-form .check { font-size: 12px; }
.community-join-steps { grid-column: auto; grid-row: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; padding-bottom: 15px; }
.community-join-steps > .panel-head { grid-column: 1 / -1; }
.community-join-steps > div:not(.panel-head) { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 20px 12px; text-align: center; border: 0; }
.community-join-steps > div > span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #f14450; border-radius: 50%; background: linear-gradient(#881320,#28080e); box-shadow: 0 0 12px #da152733; color: #ffe8c8; font-size: 20px; }
.community-join-steps h3 { font-family: var(--serif); font-size: 22px; letter-spacing: 1px; margin-bottom: 10px; }
.community-join-steps p { font-size: 13px; line-height: 1.4; }
.community-faq { display: block; margin: 0; }
.community-faq > div:first-child { padding: 0; }
.community-faq details { margin: 6px 8px; border: 1px solid #3e4947; }
.community-faq summary { padding: 9px; min-height: 36px; font-size: 12px; }
.community-faq details p { padding: 0 10px 10px; font-size: 13px; line-height: 1.4; }
.community-faq-art { display: flex; justify-content: flex-end; align-items: center; min-height: 156px; margin: 10px 8px; padding: 12px; background: linear-gradient(90deg,transparent,#060c0fd4 58%),url('design-2026/join/faq-knight.webp') left center / cover; }
.community-faq-art > div { width: 66%; }
.community-faq-art h3 { font-size: 16px; margin: 0 0 8px; }
.community-faq-art p { font-family: var(--font); font-size: 12px; margin: 0 0 12px; text-transform: none; letter-spacing: 0; }
.community-faq-art .button { font-size: 10px; padding: 8px; }

.roster-layout { display: grid; grid-template-columns: minmax(0,2.4fr) minmax(280px,1fr); gap: 12px; }
.roster-filters { padding: 9px; gap: 10px; }
.roster-group-tabs a { min-height: 38px; padding: 9px 15px; font-size: 13px; }
.roster-class-tabs { flex: 1; flex-wrap: wrap; }
.roster-class-tabs a { min-height: 35px; font-size: 12px; }
.roster-search { flex: 0 1 250px; margin: 0; }
.inf-roster-group { margin-bottom: 12px; }
.reference-roster-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; padding: 10px 13px; }
.reference-roster-table td { font-size: 14px; padding: 9px 13px; }
.reference-roster-table td:first-child { width: 42%; }
.reference-roster-table .roster-person { gap: 12px; }
.reference-roster-table .roster-person > .icon { width: 25px; height: 28px; color: var(--gold); }
.reference-roster-table .roster-person img { width: 42px; height: 48px; object-fit: cover; border-color: #95714f; }
.roster-person strong { display: block; font-size: 16px; }
.roster-person small { display: block; font-size: 12px; color: #b3babb; margin-top: 3px; }
.reference-roster-table .roster-class .icon { width: 24px; height: 24px; }
.reference-roster-table .online-label { font-size: 12px; }
.roster-profile-link .icon { width: 16px; height: 16px; }
.roster-aside { display: flex; flex-direction: column; gap: 12px; }
.inf-roster-numbers { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 15px 10px 10px; gap: 7px; text-align: center; }
.inf-roster-numbers > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inf-roster-numbers .icon { width: 30px; height: 30px; }
.inf-roster-numbers strong { font-size: 25px; font-weight: 500; }
.inf-roster-numbers span { font-size: 11px; }
.inf-roster-summary blockquote { font-family: var(--serif); text-align: center; color: #cfba97; border-top: 1px solid #594a39; margin: 0 12px; padding: 12px 0; font-size: 17px; }
.inf-roster-feature-body { display: flex; gap: 14px; }
.inf-roster-feature-body > img { width: 42%; object-fit: cover; object-position: center 20%; align-self: stretch; }
.inf-roster-feature-body > div { flex: 1; padding: 14px 12px 14px 0; min-width: 0; }
.inf-roster-feature-body h2 { font-family: var(--serif); font-size: 25px; color: #e5d4b6; line-height: 1.1; }
.inf-roster-feature-body p { font-size: 13px; color: #c0c9ca; line-height: 1.4; }
.inf-roster-feature-body .button { font-size: 10px; padding: 8px; width: 100%; }
.inf-roster-roles dl { padding: 0 13px 12px; margin: 0; }
.inf-roster-roles dl > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; border-bottom: 1px solid #8c73492c; padding: 10px 0; font-size: 12px; }
.inf-roster-roles dd { margin: 0; color: #b5c0c2; }

.events-navigation { margin: 0 0 10px; }
.events-navigation h2 { font-family: var(--serif); font-size: 27px; letter-spacing: 1px; }
.inf-events-top { display: grid; grid-template-columns: minmax(0,3.3fr) minmax(260px,1fr); gap: 12px; margin-bottom: 12px; align-items: stretch; }
.inf-events-list { min-width: 0; }
.reference-event-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; }
.reference-event-grid .event-art { height: 125px; }
.reference-event-grid .event-body { padding: 10px; }
.reference-event-grid .event-body h3 { font-family: var(--serif); font-size: 23px; line-height: 1.08; margin-bottom: 9px; }
.reference-event-grid .event-body p { font-size: 13px; min-height: 52px; line-height: 1.3; }
.reference-event-grid .event-action { min-height: 34px; font-size: 10px; }
.reference-event-grid .event-bottom { flex-wrap: wrap; font-size: 10px; gap: 5px; }
.reference-event-grid .event-body > .meta { font-size: 11px; }
.inf-next-event > img { width: 100%; height: 112px; object-fit: cover; padding: 10px 10px 0; }
.inf-next-event-copy { padding: 12px; }
.inf-next-event h2 { font-family: var(--serif); font-size: 25px; line-height: 1.1; margin: 8px 0; }
.inf-next-event > .panel-head h2 { font-family: var(--font); font-size: 16px; line-height: 1.2; margin: 0; }
.inf-next-event p { font-size: 13px; color: #bac4c7; }
.inf-next-event .button { width: 100%; margin-top: 12px; font-size: 12px; }
.inf-next-event-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 18px; }
.inf-next-event-empty > .icon { width: 40px; height: 40px; color: var(--gold); }
.inf-countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.inf-countdown > span { display: flex; flex-direction: column; gap: 2px; align-items: center; border: 1px solid #524632; padding: 7px 2px; font-size: 10px; text-transform: uppercase; }
.inf-countdown b { font-family: var(--serif); font-size: 27px; line-height: 1; color: #ebc995; }
.events-dashboard { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr) minmax(210px,.68fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.events-dashboard.without-calendar { grid-template-columns: 2fr 1fr; }
.reference-calendar-layout { grid-template-columns: 1.2fr 1fr; padding: 10px; gap: 10px; }
.calendar-days > a, .calendar-blank { min-height: 33px; }
.calendar-event-row { gap: 7px; padding: 10px 5px; }
.calendar-event-row strong { font-size: 12px; }
.calendar-event-row small { font-size: 10px; }
.inf-event-feed-row { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid #74604433; }
.inf-event-feed-row > .icon { width: 28px; height: 28px; color: var(--gold); flex-shrink: 0; }
.inf-event-feed-row time { font-size: 10px; color: #afb8ba; }
.inf-event-feed-row h3 { font-size: 14px; font-weight: 500; margin: 3px 0; }
.inf-event-feed-row p { font-size: 11px; color: #afb8ba; margin: 0; }
.inf-feed-empty { min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; text-align: center; padding: 20px; }
.inf-feed-empty > .icon { width: 45px; height: 45px; color: #9c886a; }
.inf-feed-empty p { font-family: var(--serif); font-size: 22px; color: #d9c39d; }
.archive-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
.archive-empty img { width: 112px; height: 130px; object-fit: cover; }
.archive-empty p { margin: 0; font-size: 15px; }
.event-archive-row strong { font-size: 13px; }

@media (max-width: 1200px) and (min-width: 761px) {
  body { padding-inline: 16px; }
  .site-header { gap: 10px; padding-inline: 10px; }
  .header-motto { display: none; }
  .desktop-nav { flex-basis: 445px; }
  .brand { flex-basis: 300px; }
  .inf-hero__copy { padding: 20px 25px; width: 49%; }
  .inf-hero--home .inf-hero__copy { width: 49%; }
  .inf-hero--home h1, .inf-hero--join h1 { font-size: 51px; }
  .inf-hero__copy h1 { font-size: 58px; }
  .inf-hero__copy p { font-size: 14px; }
  .inf-hero--home .inf-hero__motto { font-size: 22px; }
  .inf-hero--home { --hero-height: 340px; }
  .inf-feature-card { padding-left: 42%; min-height: 128px; }
  .inf-feature-card h2 { font-size: 20px; }
  .inf-feature-card p { font-size: 12px; }
  .home-statline { grid-template-columns: minmax(0,1fr) 190px; }
  .stat { padding: 10px; gap: 10px; }
  .stat > .icon { width: 33px; height: 33px; }
  .community-chat-grid { grid-template-columns: 190px minmax(0,1fr) 240px; }
  .community-forum-grid { grid-template-columns: minmax(0,1fr) 240px; }
  .inf-forum-toolbar { flex-wrap: wrap; }
  .community-forum-search { flex-basis: 100%; }
  .inf-forum-table-head, .inf-forum-category { grid-template-columns: minmax(0,1.3fr) 45px 65px minmax(0,1fr); padding-inline: 10px; gap: 6px; }
  .inf-forum-category-title { gap: 9px; }
  .inf-forum-category-title > .icon { width: 35px; height: 35px; flex-basis: 35px; }
  .inf-forum-category-title h2 { font-size: 21px; }
  .inf-join-overview { grid-template-columns: 1fr 2fr; }
  .inf-join-benefits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; padding-bottom: 8px; }
  .inf-join-benefits .panel-head { width: 100%; }
  .inf-join-benefits > p { flex: 1 1 150px; padding: 0 12px; }
  .community-join-grid { grid-template-columns: 1.2fr 1fr; }
  .community-faq { grid-column: 2; grid-row: 2; }
  .community-application { grid-row: 1 / span 2; }
  .roster-layout { grid-template-columns: minmax(0,1fr) 290px; }
  .reference-roster-table th, .reference-roster-table td { padding: 9px 6px; }
  .reference-roster-table .roster-person > .icon { display: none; }
  .inf-events-top { grid-template-columns: minmax(0,1fr) 260px; }
  .reference-event-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .events-dashboard { grid-template-columns: 1.8fr 1fr; }
  .events-archive { grid-column: 2; }
  .reference-calendar-panel { grid-row: 1 / span 2; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .site-header .desktop-nav { display: none; }
  .site-header .mobile-menu-toggle { display: flex; }
  .brand { flex-basis: 315px; margin: auto; }
  .inf-hero__copy h1 { font-size: 49px; }
  .inf-hero--home h1, .inf-hero--join h1 { font-size: 44px; }
  .inf-hero .hero-buttons { gap: 7px; }
  .inf-hero .hero-buttons .button { font-size: 11px; padding: 9px; }
  .inf-feature-grid { gap: 8px; }
  .inf-feature-card { padding: 110px 12px 14px; background-size: auto 125px; background-position: center top; min-height: 216px; align-items: start; }
  .inf-feature-card h2 { font-size: 23px; }
  .inf-feature-card p { padding-right: 25px; }
  .home-dashboard { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-roster { grid-row: 1 / span 2; }
  .home-news, .home-conversation { grid-column: 2; }
  .community-chat-grid { grid-template-columns: 185px minmax(0,1fr); }
  .community-chat-aside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .community-chat-aside .panel-head h2 { font-size: 12px; }
  .community-forum-grid { grid-template-columns: minmax(0,1fr); }
  .community-forum-aside { grid-column: 1; grid-row: 5; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .roster-layout { grid-template-columns: minmax(0,1fr); }
  .roster-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  body { padding: 0 0 calc(75px + env(safe-area-inset-bottom)); background: #060b0e; }
  .site-wrap { max-width: 760px; padding: 0 10px; background: transparent; }
  .site-header { min-height: 64px; height: 64px; padding: 0 5px; gap: 7px; border-image: none; border: 0; border-bottom: 1px solid #7b5c3f; }
  .brand { flex: 0 1 270px; height: 62px; margin: 0 auto; }
  .brand .clan-logo { height: 62px; gap: 4px; }
  .brand .clan-logo > img { width: 44px; height: 55px; }
  .brand .clan-wordmark { font-size: clamp(21px,5.7vw,32px); }
  .clan-logo-copy small { font-size: 6px; letter-spacing: 1.8px; }
  .header-actions .account-link { width: 32px; min-width: 32px; height: 34px; }
  .mobile-menu-toggle { min-width: 32px; width: 32px; }
  .mobile-bottom { border-top: 1px solid #8c6740; background: #070d10f5; }
  .mobile-bottom a.active { color: #ff6471; }
  .site-footer { display: flex; flex-wrap: wrap; justify-content: center; min-height: 180px; gap: 12px; margin-top: 13px; padding: 15px 10px; }
  .footer-brand { display: flex; width: 100%; justify-content: center; }
  .footer-brand img { width: 44px; height: 48px; }
  .footer-brand p { font-size: 9px; }
  .footer-center { width: 100%; padding: 0; font-size: 8px; }
  .footer-links { display: flex; margin: 0; padding: 8px 13px; gap: 20px; }
  .panel-head h2 { font-size: 14px; }
  .panel-head { padding: 9px 10px; min-height: 38px; }
  .panel-head > .text-link { font-size: 11px; }
  .inf-hero, .inf-hero--home, .inf-hero--chat, .inf-hero--join, .inf-hero--roster, .inf-hero--events { --hero-height: 0px; padding-top: clamp(155px,36vw,265px); margin: 6px 0 10px; }
  .inf-hero .inf-hero__art { inset: 0 0 auto; height: clamp(205px,48vw,320px); min-height: 0; background-position: 50% 38%; }
  .inf-hero__art::after { background: linear-gradient(0deg,#070c0f,transparent 55%),linear-gradient(90deg,#070c0f60,transparent 13%); }
  .inf-hero .inf-hero__copy { padding: 12px 17px 23px; min-height: 0; width: 100%; text-align: center; align-items: center; background: linear-gradient(0deg,#070c0f 70%,transparent); }
  .inf-hero .inf-hero__copy h1 { font-size: clamp(39px,9.2vw,57px); margin-bottom: 9px; letter-spacing: -.01em; }
  .inf-hero--home .inf-hero__copy h1, .inf-hero--join .inf-hero__copy h1 { font-size: clamp(31px,8.3vw,53px); letter-spacing: -.04em; }
  .inf-hero .inf-hero__motto { font-size: clamp(17px,4.7vw,23px); letter-spacing: .055em; line-height: 1.1; margin-bottom: 12px; padding-bottom: 0; border: 0; white-space: normal; }
  .inf-hero .inf-hero__copy p { font-size: 14px; line-height: 1.4; max-width: 480px; }
  .inf-hero__caption { font-size: 10px; letter-spacing: 1.4px; margin-top: 15px; }
  .inf-hero .hero-buttons { width: 100%; display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 18px; }
  .inf-hero .hero-buttons .button { width: 100%; min-height: 43px; padding: 10px; font-size: 13px; }
  .home-statline { grid-template-columns: 1fr; margin-bottom: 10px; }
  .stats-bar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat { display: flex; padding: 13px 10px; gap: 11px; min-height: 76px; }
  .stat > .icon { width: 31px; height: 31px; }
  .stat strong { font-size: 26px; }
  .stat span { font-size: 9px; }
  .stat .online-label { font-size: 8px; }
  .legend-banner { display: none; }
  .inf-feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .inf-feature-card { min-height: 120px; padding: 17px 45px 17px 45%; background-size: auto 100%; }
  .inf-feature-card h2 { font-size: 24px; }
  .inf-feature-card p { font-size: 13px; }
  .home-dashboard { display: flex; flex-direction: column; gap: 11px; }
  .home-roster { order: 0; }
  .home-news { order: 1; min-height: 0; }
  .home-conversation { order: 2; }
  .home-members { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 10px; gap: 8px; }
  .home-members .member-info h3 { font-size: 14px; }
  .home-members .online-label { font-size: 10px; }
  .home-members .member-art { aspect-ratio: 1; }
  .clan-news-item:nth-child(n) { display: flex; }
  .clan-news-item { padding: 9px; min-height: 55px; }
  .clan-news-item > div { display: block; }
  .clan-news-item .meta { max-width: none; font-size: 11px; }
  .clan-news-item h3 { font-size: 14px; margin-top: 4px; }
  .inf-services .service-tiles { display: grid; grid-template-columns: 1fr; }
  .inf-services .service-tile { min-height: 66px; }
  .inf-services .service-tile h2 { font-size: 16px; }
  .inf-services .service-tile p { font-size: 12px; }
  .community-chat-grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
  .community-channel-panel { display: block; }
  .community-channel-panel > nav { display: flex; flex-wrap: wrap; gap: 5px; }
  .community-channel-panel .channel-link { min-height: 40px; flex: 1 1 100px; justify-content: center; padding: 9px; }
  .community-channel-forum { display: none; }
  .community-channel-panel .community-online-panel { display: none; }
  .community-chat-grid > .chat-panel { min-height: 485px; height: auto; border: 1px solid #886648; border-image: url('design-2026/frame.svg') 30 / 13px / 3px stretch; }
  .community-chat-grid .chat-feed { height: 345px; max-height: 65vh; min-height: 240px; padding: 10px; }
  .community-chat-grid .message > img { width: 34px; height: 39px; }
  .community-chat-grid .message-body { font-size: 14px; }
  .community-chat-aside { display: grid; grid-template-columns: 1fr; }
  .community-chat-quicklinks { display: block; }
  .inf-chat-hall { min-height: 210px; }
  .chat-form textarea { font-size: 16px; }
  .inf-forum-rules { gap: 10px; min-height: 125px; margin-bottom: 11px; }
  .inf-forum-rules > img { width: 30%; min-height: 125px; object-fit: cover; }
  .inf-forum-rules h2 { font-size: 21px; }
  .inf-forum-rules p { font-size: 12px; padding-right: 8px; }
  .inf-forum-rules > .icon { display: none; }
  .community-forum-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .inf-forum-toolbar { flex-wrap: wrap; gap: 8px; }
  .community-forum-search { display: grid; grid-template-columns: minmax(0,1fr) 39px; flex-basis: 100%; gap: 7px; }
  .inf-search-field { grid-column: 1 / -1; min-height: 42px; }
  .community-forum-search select { width: 100%; min-height: 41px; }
  .inf-forum-toolbar > .button { flex: 1; min-height: 41px; font-size: 12px; }
  .community-categories { display: block; grid-column: 1; grid-row: 2; }
  .inf-forum-table-head { grid-template-columns: minmax(0,1fr) 44px 67px; font-size: 9px; padding-inline: 11px; }
  .inf-forum-table-head > :last-child { display: none; }
  .inf-forum-category { grid-template-columns: minmax(0,1fr) 40px 57px; gap: 7px; padding: 12px 10px; }
  .inf-forum-category-title { gap: 9px; }
  .inf-forum-category-title > .icon { width: 32px; height: 32px; flex-basis: 32px; }
  .inf-forum-category-title h2 { font-size: 21px; }
  .inf-forum-category-title p { font-size: 11px; }
  .inf-forum-last { grid-column: 1 / -1; padding-left: 40px; min-height: 22px; font-size: 12px; }
  .inf-forum-last img { width: 30px; height: 30px; }
  .community-pinned-topics, .community-latest-topics { display: block; }
  .community-forum-aside { grid-column: 1; grid-row: 5; display: grid; grid-template-columns: 1fr; }
  .community-forum-numbers { display: block; }
  .inf-join-overview, .community-join-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .inf-requirement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .community-requirements { display: block; }
  .community-requirement p { font-size: 13px; }
  .community-application, .community-join-steps, .community-faq { grid-column: 1; grid-row: auto; display: block; }
  .community-application input, .community-application textarea, .community-application select { font-size: 16px; }
  .community-application .form-grid { grid-template-columns: 1fr; }
  .community-join-steps > div:not(.panel-head) { flex-direction: row; text-align: left; padding: 14px; align-items: flex-start; }
  .community-join-steps > div > span { flex: 0 0 35px; }
  .community-join-steps h3 { font-size: 22px; margin-bottom: 5px; }
  .community-faq summary { font-size: 14px; padding: 12px; }
  .community-faq-art { min-height: 180px; }
  .community-faq-art h3 { font-size: 20px; }
  .community-faq-art p { font-size: 14px; }
  .community-faq-art .button { font-size: 12px; }
  .roster-filters { display: flex; flex-direction: column; padding: 8px; }
  .roster-group-tabs { display: flex; flex-wrap: wrap; width: 100%; gap: 5px; }
  .roster-group-tabs a { flex: 1; font-size: 12px; padding: 9px; min-height: 39px; }
  .roster-class-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; margin: 0; }
  .roster-class-tabs a { font-size: 12px; min-height: 36px; }
  .roster-search { flex: auto; width: 100%; }
  .roster-search input { font-size: 16px; }
  .roster-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .inf-roster-group { display: none; }
  .roster-mobile-list { display: block; }
  .roster-mobile-person { padding: 11px 9px; gap: 10px; }
  .roster-mobile-person h2 { font-size: 17px; }
  .roster-mobile-person p { font-size: 12px; line-height: 1.35; }
  .roster-mobile-person > img { width: 48px; height: 58px; }
  .roster-mobile-level { font-size: 11px; }
  .roster-aside { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .inf-roster-feature-body > img { max-height: 260px; }
  .inf-roster-feature-body .button { font-size: 11px; }
  .events-navigation { display: flex; flex-wrap: wrap; gap: 8px; padding: 7px; }
  .events-navigation h2 { display: block; font-size: 25px; width: 100%; padding: 5px; margin: 0; }
  .events-navigation .tabs { display: flex; flex-wrap: wrap; width: 100%; }
  .events-navigation .tabs a { flex: 1; min-height: 39px; font-size: 12px; }
  .events-all-link { display: inline-flex; margin: 5px; font-size: 13px; }
  .inf-events-top { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .reference-event-grid { grid-template-columns: minmax(0,1fr); gap: 11px; }
  .reference-event-grid .event-card { display: grid; grid-template-columns: 105px minmax(0,1fr); }
  .reference-event-grid .event-art { height: 100%; min-height: 210px; }
  .reference-event-grid .event-art img { min-height: 210px; }
  .reference-event-grid .event-art .badge { left: 114px; max-width: calc(100% - 127px); font-size: 9px; top: 11px; }
  .reference-event-grid .event-body { padding: 38px 10px 10px; }
  .reference-event-grid .event-body > .meta { font-size: 11px; align-self: flex-start; margin-bottom: 6px; }
  .reference-event-grid .event-body h3 { font-size: 23px; }
  .reference-event-grid .event-body p { font-size: 13px; min-height: 0; }
  .reference-event-grid .event-action { min-height: 37px; font-size: 11px; }
  .reference-event-grid .event-bottom { font-size: 10px; }
  .inf-next-event > img { height: 180px; }
  .inf-next-event-copy { padding: 15px; }
  .inf-next-event h2 { font-size: 27px; }
  .inf-next-event p { font-size: 14px; }
  .inf-countdown { gap: 8px; }
  .inf-countdown b { font-size: 34px; }
  .events-dashboard, .events-dashboard.without-calendar { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .reference-calendar-panel, .reference-calendar-panel.calendar-expanded { display: block; }
  .reference-calendar-layout, .calendar-expanded .reference-calendar-layout { grid-template-columns: minmax(0,1fr); padding: 10px; }
  .calendar-month-nav h3 { font-size: 23px; }
  .calendar-month-nav .icon-button { min-width: 37px; min-height: 37px; }
  .calendar-days > a, .calendar-expanded .calendar-days > a, .calendar-blank { min-height: 38px; font-size: 13px; }
  .calendar-event-row { padding: 12px 6px; }
  .calendar-event-row strong { font-size: 14px; }
  .calendar-event-row small { font-size: 12px; }
  .calendar-event-list { max-height: none; }
  .calendar-empty { min-height: 100px; }
  .inf-event-feed-row h3 { font-size: 16px; }
  .inf-event-feed-row time, .inf-event-feed-row p { font-size: 12px; }
  .events-archive { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 1.3.1: analytics settings and nonvisual fallback pixel. */
.metrika-pixel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.metrika-code { font: 12px/1.5 Consolas, monospace; width: 100%; resize: vertical; overflow-wrap: normal; white-space: pre; }

/* Slow drifting ash stays inside the artwork and never intercepts a control. */
.has-banner-ash { position: relative; isolation: isolate; }
.banner-ash { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; border-radius: inherit; contain: paint; }
.banner-ash__flake {
  position: absolute; left: var(--ash-x); top: calc(100% + 12px);
  width: var(--ash-size); height: calc(var(--ash-size) * 1.5);
  border-radius: 45% 15% 55% 30%; background: #d5cabe; opacity: 0;
  animation: infatu-ash-drift var(--ash-duration) linear var(--ash-delay) infinite;
  animation-play-state: paused; pointer-events: none;
}
.banner-ash__flake--warm { background: #d69759; box-shadow: 0 0 4px #c3793866; }
.is-ash-active > .banner-ash > i { animation-play-state: running; }
.inf-hero__copy, .inf-feature-card > div:not(.banner-ash), .legend-banner > span { position: relative; z-index: 2; }
@keyframes infatu-ash-drift {
  0% { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; }
  15% { opacity: var(--ash-opacity); }
  70% { opacity: var(--ash-opacity); }
  100% { transform: translate3d(var(--ash-drift),calc(0px - var(--ash-travel)),0) rotate(220deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-ash { display: none; }
  .banner-ash__flake { animation: none; }
}

.banner-ash__spark {
  position: absolute; top: 100%; left: var(--ash-x); width: var(--ash-size); height: var(--ash-size);
  background: #ffbc63; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 4px 1px #ff7935b3, 0 0 9px #d8492559;
  animation: infatu-ember-rise var(--ash-duration) linear var(--ash-delay) infinite paused;
}
.banner-ash__smoke {
  position: absolute; left: var(--smoke-x); bottom: -35%; width: 35%; height: 80%; opacity: 0;
  border-radius: 50%; background: radial-gradient(ellipse, #baa99722 0%, #716b6620 30%, transparent 68%);
  animation: infatu-smoke-rise 24s ease-in-out var(--smoke-delay) infinite paused;
}
@keyframes infatu-ember-rise {
  0% { transform: translate3d(0,0,0) scale(.6); opacity: 0; }
  14% { opacity: .85; }
  30% { opacity: .35; }
  42% { opacity: .8; }
  65% { opacity: .25; }
  100% { transform: translate3d(var(--ash-drift),calc(var(--ash-travel) * -.78),0) scale(.2); opacity: 0; }
}
@keyframes infatu-smoke-rise {
  0% { transform: translate3d(0,0,0) scale(.65); opacity: 0; }
  30% { opacity: .5; }
  65% { opacity: .25; }
  100% { transform: translate3d(12%,-65%,0) scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-ash__spark, .banner-ash__smoke { animation: none; }
}

.clan-leader-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; margin: 4px 0; padding: 3px 6px; border: 1px solid #ca9b4d; border-radius: 2px; background: #45161c; color: #ffe0a2; font: 600 11px/1.3 var(--sans); white-space: nowrap; }
.clan-leader-badge > .icon { width: 15px; height: 15px; flex: 0 0 15px; color: #ffd780; }
.member-card.is-clan-leader { outline: 1px solid #ddb265; outline-offset: -1px; box-shadow: 0 0 12px #c17a3038; background: linear-gradient(145deg,#442019,#130e10 60%); }
.member-card.is-clan-leader .member-symbol { color: #ffe0a2; }
.is-clan-leader .member-info h3, .is-clan-leader .roster-person strong { color: #ffe0a2; }
.reference-roster-table tr.is-clan-leader { background: linear-gradient(90deg,#5320228c,#a4731822); box-shadow: inset 3px 0 #d9ae61; }
.roster-mobile-person.is-clan-leader, .roster-recent-person.is-clan-leader { background: linear-gradient(100deg,#4d1d248c,#71502026); border-color: #dab16a; box-shadow: inset 3px 0 #d9ae61; }
.roster-mobile-person .clan-leader-badge { font-size: 10px; }
#clan-leader-settings > h2 { display: flex; align-items: center; gap: 8px; }
#clan-leader-settings > h2 .icon { color: #ffd780; width: 25px; height: 25px; }
.bk-profile-info { display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px; align-items: center; justify-content: center; vertical-align: middle; margin-left: 3px; border-radius: 3px; background: #102b49; border: 1px solid #386a99; }
.bk-profile-info:hover { background: #1a456d; border-color: #70b9f3; }
.bk-profile-info img, .bk-profile-info-inline { width: 12px; height: 11px; object-fit: contain; border: 0; border-radius: 0; margin: 0; }
.member-info h3 { display: flex; align-items: center; min-width: 0; }
.member-info h3 > a:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.roster-person > span > strong { display: inline; }
.roster-person > span > small, .roster-person > span > .clan-leader-badge { display: flex; }
.roster-person > span > .bk-profile-info { display: inline-flex; }
.site-wrap .reference-roster-table .bk-profile-info img,
.site-wrap .member-card .bk-profile-info img,
.site-wrap .roster-mobile-person .bk-profile-info img,
.site-wrap .roster-recent-person .bk-profile-info-inline { width: 12px; height: 11px; min-width: 12px; max-width: 12px; object-fit: contain; display: block; }
@media (max-width: 600px) {
  .roster-mobile-person .bk-profile-info { width: 28px; height: 28px; flex-basis: 28px; }
}

/* Keep the full group visible above the home copy on tablets and phones. */
@media (max-width: 1000px) {
  .inf-hero--home { --hero-height: 0px; display: flex; flex-direction: column; padding-top: 0; }
  .inf-hero--home .inf-hero__art { position: relative; inset: auto; flex: 0 0 auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 948 / 365; background-size: 100% auto; background-position: center; }
  .inf-hero--home .inf-hero__art::after { background: linear-gradient(0deg,#070c0f,transparent 20%); }
  .inf-hero--home .inf-hero__copy { width: 100%; min-height: 0; padding: 18px 20px 24px; align-items: center; text-align: center; background: #070c0f; }
  .inf-hero--home .inf-hero__copy p { max-width: 480px; }
  .inf-hero--home .hero-buttons { justify-content: center; }
}