/* Realm presentation only. Match tables and data processing stay in style.css/app.js. */
:root {
  --font-serif-body: var(--font-body);
  --font-decorative: var(--font-serif-title);
  --frank-gold-dim: #d0af61;
}

/* Keep the four destinations legible; collapse to a menu on smaller screens. */
.heraldic-nav-container { max-width: 1480px; width: 100%; gap: 16px; padding: 0 24px; }
.nav-brand-wrap { flex-shrink: 0; padding-right: 20px; margin-right: 0; }
.nav-brand-text { font-size: .75rem; letter-spacing: 1px; }
.nav-brand-short { display: none; font: 800 1rem var(--font-serif-header); color: var(--frank-gold-bright); letter-spacing: 2px; }
.nav-links-cluster { min-width: 0; justify-content: center; gap: 0; }
.heraldic-nav-link { white-space: nowrap; padding: 20px 14px; gap: 8px; font-size: .72rem; letter-spacing: .8px; }
.nav-discord-btn { flex-shrink: 0; padding: 10px 14px; font-size: .7rem; }
.nav-count { display: inline-block; margin-left: 3px; font-size: .65rem; color: var(--text-muted); }
.nav-menu-toggle { display: none; }
:is(a, button, summary):focus-visible { outline: 2px solid var(--frank-gold-glow); outline-offset: 5px; }

