/* Campaign scenery and the Inner Castle council; complete artwork at every size. */
:root {
  --field-paper: #eee0c2;
  --field-edge: #9b7b4a;
  --field-shadow: 0 12px 28px #3c2d2024, inset 0 0 0 5px #f5e9cc70;
}
body {
  isolation: isolate;
  background: #c2ae87;
}
body::before {
  z-index: -1;
  opacity: 1;
  background:
    linear-gradient(90deg, #59634426, #d7c49d59 15%, #ead8b77a 50%, #d7c49d59 85%, #59634426),
    url('/assets/showcase/realm-parchment.webp') 0 0 / 576px 576px repeat,
    #c2ae87;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: repeating-linear-gradient(0deg,#f7d79c04 0 1px,transparent 1px 5px),linear-gradient(100deg,#241c16,#493428 48%,#241c16);
  border-top: 3px solid #8d6d3e;
  border-bottom: 4px double #b79a62;
  box-shadow: inset 0 2px #e2c58d33,inset 0 -5px #17130f55,0 5px 18px #21181055;
}
.site-header .site-nav { min-height: 94px; gap: 20px; padding: 8px 0; }
.site-nav .site-brand { flex-shrink: 0; gap: 12px; color: #f0dfb9; text-shadow: 0 2px 1px #160f09; }
.header-standard { position: relative; display: grid; place-items: start center; flex: 0 0 54px; height: 72px; padding-top: 7px; filter: drop-shadow(0 4px 3px #160c0b66); }
.header-standard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#4b2527,#83474a 48%,#4b2527); border: 2px solid #c0a36b; clip-path: polygon(0 0,100% 0,100% 77%,50% 100%,0 77%); }
.site-nav .header-standard img { display: block; position: relative; width: 40px; height: 40px; object-fit: contain; border: 1px solid #bd985a99; border-radius: 1px; }
.header-wordmark { display: grid; gap: 7px; }
.header-name { font: 700 24px/1 var(--brand-font-display); letter-spacing: .3px; }
.header-motto { font: 600 8px/1.4 var(--brand-font-ui); color: #d0b787; letter-spacing: 2px; }
.site-header .site-nav-links { gap: 3px; flex-wrap: nowrap; }
.site-header .site-nav-links a { position: relative; justify-content: center; min-height: 48px; padding: 12px 11px; color: #eadbbc; font: 600 12px/1.4 var(--brand-font-ui); border: 1px solid transparent; }
.site-header .site-nav-links a::after { content: ''; position: absolute; bottom: 4px; left: calc(50% - 2px); width: 4px; height: 4px; rotate: 45deg; background: #b7975f; opacity: .4; }
.site-header .site-nav-links a:is(:hover,[aria-current='page']) { color: #fff4d7; background: linear-gradient(#b5945720,#b5945708); border-color: #b5945744; box-shadow: inset 0 -2px #c09d5e; }
.site-header .site-nav-links a[aria-current='page']::after { opacity: 1; }
.site-nav .nav-play { min-height: 52px; gap: 9px; padding: 12px 18px; border: 3px double #d3b376; background: linear-gradient(#8b494d,#542728); color: #fff0cf; font: 700 12px/1.3 var(--brand-font-ui); box-shadow: inset 0 0 0 2px #32171d66,0 3px #19100c,0 5px 12px #170f0a77; }
.nav-crown { flex: 0 0 20px; width: 20px; height: 19px; color: #e0bd78; }
.site-nav .nav-play:hover { background: linear-gradient(#9a5555,#663036); }
.site-header .site-menu-toggle { min-height: 44px; padding: 9px 13px; border: 1px solid #b99a60; background: #30241b; color: #f4e5bf; font: 600 12px var(--brand-font-ui); box-shadow: inset 0 0 0 2px #d5b57215; }
.site-menu-toggle[aria-expanded='true'] { background: #72363a; }
body:not(.public-site-ready) .site-menu-toggle { display: none; }
body:not(.public-site-ready) .site-header { position: relative; }
.site-header :focus-visible,.site-footer :focus-visible { outline-color: #edc77d; }
.hero-intro { width: 100%; padding: 14px 0; text-shadow: 0 1px #f5e8cd80; }
.hero-intro .hero-lede,.hero-intro .eyebrow { color: #463625; }
.hero-intro .eyebrow { font-family: var(--brand-font-ui); }
.army-muster-shell { box-shadow: var(--field-shadow), 0 8px 0 -4px #997643; }
.campaign-board,.feature-scene,.tour-scene,.guide-figure,.atlas-invitation,.practice-board {
  border: 1px solid var(--field-edge);
  box-shadow: 0 5px 0 -2px #745838, 0 12px 22px #49362124;
}
.campaign-board figcaption,.feature-scene figcaption,.tour-scene figcaption,.guide-figure {
  background: linear-gradient(125deg, #f1e4c7, #ddc99f);
}
.realm-strip {
  background: #423c2c;
  color: #f1dfb8;
  border-block: 3px double #b99a5f;
  padding: 12px 20px;
  box-shadow: 0 7px 20px #3b2b2426;
}
.realm-strip i { color: #c5a263; }
.home-main>.chapter {
  position: relative;
  padding: clamp(26px, 4vw, 52px);
  margin-block: 38px;
  border: 1px solid var(--field-edge);
  background: linear-gradient(120deg, #f3e8cfee, #e4d3b0f5);
  box-shadow: var(--field-shadow);
}
.home-main>.chapter::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #ab8b5555;
  pointer-events: none;
}
.home-main>[id] { scroll-margin-top: 105px; }
.chapter-heading { gap: 32px; }
.chapter-heading .eyebrow,.faq-chapter>div>.eyebrow,.siege-intro>.eyebrow,.atlas-invitation>div>.eyebrow {
  display: inline-block;
  padding: 8px 23px 8px 13px;
  background: #72363a;
  color: #fff0d1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
  font-size: 10px;
  letter-spacing: 1.3px;
}
.feature-choices { gap: 10px; }
.feature-choices button { background: #f1e3c7; border: 1px solid #b29a70; box-shadow: inset 0 0 0 3px #f9efdc88; }
.feature-choices button[aria-pressed='true'] { background: #ded0ae; border-color: #8b633f; border-left: 4px solid #72363a; }
.feature-choices button:hover { background: #e3d2af; }
.siege-section {
  position: relative;
  margin: 38px 0;
  padding: clamp(26px, 4vw, 52px);
  border: 3px double #bd9c63;
  background: repeating-linear-gradient(90deg, #f5e8bd05 0 1px, transparent 1px 7px), linear-gradient(125deg, #444735, #242c23);
  box-shadow: 0 12px 28px #30261d44, inset 0 0 0 8px #1d241e55;
}
.siege-intro .demo-disclosure { font-size: 12px; line-height: 1.7; color: #d6d3b9; }
.siege-intro>p { color: #e2dec8; }
.practice-map { background: radial-gradient(ellipse at 20% 90%, #72784e66, transparent 50%), radial-gradient(ellipse at 90% 40%, #9b875677, transparent 60%), #dacba9; }
.first-campaign { gap: 16px; }
.first-campaign li:nth-child(n) {
  padding: 22px 18px;
  border: 1px solid #b49a6b;
  border-top: 3px solid #596344;
  background: #eadab8;
  box-shadow: inset 0 0 0 4px #f6e8ce88;
}
.first-campaign li>span { display: inline-grid; place-items: center; width: 38px; height: 44px; background: #72363a; color: #fae9c2; font: 700 16px var(--brand-font-ui); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); }
.atlas-invitation { background: linear-gradient(120deg, #e6d5b3, #c5b08a); margin-block: 38px; }
.home-guide { padding: 20px; border: 1px solid #b4996d; border-top: 3px solid #72363a; background: #e7d7b6; box-shadow: inset 0 0 0 4px #f7ebd04d; }
.home-guide:hover { background: #f1e3c6; }
.guide-image { background: radial-gradient(ellipse, #b6a17955, transparent 70%); }
.faq-list details[open] { background: #f5e9ce88; }
.faq-list summary { padding-left: 12px; }
.faq-list details p { padding-left: 12px; }
.closing-banner {
  margin: 38px 0 0;
  border: 3px double #c39c5b;
  background: repeating-linear-gradient(90deg, #edceb308 0 1px, transparent 1px 5px), linear-gradient(120deg, #542728, #783b3d, #542728);
  box-shadow: inset 0 0 0 8px #321d1933;
}
.closing-banner .site-button { border: 2px solid #c9a365; background: #ead5a8; color: #542728; font-family: var(--brand-font-ui); }
.closing-banner p { font-size: 13px; line-height: 1.7; }
.site-main:not(.home-main) {
  background: linear-gradient(115deg, #f2e7cdfa, #e8d9bdf7);
  border: 1px solid var(--field-edge);
  box-shadow: var(--field-shadow);
}
.site-main:not(.home-main)>.article-heading {
  position: relative;
  max-width: none;
  text-align: left;
  padding: 8px 0 30px;
  border-bottom: 3px double #aa8954;
}
.article-heading .article-byline { justify-content: flex-start; }
.article-heading p { font-family: var(--brand-font-system); line-height: 1.75; }
.article-heading h1 { font-size: clamp(32px, 3.8vw, 50px); }
.article-heading .eyebrow,.article-heading .site-eyebrow { color: #72363a; }
.article-index { border: 1px solid #a18859; border-top: 5px solid #72363a; background: #e2d1ac; box-shadow: inset 0 0 0 4px #f1e2c355; }
.article-index strong { color: #542728; }
.article-index a { border-bottom: 1px solid #b2997133; }
.content-section { border-bottom: 1px solid #b2986e66; }
.content-section:last-child { border-bottom: 0; }
.content-section h2 { color: #542728; }
.guide-quick,.field-note { background: #e2d3af; box-shadow: inset 0 0 0 1px #ac916155; }
.library-toolbar { background: #e0ceaa; border: 1px solid #9d8052; box-shadow: inset 0 0 0 4px #eedebe88; }
.library-card { border: 1px solid #a98b5c; border-top: 3px solid #596344; background: #ede0c3; box-shadow: 0 5px 12px #4c362815; }
.library-card:hover { background: #f6eace; border-color: #855f3d; }
.library-card .card-kicker { color: #72363a; }
.guide-learning-path a { background: #e1ceaa; border-color: #a3895e; }
.site-main>.site-hero { border-bottom: 3px double #a78a59; padding-bottom: 30px; }
.roadmap-hero { border-radius: 3px; background: linear-gradient(110deg, #272d22, #49372a); }
.roadmap-hero::before { border-radius: 0; }
.roadmap-hero>* { min-width: 0; }
.site-footer {
  position: relative;
  margin-top: 42px;
  padding-top: 0;
  border-top: 0;
  background: transparent;
  color: #f0dfbd;
}
.site-footer-inner.footer-expanded { width: 100%; margin: 0; padding: 42px max(24px, calc((100% - 1200px) / 2)); background: #302820; border-top: 3px double #bc985d; }
.site-footer .site-brand { color: #f1dfb8; font-family: var(--brand-font-ui); }
.site-footer a { color: #e7d7b6; }
.site-footer a:hover { color: #fff6df; text-decoration: underline; }
.site-footer strong { color: #d2b276; font-family: var(--brand-font-ui); }
.footer-legal { width: 100%; max-width: none; margin: 0; padding: 22px 24px; color: #d8c6a7; background: #251f1a; border-top: 1px solid #a0825044; }
.footer-legal .journey-settings { background: #40332a; border-color: #a18454; color: #f0dfbd; }
@media (max-width: 1000px) {
  .first-campaign { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-guide { padding: 16px; }
}
@media (max-width: 940px) {
  .site-header .site-nav { position: relative; flex-wrap: nowrap; min-height: 78px; gap: 10px; padding: 5px 0; }
  .header-standard { height: 62px; flex-basis: 46px; padding-top: 5px; }.site-nav .header-standard img { width: 34px; height: 34px; }
  .header-name { font-size: 21px; }.header-motto { font-size: 7px; letter-spacing: 1.4px; }
  .site-header .site-nav-links { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; width: 100%; max-height: calc(100dvh - 100px); overflow-y: auto; padding: 10px; flex-direction: column; align-items: stretch; background: linear-gradient(#3b2c20,#251e18); border: 3px double #b79a62; box-shadow: 0 12px 24px #17130f66; }
  .site-header .site-nav-links a { justify-content: flex-start; min-height: 48px; padding: 12px 16px; border-bottom-color: #b7975f33; }.site-header .site-nav-links a::after { left: auto; right: 16px; bottom: calc(50% - 2px); }
  body:not(.public-site-ready) .site-nav { flex-wrap: wrap; }body:not(.public-site-ready) .site-nav-links[data-site-menu] { display: flex; position: static; order: 3; box-shadow: none; }
  .site-nav .nav-play { min-height: 46px; padding: 10px 12px; font-size: 11px; }
}
@media (max-width: 520px) {
  .site-header .site-nav { width: calc(100% - 24px); gap: 8px; }
  .site-nav .site-brand { gap: 7px; }.header-name { font-size: 18px; }.header-motto { font-size: 6px; letter-spacing: .8px; }
  .header-standard { flex-basis: 38px; height: 55px; }.site-nav .header-standard img { width: 28px; height: 28px; }
  .site-nav .nav-play { padding: 9px 10px; font-size: 10px; }.nav-crown { display: none; }.site-nav-actions { gap: 6px; }
  .site-header .site-menu-toggle { padding: 9px 10px; font-size: 11px; }
}
@media (max-width: 380px) { .header-name { font-size: 14px; }.site-nav .site-brand { gap: 5px; }.header-standard { flex-basis: 26px; height: 45px; }.site-nav .header-standard img { width: 20px; height: 20px; }.header-motto { display: none; }.site-nav .nav-play { padding-inline: 6px; }.site-header .site-menu-toggle { padding-inline: 7px; } }
@media (max-width: 700px) {
  .home-main>.chapter { padding: 28px 18px; margin-block: 26px; }
  .chapter-heading .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .hero-intro { padding-inline: 4px; }
  .site-nav .site-brand { font-size: 15px; }
  .siege-section { padding: 28px 18px; margin: 26px 0; }
  .siege-section h2 { font-size: 39px; }
  .first-campaign { grid-template-columns: 1fr; }
  .home-guide { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .home-guide .guide-image img { max-width: 62px; }
  .home-guide h3 { font-size: 22px; }
  .home-guide .eyebrow { line-height: 1.7; }
  .home-guide-grid { gap: 20px; }
  .atlas-invitation { margin-block: 26px; }
  .closing-banner { margin: 26px 0 0; padding: 40px 20px; }
  .closing-banner h2 { font-size: 38px; }
  .roadmap-hero h1 { font-size: clamp(25px, 7vw, 38px); }
  .realm-expansion-heading { flex-wrap: wrap; }
  .site-footer-inner.footer-expanded { padding: 32px 24px; }
  .footer-legal { padding: 20px 24px; line-height: 1.8; }
}

/* Battlefield details sit between reading panels; the original Play artwork stays whole. */
.army-stage { aspect-ratio: auto; min-height: 0; overflow: visible; background: transparent; }
.army-stage .hero-actions { top: 37%; }
.army-stage .play-large { filter: drop-shadow(0 3px 0 #4d342b) drop-shadow(0 12px 18px #342d2770); }
.army-caption { width: 100%; max-width: none; padding: 16px 18px 10px; margin: 0; }
.army-caption .text-link { margin-inline: 6px; font-size: 12px; }.army-caption .play-reassurance { font-size: 13px; }
.field-controls { display: flex; justify-content: center; padding: 4px 10px; }
.field-controls[hidden] { display: none; }
.field-controls button { min-height: 44px; padding: 8px 14px; border: 1px solid #a68c5e; background: transparent; color: #5d4730; font: 12px/1.4 var(--brand-font-system); cursor: pointer; }
.field-controls button:hover { background: #ffffff22; }
.field-controls button:disabled { opacity: .7; cursor: default; }
.footer-legal .field-controls { margin-top: 12px; }.footer-legal .field-controls button { color: #ead8b3; }
.campaign-detail { position: relative; width: 100%; height: 142px; pointer-events: none; user-select: none; }
.field-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.detail-fallback { display: flex; align-items: end; justify-content: space-around; height: 100%; padding: 12px 4%; gap: 16px; }
.detail-fallback img { display: block; width: auto; max-width: 28%; height: 110px; object-fit: contain; }
.detail-fallback img:last-child { height: 80px; }
[data-field-ready] .detail-fallback { visibility: hidden; }
.detail-standard { width: 28px; height: 80px; border-left: 3px solid #775b3c; position: relative; }
.detail-standard::after { content: ''; position: absolute; width: 35px; height: 46px; top: 0; left: 0; background: #72363a; border-top: 2px solid #c5a066; clip-path: polygon(0 0,100% 0,100% 100%,50% 80%,0 100%); }
.home-main>.campaign-detail { margin: 0; }
.home-main>.campaign-detail+section { margin-top: 0; }
.home-main>.chapter,.siege-section { margin-bottom: 0; }
.site-footer>.campaign-detail,.page-approach { width: min(1200px,calc(100% - 48px)); margin: 0 auto; }
.page-approach+.site-main:not(.home-main) { margin-top: 0; }
/* Cloth standards and iron rivets frame sections without covering their contents. */
.home-main>.chapter::after,.siege-section::after,.site-main:not(.home-main)::after { content: ''; position: absolute; top: -4px; right: 16px; width: 19px; height: 43px; border-top: 3px solid #c3a56b; background: linear-gradient(90deg,#542728,#834347 50%,#542728); clip-path: polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); box-shadow: inset 3px 0 #c7a46566; pointer-events: none; }
.home-main>.chapter:nth-of-type(even)::after { background: linear-gradient(90deg,#39402d,#6e784c 50%,#39402d); }
.site-main:not(.home-main) { position: relative; }
.article-index { border-left: 4px solid #796845; }
.content-section h2 { border-left: 3px solid #977b46; padding-left: 12px; }
@media(max-width:700px) {
  .army-stage .hero-actions { top: 39%; }
  .campaign-detail { height: 110px; }
  .detail-fallback img { height: 80px; }.detail-fallback img:last-child { display: none; }.detail-standard { height: 62px; width: 16px; }
  .site-footer>.campaign-detail,.page-approach { width: calc(100% - 24px); }
  .home-main>.chapter,.siege-section { margin-bottom: 0; }
  .home-main>.chapter::after,.siege-section::after { right: 8px; width: 13px; height: 27px; }
}

.castle-council { width: min(100%,1180px); padding: 42px 28px 26px; margin: 0 0 48px; border: 3px double #a88955; background: radial-gradient(ellipse at 50% 0,#79634366,transparent 60%),repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 55px),#2c2e27; box-shadow: inset 0 0 0 7px #141a1a55,0 12px 30px #48341d44; }
.council-heading { max-width: 650px; margin: 0 auto 32px; text-align: center; }
#council { scroll-margin-top: 105px; }
.council-heading .eyebrow { color: #d4b578; }
.council-heading h2 { font: 44px/1.08 Georgia,serif; color: #f2e6c6; margin: 12px 0 16px; }
.council-heading h2 em { color: #c9ac70; }
.council-heading p { color: #ddcfb1; font: 15px/1.8 var(--brand-font-system); }
.council-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.council-officer { --officer-banner:#72363a; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 13px 13px 0; text-decoration: none; background: linear-gradient(#d7c197,#efe0bd); border: 1px solid #b4925b; color: #423322; box-shadow: 0 6px 0 #171d1944,inset 0 0 0 4px #f8e6bd77; }
.council-coin { --officer-banner:#88743b; }.council-cavalry { --officer-banner:#4d6575; }.council-defense { --officer-banner:#596b43; }
.council-officer:is(:hover,:focus-visible) { border-color: #efd396; box-shadow: 0 0 24px #c8a36344,inset 0 0 0 4px #f8e6bd; }
.council-building { display: block; padding: 8px 0 14px; text-align: center; color: #5a422c; font: 700 10px/1.4 var(--brand-font-ui); letter-spacing: .7px; }
.council-portrait { position: relative; isolation: isolate; display: grid; place-items: end center; height: 285px; margin: 0 0 19px; border: 4px double #aa8750; border-radius: 48% 48% 2px 2px; background: radial-gradient(ellipse at 50% 45%,#bdac8070,transparent 70%),#3a3a2c; box-shadow: inset 0 0 28px #101a1788,0 5px 0 #927347; }
.council-portrait::before { content:''; position:absolute; top: 13px; left: 50%; translate: -50% 0; width: 50%; height: 77%; background: var(--officer-banner); border-inline: 2px solid #bd9f60; clip-path: polygon(0 0,100% 0,100% 88%,50% 100%,0 88%); opacity: .7; z-index: -1; }
.council-portrait img { display: block; height: 270px; width: 100%; max-width: 170px; object-fit: contain; filter: drop-shadow(4px 5px 4px #181b1880); }
.council-role { color: #725333; text-transform: uppercase; font: 700 9px/1.5 var(--brand-font-system); letter-spacing: .8px; }
.council-officer h3 { font: 25px/1.12 Georgia,serif; color: #542728; margin: 7px 0 10px; }
.council-officer p { font: 13px/1.7 var(--brand-font-system); margin: 0 0 17px; }
.council-invite { margin-top: auto; min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #a2845c66; color: #663137; font: 700 11px/1.5 var(--brand-font-system); }
.council-guide { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; margin-top: 24px; color: #e3c991; font: 14px/1.6 var(--brand-font-system); text-align: center; }
@media(max-width:900px) { .council-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }.council-portrait { height: 275px; }.council-portrait img { height: 260px; } }
@media(max-width:700px) {
  .field-controls { padding: 14px 8px; gap: 6px; }.field-controls button { font-size: 12px; padding: 10px 12px; }.army-caption { padding-inline: 8px; }
 .castle-council { padding: 30px 14px 20px; }.council-heading h2 { font-size: 36px; }.council-gallery { gap: 12px; }.council-officer { padding: 8px 8px 0; }.council-building { font-size: 8px; letter-spacing: 0; }.council-portrait { height: 200px; border-width: 2px; }.council-portrait img { height: 190px; }.council-officer h3 { font-size: 22px; }.council-officer p { font-size: 12px; }.council-invite { font-size: 10px; }.council-role { font-size: 8px; }
}
@media(max-width:380px) { .council-gallery { gap: 8px; }.castle-council { padding-inline: 10px; }.council-officer h3 { font-size: 19px; }.council-portrait { height: 170px; }.council-portrait img { height: 160px; } }