/* Shared frame for every guide and hero page. Loaded after page styles. */
:root{--site-width:1240px;--site-gutter:24px;--site-accent:#efb879;--site-bg:#141311;--site-panel:#1e1c19;--site-border:#36322d;--site-text:#f4efe9;--site-muted:#aca6a0;--site-action:#30281f;--site-action-hover:#443526;--site-sage:#a3b39b;--site-mauve:#baa4bd}
body.site-shell>header,body.site-shell>main,body.site-shell>footer{width:calc(100% - var(--site-gutter)*2);max-width:var(--site-width);margin-left:auto;margin-right:auto}
body.site-shell>header{height:auto;min-height:88px;padding:18px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;border-bottom:1px solid #36322d}
body.site-shell>header .brand{font-family:'DM Sans',sans-serif;font-size:21px;letter-spacing:2px;gap:12px;white-space:nowrap}
body.site-shell>header nav{display:flex;order:0;flex-basis:auto;width:auto;margin:0 0 0 auto;gap:4px;flex-wrap:wrap;overflow:visible;padding:0;align-items:center}
body.site-shell>header nav a{flex:none;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;font:600 13px/1.4 'DM Sans',sans-serif;color:#c9c2ba;border-radius:6px;white-space:nowrap}
body.site-shell>header nav a:hover,body.site-shell>header nav a[aria-current=page]{background:#30271d;color:var(--site-accent)}
body.site-shell>header .header-link{display:none}
.site-menu-toggle{display:none;border:1px solid #62513b;border-radius:6px;background:#211e1a;color:#f4efe9;padding:10px 14px;min-height:44px;font:600 14px/1.4 'DM Sans',sans-serif}
body.site-shell :is(.boss-hero,.turmoil-hero){padding:40px 0 24px;min-height:0}
body.site-shell :is(.boss-hero,.turmoil-hero) h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(40px,4.8vw,64px);font-weight:700;line-height:1.08;letter-spacing:-.5px;margin:16px 0;max-width:900px}
body.site-shell :is(.boss-hero,.turmoil-hero) .eyebrow{font:700 11px/1.5 'DM Sans',sans-serif;letter-spacing:1.6px;color:var(--site-accent)}
body.site-shell :is(.boss-hero>p,.turmoil-hero-lead){font:400 16px/1.65 'DM Sans',sans-serif;max-width:720px;color:#c9c2ba}
body.site-shell .boss-hero .updated{font-size:12px;margin-top:12px}
body.site-shell .turmoil-hero h1 span{display:block;font-size:inherit;color:var(--site-accent)}
body.site-shell .event-view-tabs{margin-top:0}
body.site-shell .event-view-tab{font-family:'Barlow Condensed',Impact,sans-serif;font-size:26px;min-height:54px}
body.site-shell .event-faq summary h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:28px;font-weight:700}
body.site-shell .gorilla-guide .boss-nav{margin:0 0 24px}
body.site-shell .ratio-disclaimer{padding:20px 24px;margin-bottom:24px}
body.site-shell .ratio-disclaimer h2{font-size:28px}
body.site-shell .ratio-disclaimer .disclaimer-lead{font-size:15px;line-height:1.65}
body.site-shell .ratio-disclaimer .bonus-fineprint{font-size:13px}
body.site-shell .catalog-intro{padding:32px 0 24px}
body.site-shell .catalog-intro h1{font-size:clamp(38px,4.8vw,64px)}
body.site-shell .catalog-intro .featured-link{margin-top:16px}
body.site-shell :is(a,button,summary,input,select):focus-visible{outline:3px solid var(--site-accent);outline-offset:4px}
@media(max-width:1100px){body.site-shell>header nav{flex-basis:100%;justify-content:flex-start}}
@media(max-width:700px){
 :root{--site-gutter:16px}
 body.site-shell>header{min-height:76px;padding:14px 0;gap:12px}
 body.site-shell>header .brand{font-size:19px}
 body.site-shell>header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:4px;overflow:visible;max-width:none;padding:0}
 body.site-shell>header nav a{font-size:13px;white-space:normal;text-align:center;min-height:44px}
 body.site-shell>header.menu-ready .site-menu-toggle{display:block;margin-left:auto}
 body.site-shell>header.menu-ready nav{display:none}
 body.site-shell>header.menu-ready.menu-open nav{display:grid}
 body.site-shell :is(.boss-hero,.turmoil-hero){padding:28px 0 20px}
 body.site-shell :is(.boss-hero,.turmoil-hero) h1{font-size:40px;line-height:1.08;margin:12px 0}
 body.site-shell :is(.boss-hero>p,.turmoil-hero-lead){font-size:15px;line-height:1.6}
 body.site-shell .event-view-tab{font-size:23px;min-height:52px}
 body.site-shell .ratio-disclaimer{padding:18px}
 body.site-shell .catalog-intro{padding:24px 0 18px}
 body.site-shell .catalog-intro h1{font-size:38px;line-height:1.1}
 body.site-shell .catalog-intro .featured-link{display:none}
 body.site-shell .hero{padding-top:28px;min-height:0;gap:20px}
 body.site-shell .intro h1{font-size:54px;line-height:1.05}
 body.site-shell .hero-art{height:260px}
}

/* Consistent action colors across guides, catalogue and planner. Keep game imagery and semantic rarity colors. */
body.site-shell :is(.primary,.today-journal-link){background:var(--site-action);border:1px solid var(--site-accent);color:var(--site-text)}
body.site-shell :is(.primary,.today-journal-link):hover{background:var(--site-action-hover)}
body.site-shell :is(.tabs button[aria-selected=true],.season-picker button[aria-pressed=true],.warden-event-picker button[aria-pressed=true],.skill-levels button[aria-pressed=true]){background:var(--site-action);color:var(--site-text);border-color:var(--site-accent);box-shadow:none}
body.site-shell :is(.hero-skill-button:hover,.hero-skill-button[aria-expanded=true]) span{background:var(--site-action);color:var(--site-text);border-color:var(--site-accent)}
body.site-shell :is(.primary,.today-journal-link,.guide-action):focus-visible{outline:3px solid var(--site-accent);outline-offset:4px}