/*
 * Ironblood / Huyết Thiết — practical võ lâm portal skin.
 *
 * The visual language is blackened steel, oxblood lacquer, and hand-worked
 * copper. Text and controls remain HTML so the configurable hero/news art can
 * be swapped from the appearance editor without losing contrast.
 */
.public-site.skin-ironblood{
  --frame-line:#8e5d46;
  --frame-light:#241b1a;
  --frame-deep:#151313;
  --muted-ink:#c1aaa0;
  --steel:#252a2e;
  --steel-hi:#384047;
  --oxblood:#7d292b;
  --oxblood-dark:#4a1a1c;
  --copper:#c58a50;
  --copper-hi:#e1b074;
  --paper:#171414;
  --ink:#f1dfca;
  background:
    radial-gradient(ellipse at 85% -10%,#8c43331a,transparent 45%),
    linear-gradient(180deg,#171718,#110f10);
  color:var(--ink);
  font-size:15px;
  line-height:1.8;
}
.skin-ironblood .container{width:min(var(--content),calc(100% - 72px))}
.skin-ironblood .section{padding:78px 0}
.skin-ironblood .eyebrow,
.skin-ironblood .section-heading .eyebrow{font-size:11px;letter-spacing:2px;color:var(--copper-hi)}
.skin-ironblood .section-heading{gap:22px;margin-bottom:32px}
.skin-ironblood .section-heading h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(33px,3.8vw,50px);font-weight:400;letter-spacing:-.8px;color:var(--ink)}
.skin-ironblood .section-heading>.text-link,
.skin-ironblood .text-link{font-size:13px;color:var(--copper-hi)}
.skin-ironblood :is(a,button,input,textarea):focus-visible{outline:3px solid var(--copper-hi);outline-offset:4px}
.skin-ironblood .button{min-height:53px;padding:14px 24px;border-radius:3px;font-size:14px;letter-spacing:.2px}
.skin-ironblood .button-gold{color:#241712;background:linear-gradient(125deg,var(--copper-hi),var(--copper));border-color:#e1b074;box-shadow:inset 0 0 0 2px #fff3,0 8px 24px #0006}
.skin-ironblood .button-gold:after{display:none}
.skin-ironblood .button-glass{color:#f8eadb;background:linear-gradient(135deg,#74282be6,#45191be6);border-color:#d69972aa;box-shadow:inset 0 0 0 2px #fff1}
.skin-ironblood .button-outline{color:var(--ink);background:#262a2d;border-color:#97664e}
.skin-ironblood .button-outline:hover{background:#33383d;border-color:var(--copper-hi)}

/* Riveted steel masthead and a compact martial-portal navigation. */
.skin-ironblood .site-header{height:85px;background:linear-gradient(180deg,#262b2f,#121517);color:var(--ink);border-top:3px solid var(--oxblood);border-bottom:1px solid #b77b4d88;box-shadow:0 5px 25px #0008}
.skin-ironblood .header-inner{width:min(1440px,calc(100% - 72px));gap:28px}
.skin-ironblood .brand-mark{color:var(--copper-hi);background:linear-gradient(145deg,#8c302f,#38191c);border:1px solid #bd815a;border-radius:3px;box-shadow:inset 0 0 0 4px #0003,0 3px 9px #0007}
.skin-ironblood .brand-name{font-family:Georgia,serif;color:#f5e5d0;font-size:20px;font-weight:400}
.skin-ironblood .brand-name small{font-family:inherit;color:#bd9f8d;font-size:9px;letter-spacing:1.6px}
.skin-ironblood .site-navigation{gap:24px}
.skin-ironblood .nav-item>a{color:#d4c0b2;font-size:13px;padding:29px 0}
.skin-ironblood .nav-item>a:hover,
.skin-ironblood .nav-item>a.active{color:var(--copper-hi)}
.skin-ironblood .nav-item>a.active:after{width:23px;height:2px;bottom:18px;background:var(--copper);box-shadow:0 0 12px #dba46e77}
.skin-ironblood .submenu{background:#202427;border:1px solid #9d694e;border-top:2px solid var(--oxblood);box-shadow:0 15px 32px #0009}
.skin-ironblood .submenu a{color:#e4d2c3;font-size:13px}
.skin-ironblood .submenu a:hover{color:#fff1df;background:#8d2e2e22}
.skin-ironblood .header-account{color:var(--copper-hi);border-left-color:#a86c4b66;font-size:13px;padding-left:19px}
.skin-ironblood .header-account span,
.skin-ironblood .mobile-menu span{color:var(--copper-hi)}
.skin-ironblood .mobile-menu span{background:var(--copper-hi)}

/* Dark hero keeps martial character art legible while preserving editable art. */
.skin-ironblood .hero{min-height:var(--hero-height,720px);background:#20282b;color:var(--ink);border-bottom:1px solid #aa714f99}
.skin-ironblood .hero:after{background:linear-gradient(90deg,#0c0e11ee,#261419b5 39%,#1e27220f 75%),linear-gradient(0deg,#100f11f5,transparent 49%);opacity:calc(.62 + var(--hero-overlay,.3))}
.skin-ironblood .hero-art{background:radial-gradient(ellipse at 75% 28%,#d4915545,transparent 45%),linear-gradient(125deg,#1c2226,#503737)}
.skin-ironblood .hero-orbit{border-color:#d2935a44;box-shadow:0 0 0 28px #ae624a09,0 0 0 65px #ae624a06}
.skin-ironblood .mountain{background:#252d30}
.skin-ironblood .mountain-front{background:#54282b;opacity:.36}
.skin-ironblood .hero-inner{padding:42px 0 78px}
.skin-ironblood .hero-eyebrow{font-size:12px;color:#e2c5a9;letter-spacing:2px}
.skin-ironblood .hero-eyebrow span{background:var(--copper)}
.skin-ironblood .hero h1{font-family:Georgia,serif;color:#f9e5cf;font-size:clamp(62px,7vw,108px);line-height:1.09;letter-spacing:-2.4px;text-shadow:0 5px 24px #000b;max-width:min(690px,65vw)}
.skin-ironblood .hero-subtitle{color:#ddcfc4;font-size:17px;letter-spacing:.7px;max-width:540px;text-shadow:0 2px 10px #000}
.skin-ironblood .hero-actions .button{min-width:188px;font-size:15px}
.skin-ironblood .hero-note,
.skin-ironblood .scroll-cue{color:#d3bcae;font-size:11px;letter-spacing:1.3px}
.skin-ironblood .hero-note-rule{background:#c68b5c88}

/* Five action tiles stay in normal flow and form a clear account/download hub. */
.skin-ironblood .player-action-section{padding:23px 0 4px;background:#151314}
.public-site.skin-ironblood .hero-utility.player-actions{position:static;inset:auto;transform:none;width:min(var(--content),calc(100% - 72px));display:grid;grid-template-columns:1.25fr repeat(4,minmax(0,1fr));gap:9px;margin:0 auto;background:none;border:0;box-shadow:none;backdrop-filter:none}
.public-site.skin-ironblood .hero-utility.player-actions .hero-utility-item{grid-column:auto;min-height:108px;padding:19px 16px;gap:11px;border:1px solid #915d45;background:linear-gradient(145deg,#272c2f,#1b1e21);border-radius:3px;box-shadow:inset 0 3px 0 #d59a6724,0 6px 17px #0005}
.public-site.skin-ironblood .hero-utility.player-actions .utility-download{background:linear-gradient(120deg,#d2965c,#93352f);border-color:#e0a873}
.public-site.skin-ironblood .hero-utility.player-actions strong{color:#f1dfca;font-size:14px}
.public-site.skin-ironblood .hero-utility.player-actions small{color:#c8b4a8;font-size:11px}
.public-site.skin-ironblood .hero-utility.player-actions .utility-symbol{width:34px;flex-basis:34px;color:var(--copper-hi);font-size:21px}
.public-site.skin-ironblood .hero-utility.player-actions .utility-download strong,
.public-site.skin-ironblood .hero-utility.player-actions .utility-download .utility-symbol{color:#291914}
.public-site.skin-ironblood .hero-utility.player-actions .utility-download small{color:#48281d}
.public-site.skin-ironblood .hero-utility.player-actions .utility-arrow{display:none}
.public-site.skin-ironblood .hero-utility.player-actions a:hover{background-color:#32383c;border-color:var(--copper-hi);filter:none}

/* Forged editorial news frame and restrained faction showcase. */
.skin-ironblood .news-section{background:#171414;background-image:radial-gradient(ellipse at 0 0,#b8784d12,transparent 60%)}
.skin-ironblood .news-grid{grid-template-columns:.95fr 1.13fr;gap:13px;padding:10px;background:linear-gradient(145deg,#32393d,#171a1d);border:1px solid #a06b4f;box-shadow:0 16px 38px #0008}
.skin-ironblood .feature-banner,
.skin-ironblood .banner-slide{min-height:425px;border-radius:2px}
.skin-ironblood .feature-banner{background:radial-gradient(ellipse at 72% 12%,#c182514a,transparent 54%),linear-gradient(140deg,#313b3e,#381d22)}
.skin-ironblood .banner-slide:after{background:linear-gradient(0deg,#130f11f7,#241c2288 37%,transparent 82%)}
.skin-ironblood .banner-copy{left:29px;right:29px;bottom:28px}
.skin-ironblood .banner-copy h3{font-family:Georgia,serif;font-size:31px;line-height:1.35;color:#f8e2c9}
.skin-ironblood .banner-copy .eyebrow,
.skin-ironblood .banner-copy .text-link{font-size:12px;color:var(--copper-hi)}
.skin-ironblood .banner-symbol{color:#d89d6b25}
.skin-ironblood .news-panel{margin:0;padding:14px 18px 7px;border:1px solid #9e694f;background:#1c2023}
.skin-ironblood .news-tabs{gap:6px;border-color:#a2715659;padding-bottom:12px;overflow-x:auto}
.skin-ironblood .news-tabs button{color:#c5b4a9;font-size:13px;padding:10px 13px;min-height:42px;border:1px solid transparent;border-radius:2px}
.skin-ironblood .news-tabs button.active,
.skin-ironblood .archive-tabs a.active,
.skin-ironblood .account-tabs a[aria-current]{color:#351c14;background:linear-gradient(125deg,#e0ad73,#b76f48);border-color:#e6b27c}
.skin-ironblood .news-tabs button.active:after,
.skin-ironblood .archive-tabs a.active:after{display:none}
.skin-ironblood .news-row{min-height:79px;padding:14px 0;border-color:#b77b502b;gap:13px}
.skin-ironblood .news-row h3{color:#f2dfcf;font-size:14px;line-height:1.65;white-space:normal}
.skin-ironblood .news-row time{color:#bba79b;font-size:11px}
.skin-ironblood .news-category{color:#d28b5c;font-size:11px}
.skin-ironblood .news-row:hover h3{color:var(--copper-hi)}
.skin-ironblood .classes-section{background:#202629;border-color:#a76e4d55}
.skin-ironblood .classes-section:before{background:radial-gradient(ellipse at 30% 55%,#bb734027,transparent 68%)}
.skin-ironblood .class-stage{grid-template-columns:1fr 1.1fr;gap:50px}
.skin-ironblood .class-info{border-color:#ad775665}
.skin-ironblood .class-info h3{font-family:Georgia,serif;color:#f3deca;font-size:59px}
.skin-ironblood .class-info p{color:#cbb8ac;font-size:15px;line-height:1.95}
.skin-ironblood .class-ring{border-color:#d49b6c55;box-shadow:0 0 0 22px #c27b4f0c,0 0 0 50px #c27b4f06}
.skin-ironblood .class-calligraphy{color:#d29a6b}
.skin-ironblood .class-selector button{color:#ebdccf;background:#292f32;border-color:#96624d;border-radius:2px;font-size:13px}
.skin-ironblood .class-selector button span{color:#b9a69b;font-size:11px}
.skin-ironblood .class-selector button.active{color:#fff0db;background:#773034;border-color:#d09a6e;box-shadow:inset 0 0 0 3px #e0a77518}
.skin-ironblood .class-selector button.active span{color:#e2b990}
.skin-ironblood .section-count{color:#b9a69b;font-size:11px}
.skin-ironblood .features-section{background:#171414}
.skin-ironblood .features-grid{grid-template-columns:1.15fr 1fr;gap:20px}
.skin-ironblood .feature-card{min-height:300px;padding:32px;background:#23292c;border-color:#9a654d;border-radius:3px;box-shadow:inset 0 0 0 4px #fff1}
.skin-ironblood .feature-card:first-child{grid-row:span 2;min-height:620px;background:#4a2427}
.skin-ironblood .feature-card:has(img):after{background:linear-gradient(0deg,#160f12f5,#281b2082 70%,transparent)}
.skin-ironblood .feature-number{color:#da9b67}
.skin-ironblood .feature-card h3{font-family:Georgia,serif;font-size:31px;color:#f4ddc8}
.skin-ironblood .feature-card p{font-size:14px;color:#d2c1b6;opacity:1;max-width:440px}

/* Community, article, contact, and account surfaces share the steel frame. */
.skin-ironblood .community-section{background:#202528;color:var(--ink);border-color:#a36f5040}
.skin-ironblood .community-heading h2{font-family:Georgia,serif;font-size:clamp(34px,3.7vw,48px);font-weight:400}
.skin-ironblood .community-heading p{font-size:15px;color:#c6b4aa}
.skin-ironblood .social-card{border-color:#a36f5059;background:#252c30;border-radius:3px;padding:24px}
.skin-ironblood .social-card:hover{background:#2f373c;border-color:var(--copper-hi)}
.skin-ironblood .social-icon{border-color:#a36f5077;background:#2d3539;color:var(--copper-hi);border-radius:3px}
.skin-ironblood .social-card h3{color:#f0ddcb;font-size:15px}
.skin-ironblood .social-card p{color:#c5b5ac;font-size:12px}
.skin-ironblood .site-footer{background:#101214;color:#bba89e;border-color:#9e694d66}
.skin-ironblood .footer-brand strong{font-family:Georgia,serif;color:#f1ddc8;font-size:23px;font-weight:400}
.skin-ironblood .footer-brand p,.skin-ironblood .footer-links{color:#b8a59b;font-size:13px}
.skin-ironblood .footer-bottom p,.skin-ironblood .footer-bottom span{color:#97877f;font-size:12px}
.skin-ironblood .age-note{color:var(--copper-hi)!important;font-size:30px!important}
.skin-ironblood .age-note small{color:#a49187;font-size:11px}
.skin-ironblood .back-top{color:var(--copper-hi);background:#252b2f;border-color:#a66e50;border-radius:3px}
.skin-ironblood .page-hero,
.skin-ironblood .article-hero,
.skin-ironblood.page-contact .page-hero{background:#22282c;color:var(--ink);border-color:#a16c4e}
.skin-ironblood :is(.page-hero.has-image,.article-hero.has-image):before{background:linear-gradient(90deg,#111317e8,#322021a8,#111317d8)}
.skin-ironblood .page-hero h1,
.skin-ironblood .page-hero.has-image h1,
.skin-ironblood .article-hero.has-image h1{font-family:Georgia,serif;color:#f4dfcb;text-shadow:0 3px 16px #000}
.skin-ironblood .page-hero p,
.skin-ironblood .page-hero.has-image p,
.skin-ironblood.page-contact .page-hero p{font-size:15px;color:#cdbbb0}
.skin-ironblood .breadcrumb,.skin-ironblood .article-meta{font-size:13px;color:#bfa99e}
.skin-ironblood .archive-tabs{gap:9px;font-size:14px}
.skin-ironblood .archive-tabs a{padding:9px 13px;border:1px solid transparent;border-radius:2px}
.skin-ironblood .search-form{background:#20262a;border-color:#96644d;border-radius:3px}
.skin-ironblood .search-form input{font-size:14px;color:var(--ink)}
.skin-ironblood .archive-result{font-size:13px;color:#bba9a0}
.skin-ironblood .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.skin-ironblood .article-card{background:#20272a;border-color:#96644d;border-radius:3px;box-shadow:0 8px 22px #0005}
.skin-ironblood .article-card:hover{border-color:var(--copper-hi)}
.skin-ironblood .article-image{background:linear-gradient(140deg,#3b494c,#54272d);border-color:#a06c4f}
.skin-ironblood .article-image .news-category{background:#20272a;color:var(--copper-hi);border-radius:2px;font-size:11px}
.skin-ironblood .article-card-copy h2{font-size:21px;line-height:1.55;color:#f0ddcb}
.skin-ironblood .article-card-copy p{font-size:14px;color:#c3b1a7}
.skin-ironblood .article-card-copy time,.skin-ironblood .article-card-copy>.text-link{font-size:13px;color:var(--copper-hi)}
.skin-ironblood .pagination a{width:44px;height:44px;border-radius:3px;background:#242b2f;color:var(--ink);border-color:#98654d}
.skin-ironblood .pagination a[aria-current]{background:var(--copper);color:#271812;border-color:#e0ad72}
.skin-ironblood .article-container,.skin-ironblood .contact-details{background:#20272b;border-color:#96644d;border-radius:3px;box-shadow:0 12px 36px #0006}
.skin-ironblood .prose{font-size:16px;line-height:1.95;color:#eedfd2}
.skin-ironblood .prose h2,.skin-ironblood .prose h3{color:#f3ddc9}
.skin-ironblood .prose blockquote{background:#3a2327;color:#dfc7b7;border-color:var(--oxblood)}
.skin-ironblood .prose pre{background:#11161a;color:#eedfd2}
.skin-ironblood .prose th{background:#3a2a28;color:#f0ddcb}
.skin-ironblood .prose td,.skin-ironblood .prose th{border-color:#745244}
.skin-ironblood .article-sidebar{background:#1e2529;border-color:#96644d;border-radius:3px}
.skin-ironblood .article-sidebar a:not(.button){color:#ead8cb;border-color:#765144}
.skin-ironblood .article-sidebar h2{font-family:Georgia,serif;color:#f1ddc8;font-size:27px}
.skin-ironblood .article-sidebar .sidebar-post h3{font-size:15px}
.skin-ironblood .sidebar-post time,.skin-ironblood .sidebar-empty{color:#bba8a0;font-size:12px}
.skin-ironblood .article-sidebar .sidebar-start{background:#362326;border-color:#a36d4d}
.skin-ironblood .contact-intro h2,.skin-ironblood .contact-details p{color:#f0ddca}
.skin-ironblood .contact-intro p,.skin-ironblood .contact-content{color:#c6b4aa;font-size:15px}
.skin-ironblood .contact-details .eyebrow{font-size:12px}
.skin-ironblood .contact-social{color:#dac7b8;border-color:#775244}
.skin-ironblood .account-section{background:#171414}
.skin-ironblood .account-grid{background:#20262a;border-color:#96644d;border-radius:4px;padding:9px;gap:9px}
.skin-ironblood .account-story{background:linear-gradient(180deg,#43242a66,#151114e9),linear-gradient(140deg,#4b2529,#1c1d21);border-radius:3px}
.skin-ironblood .account-story:has(.account-art):before{background:linear-gradient(180deg,#381c2680,#130f13ee)}
.skin-ironblood .account-story h1{font-family:Georgia,serif;font-size:50px;color:#f4dfca;text-shadow:0 4px 16px #000}
.skin-ironblood .account-story p,.skin-ironblood .account-story .eyebrow{font-size:14px;color:#dec9bb}
.skin-ironblood .account-seal{color:var(--copper-hi);border-color:#b4785588;background:#43232a66}
.skin-ironblood .account-card{background:#252c30;border-radius:3px}
.skin-ironblood .account-card h2{font-family:Georgia,serif;color:#f2ddca}
.skin-ironblood .account-card label,.skin-ironblood .account-card>p,.skin-ironblood .account-card .account-switch,.skin-ironblood .form-message{font-size:14px;color:#ead8cb}
.skin-ironblood .account-card input:not([type=checkbox]){background:#151a1e;color:#f2e1d4;font-size:16px;min-height:49px;border-color:#8c614f;border-radius:3px}
.skin-ironblood .account-card input:not([type=checkbox]):focus{border-color:var(--copper-hi);box-shadow:0 0 0 2px #dc9d681f}
.skin-ironblood .account-tabs{gap:5px}
.skin-ironblood .account-tabs a{font-size:14px;color:#e8d5c7;padding:10px 15px;border:1px solid transparent}
.skin-ironblood .account-card form small,.skin-ironblood .account-privacy{font-size:12px;color:#bbaaa0}
.skin-ironblood .account-card .form-consent{font-size:13px;color:#cbb8ac}
.skin-ironblood .account-card form .button{font-size:15px}
.skin-ironblood .not-found{background:#20272b}

@media(max-width:980px){
  .skin-ironblood .container,.public-site.skin-ironblood .hero-utility.player-actions{width:calc(100% - 44px)}
  .skin-ironblood .site-navigation{top:81px;background:#1b2024;border-color:#a16b4d}
  .skin-ironblood .nav-item>a{padding:13px 0;border-color:#84564255}
  .public-site.skin-ironblood .hero-utility.player-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .public-site.skin-ironblood .hero-utility.player-actions .utility-download{grid-column:1/-1}
  .skin-ironblood .hero h1{max-width:80vw;font-size:82px}
  .skin-ironblood .news-grid{grid-template-columns:1fr;gap:14px}
  .skin-ironblood .news-panel{border-left:1px solid #96644d}
  .skin-ironblood .article-sidebar{position:static;display:block}
}
@media(max-width:760px){
  .skin-ironblood .section{padding:57px 0}
  .skin-ironblood .class-stage,.skin-ironblood .features-grid{grid-template-columns:1fr}
  .skin-ironblood .class-info{border:0;text-align:center;padding:16px}
  .skin-ironblood .class-info p{margin-inline:auto}
  .skin-ironblood .class-selector{justify-content:center}
  .skin-ironblood .feature-card:first-child{grid-row:auto;min-height:375px}
  .skin-ironblood .account-grid{grid-template-columns:1fr}
  .skin-ironblood .account-story{min-height:320px}
}
@media(max-width:520px){
  .skin-ironblood .container,.public-site.skin-ironblood .hero-utility.player-actions{width:calc(100% - 32px)}
  .skin-ironblood .section{padding:46px 0}
  .skin-ironblood .site-header{height:74px}
  .skin-ironblood .site-navigation{top:71px}
  .skin-ironblood .header-inner{width:calc(100% - 30px);gap:10px}
  .skin-ironblood .brand-name{font-size:17px}
  .skin-ironblood .brand-name small{font-size:8px}
  .skin-ironblood .hero{min-height:650px}
  .skin-ironblood .hero-inner{padding:56px 0 72px}
  .skin-ironblood .hero h1{font-size:clamp(51px,13.8vw,67px);max-width:100%;letter-spacing:-1.5px}
  .skin-ironblood .hero-subtitle{font-size:15px;max-width:100%}
  .skin-ironblood .hero-actions .button,.skin-ironblood .hero-actions .button-glass{font-size:13px;min-width:0;padding:12px 15px;white-space:normal}
  .public-site.skin-ironblood .hero-utility.player-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .public-site.skin-ironblood .hero-utility.player-actions .hero-utility-item{min-height:102px;padding:17px 13px}
  .skin-ironblood .section-heading{flex-wrap:wrap}
  .skin-ironblood .section-heading h2{font-size:34px}
  .skin-ironblood .news-grid{padding:5px}
  .skin-ironblood .news-panel{padding:10px 4px}
  .skin-ironblood .news-tabs button{font-size:12px;padding:9px 10px}
  .skin-ironblood .news-row{gap:10px}
  .skin-ironblood .news-row h3{font-size:14px}
  .skin-ironblood .feature-banner,.skin-ironblood .banner-slide{min-height:340px}
  .skin-ironblood .class-info h3{font-size:46px}
  .skin-ironblood .archive-grid{grid-template-columns:1fr}
  .skin-ironblood .article-layout .article-container{padding:26px 22px}
  .skin-ironblood .account-story h1{font-size:41px}
  .skin-ironblood .footer-bottom{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .skin-ironblood *,.skin-ironblood *:before,.skin-ironblood *:after{transition:none!important;animation:none!important}
}