/* Division 2 site layer (2026-09-26): readable sizes, guide pages, calendar.
   Loaded after css/styles.css on every page. */

body { font-size: 15px; line-height: 1.65; }
p { font-size: inherit; }
.brand small { font-size: 11.5px; letter-spacing: .12em; }
header nav { gap: 22px; }
header nav a { font-size: 13px; }
header nav a[aria-current="page"] { color: var(--o); }
.hub-link { margin-left: 18px; padding: 8px 12px; border: 1px solid #3a3f42; color: #cfccc4; text-decoration: none; font: 600 12px var(--head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hub-link:hover { border-color: var(--o); color: var(--o); }
.tag, .section-head > p { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.section h2, .activity-art h2 { text-transform: uppercase; }
.section-foot { margin: 28px 0 0; font: 600 17px var(--head); letter-spacing: .04em; }
.section-foot a { color: var(--o); text-decoration: none; }
.section-foot a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }

/* hero */
.hero h1 { text-transform: uppercase; }
.actions a { font-size: 14px; }
.hero aside > span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hero aside div { grid-template-columns: 68px 1fr; align-items: baseline; }
.hero aside b { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.hero aside p { font-size: 17px; }
.hero aside small { font-size: 11.5px; color: #8a8a86; }

/* shared text sizes that were 8-10px */
.lead > span, .num, .brief-grid article > strong, .activity-grid span, .source-grid span, .activity-art p,
.build-top, .kit strong, .farm strong, .builds article > footer b, .source-intro span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.kit p, .farm p { font-size: 13.5px; line-height: 1.55; }
.source-grid p { font-size: 14px; }
.system-list article > b { font-size: 13px; }
.brief-grid article > p { color: #b3b3ae; }
.activity-grid p { color: #a9aaa6; }
.faq p { font-size: 15px; color: #b4b4af; }
.build-source { font-size: 13px; color: #8c8c88; }
.route i { font-size: 13px; }

/* calendar */
.calendar { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--o); }
.calendar li { display: grid; grid-template-columns: 170px 1fr 100px; gap: 20px; align-items: baseline; padding: 11px 6px; border-bottom: 1px solid var(--line); }
.cal-when { font: 700 18px var(--head); color: var(--paper); letter-spacing: .02em; }
.cal-what { color: #b3b3ae; }
.cal-what a { color: var(--paper); font-weight: 600; text-decoration: none; margin-right: 6px; }
.cal-what a:hover { color: var(--o); }
.cal-state { justify-self: end; font: 700 12px var(--head); letter-spacing: .12em; text-transform: uppercase; color: #8a8a86; border: 1px solid #3a3f42; padding: 3px 8px; }
.cal-now .cal-state { color: #0a0a0a; background: var(--o); border-color: var(--o); }
.cal-done { opacity: .6; }

/* feed */
.feed-status { color: #a9aaa6; margin: -20px 0 22px; }
.feed-status a, .feed-card a { color: var(--o); }
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feed-card { background: #121619; border: 1px solid #303538; border-top: 2px solid var(--o); padding: 20px; }
.feed-card small { color: #8a8a86; font-size: 12px; }
.feed-card h3 { font: 700 22px/1.1 var(--head); margin: 8px 0; }
.feed-card p { color: #a9aaa6; font-size: 14px; }

/* footer */
footer { font-size: 13px; color: #8f8f8b; grid-template-columns: 1fr 2fr auto auto; }
footer nav a { color: #cfccc4; }

/* ---------- guide pages ---------- */
.page-hero { position: relative; min-height: 0; display: flex; align-items: flex-end; padding: 44px 5vw 30px; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center 45%); }
.page-hero:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07090bf2 0%, #07090bc7 40%, #07090b40 80%), linear-gradient(0deg, #07090b 0%, transparent 55%); }
.page-hero > div { position: relative; z-index: 1; max-width: 860px; }
.page-hero h1 { font: 800 clamp(42px, 5vw, 72px)/.88 var(--head); text-transform: uppercase; margin: 10px 0 12px; letter-spacing: -.02em; }
.page-hero h1 em { font-style: normal; color: var(--o); }
.page-hero p:not(.tag) { font: 500 clamp(17px, 1.6vw, 22px)/1.45 var(--head); color: #cfccc4; margin: 0; max-width: 720px; }
.checked { display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #9a9a95; }

.guide-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 5vw; padding: 60px 6vw 80px; }
.toc { position: sticky; top: 96px; align-self: start; border-left: 2px solid var(--o); padding-left: 18px; }
.toc b { display: block; font: 700 13px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--o); margin-bottom: 10px; }
.toc a { display: block; padding: 5px 0; color: #b3b3ae; text-decoration: none; font-size: 14px; }
.toc a:hover { color: var(--o); }
.article { max-width: 900px; }
.article > section { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.article > section:last-child { border-bottom: 0; }
.article h2 { font: 800 clamp(30px, 3.2vw, 44px)/.95 var(--head); text-transform: uppercase; margin: 0 0 14px; letter-spacing: -.01em; }
.article h2 em { font-style: normal; color: var(--o); }
.article h3 { font: 700 23px/1.1 var(--head); margin: 20px 0 6px; color: var(--paper); }
.article p, .article li { color: #c2c2bd; }
.article strong { color: var(--paper); }
.article ul, .article ol { padding-left: 1.2em; }
.article li { margin-bottom: 7px; }
.article a { color: var(--o); }
.src { font-size: 13px; color: #8f8f8b; }
.src a { color: #cfccc4; }
.callout { border-left: 3px solid var(--o); background: #121619; padding: 18px 22px; margin: 22px 0; }
.callout p:last-child { margin-bottom: 0; }
.callout b { color: var(--o); font: 700 13px var(--head); letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.callout.warn { border-left-color: #ff4f4f; }
.callout.warn b { color: #ff4f4f; }
.table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 620px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.table-wrap th { font: 700 12px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--o); background: #0d1012; }
.table-wrap td { color: #c2c2bd; }
.table-wrap td b { color: var(--paper); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pill-row span { border: 1px solid #3a3f42; padding: 4px 10px; font: 600 13px var(--head); letter-spacing: .06em; color: #cfccc4; }
.guide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0; }
.guide-list article { background: #121619; border: 1px solid #303538; padding: 20px; }
.guide-list article h3 { margin-top: 0; }
.guide-list article p { margin: 0; font-size: 14.5px; }

/* builds page uses the home build cards */
[data-builds-page] .builds { margin-top: 12px; }
.builds-intro { max-width: 860px; color: #c2c2bd; }

@media (max-width: 1100px) {
  .hub-link { display: none; }
  .guide-body { grid-template-columns: 1fr; }
  .toc { position: static; border-left: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .toc b { width: 100%; margin: 0; }
  .feed-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .calendar li { grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 4px; }
  .calendar li .cal-what { grid-column: 1 / -1; grid-row: 2; }
  .cal-state { justify-self: start; }
  .guide-list, .feed-grid { grid-template-columns: 1fr; }
  .page-hero { min-height: 0; padding: 30px 20px 24px; }
  .guide-body { padding: 36px 20px 60px; }
  body { font-size: 15.5px; }
  footer { grid-template-columns: 1fr; }
}

/* per-build season note */
.rh-note { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid #ff4f4f; background: #1a1214; color: #e0c9c9; font-size: 13.5px; line-height: 1.5; }
.pvp-warning span { font-size: 14px; }
.matrix-note { font-size: 13px; color: #8f8f8b; }
.compare-wrap { overflow-x: auto; }

/* guide FAQ lists */
.faq-list { display: grid; grid-template-columns: 180px 1fr; gap: 10px 22px; margin: 16px 0; }
.faq-list dt { font: 700 18px var(--head); color: var(--paper); }
.faq-list dd { margin: 0; color: #c2c2bd; }
.article .feed-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .faq-list { grid-template-columns: 1fr; gap: 2px; } .faq-list dd { margin-bottom: 12px; } .article .feed-grid { grid-template-columns: 1fr; } }

/* readable build + picker controls */
.builds h3, .selector-result h3 { text-transform: uppercase; }
.selector legend { font-size: 13px; }
.selector button { font-size: 15px; }
.selector-result > span { font-size: 12px; text-transform: uppercase; }
.patch span, .acq { font-size: 11.5px; }
.build-controls button { font-size: 12px; padding: 10px 14px; }
.copy-status { font-size: 12px; color: #75d8a2; }
.plain-links { list-style: none; padding: 0; }
.plain-links li { padding: 8px 0; border-bottom: 1px solid var(--line); font: 600 20px var(--head); }
.plain-links a { color: var(--o); text-decoration: none; }

/* keep wide tables inside their scroll box on small screens */
.guide-body > * { min-width: 0; }
@media (max-width: 1100px) { .guide-body { grid-template-columns: minmax(0, 1fr); } }
.compare th { font-size: 12px; }