/* Shared visual rules for visitor/player pages. Admin pages do not load this file. */
/* Navigation belongs to the page, without button styling. */
.hxh-site .hxh-breadcrumb { margin: 0 0 1.5rem; padding: 0 0 .85rem; border-bottom: 1px solid #d4b896; color: #80663e; font-size: .9rem; }
.hxh-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem 0; align-items: baseline; list-style: none; margin: 0; padding: 0; }
.hxh-breadcrumb li { display: inline-flex; align-items: baseline; max-width: 100%; }
.hxh-breadcrumb li + li::before { content: '›'; margin: 0 .7rem; color: #b99a68; }
.hxh-breadcrumb a { color: #80663e; text-decoration: none; }
.hxh-breadcrumb a:hover { color: #5c3c10; text-decoration: underline; text-underline-offset: .2em; }
.hxh-breadcrumb [aria-current] { color: #5c3c10; font-weight: bold; overflow-wrap: anywhere; }
.hxh-site {
    --hxh-ink: #5c3c10;
    --hxh-accent: #8c6d3f;
    --hxh-border: #d4b896;
    --hxh-paper: #fffcf5;
    --hxh-parchment: #f5e7c1;
    font-family: 'gyreschola', 'Lato', serif;
}
.hxh-site :is(button, input, select, textarea, .hxh-button, .button-27, .button_style,
    [class$='-btn'], [class*='-btn '], [class$='-button'], [class*='-button ']) {
    font-family: 'gyreschola', 'Lato', serif !important;
    letter-spacing: normal;
}
.hxh-site :is(h1, h2, h3) { font-family: 'Cinzel', serif; }
.hxh-site :where(.hxh-button,
    .hxh-back-btn, .hxh-action-btn, .hxh-btn, .game-btn, .return-btn, .retry-btn,
    .button-27, .button_style, .custom-btn, .filter-btn, .filter-button,
    .black-market-btn, .zoldyck-btn, .home-button, .hxh-result-button) {
    background: linear-gradient(#fffcf5, #f1e3c4) !important;
    color: var(--hxh-ink) !important;
    border: 1px solid #b99a68 !important;
    border-radius: 3px !important;
    box-shadow: inset 0 0 0 2px #fffcf580, 0 2px 0 #5c3c101c !important;
    text-shadow: none !important;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.hxh-site .hxh-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .6rem 1.15rem; font-size: .95rem; font-weight: bold; line-height: 1.4; cursor: pointer;
}
.hxh-site :is(.hxh-button-primary, .home-button-primary,
    .hxh-result-button-primary, .hxh-button.is-active, .filter-btn.active, .filter-button.active) {
    background: linear-gradient(#876635, #63451d) !important; border-color: #63451d !important; color: #fff3d5 !important; box-shadow: inset 0 0 0 2px #d4b89655, 0 2px 0 #5c3c1026 !important;
}
.hxh-site .hxh-button-danger {
    background: #8c3232 !important; border-color: #8c3232 !important; color: #fff !important;
}
.hxh-site :where(.hxh-button, .hxh-back-btn,
    .hxh-action-btn, .hxh-btn, .home-button, .hxh-result-button):hover:not(:disabled):not([aria-disabled='true']) {
    background: linear-gradient(#fff7e3, #e7d2a4) !important; color: var(--hxh-ink) !important; border-color: var(--hxh-accent) !important;
}
.hxh-site :is(button, .hxh-button):is(:disabled, [aria-disabled='true']) { cursor: not-allowed; }
.hxh-site .hxh-button:is(:disabled, [aria-disabled='true']) { opacity: .55; }
.hxh-site .hxh-button.hxh-button-small { padding: .35rem .65rem; font-size: .875rem; }
.hxh-site .hxh-button.hxh-button-large { padding: .75rem 1.25rem; font-size: 1.125rem; }
.hxh-site .hxh-button.hxh-button-link { padding: 0; background: none !important; border: 0 !important; color: var(--hxh-ink) !important; text-decoration: underline; text-underline-offset: .2em; }
.hxh-public-site .hxh-button-close { display: inline-flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: #5c3c10; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.hxh-public-site .hxh-button-close::before { content: '×'; }
.hxh-site :is(.form-control, .form-select) { font-family: inherit; border-color: var(--hxh-border); }
.hxh-site .pvp-special-btn small { font-family: inherit; }
.hxh-public-site :is(.hxh-modal-btn, .mobile-nav-btn) { font-family: 'gyreschola', 'Lato', serif; }
.hxh-site :is(.home-update-content, .hxh-reading-content) { overflow-wrap: anywhere; line-height: 1.8; max-height: none; }
.hxh-site :is(.home-update-content, .hxh-reading-content) :is(p, li, span, a) { font-family: inherit !important; }
.hxh-site .hxh-public-panel {
    color: var(--hxh-ink); background: var(--hxh-parchment); border: 2px solid var(--hxh-accent);
    border-radius: 10px; padding: clamp(1rem, 3vw, 2rem); box-shadow: 0 2px 8px #5c3c101a;
}
.hxh-site .hxh-public-heading { margin: 1.25rem 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #b99a68; }
.hxh-site .hxh-public-heading h1 { margin: .5rem 0 .75rem; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.5; overflow-wrap: anywhere; }
.hxh-site .hxh-public-heading p { margin: .5rem 0 0; max-width: 70ch; line-height: 1.7; }
.hxh-site .hxh-category-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.hxh-site .hxh-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hxh-site .hxh-article-card { background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.hxh-site .hxh-article-card > a img { width: 100%; height: auto; aspect-ratio: 5/3; object-fit: cover; }
.hxh-site .hxh-article-card-body { padding: 1.25rem; display: flex; flex-direction: column; align-items: start; flex: 1; }
.hxh-site .hxh-article-card h2 { font-size: 1.1rem; margin: 1rem 0 .75rem; line-height: 1.6; }
.hxh-site .hxh-article-card h2 a { color: inherit; text-decoration: none; }
.hxh-site .hxh-article-card h2 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.hxh-site .hxh-article-card p { line-height: 1.7; flex: 1; }
.hxh-site .hxh-article-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; color: #80663e; font-size: .85rem; width: 100%; }
.hxh-site .hxh-article-meta a { color: inherit; }
.hxh-site .hxh-reading-page { max-width: 900px; margin-inline: auto; }
.hxh-site .hxh-reading-content { background: var(--hxh-paper); padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--hxh-border); border-radius: 8px; }
.hxh-site .hxh-reading-content :is(img, video, iframe) { max-width: 100%; }
.hxh-site .hxh-reading-content :is(img, video) { height: auto; }
.hxh-site .hxh-reading-content table { display: block; max-width: 100%; overflow-x: auto; }
.hxh-site .hxh-reading-content blockquote { padding: 1rem; border-left: 3px solid var(--hxh-accent); background: #f8f0dd; }
.hxh-site .hxh-reading-content pre { overflow-x: auto; }
.hxh-site .hxh-reading-content a { color: var(--hxh-ink); text-underline-offset: .2em; }
.hxh-site .hxh-reading-footer { margin-top: 1.25rem; }
.hxh-library, .hxh-chapter-page { color: #5c3c10; }
.hxh-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .5rem 0 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid #d4b896; }
.hxh-library-heading h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.4; margin: .5rem 0 .75rem; }
.hxh-library-heading p { margin: 0; line-height: 1.7; color: #80663e; }
.hxh-library-heading > img { width: 180px; height: 120px; object-fit: cover; border-radius: 5px; border: 1px solid #d4b896; }
.hxh-eyebrow { font-family: 'Cinzel', serif; font-size: .85rem; color: #8c6d3f; }
.hxh-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.hxh-book-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1.25rem; background: #fffcf5; border: 1px solid #d4b896; border-radius: 8px; padding: 1.25rem; }
.hxh-book-cover { width: 110px; height: auto; border-radius: 3px; box-shadow: 2px 3px 7px #5c3c1026; }
.hxh-book-card h2 { margin: 0 0 .75rem; font-size: 1.15rem; line-height: 1.5; }
.hxh-chapter-list { list-style: none; margin: 0; padding: 0; }
.hxh-chapter-list li + li { border-top: 1px solid #e9ddc6; }
.hxh-chapter-list a { display: grid; grid-template-columns: 2rem 1fr auto; gap: .5rem; align-items: baseline; padding: .6rem 0; color: #5c3c10; text-decoration: none; font-size: .95rem; }
.hxh-chapter-list a > span:first-child { color: #9a7a48; font-variant-numeric: tabular-nums; }
.hxh-chapter-list a:hover { color: #8c6d3f; text-decoration: underline; text-underline-offset: .2em; }
.hxh-chapter-page { max-width: 1100px; margin-inline: auto; }
.hxh-chapter-layout { display: flex; gap: 2rem; align-items: start; }
.hxh-chapter-layout > .hxh-reading-content { min-width: 0; flex: 1; }
.hxh-chapter-cover { flex: 0 0 170px; margin: 0; text-align: center; }
.hxh-chapter-cover img { width: 100%; height: auto; border: 1px solid #d4b896; border-radius: 4px; }
.hxh-chapter-cover figcaption { margin-top: .75rem; font-size: .85rem; color: #80663e; }
.hxh-chapter-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #d4b896; }
.hxh-chapter-navigation a { color: #5c3c10; text-decoration: none; }
.hxh-chapter-navigation a:hover { text-decoration: underline; text-underline-offset: .2em; }
.hxh-chapter-navigation span, .hxh-chapter-navigation strong { display: block; }
.hxh-chapter-navigation span { color: #80663e; font-size: .85rem; margin-bottom: .4rem; }
.hxh-chapter-navigation > div:last-child { text-align: right; }
.hxh-chapter-index { font-size: .9rem; }
@media (max-width: 1100px) { .hxh-book-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .hxh-library-heading { gap: 1rem; }
    .hxh-library-heading > img { display: none; }
    .hxh-book-card { grid-template-columns: 72px minmax(0, 1fr); gap: .85rem; padding: 1rem; }
    .hxh-book-cover { width: 72px; }
    .hxh-chapter-layout { flex-direction: column; }
    .hxh-chapter-cover { flex-basis: auto; width: 120px; align-self: center; }
    .hxh-chapter-navigation { grid-template-columns: 1fr 1fr; }
    .hxh-chapter-index { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}
/* Older York Shin pages used a separate neon palette; keep their layout and actions. */
.hxh-site .genei-ryodan-lair {
    --spider-primary: #745326; --spider-accent: #8c6d3f; --spider-gold: #b99a68;
    --spider-light: #5c3c10; --spider-glow: transparent;
    background: var(--hxh-parchment); color: var(--hxh-ink); border: 2px solid var(--hxh-accent); border-radius: 10px;
}
.hxh-site .genei-ryodan-lair::before { display: none; }
.hxh-site .genei-ryodan-lair :is(.member-card, .boss-card, .speech-bubble, .introduction-section) {
    background: var(--hxh-paper); border-color: var(--hxh-border); color: var(--hxh-ink); box-shadow: 0 2px 8px #5c3c101a;
}
.hxh-site .genei-ryodan-lair :is(.member-name, .ryodan-title, .title-main, .title-sub, .ryodan-subtitle, .speaker-name, .breadcrumb-link, .level-requirement, .member-rewards) {
    color: var(--hxh-ink); text-shadow: none; -webkit-text-fill-color: currentColor; background: none;
}
.hxh-site .genei-ryodan-lair .challenge-btn {
    background: #745326; border-color: #745326; color: #fff3d5; border-radius: 6px; box-shadow: none; text-shadow: none;
}
.hxh-site .black-market-page { background: var(--hxh-parchment); color: var(--hxh-ink); border: 2px solid var(--hxh-accent); border-radius: 10px; padding: 1rem; }
.hxh-site .black-market-page :is(.black-market-card, .black-market-wallet, .black-market-item, .purchase-details) {
    background: var(--hxh-paper); color: var(--hxh-ink); border: 1px solid var(--hxh-border); border-radius: 8px; box-shadow: 0 2px 8px #5c3c101a;
}
.hxh-site .black-market-page :is(.item-header, .item-image, .black-market-price) { background: #f8f0dd; border-color: var(--hxh-border); color: var(--hxh-ink); }
.hxh-site .black-market-page .price-value { color: #745326; }
.hxh-site .black-market-page .black-market-input { background: var(--hxh-paper); color: var(--hxh-ink); border-color: var(--hxh-border); }
.hxh-site .black-market-page :is(.black-market-title, .merchant-speech, .item-name, .item-description, .item-price, .text-white, .text-light, .text-muted) { color: var(--hxh-ink) !important; text-shadow: none; }
.hxh-site .hxh-button-danger:hover:not(:disabled) { background: #702626 !important; color: #fff !important; }
.hxh-site .hxh-public-pagination { margin-top: 1.5rem; }
.hxh-site .pagination { flex-wrap: wrap; gap: .25rem; }
.hxh-site .page-link { color: var(--hxh-ink); background: var(--hxh-paper); border-color: var(--hxh-border); }
.hxh-site .page-item.active .page-link { background: #745326; color: #fff3d5; border-color: #745326; }
@media (prefers-reduced-motion: reduce) {
    .hxh-site :is(.hxh-button) { transition: none; }
}
@media (max-width: 1100px) { .hxh-site .hxh-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hxh-site .hxh-article-grid { grid-template-columns: minmax(0, 1fr); } }

/* Destination hubs: artwork and navigation share one composition. */
.hxh-destinations-page { color: var(--hxh-ink); }
.hxh-destination-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); align-items: center; gap: 2.5rem; margin: .5rem 0 2rem; }
.hxh-destination-heading h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 1rem; }
.hxh-destination-heading p { font-size: 1rem; line-height: 1.8; margin: 0; max-width: 65ch; color: #80663e; }
.hxh-destination-heading > img { width: 100%; aspect-ratio: 5/3; object-fit: cover; border-radius: 8px; border: 1px solid var(--hxh-border); }
.hxh-destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; }
.hxh-destination { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 8px; color: var(--hxh-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.hxh-destination > img { width: 100%; height: 160px; object-fit: cover; object-position: center 35%; background: #f5e7c1; }
.hxh-destination-body { padding: 1.25rem; display: flex; flex: 1; flex-direction: column; }
.hxh-destination h2 { font-size: 1.15rem; line-height: 1.5; margin: 0 0 .75rem; }
.hxh-destination p { font-size: .95rem; line-height: 1.65; margin: 0 0 1.25rem; color: #80663e; }
.hxh-destination-action { display: flex; align-items: center; justify-content: space-between; padding-top: .85rem; border-top: 1px solid #eadfc9; margin-top: auto; font-weight: bold; }
.hxh-destination:hover { color: var(--hxh-ink); border-color: var(--hxh-accent); box-shadow: 0 4px 12px #5c3c101a; }
.hxh-episodes-page { max-width: 1050px; margin-inline: auto; color: var(--hxh-ink); }
.hxh-edition-switch { display: flex; gap: .25rem; border: 1px solid var(--hxh-border); border-radius: 6px; padding: .25rem; background: var(--hxh-paper); }
.hxh-edition-switch a { color: var(--hxh-ink); padding: .5rem 1rem; border-radius: 4px; text-decoration: none; }
.hxh-edition-switch [aria-current] { background: #745326; color: #fff3d5; }
.hxh-episode-list { display: grid; gap: .65rem; }
.hxh-episode { border: 1px solid var(--hxh-border); border-radius: 6px; background: var(--hxh-paper); overflow: hidden; }
.hxh-episode summary { display: flex; gap: 1rem; align-items: center; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.hxh-episode summary::-webkit-details-marker { display: none; }
.hxh-episode summary:hover { background: #f8f0dd; }
.hxh-episode summary > img { width: 48px; height: 56px; object-fit: cover; border-radius: 3px; }
.hxh-episode-number { min-width: 2rem; color: #9a7a48; font-variant-numeric: tabular-nums; text-align: center; }
.hxh-episode-title { flex: 1; min-width: 0; }
.hxh-episode-title strong { display: block; line-height: 1.5; }
.hxh-episode-title small { display: block; color: #80663e; margin-top: .25rem; }
.hxh-disclosure { font-size: 1.5rem; width: 1.25rem; text-align: center; }
.hxh-episode[open] .hxh-disclosure { transform: rotate(45deg); }
.hxh-episode-synopsis { padding: 1.25rem; border-top: 1px solid #eadfc9; line-height: 1.8; }
.hxh-episode-synopsis p:last-child { margin-bottom: 0; }
.hxh-episode-original { color: #80663e; font-style: italic; }
.hxh-cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem; }
.hxh-cover-card { padding: 1rem; text-align: center; background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 6px; }
.hxh-cover-card a { display: block; color: var(--hxh-ink); text-decoration: none; }
.hxh-cover-card img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: contain; }
.hxh-cover-card h2 { font-size: 1.1rem; margin: 1rem 0 .6rem; }
.hxh-cover-card a:hover h2 { text-decoration: underline; text-underline-offset: .2em; }
.hxh-cover-card span { font-size: .9rem; }
.hxh-site :is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #9a7a48; outline-offset: 3px; }
@media(max-width: 700px) {
 .hxh-destination-heading { grid-template-columns: 1fr; gap: 1.25rem; }
 .hxh-destination-heading > img { max-height: 220px; }
 .hxh-episode summary { gap: .6rem; padding: .75rem; }
 .hxh-episode summary > img { display: none; }
 .hxh-cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

/* Reading, forms and system states share the same parchment language. */
.hxh-editorial { max-width: 1000px; margin-inline: auto; padding: clamp(1rem, 3vw, 2.5rem); background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 8px; color: var(--hxh-ink); line-height: 1.8; overflow-wrap: anywhere; }
.hxh-editorial h1 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.5; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hxh-border); }
.hxh-editorial h2 { clear: both; font-size: 1.35rem; margin: 2rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--hxh-border); }
.hxh-editorial h3 { font-size: 1.15rem; }
.hxh-editorial :is(img, iframe) { max-width: 100%; }
.hxh-editorial img { height: auto; }
.hxh-editorial a { color: #745326; text-underline-offset: .2em; }
.hxh-editorial .row { margin-inline: 0; }
.hxh-editorial .p-4 { padding: .5rem 0 !important; }
.hxh-editorial .hxh-author-portrait { float: left; width: 120px; margin: 0 1.5rem 1.25rem 0; border: 1px solid var(--hxh-border); border-radius: 5px; }
.hxh-author-facts { list-style: none; padding: 0; margin: 0 0 2rem; }
.hxh-author-facts .list-group-item { background: none; color: inherit; border: 0; padding: .5rem 0; }
.hxh-empty-state, .hxh-form-panel { max-width: 620px; margin: 2rem auto; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--hxh-border); border-radius: 8px; background: var(--hxh-paper); color: var(--hxh-ink); line-height: 1.7; }
.hxh-empty-state { text-align: center; }
.hxh-empty-state > i { font-size: 2rem; color: #8c6d3f; margin-bottom: 1rem; }
.hxh-empty-state :is(h1, h2), .hxh-form-panel h1 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.5; margin-bottom: 1.25rem; }
.hxh-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.hxh-form-actions > a:not(.hxh-button) { font-size: .9rem; color: var(--hxh-ink); text-underline-offset: .2em; }
.hxh-progress-list { display: grid; gap: 1rem; }
.hxh-progress-item { padding: 1.25rem; background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 6px; }
.hxh-progress-item > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; color: var(--hxh-ink); }
.hxh-progress-item h2 { font-size: 1rem; line-height: 1.6; margin: 0; }
.hxh-progress-item strong { white-space: nowrap; }
.hxh-progress-item progress { display: block; width: 100%; height: .65rem; border: 0; border-radius: 1rem; overflow: hidden; background: #e8dcc3; accent-color: #8c6d3f; }
.hxh-progress-item progress::-webkit-progress-bar { background: #e8dcc3; }
.hxh-progress-item progress::-webkit-progress-value { background: #8c6d3f; }
.hxh-progress-item progress::-moz-progress-bar { background: #8c6d3f; }
/* Bootstrap is still used for layout/behaviour; its default surfaces are not the art direction. */
.hxh-site .modal-content { background: var(--hxh-paper); color: var(--hxh-ink); border: 2px solid var(--hxh-accent); border-radius: 8px; font-family: inherit; }
.hxh-site :is(.modal-header, .modal-footer) { border-color: var(--hxh-border); padding: 1rem 1.25rem; gap: .75rem; }
.hxh-site .modal-body { padding: 1.25rem; }
.hxh-site .alert { color: #5c3c10; background: #fff4da; border: 1px solid #d4b896; border-left: 3px solid #8c6d3f; border-radius: 5px; line-height: 1.6; }
.hxh-site .alert-danger { color: #7a3030; background: #fff0eb; border-color: #d6aaa0; border-left-color: #9c4444; }
.hxh-site .alert-success { color: #3b5936; background: #f3f5e9; border-color: #b6c4a3; border-left-color: #637a4e; }
.hxh-site .form-control:focus, .hxh-site .form-select:focus { border-color: #8c6d3f; box-shadow: 0 0 0 .2rem #8c6d3f26; }

.hxh-site .hxh-location-return { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 0; color: var(--hxh-ink); font-size: .95rem; text-decoration: none; }
.hxh-site .hxh-location-return:hover { text-decoration: underline; text-underline-offset: .2em; }
.hxh-tier-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--hxh-border); border-radius: 6px; background: var(--hxh-paper); color: var(--hxh-ink); }
.hxh-tier-summary strong { font-family: 'Cinzel', serif; font-size: 1.5rem; }
.hxh-site .hxh-reader-toolbar { margin-bottom: 1.25rem; align-items: center; }
.hxh-site .hxh-reader-toolbar > div { min-width: 130px; }
.hxh-site .hxh-destinations-page .card { background: var(--hxh-paper); color: var(--hxh-ink); border: 1px solid var(--hxh-border) !important; box-shadow: none !important; border-radius: 8px; }
.hxh-site .hxh-destinations-page .card-header { background: #745326 !important; color: #fff3d5 !important; border-color: var(--hxh-border); }
.hxh-site .hxh-destinations-page .card-header h3 { font-size: 1.15rem; line-height: 1.6; }
@media(prefers-reduced-motion: reduce) { .hxh-site *, .hxh-site *::before, .hxh-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Public member sheet: one identity, restrained metadata, details on demand. */
.hxh-member-profile { max-width: 1100px; margin-inline: auto; color: var(--hxh-ink); }
.hxh-member-hero { display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem; background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-top: 4px solid var(--hxh-accent); border-radius: 8px 8px 0 0; }
.hxh-member-avatar { flex: 0 0 auto; width: 136px; height: 136px; object-fit: cover; border: 3px solid var(--hxh-accent); border-radius: 50%; padding: 4px; background: #f5e7c1; }
.hxh-member-identity { min-width: 0; flex: 1; }
.hxh-member-identity h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.4; margin: .35rem 0; overflow-wrap: anywhere; }
.hxh-member-identity p { margin: 0 0 .6rem; font-size: 1rem; }
.hxh-member-last-seen { font-size: .85rem; color: #80663e; }
.hxh-member-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; background: #f5e7c1; border: 1px solid var(--hxh-border); border-top: 0; border-radius: 0 0 8px 8px; }
.hxh-member-stats > div { text-align: center; padding: 1rem; min-width: 0; }
.hxh-member-stats > div + div { border-left: 1px solid var(--hxh-border); }
.hxh-member-stats dt { font-size: .85rem; font-weight: normal; color: #80663e; }
.hxh-member-stats dd { margin: .4rem 0 0; font-size: 1.4rem; font-weight: bold; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hxh-member-sections { display: flex; gap: 1.5rem; margin: 1.5rem 0; padding: .65rem 0; border-bottom: 1px solid var(--hxh-border); flex-wrap: wrap; }
.hxh-member-sections a { color: var(--hxh-ink); font-size: .95rem; text-decoration: none; }
.hxh-member-sections a:hover { text-decoration: underline; text-underline-offset: .3em; }
.hxh-member-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1.5rem; align-items: start; }
.hxh-member-panel { padding: 1.5rem; background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 8px; min-width: 0; scroll-margin-top: 6rem; }
.hxh-member-panel h2 { font-size: 1.2rem; line-height: 1.5; margin: 0 0 1.25rem; }
.hxh-member-facts { margin: 0; }
.hxh-member-facts > div { padding: .85rem 0; border-bottom: 1px solid #eadfc9; }
.hxh-member-facts > div:first-child { padding-top: 0; }
.hxh-member-facts > div:last-child { border: 0; }
.hxh-member-facts dt { font-size: .85rem; color: #80663e; margin-bottom: .4rem; font-weight: normal; }
.hxh-member-facts dd { font-size: 1rem; line-height: 1.7; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.hxh-member-signature { border-top: 1px solid var(--hxh-border); margin: 1.25rem 0 0; padding: 1.25rem 0 0; font-size: .95rem; font-style: italic; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.hxh-member-muted { color: #80663e; font-size: .95rem; line-height: 1.7; margin: 0; }
.hxh-member-sidebar { display: grid; gap: 1.5rem; }
.hxh-member-equipment { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center; font-size: .95rem; }
.hxh-member-equipment img { width: 120px; height: 120px; object-fit: contain; }
.hxh-member-equipment span { font-size: .85rem; color: #80663e; }
.hxh-member-license { margin: 0; text-align: center; }
.hxh-member-license img { max-width: 170px; height: auto; }
.hxh-member-license figcaption { font-size: .8rem; color: #80663e; margin-top: .5rem; }
.hxh-member-missions { margin-top: 1.5rem; }
.hxh-member-missions > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1rem; }
.hxh-member-missions > header h2 { margin: 0; }
.hxh-member-missions > header > span { font-size: .85rem; color: #80663e; }
.hxh-member-mission-group { border-top: 1px solid #eadfc9; }
.hxh-member-mission-group summary { display: flex; align-items: center; gap: .8rem; padding: 1rem 0; font-size: .95rem; cursor: pointer; list-style: none; }
.hxh-member-mission-group summary::-webkit-details-marker { display: none; }
.hxh-member-mission-rank { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; background: #f5e7c1; border: 1px solid var(--hxh-border); border-radius: 4px; font-family: 'Cinzel', serif; }
.hxh-member-count { margin-left: auto; white-space: nowrap; font-size: .85rem; color: #80663e; }
.hxh-member-mission-group[open] .hxh-disclosure { transform: rotate(45deg); }
.hxh-member-mission-group ul { list-style: none; padding: 0 0 1rem 2.8rem; margin: 0; }
.hxh-member-mission-group li { font-size: .95rem; line-height: 1.7; padding: .65rem 0; }
.hxh-member-mission-group li + li { border-top: 1px solid #eadfc9; }
.hxh-member-mission-group li p { margin: .35rem 0 0; color: #80663e; }
@media(max-width: 850px) {
 .hxh-member-hero { flex-wrap: wrap; padding: 1.25rem; gap: 1rem; }
 .hxh-member-contact { flex-basis: 100%; }
 .hxh-member-avatar { width: 100px; height: 100px; }
 .hxh-member-layout { grid-template-columns: minmax(0, 1fr); }
 .hxh-member-sidebar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
 .hxh-member-license img { max-width: 110px; }
}
@media(max-width: 480px) {
 .hxh-member-panel { padding: 1rem; }
 .hxh-member-stats > div { padding: .85rem .5rem; }
 .hxh-member-stats dd { font-size: 1.1rem; }
 .hxh-member-stats dt { font-size: .75rem; }
 .hxh-member-mission-group summary { gap: .5rem; }
 .hxh-member-sections { gap: 1rem; }
}

.hxh-scene-panel { color: var(--hxh-ink); background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 8px; padding: clamp(1rem, 3vw, 2rem); line-height: 1.7; }
.hxh-scene-panel > h1, .hxh-scene-panel h1.h4 { font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.5; }
.hxh-scene-panel .card { background: #f8f0dd; border-color: var(--hxh-border); box-shadow: none; }
.hxh-scene-panel :is(.card-header, .card-footer) { background: #f5e7c1; border-color: var(--hxh-border); color: var(--hxh-ink); }
.hxh-scene-panel > .row { margin-inline: 0; }
.hxh-scene-panel a { color: #745326; }
.hxh-rest-panel { max-width: 850px; margin: 2rem auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.5rem; border: 1px solid var(--hxh-border); border-radius: 8px; background: var(--hxh-paper); color: var(--hxh-ink); }
.hxh-rest-panel > img { width: 100%; height: auto; border-radius: 6px; }
.hxh-rest-panel h1 { font-size: 1.6rem; line-height: 1.5; }
.hxh-rest-panel p { font-size: 1rem; line-height: 1.7; }
.hxh-rest-panel .hxh-location-return { display: flex; margin-top: 1rem; }
@media(max-width: 650px) { .hxh-rest-panel { grid-template-columns: 1fr; gap: 1.25rem; } .hxh-rest-panel > img { max-height: 180px; object-fit: cover; } }

.hxh-site .hxh-button-primary:hover:not(:disabled):not([aria-disabled="true"]) { background: linear-gradient(#795a2d, #533714) !important; color: #fff3d5 !important; }
.hxh-site .home-actions { gap: 1rem; align-items: center; }

/* The same pagination component on every public listing. */
.hxh-site .hxh-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 .5rem; font-family: 'gyreschola', 'Lato', serif; font-size: .9rem; line-height: 1; }
.hxh-pagination .hxh-page-numbers { display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.hxh-pagination :is(.hxh-page-control, .hxh-page-numbers a, .hxh-page-numbers span) { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; height: 42px; min-width: 42px; padding: 0 .75rem; white-space: nowrap; border: 1px solid #b99a68; border-radius: 5px; background: #f8f0dd; color: #5c3c10; text-decoration: none; font-size: inherit; box-sizing: border-box; }
.hxh-pagination .hxh-page-control > span { min-width: 0; height: auto; border: 0; padding: 0; background: none; color: inherit; }
.hxh-pagination .hxh-page-numbers [aria-current] { background: #8c6d3f; color: #fff9e8; border-color: #8c6d3f; font-weight: bold; }
.hxh-pagination a:hover { background: #ece0c0; border-color: #8c6d3f; color: #5c3c10; }
.hxh-pagination .is-disabled { color: #8c806d; background: #f4efe4; border-color: #dfd4c0; }
.hxh-pagination .hxh-page-gap { color: #80663e; padding: 0 .2rem; }
.hxh-pagination .hxh-page-position { display: none; color: #80663e; white-space: nowrap; }
@media(max-width: 700px) { .hxh-site .hxh-pagination { gap: .5rem; justify-content: space-between; flex-wrap: nowrap; width: 100%; } .hxh-pagination .hxh-page-numbers { display: none; } .hxh-pagination .hxh-page-position { display: block; } .hxh-pagination .hxh-page-control { padding-inline: .6rem; min-width: 0; font-size: .85rem; } }

.hxh-directory { color: var(--hxh-ink); max-width: 1200px; margin-inline: auto; }
.hxh-directory-search { padding: 1.25rem; border: 1px solid var(--hxh-border); border-radius: 6px; background: var(--hxh-paper); }
.hxh-directory-search label { display: block; font-size: .9rem; margin-bottom: .6rem; }
.hxh-directory-search > div { display: flex; gap: .75rem; align-items: center; }
.hxh-directory-search :is(.form-control, .twitter-typeahead) { flex: 1; min-width: 0; width: 100%; }
.hxh-directory-search .tt-menu { width: 100%; padding: .5rem; background: var(--hxh-paper); border: 1px solid var(--hxh-border); border-radius: 5px; }
.hxh-directory-search .tt-suggestion { display: block; padding: .6rem; color: var(--hxh-ink); font-size: .95rem; }
.hxh-directory-search .tt-suggestion:hover { background: var(--hxh-parchment); }
.hxh-directory-sort { display: flex; gap: .65rem 1.25rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0 1rem; font-size: .9rem; }
.hxh-directory-sort > span { color: #80663e; }
.hxh-directory-sort a { color: var(--hxh-ink); text-decoration: none; padding-block: .35rem; border-bottom: 2px solid transparent; }
.hxh-directory-sort [aria-current] { border-color: var(--hxh-accent); font-weight: bold; }
.hxh-directory-list { border: 1px solid var(--hxh-border); border-radius: 8px; overflow: hidden; background: var(--hxh-paper); }
.hxh-directory-member { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; padding: 1.25rem; }
.hxh-directory-member + .hxh-directory-member { border-top: 1px solid #eadfc9; }
.hxh-directory-identity { display: flex; align-items: center; gap: 1rem; min-width: 220px; flex: 1; color: var(--hxh-ink); text-decoration: none; }
.hxh-directory-identity:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.hxh-directory-identity img { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--hxh-accent); border-radius: 50%; }
.hxh-directory-identity strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.hxh-directory-identity small { display: block; margin-top: .3rem; color: #80663e; font-size: .8rem; }
.hxh-directory-member dl { display: flex; gap: 1.5rem; margin: 0; }
.hxh-directory-member dt { font-weight: normal; color: #80663e; font-size: .75rem; }
.hxh-directory-member dd { margin: .35rem 0 0; font-weight: bold; font-size: .95rem; }
.hxh-directory-date { font-size: .75rem; color: #80663e; }
@media(max-width: 650px) { .hxh-directory-search > div { flex-wrap: wrap; } .hxh-directory-search .twitter-typeahead { flex-basis: 100%; } .hxh-directory-member { gap: 1rem; } .hxh-directory-member dl { flex-basis: 100%; justify-content: space-between; gap: .5rem; } .hxh-directory-date { flex-basis: 100%; } }

.hxh-world-map { color: var(--hxh-ink); }
.hxh-map-card { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--hxh-border); border-radius: 8px; background: var(--hxh-paper); overflow: hidden; }
.hxh-map-card > img { width: 100%; height: 160px; object-fit: cover; }
.hxh-map-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.hxh-map-card .location-title { font-size: 1.15rem; line-height: 1.5; margin: 0 0 .75rem; }
.hxh-map-card .location-description { font-size: .95rem; line-height: 1.6; color: #80663e; }
.hxh-map-card .location-stats { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hxh-map-label { font-size: .75rem; padding: .3rem .5rem; color: #80663e; background: #f5e7c1; border: 1px solid #dfcba4; border-radius: 3px; }
.hxh-map-label-success { color: #49613c; background: #eff2e5; border-color: #bdcaaa; }
.hxh-map-label-danger, .hxh-map-label-warning { color: #82542e; background: #faf0df; }
.hxh-map-card .location-action { margin-top: auto; border-top: 1px solid #eadfc9; padding-top: .75rem; font-size: .95rem; font-weight: bold; }
.hxh-map-card.location-locked > img { filter: saturate(.4); opacity: .75; }
.hxh-map-card:has(a):hover { border-color: var(--hxh-accent); }

/* Override the legacy mobile 2.5em scale at its source of inheritance. */
#main.hxh-site { font-size: 1rem; line-height: 1.65; }
.hxh-member-last-seen { display: block; line-height: 1.5; }
@media(max-width: 480px) { .hxh-site .home-welcome { display: block; } .hxh-site .home-seal { float: left; margin: 0 .75rem .5rem 0; } .hxh-site .home-actions { clear: both; } .hxh-member-stats dd { font-size: 1rem; } }