/* Shared secondary pages; home composition remains in style.css. */
.inner-page { background: #131017; }
.inner-page main { overflow: clip; }
.inner-page h1 { font-size: clamp(48px,5.3vw,82px); letter-spacing: -.5px; }
.inner-page h2 { line-height: 1.12; }
.nav-item[aria-current=page], .dropdown-content [aria-current=page] { color: var(--gold-light); }
.dropdown-content [aria-current=page] { background: #c5ab8317; }
.outline > [data-i18n] { position: relative; z-index: 2; }
.page-hero { min-height: 410px; position: relative; display: grid; place-items: center; text-align: center; padding: 90px 6% 60px; isolation: isolate; background: #1b1820; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('assets/world.webp') center 44% / cover; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#131017,transparent 85%), linear-gradient(90deg,#17131d66,#17131d20,#17131d66); }
.page-hero h1 { margin: 8px 0 12px; max-width: 1150px; }
.page-hero .eyebrow { font-size: 12px; letter-spacing: 3px; }
.page-hero p:not(.eyebrow) { color: #e4d6c1; font: 20px var(--ui); margin-bottom: 0; }
.page-hero--classes::before,.page-hero--world::before,.page-hero--news::before { background-image: url('assets/cover.webp'); background-position: center 34%; }
.page-intro { padding: 56px 6% 65px; text-align: center; max-width: 1300px; margin: auto; }
.page-intro h2 { font-size: 34px; margin: 0 0 22px; }
.page-intro p { max-width: 900px; margin: auto; font-size: 17px; line-height: 1.7; color: #d6d0d9; }
.class-nav { position: sticky; top: 64px; z-index: 10; width: 100%; height: auto; margin: 0; padding: 0 5%; display: flex; justify-content: flex-start; gap: 0; background: #1e1925fa; border-top: 1px solid #756049; border-bottom: 1px solid #756049; overflow-x: auto; }
.class-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 144px; width: 144px; font: 13px var(--ui); padding: 14px 18px; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 350ms,background 350ms,border-color 350ms; }
.class-nav a:first-child { margin-left: auto; }
.class-nav a:last-child { margin-right: auto; }
.class-nav-icon { width: 29px; height: 30px; object-fit: contain; flex-shrink: 0; filter: brightness(1.7) sepia(0) saturate(1); transition: filter 350ms; }
.class-nav a:hover,.class-nav a[aria-current=true] { color: var(--gold-light); border-bottom-color: var(--gold); background: #c5ab8314; }
.class-nav a:hover .class-nav-icon,.class-nav a[aria-current=true] .class-nav-icon { filter: brightness(1.7) sepia(1) saturate(.6); }
.class-cover { min-height: 540px; display: flex; align-items: center; position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 120px; border-bottom: 1px solid #b99a6b30; }
.class-atmosphere { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse at 68% 50%,var(--class-glow),transparent 70%),#141117; opacity: .64; }
.class-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.class-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(0deg,#131017 0,transparent 24%,transparent 90%,#13101755),linear-gradient(90deg,#141117f5 0,#141117b8 32%,transparent 63%); }
.class-copy { position: relative; width: 44%; max-width: 570px; padding: 34px 0; margin-left: 7%; }
.class-copy .eyebrow { font-size: 12px; letter-spacing: 2px; color: #dac6a9; }
.class-copy h2 { font-size: clamp(40px,4.2vw,60px); margin: 0 0 16px; letter-spacing: -.6px; }
.class-copy h3 { font: 25px var(--ui); color: #e8d5b5; margin: 0 0 22px; }
.class-copy p:not(.eyebrow) { max-width: 480px; font-size: 16px; line-height: 1.8; color: #e0dbe3; }
.class-copy p.class-detail { color: #bcb4c3; font-size: 14px; }
.class-divider { color: #c5ab83; display: flex; align-items: center; gap: 18px; width: 140px; font-size: 10px; margin-top: 30px; }
.class-divider::before,.class-divider::after { content: ''; height: 1px; flex: 1; background: #ac9167; }
.class-cover:nth-of-type(even) .class-copy { width: 38%; margin-left: auto; margin-right: 7%; text-align: right; }
.class-cover:nth-of-type(even) .class-copy p,.class-cover:nth-of-type(even) .class-divider { margin-left: auto; }
.class-cover:nth-of-type(even) .class-atmosphere { transform: scaleX(-1); }
.class-cover:nth-of-type(even)::after { background: linear-gradient(0deg,#131017 0,transparent 24%,transparent 90%,#13101755),linear-gradient(270deg,#141117f5 0,#141117b8 32%,transparent 63%); }
.page-cta { text-align: center; padding: 76px 24px 84px; background: radial-gradient(ellipse at center,#3f3044,#17121d 70%); }
.page-cta h2 { font-size: 36px; margin: 0 0 30px; }
.page-cta .outline { min-width: 260px; }
.server-facts { display: grid; grid-template-columns: repeat(3,1fr); max-width: 1060px; margin: 0 auto 70px; border-top: 1px solid #756049; border-bottom: 1px solid #756049; padding: 30px 0; }
.server-facts > div { text-align: center; padding: 8px 20px; border-right: 1px solid #75604955; }
.server-facts > div:last-child { border-right: 0; }
.server-facts strong { display: block; color: var(--gold-light); font: 40px var(--display); margin-bottom: 12px; }
.server-facts span { color: #beb5c4; font-size: 13px; }
.server-landscape { min-height: 620px; position: relative; display: flex; align-items: flex-end; padding: 80px 7%; background: linear-gradient(0deg,#131017 0,#13101790 35%,#13101705 80%),url('assets/world.webp') center 44%/cover; }
.server-landscape > div { max-width: 660px; }
.server-landscape h2 { font-size: 45px; margin: 12px 0 25px; }
.server-landscape p:not(.eyebrow) { color: #e0d9e3; line-height: 1.8; font-size: 17px; }
.server-stories { max-width: 1340px; padding: 72px 5%; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; }
.story-number { font: 36px var(--display); color: #756049; }
.server-stories h2 { font-size: 27px; margin: 16px 0; }
.server-stories p { line-height: 1.8; font-size: 15px; color: #c9c1cf; min-height: 135px; }
.text-link { display: inline-block; font: 12px var(--ui); letter-spacing: 1px; color: var(--gold-light); padding: 12px 0; transition: color 350ms,text-shadow 350ms; }
.text-link:hover { color: #fff1ce; text-shadow: 0 0 20px #bc6e36; }
.server-details { max-width: 1100px; margin: 0 auto 85px; padding: 0 5%; }
.server-details h2 { font-size: 36px; text-align: center; margin: 15px 0 40px; }
.detail-row { display: grid; grid-template-columns: 1fr 2fr; gap: 45px; padding: 25px 0; border-top: 1px solid #75604966; }
.detail-row > span { font: 21px var(--ui); color: var(--gold-light); }
.detail-row p { margin: 0; font-size: 15px; color: #c9c1cf; line-height: 1.7; }
.news-catalog { max-width: 1440px; margin: auto; padding: 0 5% 90px; }
.news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; align-items: start; }
.catalog-card { background: #261e2c; border: 1px solid #79664c; display: block; height: 100%; transition: background 350ms,border-color 350ms; }
.catalog-card:hover { background: #332939; border-color: #d0ad77; }
.catalog-picture { height: 200px; background-size: cover; background-position: center; }
.catalog-picture.news-picture-warrior { background-size: auto 190%; background-position: 3% 25%; }
.catalog-picture.news-picture-priest { background-size: auto 190%; background-position: 31% 19%; }
.catalog-picture.news-picture-gunner { background-size: auto 190%; background-position: 96% 29%; }
.catalog-copy { padding: 28px; }
.catalog-copy h2 { margin: 0 0 18px; font: 28px var(--ui); }
.catalog-copy p { font-size: 15px; line-height: 1.7; color: #ccc3d2; }
.catalog-card.featured { grid-column: 1/-1; position: relative; min-height: 400px; display: flex; align-items: flex-end; isolation: isolate; }
.catalog-card.featured .catalog-picture { position: absolute; inset: 0; height: auto; z-index: -2; background-position: center 36%; }
.catalog-card.featured::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#17101dec,transparent),linear-gradient(0deg,#17101dda,transparent); }
.catalog-card.featured .catalog-copy { max-width: 640px; padding: 50px; }
.catalog-card.featured h2 { font-size: 42px; }
.catalog-card[hidden] { display: none !important; }
.article-body { max-width: 880px; padding: 40px 32px 100px; margin: auto; }
.article-body p { font-size: 18px; line-height: 1.85; color: #d0c6d6; }
.article-body .article-lead { font-size: 24px; color: #eadcc3; font-family: var(--ui); }
.article-body .eyebrow { font-size: 12px; color: var(--gold); }
.article-rule { height: 1px; background: #756049; margin: 45px 0 20px; }
.article-page .page-hero h1 { font-size: clamp(38px,5vw,65px); }
.shop-heading { padding: 60px 6% 62px; text-align: center; }
.shop-heading h1 { margin: 18px 0; }
.shop-heading p:last-child { font: 15px var(--ui); letter-spacing: 2px; color: #cabbab; }
.pack-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 24px; max-width: 1460px; margin: 0 auto; padding: 0 4% 85px; }
.pack-card { position: relative; background: linear-gradient(150deg,#332735,#1b1820 60%); border: 1px solid var(--pack-accent); border-top: 4px solid var(--pack-accent); box-shadow: 0 12px 40px #0004; }
.pack-art { aspect-ratio: 1.4; overflow: hidden; position: relative; background: #27182d; border-bottom: 1px solid var(--pack-accent); }
.pack-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#1b14289c,transparent 65%); }
.pack-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.pack-card:hover .pack-art img { transform: scale(1.045); }
.pack-body { padding: 28px 20px 20px; text-align: center; }
.pack-body h2 { font-size: clamp(20px,2vw,30px); line-height: 1.16; margin: 0 0 20px; color: var(--pack-accent); }
.pack-description { font-size: 14px; line-height: 1.65; color: #c7bdce; min-height: 48px; margin: 0; }
.pack-price { font: 32px/1.15 var(--ui); color: #e5d5ba; padding: 6px 0 18px; }
.pack-buy { width: 100%; }
.pack-details { text-align: left; margin-top: 25px; border-top: 1px solid #75604999; }
.pack-details summary { padding: 19px 0 0; font-size: 13px; }
.pack-details p { font-size: 13px; line-height: 1.7; color: #beb3c5; }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
summary::-webkit-details-marker { display: none; }
summary > span:last-child:not([data-i18n]) { font: 23px Arial; color: var(--gold); transition: transform 350ms; }
details[open] summary > span:last-child:not([data-i18n]) { transform: rotate(45deg); }
.shop-faq { max-width: 980px; padding: 10px 5% 90px; margin: auto; }
.shop-faq h2 { text-align: center; font-size: 42px; margin: 10px 0 40px; }
.shop-faq details { border-top: 1px solid #75604980; padding: 22px 0; }
.shop-faq summary { color: var(--gold-light); font: 20px var(--ui); }
.shop-faq p { color: #c9bfce; font-size: 15px; line-height: 1.8; max-width: 750px; }
@media(min-width:1700px) { .class-cover { min-height: 620px; } }
@media(max-width:1000px) {
  .class-nav a { padding: 12px; }
  .class-copy { width: 46%; margin-left: 5%; }
  .class-copy p:not(.eyebrow) { font-size: 15px; }
  .server-stories { gap: 25px; }
  .server-stories h2 { font-size: 23px; }
  .pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; padding-left: 7%; padding-right: 7%; }
  .pack-body h2 { font-size: 30px; }
}
@media(max-width:850px) {
  .class-nav { top: 60px; justify-content: flex-start; padding: 0 12px; }
  .class-cover { scroll-margin-top: 115px; }
  .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .server-stories { grid-template-columns: 1fr; padding: 55px 7%; gap: 40px; }
  .server-stories p { min-height: 0; }
}
@media(max-width:600px) {
  .page-hero { min-height: 320px; padding: 70px 24px 45px; }
  .inner-page h1 { font-size: 44px; }
  .page-hero p:not(.eyebrow) { font-size: 16px; }
  .page-intro { padding: 35px 26px 45px; }
  .page-intro h2 { font-size: 28px; }
  .page-intro p { font-size: 15px; }
  .class-cover { min-height: 660px; height: auto; align-items: flex-end; }
  .class-portrait { inset: 0; width: 100%; height: 370px; object-position: 76% center; mask-image: linear-gradient(#000 0,#000 65%,transparent 100%); -webkit-mask-image: linear-gradient(#000 0,#000 65%,transparent 100%); }
  .class-cover:nth-of-type(even) .class-portrait { object-position: 24% center; }
  .class-copy,.class-cover:nth-of-type(even) .class-copy { width: auto; margin: 0; max-width: none; padding: 315px 24px 30px; text-align: left; }
  .class-copy h2 { font-size: 36px; margin: 0 0 12px; }
  .class-copy h3 { font-size: 20px; margin-bottom: 12px; }
  .class-copy p:not(.eyebrow) { font-size: 14px; line-height: 1.55; margin: 12px 0; }
  .class-copy p.class-detail { font-size: 12px; }
  .class-cover::after,.class-cover:nth-of-type(even)::after { background: linear-gradient(0deg,#131017 0,#131017e8 45%,transparent 68%); }
  .class-divider { margin-top: 20px; }
  .class-cover:nth-of-type(even) .class-copy p,.class-cover:nth-of-type(even) .class-divider { margin-left: 0; }
  .page-cta { padding: 55px 26px; }
  .page-cta h2 { font-size: 28px; }
  .server-facts { margin: 0 20px 45px; padding: 20px 0; }
  .server-facts > div { padding: 5px 12px; }
  .server-facts strong { font-size: 27px; }
  .server-facts span { font-size: 11px; line-height: 1.5; }
  .server-landscape { min-height: 600px; padding: 55px 26px; background-position: 62% center; }
  .server-landscape h2 { font-size: 32px; }
  .server-landscape p:not(.eyebrow) { font-size: 15px; }
  .server-details { padding: 0 26px; }
  .server-details h2 { font-size: 30px; }
  .detail-row { grid-template-columns: 1fr; gap: 14px; }
  .news-catalog { padding: 0 20px 60px; }
  .news-grid { grid-template-columns: 1fr; gap: 24px; }
  .catalog-card.featured { min-height: 440px; }
  .catalog-card.featured .catalog-copy { padding: 30px 24px; }
  .catalog-card.featured h2 { font-size: 32px; }
  .catalog-copy { padding: 24px; }
  .catalog-copy h2 { font-size: 27px; }
  .article-body { padding: 30px 26px 70px; }
  .article-body p { font-size: 16px; }
  .article-body .article-lead { font-size: 22px; }
  .article-page .page-hero h1 { font-size: 37px; }
  .shop-heading { padding: 50px 24px 35px; }
  .shop-heading p:last-child { font-size: 12px; line-height: 1.7; }
  .pack-grid { grid-template-columns: 1fr; max-width: 420px; padding: 0 24px 55px; }
  .pack-body { padding: 28px; }
  .pack-body h2 { font-size: 34px; }
  .pack-description { min-height: 0; }
  .shop-faq { padding: 0 26px 65px; }
  .shop-faq h2 { font-size: 32px; }
  .shop-faq summary { font-size: 19px; }
}
@media(prefers-reduced-motion:reduce) { .pack-art img { transition: none; } }

/* Directional text entrance follows the reference's 1.25s pan and stagger. */
.class-cover, .server-copy { --copy-enter-x: -150px; }
.class-cover:nth-of-type(even) { --copy-enter-x: 150px; }
.class-cover.is-reveal-ready .class-copy > *, .server-copy.is-reveal-ready > * { opacity: 0; transform: translateX(var(--copy-enter-x)); }
.class-cover.is-revealed .class-copy > *, .server-copy.is-revealed > * { animation: class-copy-enter 1.25s ease both; }
.class-cover.is-revealed .class-copy > h3 { animation-delay: .12s; }
.class-cover.is-revealed .class-copy > p, .server-copy.is-revealed > p { animation-delay: .2s; }
.class-cover.is-revealed .class-copy > .class-detail { animation-delay: .3s; }
.class-cover.is-revealed .class-copy > .class-divider { animation-delay: .4s; }
@keyframes class-copy-enter { 60% { opacity: 1; } to { opacity: 1; transform: translateX(0); } }
@media(max-width:600px) { .class-cover, .server-copy { --copy-enter-x: -48px; } .class-cover:nth-of-type(even) { --copy-enter-x: 48px; } }
@media(prefers-reduced-motion:reduce) {
  .class-cover.is-reveal-ready .class-copy > *, .server-copy.is-reveal-ready > * { opacity: 1; transform: none; animation: none; }
}

/* Account and hall pages share the approved typography and restrained gold framing. */
.account-section{padding:0 24px 90px}.account-card{max-width:530px;margin:0 auto;border:1px solid #796548;background:linear-gradient(145deg,#251e2b,#19151f);padding:0 38px 28px;box-shadow:0 24px 60px #0003}
.account-tabs{display:flex;border-bottom:1px solid #796548;margin:0 -38px 34px}.account-tabs button{flex:1;padding:20px 10px;font:20px var(--ui);border-bottom:2px solid transparent;transition:color 250ms,background 250ms,border-color 250ms}.account-tabs button[aria-selected=true]{color:var(--gold-light);border-bottom-color:var(--gold);background:#c5ab8310}
.account-panel[hidden]{display:none}.account-panel h2{text-align:center;font:30px var(--display);font-weight:400;color:#e8d3af;margin:0 0 28px}.account-form{display:grid;gap:20px}.account-form label{display:grid;gap:8px;font:18px var(--ui);color:#ddcaaa}.account-form input{width:100%;min-height:48px;border:1px solid #625448;border-radius:0;background:#110e17b8;padding:12px 14px;color:#eee;font:18px var(--ui)}.account-form input:focus{outline:1px solid #d8b97e;outline-offset:2px}.account-form .outline{margin-top:7px;width:100%}.account-hint{font:16px/1.4 var(--ui);color:#b9afbf;margin:-12px 0 0}.account-notice{font:16px/1.5 var(--ui);text-align:center;color:#b7aab6;margin:14px 0 0}.account-status{font:17px/1.5 var(--ui);color:#e0c494;margin:0}.account-status:empty{display:none}
.account-form input::placeholder{color:#b9afbf;opacity:1}
.account-form .account-consent{grid-template-columns:18px minmax(0,1fr);align-items:start;gap:12px;font-size:16px;line-height:1.45;color:#b9afbf}
.account-form .account-consent input{width:18px;height:18px;min-height:0;padding:0;margin:3px 0 0;accent-color:var(--gold);cursor:pointer}
.account-form .account-consent input:focus{outline:none}
.account-form .account-consent input:focus-visible{outline:1px solid #b9afbf;outline-offset:3px}
.account-consent a{color:var(--gold-light);text-decoration:underline;text-decoration-color:#a48b65;text-underline-offset:3px;transition:color 200ms}
.account-consent a:hover{color:#fff2d9}
.hall-section{max-width:850px;margin:auto;text-align:center;padding:5px 24px 100px}.hall-emblem{display:block;margin:0 auto 26px;opacity:.8}.hall-section h2{font-size:36px;color:#e8d3af}.hall-section p:not(.eyebrow){max-width:630px;margin:24px auto 32px;font:20px/1.6 var(--ui);color:#c9c0cf}.hall-section .outline{margin-top:5px}
@media(max-width:540px){.account-section{padding:0 16px 60px}.account-card{padding:0 22px 24px}.account-tabs{margin:0 -22px 28px}.account-panel h2{font-size:26px}.hall-section h2{font-size:30px}.hall-section p:not(.eyebrow){font-size:18px}}

/* Section and article covers share calculator proportions; home keeps its original large hero. */
:root{--cover-height:clamp(260px,32vh,380px)}
.page-hero{height:var(--cover-height);min-height:0;max-height:none;aspect-ratio:auto}
.page-hero{padding-block:32px}

.legal-placeholder{min-height:32vh;padding:52px 24px 80px;text-align:center;color:#b9afbf;font:20px/1.6 var(--ui)}
.legal-placeholder p{margin:0 auto;max-width:720px}

/* Brief text reveal after fonts/translations settle; class scroll animations stay independent. */
@keyframes page-text-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .text-enter-pending main :is(.class-copy,.server-copy){opacity:0}
  .text-enter-pending main :where(h1,h2,h3,p,label,input,textarea,.password-recovery,summary,.server-facts strong,.server-facts>div>span,.text-link,.detail-row>span,.story-number,.outline,.class-nav a,.account-tabs button,.pack-price,.tag):not(.class-copy *):not(.server-copy *):not(.talent-lab *){opacity:0}
  .text-enter-ready main :where(h1,h2,h3,p,label,input,textarea,.password-recovery,summary,.server-facts strong,.server-facts>div>span,.text-link,.detail-row>span,.story-number,.outline,.class-nav a,.account-tabs button,.pack-price,.tag):not(.class-copy *):not(.server-copy *):not(.talent-lab *){animation:page-text-enter 320ms ease-out both}
}

.server-clock-label time{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:650px){
  .server-facts{grid-template-columns:1fr}
  .server-facts>div{border-right:0;border-bottom:1px solid #75604955;padding:20px 12px}
  .server-facts>div:last-child{border-bottom:0}
  .server-facts strong{margin-bottom:8px}
  .server-facts span{font-size:14px}
}

.password-recovery{justify-self:end;padding:0;margin-top:-9px;font:16px var(--ui);color:var(--gold-light);text-decoration:underline;text-underline-offset:4px;transition:color 200ms}
.password-recovery:hover{color:#fff2d9}
.recovery-actions{display:flex;gap:16px;margin-top:26px}.recovery-actions .outline{flex:1}
.recovery-status{color:#d4c1a6;font:18px/1.5 var(--ui)}
#recovery-dialog h2{font-size:32px;line-height:1.2}
.support-section{padding:0 24px 80px}.support-card{max-width:620px;margin:0 auto;border:1px solid #796548;background:linear-gradient(145deg,#251e2b,#19151f);padding:36px 38px;box-shadow:0 24px 60px #0003}
.support-card h2{font:30px var(--display);color:var(--gold-light);text-align:center;margin:0 0 30px}
.feedback-form textarea{width:100%;resize:vertical;min-height:160px;border:1px solid #625448;border-radius:0;background:#110e17b8;padding:12px 14px;color:#eee;font:18px/1.5 var(--ui)}
.feedback-form textarea:focus{outline:1px solid #d8b97e;outline-offset:2px}
@media(max-width:540px){.support-section{padding:0 16px 60px}.support-card{padding:28px 22px}.support-card h2{font-size:26px}#recovery-dialog h2{font-size:27px}.recovery-actions{gap:12px}}

.recovery-form{margin-top:24px}.recovery-form .recovery-actions{margin-top:0}.recovery-form .recovery-status{margin:0}