/* The shell shared by the three public research pages: /analyst/desk (Research),
   /analyst/portfolio (Portfolios) and /analyst/sector-map (Sector Map).
   One sub-nav, one hero, one paper background, and a cross-document view
   transition so moving between them fades instead of popping: the site header
   and the sub-nav keep their place, the hero text slides softly.
   Load it AFTER a page's own <style> so it wins. */

/* No page-change effect (Vincent, 2026-10-03: "why is there a new header effect when
   switching pages?"): the cross-document view transition and the hero text entrance
   that used to sit here are removed. Pages switch like the rest of the site. */

:root {
  --rs-burg: #66100c; --rs-burg-dk: #4e0c09; --rs-rose: #f0c9c5; --rs-paper: #faf8f4; --rs-line: #e7e1d6;
  --rs-ink: #161312; --rs-muted: #75706b;
  --rs-serif: 'Newsreader', Georgia, serif; --rs-sans: 'Chivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body { background: var(--rs-paper) !important; }

/* ---- Sub-navigation --------------------------------------------------------- */
.rs-sub { background: #fff; border-bottom: 1px solid var(--rs-line); font-family: var(--rs-sans); position: relative; z-index: 4; }
.rs-sub__in { display: flex; gap: 4px; overflow-x: auto; padding: 0 28px; max-width: 1180px; margin: 0 auto; scrollbar-width: none; }
.rs-sub__in::-webkit-scrollbar { display: none; }
.rs-sub a { position: relative; flex: none; font-size: .9rem; font-weight: 700; color: var(--rs-muted); text-decoration: none; padding: 16px 14px 14px; transition: color .2s; }
.rs-sub a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--rs-burg); transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.rs-sub a:hover { color: var(--rs-ink); }
.rs-sub a:hover::after { transform: scaleX(.4); background: var(--rs-line); }
.rs-sub a.is-on { color: var(--rs-ink); }
.rs-sub a.is-on::after { transform: scaleX(1); background: var(--rs-burg); }
.rs-sub a:first-child { margin-left: -14px; }

/* ---- Hero ------------------------------------------------------------------- */
.rs-hero { position: relative; z-index: 5; color: #fff; padding: 104px 0 96px; background: #140504; }
/* NOT overflow:hidden: the search dropdown must hang below the hero, over the page. The bark is clipped on its own layer instead. */
.rs-hero-bg { overflow: hidden; }
.rs-hero-bg { position: absolute; inset: 0; background: #140504 url('/analyst/assets/sector-map/covers/bark-hero.webp') center / cover no-repeat; }
.rs-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,4,3,.92) 0%, rgba(16,4,3,.72) 45%, rgba(16,4,3,.25) 100%), linear-gradient(0deg, rgba(16,4,3,.6), rgba(16,4,3,0) 40%); }
.rs-hero__in { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.rs-hero__kick { font-family: var(--rs-sans); font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #e8a49e; }
.rs-hero h1.rs-hero__h { font-family: var(--rs-serif); font-weight: 400; font-size: clamp(2.7rem, 5.6vw, 4.9rem); line-height: 1.04; letter-spacing: -.02em; margin: 26px 0 22px; color: #fff; max-width: 13.5em; }
.rs-hero__h em { font-style: italic; color: var(--rs-rose); }
.rs-hero__p { font-family: var(--rs-serif); font-size: 1.24rem; line-height: 1.6; color: #e3d8d4; max-width: 34em; margin: 0 0 34px; }
.rs-hero__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-hbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rs-sans); font-weight: 700; font-size: .92rem; padding: 13px 22px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s; }
.rs-hbtn svg { width: 16px; height: 16px; transition: transform .25s; }
.rs-hbtn:hover { transform: translateY(-2px); }
.rs-hbtn:hover svg { transform: translateX(3px); }
.rs-hbtn--p { background: #fff; color: var(--rs-burg); }
.rs-hbtn--p:hover { background: #f6f2ea; }
.rs-hbtn--g { color: #fff; border-color: rgba(255,255,255,.35); }
.rs-hbtn--g:hover { border-color: #fff; }
.rs-hero p.rs-hero__note, .rs-hero__note { font-family: var(--rs-sans); font-size: .88rem; color: #c9b9b4; margin: 22px 0 0; }
.rs-hero__note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.rs-hero__note a:hover { text-decoration-color: #fff; }

@media (max-width: 720px) {
  .rs-sub__in { padding: 0 16px; gap: 0; }
  .rs-sub a { font-size: .8rem; padding: 14px 9px 12px; }
  .rs-sub a::after { left: 9px; right: 9px; }
  .rs-sub a:first-child { margin-left: -9px; }
  .rs-hero { padding: 64px 0 64px; }
  .rs-hero-bg { background-image: url('/analyst/assets/sector-map/covers/bark-hero-sm.webp'); }
  .rs-hero__in { padding: 0 16px; }
}

/* "The programme" leaves the research section: marked as an outgoing link. */
.rs-sub a.rs-sub__ext { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.rs-sub a.rs-sub__ext .rs-ext { width: 13px; height: 13px; opacity: .7; transition: transform .25s, opacity .25s; }
.rs-sub a.rs-sub__ext:hover .rs-ext { transform: translate(2px,-2px); opacity: 1; }
.rs-sub a.rs-sub__ext::after { display: none; }

/* One-line titles (Vincent, 2026-10-01: "try to make all titles one line"). The longest,
   "Research from the AIC analyst desks", wrapped at 78px; a slightly smaller size keeps
   every publications title on one line on laptop and desktop widths. No nowrap: fifteen
   pages share this hero, and a longer title must wrap rather than run off the screen. */
.rs-hero h1.rs-hero__h { max-width: none; font-size: clamp(2.5rem, 4.4vw, 4.1rem); }

/* One hero position on every page (Vincent, 2026-10-03: "make sure left aligned and on
   same level on all pages"). Pages used to override the column (1200, 1400, 20px
   padding), so the hero text jumped between pages. This pins it: same column, same
   left edge, left aligned, everywhere. */
.rs-hero > .rs-hero__in { box-sizing: border-box !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 28px !important; padding-right: 28px !important; text-align: left !important; }
.rs-hero > .rs-hero__in > * { margin-left: 0 !important; text-align: left !important; }
@media (max-width: 720px) {
  .rs-hero > .rs-hero__in { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Compact hero (Vincent, 2026-10-03: "make these title #ae1f19, remove the other light
   cream color in all headers, remove subtitles and make banners smaller, since focus is
   on content"). The eyebrow is AIC red, the italic accent stays italic but in white,
   the lede is gone, and the banner is about half its old height. Buttons, search and
   jump links inside the hero stay. */
.rs-hero { padding: 52px 0 48px !important; }
.rs-hero .rs-hero__kick, .rs-hero .rs-kick { color: #ae1f19 !important; }
.rs-hero h1 em, .rs-hero .rs-hero__h em { color: #fff !important; }
.rs-hero h1, .rs-hero h1.rs-hero__h { font-size: clamp(2rem, 3.4vw, 3rem) !important; margin: 14px 0 0 !important; }
.rs-hero .rs-hero__p { display: none !important; }
.rs-hero .rs-hero__in > :not(.rs-hero__kick):not(.rs-kick):not(h1):not(.rs-hero__p):not(.rs-hero__back) { margin-top: 24px !important; }
@media (max-width: 720px) {
  .rs-hero { padding: 36px 0 34px !important; }
  .rs-hero h1, .rs-hero h1.rs-hero__h { font-size: clamp(1.8rem, 8vw, 2.3rem) !important; }
}

/* Filter and tab strips under the hero start where the hero text starts (Vincent,
   2026-10-03: "make filters start at same spot as for events"). Career Center tabs,
   Events filters and Publications filters share the hero column; each page already
   drops the first tab's left padding, so its text sits on the same edge as the title. */
.rv-tabs, .ev-filterbar__in, .publications-overview__filters { box-sizing: border-box !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 28px !important; padding-right: 28px !important; }
@media (max-width: 720px) {
  .rv-tabs, .ev-filterbar__in, .publications-overview__filters { padding-left: 16px !important; padding-right: 16px !important; }
}

/* The content under the hero sits in that same column (Vincent, 2026-10-03: "why can't
   we left align on the same width and place all content"). Each page had its own
   content column (1400/20 on Publications and Career Center, 1200/40 on the section
   pages, 1240/20 on Events), so section titles started up to 138px off the hero title.
   Boxed sections keep their inner padding: the box edge is what lines up. */
.rv-overview, .rv-cta-in,
.pub-section > .pub-section__heading, .pub-section__desc, .pub-section__headrow,
.pub-research__grid, .publications-overview__grid, .publications-overview__actions,
.publications-overview > .publications-overview__show-more, .pub-bar-wrap, #wmu-learn-more,
.aic-content, .mm-content, .prometheus-content, .ri-content,
.event-calendar-container, .past-events-highlights,
.ini-section, .pg-wrap {
  box-sizing: border-box !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 28px !important; padding-right: 28px !important;
}
.initiatives-page { padding-left: 0 !important; padding-right: 0 !important; }
/* Image banners are boxes: the box itself takes the column, edge on the text edge. */
.publications-showcase-compact { box-sizing: border-box !important; max-width: 1124px !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 720px) {
  .rv-overview, .rv-cta-in,
  .pub-section > .pub-section__heading, .pub-section__desc, .pub-section__headrow,
  .pub-research__grid, .publications-overview__grid, .publications-overview__actions,
  .publications-overview > .publications-overview__show-more, .pub-bar-wrap, #wmu-learn-more,
  .aic-content, .mm-content, .prometheus-content, .ri-content,
  .event-calendar-container, .past-events-highlights,
  .ini-section, .pg-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .publications-showcase-compact { margin-left: 16px !important; margin-right: 16px !important; }
}