/*
 * WebJX — Giang Hồ / editorial game-marketing skin.
 * Load after site.css. All assets are local; theme colors and layout variables
 * remain driven by the published appearance configuration.
 */
.public-site {
  --frame-line: color-mix(in srgb, var(--gold) 31%, transparent);
  --frame-light: color-mix(in srgb, var(--paper) 76%, white);
  --frame-deep: color-mix(in srgb, var(--paper) 84%, var(--gold));
  --muted-ink: color-mix(in srgb, var(--ink) 62%, var(--paper));
  background: var(--paper);
}
.public-site main { min-width: 0; overflow: clip; }
.public-site .container { width: min(var(--content), calc(100% - 96px)); }
.public-site .section { padding: 88px 0; }
.public-site .eyebrow { color: var(--gold); letter-spacing: 2.35px; font-size: 9px; }
.public-site .section-heading { position: relative; align-items: center; margin-bottom: 35px; gap: 22px; }
.public-site .section-heading h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(32px, 3.6vw, 47px); letter-spacing: -.9px; }
.public-site .section-heading .eyebrow { margin-bottom: 10px; }
.public-site .section-heading > .text-link { font-size: 10px; color: var(--accent); padding: 9px 0 9px 19px; border-left: 1px solid var(--frame-line); margin: 0; white-space: nowrap; }
.public-site .section-ornament { display: flex; align-items: center; gap: 16px; color: var(--gold); font-family: Georgia, serif; font-size: 16px; margin: 18px 0 28px; }
.public-site .section-ornament::before,
.public-site .section-ornament::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--frame-line)); }
.public-site .section-ornament::after { transform: rotate(180deg); }
.public-site .button { border-radius: 1px; position: relative; overflow: hidden; min-height: 52px; letter-spacing: .15px; transition: box-shadow .2s, background .2s, color .2s, transform .2s; }
.public-site .button-gold { color: #35271b; background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 70%, #f5d995), var(--gold)); border: 1px solid color-mix(in srgb, var(--gold) 72%, #fbe7ba); box-shadow: inset 0 0 0 3px #fff2, 0 7px 22px #31230b24; }
.public-site .button-gold::after { content: ""; position: absolute; inset: 4px; border: 1px solid #fff3; pointer-events: none; }
.public-site .button-gold:hover { filter: none; box-shadow: inset 0 0 0 3px #fff3, 0 10px 26px #31230b38; }
.public-site .button-glass { background: color-mix(in srgb, var(--accent) 78%, transparent); color: #fff2db; border-color: #d9c29466; box-shadow: inset 0 0 0 3px #ffffff07; }
.public-site .button-glass:hover { background: var(--accent); }
.public-site .button-outline { color: var(--ink); border-color: var(--frame-line); background: var(--frame-light); }
.public-site .button-outline:hover { border-color: var(--gold); }
.public-site .text-link { color: var(--accent); font-size: 10px; }
.public-site .text-link:hover { color: var(--gold); }

/* Bronze navigation: a compact game portal, not an application toolbar. */
.public-site .site-header { height: 86px; background: linear-gradient(180deg, #251f1a, #181714); color: #ede3d1; border-top: 3px solid var(--gold); border-bottom: 1px solid #c49b4b55; box-shadow: 0 2px 20px #0002; }
.public-site .header-inner { width: min(1440px, calc(100% - 72px)); gap: 31px; }
.public-site .brand { gap: 12px; max-width: 300px; min-width: 0; }
.public-site .brand-mark { width: 45px; height: 45px; font-size: 28px; background: linear-gradient(145deg, #c4a56412, transparent); border: 1px solid #c5a66a99; box-shadow: inset 0 0 0 4px #be974f0b; transform: none; }
.public-site .brand-name { color: #f2e7d2; font-family: Georgia, serif; font-size: 17px; letter-spacing: .4px; font-weight: 400; overflow-wrap: anywhere; }
.public-site .brand-name small { color: #b3a588; font-family: "Be Vietnam Pro", Arial, sans-serif; font-size: 6px; letter-spacing: 2.4px; margin-top: 7px; }
.public-site .site-navigation { gap: 31px; min-width: 0; }
.public-site .nav-item > a { color: #d6ccb8; font-size: 10px; font-weight: 500; padding: 31px 0; letter-spacing: .1px; white-space: nowrap; }
.public-site .nav-item > a:hover,
.public-site .nav-item > a.active { color: #dfbd78; }
.public-site .nav-item > a.active::after { bottom: 17px; width: 5px; height: 5px; background: var(--gold); box-shadow: 0 0 10px #ddb15d33; }
.public-site .submenu { background: #27201a; border: 1px solid #af874844; border-top: 2px solid var(--gold); padding: 10px; }
.public-site .submenu a { color: #dcc9a9; font-size: 10px; padding: 10px 13px; }
.public-site .submenu a:hover { color: #f1d59a; background: #c3a4650b; }
.public-site .header-account { color: #cbbda0; border-left-color: #be9a5433; padding-left: 23px; font-size: 9px; }
.public-site .header-account:hover { color: #f1d59a; }
.public-site .header-account span { color: #c2a365; }

/* Cinematic landing: the artwork stays customizable through <picture>. */
.public-site .hero { min-height: var(--hero-height, 720px); background: #2b322d; align-items: center; border-bottom: 1px solid #c7a26788; }
.public-site .hero-picture img { object-position: center 42%; }
.public-site .hero:after { background: linear-gradient(90deg, #192520c9 0%, #1b2a236f 35%, #17231e12 69%), linear-gradient(0deg, #22251fc9 0%, #1e2a2100 26%, #0c181d08 75%); opacity: calc(.54 + var(--hero-overlay, .3)); }
.public-site .hero-art { background: radial-gradient(ellipse at 73% 27%, #d4b77733, transparent 47%), linear-gradient(120deg, #243e35, #70827a); }
.public-site .hero-inner { padding-top: 10px; padding-bottom: 75px; }
.public-site .hero-eyebrow { color: #e0d2b3; font-size: 9px; letter-spacing: 2.8px; margin-bottom: 24px; text-shadow: 0 1px 8px #142219; }
.public-site .hero-eyebrow span { background: #d8b472; width: 40px; }
.public-site .hero h1 { color: #fbf2d9; font-family: Georgia, "Times New Roman", serif; font-size: clamp(66px, 7.1vw, 106px); line-height: 1.08; letter-spacing: -3px; max-width: min(660px, 58vw); margin-bottom: 17px; text-shadow: 0 4px 12px #0b1d19a8, 0 0 55px #172b2140; }
.public-site .hero-subtitle { color: #e2dccb; font-size: 15px; letter-spacing: 2.2px; line-height: 1.9; max-width: 570px; margin-bottom: 35px; text-shadow: 0 2px 8px #152b24; }
.public-site .hero-actions { gap: 13px; }
.public-site .hero-actions .button { min-height: 57px; min-width: 192px; font-size: 11px; padding: 16px 25px; gap: 27px; }
.public-site .hero-actions .button-glass { min-width: 210px; }
.public-site .hero-note { color: #d6c8ac; margin-top: 29px; font-size: 7px; letter-spacing: 2px; }
.public-site .scroll-cue { bottom: 26px; color: #e9dbc3; font-size: 7px; gap: 6px; }
.public-site .hero-utility { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 0; width: min(var(--content), calc(100% - 96px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #252721de; border: 1px solid #c9a36966; border-bottom: 0; color: #d9c8a7; backdrop-filter: blur(10px); }
.public-site .hero-utility > * { min-width: 0; padding: 18px 22px; font-size: 9px; border-right: 1px solid #b59b6840; display: flex; align-items: center; justify-content: center; gap: 11px; text-align: center; }
.public-site .hero-utility > *:last-child { border-right: 0; }
.public-site .hero-utility .utility-symbol { flex: 0 0 28px; color: #d9b876; font-family: Georgia, serif; font-size: 19px; }
.public-site .hero-utility > a > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.public-site .hero-utility .utility-arrow { flex: 0 0 12px; color: #c9ac76; font-size: 13px; opacity: .75; }
.public-site .hero-utility strong { color: #ebd5ab; font-size: 11px; font-weight: 500; }
.public-site .hero-utility small { color: #b4b49e; font-size: 8px; }
.public-site .hero-utility a:hover { background: #cba76e0c; color: white; }
.public-site .hero:has(.hero-utility) .scroll-cue { display: none; }

/* Framed newspaper module with a genuine two-column editorial balance. */
.public-site .news-section { background: var(--paper); background-image: radial-gradient(ellipse at 0 0, #c7b28910, transparent 65%); }
.public-site .news-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: 0; background: var(--frame-light); border: 1px solid var(--frame-line); padding: 7px; box-shadow: 0 14px 35px #7e674b09; }
.public-site .feature-banner { min-height: 390px; border-radius: 0; background: radial-gradient(ellipse at 70% 10%, #bc925a70, transparent 60%), linear-gradient(140deg, #485149, #202d26); }
.public-site .banner-slide { min-height: 390px; }
.public-site .banner-slide:after { background: linear-gradient(0deg, #19221aed, #15251f00 90%); }
.public-site .banner-copy { bottom: 31px; left: 33px; right: 33px; }
.public-site .banner-copy .eyebrow { color: #e9cea1; font-size: 8px; letter-spacing: 2px; }
.public-site .banner-copy h3 { font-family: Georgia, serif; font-size: 32px; font-weight: 400; letter-spacing: -.4px; line-height: 1.3; max-width: 440px; }
.public-site .banner-copy .text-link { color: #edd7ac; font-size: 9px; }
.public-site .banner-symbol { color: #bca3722a; font-size: 245px; }
.public-site .carousel-controls { top: 20px; right: 22px; }
.public-site .news-panel { min-width: 0; padding: 23px 29px 11px; border: 1px solid var(--frame-line); border-left: 0; margin: 0 0 0 7px; }
.public-site .news-tabs { gap: 23px; padding-bottom: 17px; border-color: var(--frame-line); }
.public-site .news-tabs button { color: var(--muted-ink); font-size: 10px; }
.public-site .news-tabs button.active { color: var(--accent); }
.public-site .news-tabs button.active:after { height: 2px; background: var(--accent); }
.public-site .news-row { min-height: 71px; padding: 13px 0; gap: 15px; border-color: color-mix(in srgb, var(--gold) 18%, transparent); }
.public-site .news-category { color: var(--accent); font-size: 8px; font-weight: 600; letter-spacing: .35px; }
.public-site .news-row h3 { color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.6; }
.public-site .news-row time { color: var(--muted-ink); font-size: 8px; }
.public-site .row-arrow { opacity: .65; font-size: 16px; }
.public-site .news-row:hover h3 { color: var(--accent); }
.public-site .news-row:hover .row-arrow { opacity: 1; }
.public-site .empty-state { color: var(--muted-ink); line-height: 1.9; padding: 44px 24px; }

/* Factions and handcrafted feature cards. */
.public-site .classes-section { background: var(--frame-deep); border-top: 1px solid var(--frame-line); border-bottom: 1px solid var(--frame-line); }
.public-site .classes-section:before { background: radial-gradient(ellipse at 26% 66%, #9f855620, transparent 52%); }
.public-site .class-stage { grid-template-columns: 1.2fr 1fr; gap: 52px; min-height: 470px; align-items: center; }
.public-site .class-visual { height: 465px; background: radial-gradient(ellipse at 50% 80%, #a68b5b12, transparent 65%); }
.public-site .class-ring { width: 325px; height: 325px; border-color: #b5945555; box-shadow: 0 0 0 22px #a88c5410, 0 0 0 50px #a88c5407; }
.public-site .class-ring:before,
.public-site .class-ring:after { content: "◆"; position: absolute; left: calc(50% - 5px); top: -9px; font-size: 10px; color: var(--gold); }
.public-site .class-ring:after { top: auto; bottom: -9px; }
.public-site .class-art img { object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; filter: drop-shadow(0 11px 14px #5b493616); }
.public-site .class-calligraphy { color: #8f744e; font-size: 185px; }
.public-site .class-info { border-left: 1px solid var(--frame-line); padding: 16px 0 18px 36px; }
.public-site .class-info h3 { color: var(--ink); font-size: 65px; letter-spacing: -1.5px; margin-bottom: 22px; }
.public-site .class-info p { color: var(--muted-ink); font-size: 12px; line-height: 2.15; margin-bottom: 0; max-width: 440px; }
.public-site .class-selector { gap: 8px; margin-top: 30px; }
.public-site .class-selector button { color: var(--ink); border-color: var(--frame-line); border-radius: 0; background: var(--frame-light); padding: 12px 17px; min-width: 95px; }
.public-site .class-selector button span { color: #a89067; font-size: 7px; letter-spacing: 1px; }
.public-site .class-selector button.active { color: #f1e3c9; background: #42372a; border-color: #967548; box-shadow: inset 0 0 0 3px #cbaa5e14; }
.public-site .class-selector button.active span { color: #d4b477; }
.public-site .section-count { color: var(--muted-ink); font-size: 8px; }
.public-site .features-grid { gap: 24px; }
.public-site .feature-card { padding: 29px; min-height: 330px; border-radius: 0; border: 1px solid var(--frame-line); background: var(--frame-deep); box-shadow: inset 0 0 0 5px #fff2; }
.public-site .feature-card:nth-child(2) { background: color-mix(in srgb, var(--paper) 90%, #687468); }
.public-site .feature-card:nth-child(3) { background: color-mix(in srgb, var(--paper) 88%, var(--accent)); }
.public-site .feature-card:before { content: ""; position: absolute; inset: 7px; border: 1px solid #bea26c40; pointer-events: none; z-index: 2; }
.public-site .feature-card:has(img):after { background: linear-gradient(0deg, #22231eed, #20282035 82%); }
.public-site .feature-number { color: #c9b07c; font-size: 37px; opacity: .85; }
.public-site .feature-card h3 { font-family: Georgia, serif; font-size: 27px; font-weight: 400; line-height: 1.35; margin-bottom: 12px; }
.public-site .feature-card p { font-size: 10px; line-height: 2; opacity: .8; }
.public-site .feature-card img { transition: transform .65s; }
.public-site .feature-card:hover img { transform: scale(1.025); }

/* Community and legal footer share a restrained dark-bronze finish. */
.public-site .community-section { background: #28271f; color: #ede3cc; border-top: 1px solid #b69b6233; }
.public-site .community-section:before { width: 710px; height: 710px; left: calc(50% - 355px); top: -480px; border-color: #c5a46422; }
.public-site .community-heading h2 { font-family: Georgia, serif; font-size: clamp(34px, 3.5vw, 46px); font-weight: 400; line-height: 1.35; max-width: 760px; margin-bottom: 18px; }
.public-site .community-heading p { color: #b8b39f; font-size: 11px; line-height: 1.9; margin-bottom: 35px; }
.public-site .social-grid { max-width: 1060px; margin-inline: auto; gap: 19px; }
.public-site .social-card { border-color: #c3a16a40; background: #ccae7307; border-radius: 0; padding: 23px; }
.public-site .social-card:hover { background: #cfad6b0e; border-color: #c3a16a77; }
.public-site .social-icon { border-radius: 0; border-color: #c3a16a70; color: #d9bd89; width: 40px; height: 40px; }
.public-site .social-card h3 { color: #efdfbc; font-size: 11px; font-weight: 500; }
.public-site .social-card p { color: #c9c1ad; font-size: 8px; }
.public-site .social-card > span:last-child { color: #d0ae70; }
.public-site .site-footer { background: #1b1b16; border-top: 1px solid #c3a16a35; padding-top: 41px; color: #b8b09e; }
.public-site .footer-top { border-color: #c3a16a20; padding-bottom: 28px; }
.public-site .footer-brand strong { font-family: Georgia, serif; color: #ecdfc4; font-size: 18px; font-weight: 400; }
.public-site .footer-brand p { color: #9d9989; font-size: 8px; line-height: 1.9; max-width: 420px; }
.public-site .footer-links { gap: 26px; font-size: 9px; color: #c6baa1; }
.public-site .footer-bottom { padding-top: 23px; }
.public-site .footer-bottom p { color: #8f9180; font-size: 8px; line-height: 1.9; }
.public-site .footer-bottom span { color: #a29c8a; font-size: 8px; }
.public-site .age-note { color: #c4ad83!important; font-size: 27px!important; border-left: 1px solid #c3a16a22; padding-left: 23px; }
.public-site .age-note small { color: #9a9987; font-size: 7px; }
.public-site .back-top { border-color: #c3a16a66; color: #d8bc83; background: #28271feb; border-radius: 0; }

/* Archive and article: cinematic banners, airy readable paper. */
.public-site .page-hero { padding: 68px 0 61px; background: var(--frame-deep); border-bottom: 1px solid var(--frame-line); position: relative; isolation: isolate; }
.public-site .page-hero:after { content: ""; position: absolute; left: calc(50% - 29px); bottom: -5px; width: 58px; height: 8px; background: var(--gold); clip-path: polygon(0 45%, 40% 45%, 50% 0, 60% 45%, 100% 45%, 100% 55%, 60% 55%, 50% 100%, 40% 55%, 0 55%); }
.public-site .page-hero h1 { font-family: Georgia, serif; font-size: clamp(43px, 5vw, 64px); font-weight: 400; letter-spacing: -1px; margin-bottom: 16px; }
.public-site .page-hero p { font-size: 11px; line-height: 1.9; max-width: 650px; margin-inline: auto; color: var(--muted-ink); }
.public-site .page-hero.has-image { padding: 79px 0 72px; }
.public-site .page-hero.has-image:before { background: linear-gradient(90deg, #17251fc4, #1b282166, #17251fb0); }
.public-site .page-hero.has-image h1 { color: #f5e8cc; text-shadow: 0 3px 15px #13221980; }
.public-site .page-hero.has-image .eyebrow { color: #d7bc8b; }
.public-site .page-hero.has-image p { color: #dfd5c0; }
.public-site .page-hero-background { object-position: center 43%; }
.public-site .archive-section { padding-top: 42px; }
.public-site .page-frame { border: 1px solid var(--frame-line); background: var(--frame-light); padding: 34px; box-shadow: 0 12px 32px #7e674b07; }
.public-site .archive-toolbar { align-items: center; border-bottom-color: var(--frame-line); padding-bottom: 24px; }
.public-site .archive-tabs { gap: 24px; font-size: 11px; color: var(--muted-ink); }
.public-site .archive-tabs a { padding: 9px 0; position: relative; }
.public-site .archive-tabs a.active { color: var(--accent); }
.public-site .archive-tabs a.active:after { content: ""; position: absolute; bottom: -25px; height: 2px; left: 0; right: 0; background: var(--accent); }
.public-site .search-form { background: var(--frame-light); border-color: var(--frame-line); border-radius: 0; min-width: 260px; }
.public-site .search-form input { padding: 12px 14px; }
.public-site .archive-result { color: var(--muted-ink); font-size: 9px; }
.public-site .archive-grid { gap: 29px 24px; }
.public-site .article-card { border-color: var(--frame-line); border-radius: 0; background: var(--frame-light); box-shadow: 0 5px 16px #7e674b04; transition: border-color .2s, box-shadow .2s; }
.public-site .article-card:hover { border-color: color-mix(in srgb, var(--gold) 58%, transparent); box-shadow: 0 8px 22px #7e674b0b; }
.public-site .article-image { aspect-ratio: 1.65; background: linear-gradient(135deg, #4b5a4c, #29362c); border-bottom: 1px solid var(--frame-line); }
.public-site .article-image .news-category { background: var(--frame-light); color: var(--accent); padding: 5px 10px; border-radius: 0; font-size: 7px; bottom: 14px; }
.public-site .article-card-copy { padding: 24px; }
.public-site .article-card-copy time { color: var(--muted-ink); font-size: 8px; }
.public-site .article-card-copy h2 { color: var(--ink); font-size: 16px; line-height: 1.75; font-weight: 500; letter-spacing: -.2px; margin-top: 10px; margin-bottom: 13px; }
.public-site .article-card-copy p { color: var(--muted-ink); font-size: 11px; line-height: 1.95; margin-bottom: 21px; }
.public-site .article-card-copy > .text-link { font-size: 9px; border-top: 1px solid var(--frame-line); padding-top: 16px; }
.public-site .archive-list .article-card { grid-template-columns: 260px minmax(0, 1fr); }
.public-site .archive-list .article-card-copy h2 { font-size: 19px; }
.public-site .pagination { gap: 9px; }
.public-site .pagination a { border-color: var(--frame-line); background: var(--frame-light); border-radius: 0; color: var(--ink); }
.public-site .pagination a[aria-current] { background: #42372a; border-color: #a6854f; color: #f1e4c9; }
.public-site .article-hero { background: var(--frame-deep); border-bottom: 1px solid var(--frame-line); padding-top: 26px; padding-bottom: 52px; }
.public-site .article-hero.has-image { position: relative; isolation: isolate; overflow: hidden; background: #24352d; }
.public-site .article-hero.has-image:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #18251fd9, #1a2826a8 55%, #1b261dc0); }
.public-site .article-hero.has-image .page-hero-background { object-position: center 53%; }
.public-site .article-hero.has-image h1 { color: #f8edda; text-shadow: 0 3px 18px #111b18a8; }
.public-site .article-hero.has-image .breadcrumb,
.public-site .article-hero.has-image .article-meta { color: #ded2b9; }
.public-site .article-hero.has-image .breadcrumb a:hover { color: #f2d19b; }
.public-site .article-hero.has-image .eyebrow { color: #d3b779; }
.public-site .breadcrumb { color: var(--muted-ink); margin-bottom: 31px; font-size: 9px; }
.public-site .article-hero h1 { max-width: 970px; font-family: Georgia, serif; font-size: clamp(31px, 3.9vw, 50px); font-weight: 400; line-height: 1.4; letter-spacing: -.6px; margin-bottom: 22px; overflow-wrap: anywhere; }
.public-site .article-meta { color: var(--muted-ink); font-size: 9px; }
.public-site .article-section { padding-top: 46px; }
.public-site .article-container { max-width: 900px; background: var(--frame-light); border: 1px solid var(--frame-line); padding: 37px 44px 31px; }
.public-site .article-cover { border-radius: 0; max-height: 470px; margin-bottom: 32px; border: 1px solid var(--frame-line); }
.public-site .prose { font-size: 14px; line-height: 2.15; color: var(--ink); }
.public-site .prose h2 { font-family: Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.5; margin-top: 31px; }
.public-site .prose h3 { font-size: 20px; line-height: 1.65; font-weight: 500; }
.public-site .prose blockquote { color: var(--muted-ink); padding: 19px 23px; background: color-mix(in srgb, var(--paper) 85%, var(--gold)); border-left-color: var(--gold); }
.public-site .prose blockquote p:last-child { margin-bottom: 0; }
.public-site .prose img { border-radius: 0; }
.public-site .prose iframe { width: 100%; height: auto; border: 0; aspect-ratio: 16/9; }
.public-site .prose pre { background: #35372d; color: #f3e9cf; border-radius: 0; }
.public-site .prose th { background: #42372a; color: #f1e4c9; font-weight: 500; }
.public-site .prose th,
.public-site .prose td { border-color: var(--frame-line); }
.public-site .article-bottom { margin-top: 39px; padding-top: 24px; border-top-color: var(--frame-line); }
.public-site .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 30px; }
.public-site .article-layout .article-container { width: 100%; max-width: none; margin: 0; padding: 33px; }
.public-site .article-sidebar { position: sticky; top: 115px; background: var(--frame-light); border: 1px solid var(--frame-line); padding: 23px; }
.public-site .article-sidebar h2,
.public-site .article-sidebar h3 { font-family: Georgia, serif; font-size: 22px; font-weight: 400; margin-bottom: 18px; }
.public-site .article-sidebar a:not(.button) { display: block; padding: 13px 0; border-bottom: 1px solid var(--frame-line); font-size: 11px; line-height: 1.85; color: var(--muted-ink); }
.public-site .article-sidebar a:not(.button):hover { color: var(--accent); }
.public-site .article-sidebar .button { width: 100%; padding-inline: 15px; font-size: 10px; gap: 13px; margin-top: 18px; }

/* Contact and player-account pages belong to the same world as the landing. */
.public-site.page-contact .page-hero { background: #24352d; color: #f5e8cc; padding: 78px 0 69px; }
.public-site.page-contact .page-hero .eyebrow { color: #dfc38e; }
.public-site.page-contact .page-hero p { color: #d4cdb9; }
.public-site .contact-grid { grid-template-columns: 1.12fr 1fr; gap: 82px; align-items: start; }
.public-site .contact-intro { padding: 14px 0; }
.public-site .contact-intro h2 { color: var(--ink); font-family: Georgia, serif; font-size: clamp(37px, 4.2vw, 55px); font-weight: 400; letter-spacing: -.8px; line-height: 1.3; margin-bottom: 25px; }
.public-site .contact-intro p { color: var(--muted-ink); font-size: 12px; line-height: 2.05; }
.public-site .contact-details { padding: 30px 33px; border: 1px solid var(--frame-line); background: var(--frame-light); box-shadow: inset 0 0 0 6px #fff2; }
.public-site .contact-details > div { padding-bottom: 21px; margin-bottom: 24px; border-color: var(--frame-line); overflow-wrap: anywhere; }
.public-site .contact-details .eyebrow { color: var(--gold); font-size: 8px; }
.public-site .contact-details p { color: var(--ink); font-size: 12px; line-height: 1.9; }
.public-site .contact-social { border-bottom-color: var(--frame-line); color: var(--muted-ink); padding: 15px 0; font-size: 11px; }
.public-site .contact-social:hover { color: var(--accent); }
.public-site .account-section { background: var(--paper); padding: 67px 0 76px; position: relative; }
.public-site .account-grid { max-width: 1130px; grid-template-columns: 1fr 1.03fr; gap: 0; align-items: stretch; border: 1px solid var(--frame-line); background: var(--frame-light); padding: 7px; box-shadow: 0 15px 50px #6d584514; }
.public-site .account-story { padding: 51px 37px; min-height: 555px; color: #f5e8cc; background: linear-gradient(180deg, #23372d66, #1e2c21bd), url("/assets/images/hero-wuxia-v2.webp") 62% center/cover; isolation: isolate; position: relative; overflow: hidden; }
.public-site .account-story:after { content: ""; position: absolute; inset: 8px; border: 1px solid #e1c58942; z-index: -1; pointer-events: none; }
.public-site .account-story > .eyebrow { color: #dec18e; font-size: 8px; position: relative; }
.public-site .account-story h1 { color: #fff0d4; font-size: 52px; font-weight: 400; letter-spacing: -1px; line-height: 1.32; text-shadow: 0 3px 11px #17251f77; margin-bottom: 23px; position: relative; }
.public-site .account-story p { color: #e0d7bd; font-size: 11px; line-height: 2; max-width: 330px; position: relative; }
.public-site .account-seal { color: #ead09b; border-color: #e0c18877; width: 65px; height: 65px; font-size: 36px; box-shadow: inset 0 0 0 5px #dabc7710; position: relative; }
.public-site .account-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.public-site .account-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.public-site .account-story:has(.account-art) { background: #22352a; }
.public-site .account-story:has(.account-art):before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #23372d77, #1e2c21d1); z-index: -1; pointer-events: none; }
.public-site .account-card { margin: 0; padding: 42px 40px; border: 0; border-radius: 0; background: var(--frame-light); box-shadow: none; }
.public-site .account-card h2 { color: var(--ink); font-family: Georgia, serif; font-size: 31px; font-weight: 400; margin-bottom: 11px; }
.public-site .account-card > p { color: var(--muted-ink); font-size: 10px; line-height: 1.8; margin-bottom: 20px; }
.public-site .account-card label { color: var(--ink); font-size: 10px; font-weight: 500; margin-top: 16px; }
.public-site .account-card input:not([type=checkbox]) { background: color-mix(in srgb, var(--paper) 67%, white); border-color: var(--frame-line); border-radius: 0; min-height: 43px; font-size: 12px; color: var(--ink); padding: 12px 14px; }
.public-site .account-card input:not([type=checkbox]):focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 14%, transparent); }
.public-site .account-card form small { color: var(--muted-ink); font-size: 8px; line-height: 1.9; }
.public-site .account-card .form-consent { color: var(--muted-ink); font-size: 9px; line-height: 1.9; }
.public-site .account-card form .button { min-height: 49px; margin-top: 8px; font-size: 11px; gap: 20px; }
.public-site .account-card .account-switch { font-size: 10px; border-top: 1px solid var(--frame-line); padding-top: 21px; margin-top: 23px; }
.public-site .form-message { font-size: 11px; line-height: 1.8; }
.public-site .not-found { background: var(--frame-deep); }
.public-site .not-found h1 { color: var(--ink); font-size: 48px; }

@media (min-width: 1650px) {
  .public-site .hero-inner { padding-left: 0; }
  .public-site .hero h1 { font-size: 122px; }
}
@media (max-width: 1200px) {
  .public-site .header-inner { gap: 23px; width: calc(100% - 56px); }
  .public-site .site-navigation { gap: 22px; }
  .public-site .brand-name { font-size: 15px; max-width: 175px; }
  .public-site .header-account { padding-left: 17px; }
  .public-site .container,
  .public-site .hero-utility { width: calc(100% - 64px); }
  .public-site .hero h1 { font-size: 90px; }
  .public-site .news-panel { padding: 21px 24px 10px; }
  .public-site .news-tabs { gap: 18px; }
  .public-site .class-stage { gap: 28px; }
  .public-site .class-info { padding-left: 27px; }
  .public-site .class-info h3 { font-size: 57px; }
  .public-site .features-grid { gap: 19px; }
  .public-site .feature-card { padding: 25px; min-height: 305px; }
  .public-site .feature-card h3 { font-size: 25px; }
  .public-site .social-card { padding: 19px; gap: 12px; }
  .public-site .contact-grid { gap: 56px; }
  .public-site .article-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; }
  .public-site .article-layout .article-container { padding: 29px; }
}
@media (max-width: 980px) {
  .public-site .site-header { height: 76px; }
  .public-site .header-inner { gap: 16px; }
  .public-site .site-navigation { display: none; position: absolute; top: 73px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #272219; border-bottom: 1px solid #c3a16a55; padding: 15px 29px 23px; box-shadow: 0 16px 35px #0005; }
  .public-site .site-navigation.open { display: flex; }
  .public-site .nav-item > a { padding: 13px 0; font-size: 11px; border-bottom: 1px solid #c3a16a19; }
  .public-site .nav-item > a.active:after { display: none; }
  .public-site .mobile-menu { display: flex; margin-left: auto; flex-direction: column; gap: 5px; }
  .public-site .mobile-menu span { width: 21px; background: #dbc497; }
  .public-site .submenu { position: static; display: block; background: none; padding: 4px 15px 0; box-shadow: none; border: 0; }
  .public-site .submenu a { padding: 8px 0; font-size: 10px; }
  .public-site .header-account { margin-left: 0; }
  .public-site .hero { min-height: var(--hero-height, 660px); }
  .public-site .hero-picture img { object-position: 57% center; }
  .public-site .hero h1 { font-size: 83px; max-width: 660px; }
  .public-site .news-grid { grid-template-columns: 1fr 1.08fr; }
  .public-site .feature-banner,
  .public-site .banner-slide { min-height: 365px; }
  .public-site .banner-copy { left: 25px; right: 25px; bottom: 28px; }
  .public-site .banner-copy h3 { font-size: 29px; }
  .public-site .news-panel { padding: 19px 21px 9px; }
  .public-site .news-tabs { gap: 15px; overflow-x: auto; }
  .public-site .news-tabs button { font-size: 9px; }
  .public-site .news-row:nth-child(n+6) { display: none; }
  .public-site .class-stage { grid-template-columns: 1fr 1fr; gap: 25px; min-height: 390px; }
  .public-site .class-visual { height: 375px; }
  .public-site .class-ring { width: 270px; height: 270px; }
  .public-site .class-info h3 { font-size: 48px; }
  .public-site .class-selector button { min-width: 79px; padding: 10px 13px; }
  .public-site .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .public-site .social-card { padding: 17px 14px; gap: 10px; }
  .public-site .social-icon { width: 33px; height: 33px; }
  .public-site .social-card p { font-size: 7px; line-height: 1.8; }
  .public-site .contact-grid { gap: 38px; }
  .public-site .contact-details { padding: 26px; }
  .public-site .account-story { padding: 43px 29px; }
  .public-site .account-story h1 { font-size: 45px; }
  .public-site .account-card { padding: 35px 29px; }
  .public-site .article-layout { grid-template-columns: minmax(0, 1fr); }
  .public-site .article-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .public-site .article-sidebar h2,
  .public-site .article-sidebar h3 { grid-column: 1 / -1; }
  .public-site .article-sidebar .button { grid-column: 1 / -1; max-width: 300px; }
}
@media (max-width: 760px) {
  .public-site .container,
  .public-site .hero-utility { width: calc(100% - 44px); }
  .public-site .header-inner { width: calc(100% - 40px); }
  .public-site .section { padding: 62px 0; }
  .public-site .hero-inner { padding-bottom: 71px; }
  .public-site .hero h1 { font-size: 76px; }
  .public-site .hero-subtitle { font-size: 13px; max-width: 465px; }
  .public-site .hero-utility > * { padding: 15px 12px; gap: 8px; }
  .public-site .hero-utility strong { font-size: 9px; }
  .public-site .hero-utility small { font-size: 7px; }
  .public-site .news-grid { grid-template-columns: 1fr; padding: 6px; }
  .public-site .feature-banner,
  .public-site .banner-slide { min-height: 330px; }
  .public-site .news-panel { margin: 7px 0 0; border-left: 1px solid var(--frame-line); padding: 20px 24px 10px; }
  .public-site .news-tabs { gap: 24px; }
  .public-site .news-tabs button { font-size: 10px; }
  .public-site .news-row:nth-child(n+6) { display: flex; }
  .public-site .class-stage { grid-template-columns: 1fr 1fr; gap: 15px; }
  .public-site .class-visual { height: 320px; }
  .public-site .class-ring { width: 220px; height: 220px; }
  .public-site .class-info { padding-left: 21px; }
  .public-site .class-info h3 { font-size: 44px; }
  .public-site .class-info p { font-size: 11px; }
  .public-site .features-grid { grid-template-columns: 1fr; gap: 18px; }
  .public-site .feature-card { min-height: 285px; padding: 29px; }
  .public-site .feature-card h3 { font-size: 30px; }
  .public-site .feature-card p { max-width: 440px; font-size: 11px; }
  .public-site .social-grid { grid-template-columns: 1fr; gap: 13px; max-width: 540px; }
  .public-site .social-card { padding: 20px 24px; gap: 15px; }
  .public-site .social-icon { width: 39px; height: 39px; }
  .public-site .social-card h3 { font-size: 12px; }
  .public-site .social-card p { font-size: 8px; }
  .public-site .footer-top { flex-direction: column; gap: 25px; }
  .public-site .footer-links { gap: 24px; }
  .public-site .archive-toolbar { align-items: stretch; flex-direction: column; gap: 20px; }
  .public-site .archive-tabs a.active:after { bottom: -5px; }
  .public-site .archive-grid { grid-template-columns: 1fr 1fr; gap: 23px 17px; }
  .public-site .article-card-copy { padding: 20px; }
  .public-site .article-card-copy h2 { font-size: 14px; }
  .public-site .archive-list .article-card { grid-template-columns: 210px minmax(0, 1fr); }
  .public-site .archive-list .article-card-copy h2 { font-size: 16px; }
  .public-site .page-frame { padding: 26px; }
  .public-site .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .public-site .contact-intro { padding-top: 0; }
  .public-site .contact-intro h2 { font-size: 43px; }
  .public-site .contact-intro p { max-width: 560px; }
  .public-site .account-grid { grid-template-columns: 1fr; max-width: 560px; }
  .public-site .account-story { min-height: 290px; padding: 32px; background-position: center 48%; }
  .public-site .account-story h1 { font-size: 42px; margin-bottom: 18px; }
  .public-site .account-story p { max-width: 355px; margin-bottom: 0; }
  .public-site .account-seal { display: none; }
  .public-site .account-card { padding: 32px; }
  .public-site .account-section { padding: 43px 0 56px; }
  .public-site .article-container { padding: 29px; }
}
@media (max-width: 520px) {
  .public-site .container,
  .public-site .hero-utility { width: calc(100% - 36px); }
  .public-site .section { padding: 49px 0; }
  .public-site .header-inner { width: calc(100% - 30px); gap: 10px; }
  .public-site .site-header { height: 70px; }
  .public-site .site-navigation { top: 67px; padding-inline: 24px; }
  .public-site .brand { gap: 10px; max-width: calc(100% - 95px); }
  .public-site .brand-mark { width: 34px; height: 34px; font-size: 22px; flex-shrink: 0; }
  .public-site .brand-name { font-size: 13px; max-width: 200px; }
  .public-site .brand-name small { font-size: 5px; letter-spacing: 1.6px; margin-top: 6px; }
  .public-site .brand img { height: 38px; max-width: 180px; }
  .public-site .header-account { font-size: 0; padding-left: 12px; margin-left: 0; }
  .public-site .header-account span { font-size: 18px; }
  .public-site .mobile-menu { padding: 10px 5px; }
  .public-site .hero { min-height: max(700px, var(--hero-height, 720px)); align-items: flex-start; }
  .public-site .hero-picture img { object-position: 62% 35%; }
  .public-site .hero:after { background: linear-gradient(90deg, #12231bd9 0%, #12231b91 56%, #14281d28 100%), linear-gradient(0deg, #1e281ff0 0%, #1b291d30 72%); }
  .public-site .hero-inner { margin-top: auto; margin-bottom: 106px; padding-top: 22px; padding-bottom: 0; max-width: 100%; }
  .public-site .hero h1 { font-size: clamp(49px, 12.8vw, 56px); line-height: 1.06; letter-spacing: -1.5px; max-width: 265px; margin-bottom: 14px; overflow-wrap: anywhere; }
  .public-site .hero-eyebrow { font-size: 7px; letter-spacing: 1.6px; gap: 10px; margin-bottom: 22px; }
  .public-site .hero-eyebrow span { width: 22px; }
  .public-site .hero-subtitle { font-size: 12px; letter-spacing: 1px; max-width: 330px; margin-bottom: 29px; line-height: 1.9; }
  .public-site .hero-actions { gap: 10px; display: grid; grid-template-columns: 1fr 1fr; max-width: 380px; }
  .public-site .hero-actions .button,
  .public-site .hero-actions .button-glass { padding: 13px 12px; min-height: 50px; min-width: 0; font-size: 9px; gap: 9px; white-space: normal; line-height: 1.5; text-align: center; }
  .public-site .hero-actions > .button:only-child { grid-column: 1 / -1; max-width: 230px; }
  .public-site .hero-note { margin-top: 25px; font-size: 6px; letter-spacing: 1.25px; gap: 9px; }
  .public-site .hero-utility { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-site .hero-utility > * { padding: 13px 7px; font-size: 7px; line-height: 1.7; display: block; }
  .public-site .hero-utility strong { display: block; font-size: 8px; font-weight: 500; }
  .public-site .hero-utility small { display: block; font-size: 6px; }
  .public-site .hero-utility span { font-size: 9px; }
  .public-site .section-heading { gap: 14px; margin-bottom: 26px; align-items: center; }
  .public-site .section-heading h2 { font-size: 30px; line-height: 1.3; }
  .public-site .section-heading .eyebrow { font-size: 7px; letter-spacing: 1.4px; margin-bottom: 9px; }
  .public-site .section-heading > .text-link { font-size: 8px; padding-left: 11px; gap: 6px; }
  .public-site .section-heading > .text-link span { font-size: 12px; }
  .public-site .feature-banner,
  .public-site .banner-slide { min-height: 265px; }
  .public-site .banner-copy { left: 23px; right: 23px; bottom: 24px; }
  .public-site .banner-copy h3 { font-size: 27px; margin-bottom: 15px; }
  .public-site .banner-copy .eyebrow { font-size: 7px; margin-bottom: 12px; }
  .public-site .banner-copy .text-link { font-size: 8px; }
  .public-site .banner-symbol { font-size: 190px; top: 20px; }
  .public-site .news-panel { padding: 18px 16px 9px; }
  .public-site .news-tabs { gap: 19px; padding-bottom: 15px; }
  .public-site .news-tabs button { font-size: 9px; }
  .public-site .news-tabs button.active:after { bottom: -16px; }
  .public-site .news-row { gap: 10px; padding: 12px 0; min-height: 69px; }
  .public-site .news-row h3 { font-size: 10px; line-height: 1.65; }
  .public-site .news-row time { font-size: 7px; }
  .public-site .news-category { font-size: 7px; }
  .public-site .row-arrow { display: none; }
  .public-site .class-stage { grid-template-columns: 1fr; gap: 4px; min-height: 0; }
  .public-site .class-visual { height: 315px; margin-top: 4px; }
  .public-site .class-ring { width: 225px; height: 225px; }
  .public-site .class-info { text-align: center; border-left: 0; padding: 18px 8px 5px; }
  .public-site .class-info h3 { font-size: 46px; margin-bottom: 18px; }
  .public-site .class-info p { font-size: 11px; line-height: 2; margin-inline: auto; max-width: 335px; }
  .public-site .class-selector { justify-content: center; margin-top: 25px; gap: 7px; }
  .public-site .class-selector button { min-width: 91px; font-size: 9px; padding: 10px 14px; }
  .public-site .section-count { font-size: 6px; letter-spacing: .8px; }
  .public-site .feature-card { min-height: 265px; padding: 27px; }
  .public-site .feature-card h3 { font-size: 29px; }
  .public-site .feature-card p { font-size: 10px; }
  .public-site .community-heading h2 { font-size: 33px; line-height: 1.4; }
  .public-site .community-heading p { font-size: 10px; line-height: 1.9; margin-bottom: 27px; }
  .public-site .social-card { padding: 19px 20px; gap: 13px; }
  .public-site .social-card h3 { font-size: 11px; }
  .public-site .social-card p { font-size: 7px; }
  .public-site .footer-top { padding-bottom: 24px; gap: 23px; }
  .public-site .footer-links { gap: 19px; font-size: 8px; }
  .public-site .footer-brand { gap: 13px; }
  .public-site .footer-brand strong { font-size: 16px; }
  .public-site .footer-brand p { font-size: 8px; max-width: 260px; }
  .public-site .footer-bottom { flex-direction: column; align-items: flex-start; gap: 19px; }
  .public-site .age-note { padding-left: 0; border: 0; font-size: 24px!important; }
  .public-site .page-hero { padding: 48px 0 44px; }
  .public-site .page-hero.has-image,
  .public-site.page-contact .page-hero { padding: 57px 0 49px; }
  .public-site .page-hero h1 { font-size: 44px; margin-bottom: 14px; }
  .public-site .page-hero p { font-size: 10px; line-height: 1.9; max-width: 320px; }
  .public-site .archive-section { padding-top: 30px; }
  .public-site .archive-tabs { gap: 20px; font-size: 10px; }
  .public-site .archive-grid { grid-template-columns: 1fr; gap: 24px; }
  .public-site .article-card-copy { padding: 23px; }
  .public-site .article-card-copy h2 { font-size: 17px; line-height: 1.7; }
  .public-site .article-card-copy p { font-size: 11px; }
  .public-site .archive-list .article-card { grid-template-columns: 1fr; }
  .public-site .archive-list .article-image { min-height: 0; height: auto; aspect-ratio: 1.65; }
  .public-site .archive-list .article-card-copy h2 { font-size: 17px; }
  .public-site .page-frame { padding: 19px; }
  .public-site .search-form { min-width: 0; width: 100%; }
  .public-site .article-hero { padding: 22px 0 37px; }
  .public-site .breadcrumb { font-size: 8px; gap: 8px; margin-bottom: 28px; }
  .public-site .article-hero h1 { font-size: 33px; line-height: 1.45; }
  .public-site .article-meta { font-size: 8px; }
  .public-site .article-section { padding-top: 27px; }
  .public-site .article-container,
  .public-site .article-layout .article-container { padding: 22px 20px; }
  .public-site .prose { font-size: 13px; line-height: 2.1; }
  .public-site .prose h2 { font-size: 27px; line-height: 1.5; }
  .public-site .prose h3 { font-size: 19px; }
  .public-site .prose blockquote { padding: 16px; }
  .public-site .prose table { font-size: 10px; }
  .public-site .prose th,
  .public-site .prose td { padding: 8px; }
  .public-site .article-bottom { gap: 16px; }
  .public-site .article-sidebar { padding: 22px; display: block; }
  .public-site .article-sidebar .button { max-width: none; }
  .public-site .contact-intro h2 { font-size: 41px; line-height: 1.35; }
  .public-site .contact-intro p { font-size: 11px; }
  .public-site .contact-details { padding: 25px; }
  .public-site .contact-details p { font-size: 12px; }
  .public-site .account-section { padding: 32px 0 47px; }
  .public-site .account-grid { padding: 5px; }
  .public-site .account-story { min-height: 268px; padding: 29px 25px; background-position: center; }
  .public-site .account-story h1 { font-size: 39px; }
  .public-site .account-story p { font-size: 10px; line-height: 1.9; }
  .public-site .account-card { padding: 29px 24px; }
  .public-site .account-card h2 { font-size: 28px; }
  .public-site .account-card label { font-size: 11px; }
  .public-site .account-card input:not([type=checkbox]) { font-size: 16px; min-height: 44px; padding: 10px 12px; }
  .public-site .account-card form small { font-size: 9px; }
  .public-site .account-card .form-consent { font-size: 10px; }
}
@media (max-width: 375px) {
  .public-site .brand-name { font-size: 12px; }
  .public-site .hero h1 { font-size: 52px; }
  .public-site .hero-actions .button { font-size: 8px; gap: 7px; }
  .public-site .section-heading h2 { font-size: 27px; }
  .public-site .section-heading > .text-link { font-size: 7px; padding-left: 9px; }
  .public-site .news-tabs { gap: 16px; }
  .public-site .news-tabs button { font-size: 8px; }
  .public-site .news-panel { padding-inline: 13px; }
  .public-site .account-card { padding: 27px 20px; }
  .public-site .social-card { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-site *,
  .public-site *:before,
  .public-site *:after { transition: none!important; animation: none!important; }
}