/* Use the original heraldry, with clearer type and a calmer reading rhythm. */
#view-clan { --realm-ink: #d0d8e5; }
#view-clan section { scroll-margin-top: 92px; }
#view-clan section:focus { outline: none; }
#view-clan p { text-wrap: pretty; }
.clan-portal-hero {
  padding: 48px 28px 52px;
  margin-bottom: 0;
  background: linear-gradient(180deg, rgba(6, 12, 25, .42), rgba(6, 9, 15, .96)), url('assets/images/hero_battle_banner.jpg') center 40% / cover;
}
.hero-crest-wrap { margin-bottom: 16px; }
.hero-crest-frame { width: 88px; height: 88px; }
.hero-badge-tag { font-size: .65rem; letter-spacing: 1.6px; background: rgba(9, 18, 36, .8); }
.hero-main-title { font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.3; letter-spacing: 1.5px; text-wrap: balance; }
.hero-motto { font-size: .75rem; letter-spacing: 2px; margin-top: 14px; }
.hero-desc { max-width: 680px; font-size: 1.24rem; line-height: 1.6; margin-bottom: 22px; }
.hero-community-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 28px; }
.hero-community-tags span { font: 600 .65rem var(--font-serif-header); color: #e0c986; letter-spacing: 1px; }
.hero-community-tags span::before { content: '◆'; margin-right: 9px; font-size: .5rem; }
.hero-cta-cluster { gap: 14px; }
.hero-cta-cluster > a { min-height: 48px; justify-content: center; padding: 13px 24px; font-size: .75rem; letter-spacing: 1px; text-decoration: none; }
.hero-cta-cluster .btn-cta-main { background: rgba(10, 19, 35, .8); border: 1px solid #8c753d; box-shadow: none; }
.hero-cta-cluster .btn-cta-discord { order: -1; }
.discord-icon-svg { flex-shrink: 0; }
.realm-section-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 24px; padding: 17px 24px; border: 1px solid var(--border-steel); border-top: 0; background: #0b1220; margin-bottom: 70px; }
.realm-section-nav > span { font: 700 .62rem var(--font-serif-header); color: #c4a967; letter-spacing: 1.5px; }
.realm-section-nav button { border: 0; background: transparent; color: var(--text-silver); cursor: pointer; font: 1rem var(--font-body); padding: 7px 0; }
.realm-section-nav button:hover { color: var(--frank-gold-glow); }
#view-clan > section:not(.clan-portal-hero):not(.recruitment-banner-card) { margin-bottom: 72px; }
.section-kicker { display: block; color: #c0a66b; font: 600 .68rem var(--font-serif-header); letter-spacing: 2px; margin-bottom: 12px; }
#view-clan .section-heraldic-header h2 { display: block; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.4; letter-spacing: 1.3px; text-wrap: balance; }
#view-clan .section-subtitle { font-size: 1.14rem; line-height: 1.55; max-width: 690px; }
.about-overview-card { padding: 32px; border-color: #49432f; margin-bottom: 18px; }
.about-lead-text { max-width: 810px; font-size: 1.25rem; line-height: 1.65; }
.community-playstyles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--border-steel); text-align: center; }
.community-playstyles > div { min-width: 0; }
.community-playstyles span { font: 600 .65rem var(--font-serif-header); color: #b69b59; }
.community-playstyles h3 { font: 700 .9rem var(--font-serif-header); color: #e7d5a0; margin: 7px 0; }
.community-playstyles p { color: var(--text-muted); font-size: 1rem; }
.about-pillars-dual { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.about-feature-box { padding: 26px 28px; }
.about-feature-label { display: block; font: 600 .63rem var(--font-serif-header); color: #a4b4ce; letter-spacing: 1px; margin-bottom: 10px; }
.about-feature-box h3 { font-size: 1rem; letter-spacing: 1px; }
.about-feature-box p { font-size: 1.12rem; line-height: 1.6; }
.events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.event-card { padding: 25px 28px; min-width: 0; }
.event-card::before { background: linear-gradient(90deg, #8c7435, transparent 70%); }
.event-header { margin-bottom: 14px; gap: 10px; }
.event-badge { border-radius: 2px; font-size: .62rem; letter-spacing: 1px; }
.event-number { font: 400 1.4rem var(--font-serif-header); color: #746740; }
.event-title { font-size: 1.13rem; letter-spacing: .6px; line-height: 1.5; }
.event-type-tag { font-size: .62rem; letter-spacing: .8px; margin: 7px 0 12px; }
.event-desc { font-size: 1.12rem; line-height: 1.55; }
.event-attendance { display: grid; gap: 5px; margin-top: auto; padding-top: 18px; }
.event-attendance strong { border-top: 1px solid #49432f; padding-top: 14px; color: #e8d39b; font: 600 .9rem var(--font-serif-header); }
.event-attendance span { color: var(--text-muted); font-size: .98rem; line-height: 1.45; }
.event-card-community { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 32px; border-color: #414870; background: linear-gradient(110deg, #161e38, #0b101e); }
.community-event-heading .event-title { margin-top: 12px; }
.community-event-heading .event-type-tag { margin-bottom: 0; }
.events-note, .rank-path-note { color: var(--text-muted); text-align: center; font-size: 1rem; line-height: 1.6; margin: 20px auto 0; }
.events-note a { color: #e0c986; text-underline-offset: 4px; }

/* Real text replaces the raster rank chart. All three paths remain visible. */
.rank-start { display: flex; align-items: center; gap: 22px; border: 1px solid #625333; padding: 23px 28px; background: linear-gradient(100deg, #172238, #0c121e); margin-bottom: 24px; border-radius: 4px; }
.rank-start-seal { font-size: 2rem; color: #dfc879; }
.rank-start h3 { color: #f4e5b5; font: 700 1.6rem var(--font-serif-header); margin-top: 5px; }
.rank-start > p { margin-left: auto; max-width: 490px; color: var(--realm-ink); font-size: 1.15rem; line-height: 1.5; }
.rank-list-label { display: block; font: 600 .64rem var(--font-serif-header); color: #b8ac8a; letter-spacing: 1.2px; }
.rank-roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rank-role-card { --role-color: #bf7969; padding: 25px; min-width: 0; background: linear-gradient(160deg, #151c2a, #090e17); border: 1px solid var(--border-steel); border-top: 2px solid var(--role-color); border-radius: 4px; display: flex; flex-direction: column; }
.role-cavalry { --role-color: #82a7d6; }
.role-archery { --role-color: #8ab18b; }
.role-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.role-heading > div { min-width: 0; }
.role-heading img { width: 78px; height: 78px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 1px solid var(--role-color); padding: 3px; }
.role-eyebrow { font: 600 .58rem var(--font-serif-header); letter-spacing: .9px; color: var(--role-color); }
.role-heading h3 { color: #f4e9cf; font: 700 1.35rem var(--font-serif-header); margin-top: 5px; }
.role-description { color: var(--realm-ink); font-size: 1.1rem; line-height: 1.55; margin-bottom: 24px; flex: 1; }
.role-rank-list { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 5px; }
.role-rank-list li { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 8px 14px; border-left: 2px solid var(--role-color); background: rgba(255,255,255,.035); font: 600 .83rem var(--font-serif-header); letter-spacing: .3px; }
.rank-step { font: 400 .66rem var(--font-serif-header); color: var(--role-color); }
.role-rank-list .rank-veteran { background: rgba(183,149,62,.1); color: #f0dda9; }
.role-rank-list .rank-command { border: 1px solid #675b39; border-left: 2px solid #d6bb71; background: rgba(183,149,62,.08); color: #efdca6; }
.role-mastery { border: 1px solid #8c743f; border-top: 3px solid #d6bb71; border-radius: 3px; padding: 20px 18px; min-height: 295px; background: linear-gradient(145deg, rgba(183,149,62,.17), rgba(183,149,62,.035)); }
.elite-heading { display: flex; align-items: center; gap: 10px; color: #f3dfa4; font: 700 .86rem var(--font-serif-header); letter-spacing: 1.2px; }
.elite-heading span { color: #e3c16b; font-size: 1.25rem; }
.elite-description { color: var(--realm-ink); font-size: 1.04rem; line-height: 1.5; margin: 8px 0 16px; }
.elite-origin { color: #c4bca6; font-size: .96rem; line-height: 1.5; margin-bottom: 10px; }
.role-mastery strong { color: #f0dda9; }
.elite-rank-list { list-style: none; padding: 0; display: grid; gap: 7px; }
.elite-rank-list li { padding: 10px 12px; border-left: 2px solid #c5a558; background: rgba(183,149,62,.1); color: #f6e8bd; font: 600 .96rem/1.5 var(--font-serif-header); overflow-wrap: anywhere; }
.elite-rank-list li + li { background: rgba(183,149,62,.19); border-left-color: #f0d78e; }
.elite-rank-list li + li::before { content: '↳'; color: #d6bb71; margin-right: 9px; }
.rank-path-note strong { display: block; margin-bottom: 6px; color: #f0dda9; }
.rank-path-note { max-width: 780px; margin-bottom: 24px; }
.realm-leadership { display: flex; align-items: center; gap: 28px; padding: 24px 28px; margin-bottom: 18px; background: linear-gradient(110deg, #172036, #101522); border: 1px solid #625333; border-radius: 4px; }
.leadership-heading { flex: 1; min-width: 0; }
.leadership-heading h3 { margin-top: 8px; color: #e6d9b6; font: 600 1.1rem var(--font-serif-header); }
.leadership-roles { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.leadership-roles li { padding: 10px 22px; border: 1px solid #625333; background: rgba(183,149,62,.06); color: #efdca6; font: 600 .9rem var(--font-serif-header); text-align: center; }
.realm-orders { border: 1px solid var(--border-steel); border-radius: 4px; background: #0d1320; }
.realm-orders summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 28px; }
.realm-orders summary::-webkit-details-marker { display: none; }
.orders-title { display: block; font: 600 1rem var(--font-serif-header); color: #e6d9b6; margin-top: 7px; }
.orders-toggle { color: #d6bb71; font-size: 1.8rem; transition: transform .2s; }
.realm-orders[open] .orders-toggle { transform: rotate(45deg); }
.realm-orders-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--border-steel); padding: 25px 28px; }
.realm-orders-grid article { min-width: 0; }
.realm-orders-grid h3 { font: 600 .85rem var(--font-serif-header); color: #e2cc93; line-height: 1.5; }
.realm-orders-grid p { color: var(--text-muted); font-style: italic; margin: 8px 0 14px; }
.realm-orders-grid ol { list-style: none; counter-reset: order-rank; }
.realm-orders-grid li { counter-increment: order-rank; padding: 7px 0; border-bottom: 1px solid #1d2637; font-size: 1.05rem; }
.realm-orders-grid li::before { content: counter(order-rank, decimal-leading-zero); font-size: .75rem; color: #8c9ab2; margin-right: 12px; }

/* Let long leadership names, specialties, and mottos wrap within the cards. */
.retinues-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.retinue-card { min-width: 0; padding: 24px; }
.retinue-card-top { gap: 14px; align-items: center; }
.retinue-card-crest { width: 64px; height: 72px; flex-shrink: 0; }
.retinue-card-identity, .retinue-meta-item { min-width: 0; }
.retinue-card-title { font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: .7px; overflow-wrap: anywhere; }
.retinue-latin-name { font-size: .61rem; letter-spacing: 1px; overflow-wrap: anywhere; }
.retinue-motto-tag { max-width: 100%; font-size: 1rem; line-height: 1.35; padding: 4px 7px; overflow-wrap: anywhere; }
.retinue-card-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.retinue-meta-val { display: block; white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: .74rem; line-height: 1.65; text-overflow: clip; }
.retinue-card-summary { font-size: 1.06rem; line-height: 1.55; display: block; -webkit-line-clamp: unset; overflow: visible; }
.retinue-card-action { flex-wrap: wrap; gap: 12px; align-items: center; font-size: .65rem; letter-spacing: .5px; }
.retinue-member-count { font-size: .67rem; }
.retinue-open-btn { background: none; border: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; text-align: left; padding: 3px 0; }
.retinue-open-btn::after { content: ''; position: absolute; inset: 0; }
.retinue-card:focus-within { outline: 2px solid var(--frank-gold-glow); outline-offset: 3px; }
.retinue-open-btn:focus-visible { outline: none; }
.retinue-modal-body { overflow-wrap: anywhere; }
.retinue-is-open { overflow: hidden; }
.rm-header-info, .rm-column { min-width: 0; }
.rm-content-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.rm-roster-table { table-layout: fixed; }
.rm-roster-table td, .rm-roster-table th { overflow-wrap: anywhere; }
.retinue-modal-close { min-width: 44px; min-height: 44px; background: #101625; border-radius: 3px; }
.recruitment-banner-card { background: linear-gradient(90deg, rgba(6,12,23,.94), rgba(6,12,23,.86)), url('assets/images/shieldwall_close.jpg') center / cover; padding: 48px 30px; }
.recruitment-content h2 { font-size: clamp(1.25rem, 2.3vw, 1.8rem); text-wrap: balance; }
.recruitment-content p { max-width: 660px; font-size: 1.2rem; }
.recruitment-actions a { text-decoration: none; }

@media (max-width: 1180px) {
  .nav-brand-text { display: none; }
  .nav-brand-short { display: inline; }
  .heraldic-nav-container { gap: 12px; padding-inline: 20px; }
  .heraldic-nav-link { padding-inline: 12px; }
  .retinues-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-role-card { padding: 20px; }
  .role-heading { gap: 12px; }
  .role-heading img { width: 60px; height: 60px; }
}
@media (max-width: 900px) {
  .heraldic-nav-link { padding-inline: 9px; font-size: .66rem; gap: 5px; letter-spacing: .4px; }
  .nav-brand-wrap { padding-right: 12px; }
  .rank-roles-grid { grid-template-columns: 1fr; }
  .rank-role-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; padding: 26px; }
  .role-heading { grid-column: 1; }
  .role-description { grid-column: 1; }
  .rank-role-card > .rank-list-label { grid-column: 2; grid-row: 1; align-self: start; }
  .role-rank-list { grid-column: 2; grid-row: 1 / 4; margin-top: 30px; }
  .role-mastery { grid-column: 1; min-height: 0; }
  .rank-start > p { max-width: 340px; }
  .rm-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .royal-banner-strip { padding: 6px 14px; }
  .strip-content { gap: 9px; font-size: .56rem; letter-spacing: 1px; }
  .strip-content .fleur { font-size: .8rem; flex-shrink: 0; }
  .heraldic-nav-container { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .nav-brand-wrap { padding: 0; border: 0; margin-right: auto; }
  .nav-brand-crest { width: 30px; height: 30px; }
  .nav-discord-btn { order: 2; font-size: .61rem; padding: 9px 10px; gap: 6px; }
  .nav-menu-toggle { display: none; order: 3; border: 1px solid #4a4d50; border-radius: 3px; color: #ded4ba; background: #111a2a; padding: 8px 10px; min-height: 36px; align-items: center; gap: 7px; font: 600 .65rem var(--font-serif-header); cursor: pointer; }
  .realm-enhanced .nav-menu-toggle { display: inline-flex; }
  .nav-links-cluster { order: 4; width: 100%; flex: 0 0 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-steel); }
  .realm-enhanced .nav-links-cluster:not(.is-open) { display: none; }
  .heraldic-nav-link { justify-content: center; padding: 13px 8px; font-size: .66rem; }
  .hero-main-title { font-size: clamp(1.65rem, 5.5vw, 2.5rem); }
  .hero-desc { font-size: 1.16rem; }
  .hero-motto { font-size: .64rem; letter-spacing: 1.2px; }
  .hero-community-tags { gap: 10px 14px; }
  .hero-community-tags span { font-size: .56rem; }
  .clan-portal-hero { padding: 34px 20px 36px; }
  .realm-section-nav { gap: 3px 20px; padding: 16px; margin-bottom: 48px; }
  .realm-section-nav > span { width: 100%; text-align: center; margin-bottom: 7px; }
  #view-clan > section:not(.clan-portal-hero):not(.recruitment-banner-card) { margin-bottom: 52px; }
  .about-pillars-dual, .events-grid, .realm-orders-grid { grid-template-columns: 1fr; }
  .realm-leadership { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px; }
  .leadership-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leadership-roles li { padding-inline: 10px; }
  .about-overview-card { padding: 24px; }
  .community-playstyles { gap: 16px; }
  .community-playstyles h3 { font-size: .75rem; line-height: 1.6; }
  .event-card-community { grid-template-columns: 1fr; gap: 12px; }
  .rank-start { flex-wrap: wrap; gap: 14px; padding: 22px; }
  .rank-start > p { max-width: none; width: 100%; margin: 0; }
  .retinues-grid { grid-template-columns: 1fr; }
  .retinue-card-summary { flex: auto; }
  .retinue-card-title { font-size: 1.35rem; }
  .retinue-card-action { font-size: .7rem; }
  .retinue-modal-backdrop { padding: 12px; }
  .retinue-modal-dialog { width: 100%; max-height: 92dvh; }
  .retinue-modal-body { padding: 56px 22px 24px; }
  .rm-motto-row { justify-content: center; }
  .rm-title { font-size: 1.5rem; }
  .rm-meta-pills { justify-content: center; }
  .recruitment-banner-card { padding: 34px 22px; }
}
@media (max-width: 480px) {
  .war-room-container { padding-inline: 12px; }
  .nav-brand-short { font-size: .84rem; }
  .heraldic-nav-container { padding-inline: 12px; gap: 8px; }
  .nav-discord-btn { font-size: .56rem; }
  .nav-menu-toggle { padding-inline: 8px; }
  .hero-cta-cluster { flex-direction: column; }
  .hero-cta-cluster > a { width: 100%; font-size: .7rem; }
  .hero-community-tags { max-width: 230px; margin-inline: auto; }
  .hero-crest-frame { width: 76px; height: 76px; }
  .hero-badge-tag { font-size: .53rem; padding-inline: 10px; letter-spacing: .8px; }
  .community-playstyles { grid-template-columns: 1fr; gap: 20px; }
  .community-playstyles h3 { font-size: .9rem; }
  .about-feature-box, .event-card { padding: 23px; }
  .rank-role-card { display: flex; padding: 23px; }
  .role-rank-list { margin-top: 12px; }
  .role-heading img { width: 72px; height: 72px; }
  .role-mastery { min-height: 0; }
  .realm-orders summary, .realm-orders-grid { padding: 22px; }
  .retinue-card { padding: 22px; }
}
@media (max-width: 360px) {
  .nav-discord-btn > span { display: none; }
  .nav-discord-btn { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}