/* ========================================================================== Fonts ========================================================================== */
 @font-face {
     font-family: "TiemposHeadline";
     src: url("https://magazine.westernu.ca/wp-content/themes/wam/assets/fonts/TiemposHeadline/TiemposHeadline-Light.woff2") format("woff2");
     font-weight: 300;
     font-style: normal;
     font-display: swap;
}
/* Horizontal-scroll guard */
[id^="rp2026"] > .row {
  margin-left: 0;
  margin-right: 0;
}
[id^="rp2026"] > .row > .wu-col-item {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   Link reset
   Template's global `a` rule forces its own purple color, font (with
   !important on font-family), weight, and line-height, plus its own
   hover/focus coloring. Within our own content we want links to look like
   plain text that just happens to be underlined — everything else should
   inherit from whatever paragraph/div wraps it. Focus still gets a visible
   outline to meet the accessibility floor (keyboard focus must stay
   visible) even though we're stripping the template's own :focus styling.
   ========================================================================== */
.rp2026-chapter-inner a,
.rp2026-chapter-inner a:link,
.rp2026-chapter-inner a:visited,
.rp2026-chapter-inner a:hover,
.rp2026-chapter-inner a:focus,
.rp2026-chapter-inner a:active {
  color: inherit !important;
  font: inherit !important;
  text-decoration: underline !important;
  background: none !important;
  text-underline-offset: 0.1em;
}
.rp2026-chapter-inner a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* ========================================================================== Utilities Visibility helpers. Breakpoint matches the "pc" cutoff used elsewhere (desktop split-hero etc.): 1200px and under counts as mobile/tablet. ========================================================================== */
 .rp2026-pc-only {
     display: none !important;
}
 .rp2026-mb-only {
     display: block !important;
}
 @media (min-width: 1201px) {
     .rp2026-pc-only {
         display: block !important;
    }
     .rp2026-mb-only {
         display: none !important;
    }
}
/* ========================================================================== Template overrides Resetting/hiding inherited Cascade template chrome around our content. ========================================================================== */
 .wu-section.wu-columns.wu-background-grey {
     background-color: unset !important;
}
 .wu-section {
     padding: 0 !important;
}
 .wu-section.breadcrumbs-container {
     display: none !important;
}
 .interior-title {
     display: none !important;
}
 header.sticky-top {
     position: static !important;
}
 @media (min-width: 1200px) {
     .rp2026-chapter-inner p {
         font-size: 1.2rem;
         line-height: 1.5625;
         margin-bottom: 1.5rem;
    }
}
/* ========================================================================== Drop cap First letter of every article's opening paragraph. Relies on the intro chapter being first in the DOM (the convention every article page follows), so this fires once per article, not once per chapter. font-size is in em so "3x" holds regardless of the paragraph's own size at any breakpoint. ========================================================================== */
 .rp2026-chapter-intro .rp2026-chapter-inner > p:first-child::first-letter {
     font-family: "TiemposHeadline", serif !important;
     font-weight: bold;
     font-size: 3em;
     line-height: 0.9;
     vertical-align: bottom;
}
/* ========================================================================== AddToAny share buttons Config script + loader stay inline per-page (load order matters). AddToAny injects its own default styling for .a2a_svg/a as a <style> tag placed right next to the widget at whatever point its async script finishes, which lands after this stylesheet in the cascade — so these overrides need !important to win regardless of that timing, since matching specificity. ========================================================================== */
 .a2a_default_style .a2a_svg {
     border-radius: 50% !important;
}
 .a2a_default_style {
     margin-bottom: 20px;
}
 .a2a_svg {
     padding: 3px !important;
}
 .a2a_default_style:not(.a2a_flex_style) a {
     padding: 6px !important;
     padding-left: 0 !important;
}
/* ========================================================================== Story header / hero Mobile-first: stacked title block by default;
 full-bleed split hero kicks in at desktop widths (see min-width: 1200px below). ========================================================================== */
 .storyInfo-container {
     padding: 20px;
}
 div.byline {
     margin-top: 50px;
}
 .storyInfo-divider {
     width: 13px;
     height: 0px;
     border: 1px solid #8f55e0;
}
 h1.storyInfo-mainTitle {
     margin-top: 20px;
}
 .storyInfo-container hr {
     border-top: 0.5px solid;
}
 @media (max-width: 1200px) {
     h1.storyInfo-mainTitle {
         font-size: 2rem;
         line-height: 2.5rem;
    }
     h2 {
         font-size: 1.5rem !important;
         line-height: 1.7rem !important;
    }
     h3 {
         font-size: 1.2rem !important;
         line-height: 1.4rem !important;
    }
}
 @media (min-width: 1200px) {
    /* .storyInfo-container hr {
         display: none;
    }
     */
     .hero {
         width: 100vw;
         margin: 0 auto;
         height: 105vh;
         position: relative;
         left: calc((100vw - 1170px) * -0.5);
         overflow: hidden;
    }
     .hero img {
         width: 100%;
         height: 100%;
         position: relative;
         bottom: 0;
         right: 0;
         z-index: 1;
         object-fit: cover;
    }
     .full-width-hero .storyInfo-container {
         margin: 0 auto;
         max-width: 1170px;
         z-index: 10;
         position: relative;
         bottom: 55vh;
         padding-right: 30vw;
    }
     .rp2026-hero-split .storyInfo-container {
         max-width: 650px;
    }
     .storyInfo-container.darkBg {
         color: #fff !important;
    }
     .storyInfo-container.darkBg h1.storyInfo-mainTitle {
         color: #fff !important;
    }
}
/* ========================================================================== Animated hero (sway figure) From img/stress/animated-hero/sway-demo.html — a small looping sprite animation layered on top of a big background illustration. Verified the percentages below against the real asset dimensions (cover-base@2x.webp is exactly 1/4 of the "true artwork" 10468x6500, hero-sway is 5 frames). .rp2026-hero-art is the artwork layer. It keeps the artwork's true aspect ratio and is zoomed/panned via the art-w / art-x / art-y custom properties — set those per page (crop/zoom is an art-direction choice, tune in-browser). .rp2026-hero-sway is a child of the art layer and is positioned as a PERCENTAGE OF THE ART LAYER (not the crop window), so it tracks correctly at any zoom/pan without recalculating numbers. .rp2026-hero-visual is the crop window, and is its own element rather than living directly on .hero — .rp2026-hero-art is position:absolute, which takes it out of flow, so if .storyInfo-container were a flow sibling of it directly inside .hero it would render with zero height pushed above it and overlap the art instead of sitting below it. Below 1200px .rp2026-hero-visual reserves its own space via aspect-ratio, so .storyInfo-container (a normal in-flow element) naturally lands below it. From 1200px up it switches to absolutely filling .hero, restoring the original full-bleed overlay look (.full-width-hero .storyInfo- container pulls itself up on top of it via position:relative + bottom). Usage: <section class="hero rp2026-hero-animated"> <div class="rp2026-hero-visual"> <div class="rp2026-hero-art"> <div class="rp2026-hero-sway" aria-hidden="true"></div> </div> </div> <div class="storyInfo-container">...title/caption content...</div> </section> And in the page's own <style> block, tune the crop (art-w, art-x, art-y): #hero .rp2026-hero-art {
     width 150%, x-offset 25%, y-offset 46% 
}
 ========================================================================== */
 .rp2026-hero-visual {
     position: relative;
     overflow: hidden;
     aspect-ratio: 1 / 1;
}
 @media (min-width: 1200px) {
     .rp2026-hero-visual {
         position: absolute;
         inset: 0;
         aspect-ratio: unset;
    }
}
 .rp2026-hero-art {
     position: absolute;
     top: var(--art-y, 50%);
     left: var(--art-x, 50%);
     translate: -50% -50%;
     width: var(--art-w, 100%);
     aspect-ratio: 10468 / 6500;
     background-image: url("https://www.schulich.uwo.ca/rapport/2026/img/stress/cover-base@2x.webp");
     background-position: center;
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 @media (min-resolution: 2dppx) {
     .rp2026-hero-art {
         background-image: url("https://www.schulich.uwo.ca/rapport/2026/img/stress/cover-base@4x.webp");
    }
}
 .rp2026-hero-sway {
     position: absolute;
     left: 69.2587%;
     top: 47.6923%;
     width: 6.496%;
     height: 16.7692%;
     background-image: url("https://www.schulich.uwo.ca/rapport/2026/img/stress/hero-sway@2x.webp");
     background-repeat: no-repeat;
     background-size: 500% 100%;
     background-position: 0% 0;
     animation: rp2026-hero-sway 2.4s steps(5, jump-none) infinite alternate;
}
 @media (min-resolution: 2dppx) {
     .rp2026-hero-sway {
         background-image: url("https://www.schulich.uwo.ca/rapport/2026/img/stress/hero-sway@4x.webp");
    }
}
 @keyframes rp2026-hero-sway {
     from {
         background-position: 0% 0;
    }
     to {
         background-position: 100% 0;
    }
}
 @media (prefers-reduced-motion: reduce) {
     .rp2026-hero-sway {
         animation: none;
         background-position: 0% 0;
    }
}
/* ========================================================================== Floated inline images Mobile-first: full width, no float, on phones. From 768px up, caps at 500px and floats so body text wraps around it. <img class="rp2026-img-left" src="..." alt="..."> <img class="rp2026-img-right" src="..." alt="..."> ========================================================================== */
 .rp2026-img-left, .rp2026-img-right {
     display: block;
     width: 100%;
     height: auto;
     margin: 0 0 20px;
}
 @media (min-width: 768px) {
     .rp2026-img-left, .rp2026-img-right {
         width: auto;
         max-width: 500px;
    }
     .rp2026-img-left {
         float: left;
         margin: 0 24px 16px -12rem;
    }
     .rp2026-img-right {
         float: right;
         margin: 0 0 16px 24px;
    }
}
/* ========================================================================== Info grid Mobile-first: stacked single column by default, becomes a 3-up grid from 768px. General-purpose — a list of short heading+paragraph items (tips, quick facts, etc.), not specific to any one article. <div class="rp2026-info-grid"> <div class="rp2026-info-grid-item"> <h3>Heading</h3> <p>Body text.</p> </div> ... </div> ========================================================================== */
 .rp2026-info-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     margin-bottom: 20px;
}
 @media (min-width: 768px) {
     .rp2026-info-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 32px 32px;
    }
}
/* ========================================================================== Pull quotes Ported from dev/old.html's p.quote / .big-quote-health-misinformation, rebuilt mobile-first and semantic (blockquote/cite instead of p/span). Base component — text-only pull quote: <blockquote class="rp2026-quote"> <p>&ldquo;
 Quote text.&rdquo;
 </p> <cite class="rp2026-quote-name">&mdash;
 Name, Title</cite> </blockquote> Media variant — portrait image beside the quote. Stacks on phones, becomes a side-by-side row from tablet width up. Add rp2026-quote-media-reverse to flip the image to the right: <div class="rp2026-quote-media"> <img class="rp2026-quote-media-img" src="..." alt="Portrait of Name"> <blockquote class="rp2026-quote"> <p>&ldquo;
 Quote text.&rdquo;
 </p> <cite class="rp2026-quote-name">&mdash;
 Name, Title</cite> </blockquote> </div> Left/right variants — from dev/old2.html's p.quote-left/quote-right: a narrower callout (top border instead of left) that sits in the normal text flow, full width on phones, shrinking to a 300px column aligned to that side of the article from tablet width up: <blockquote class="rp2026-quote quote-right"> <p>&ldquo;
 Quote text.&rdquo;
 </p> <cite class="rp2026-quote-name">&mdash;
 Name, Title</cite> </blockquote> ========================================================================== */
 .rp2026-quote {
     margin: 0 0 20px;
     padding: 0 0 0 20px;
     border-left: 5px solid #8f55e0;
}
 .rp2026-quote::before {
     content: "\201C";
     display: block;
     font-family: "TiemposHeadline", serif !important;
     font-size: 3.5rem;
     line-height: 1;
     color: #4f2683;
}
 .rp2026-quote p {
     margin: 0;
     font-family: "TiemposHeadline", serif !important;
     font-size: 1.35rem;
     line-height: 1.3;
}
 .rp2026-quote-name {
     display: block;
     margin-top: 16px;
     font-family: "BentonSans Book", sans-serif;
     font-size: 1rem;
     font-style: normal;
     color: #4f2683;
}
 .rp2026-quote-media {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-bottom: 20px;
}
 .rp2026-quote-media .rp2026-quote {
     margin-bottom: 0;
}
 .rp2026-quote-media-img {
     width: 100%;
     max-width: 240px;
     height: 240px;
     object-fit: cover;
     margin: 0 auto;
}
 @media (min-width: 1200px) {
     .storyInfo-container {
         padding-left: 0px;
    }
     .rp2026-quote p {
         font-size: 2rem;
         line-height: 1.25;
    }
     .rp2026-quote::before {
         font-size: 5rem;
    }
     .rp2026-quote-media {
         flex-direction: row;
         align-items: flex-start;
         gap: 24px;
    }
     .rp2026-quote-media-reverse {
         flex-direction: row-reverse;
    }
     .rp2026-quote-media-img {
         flex: 0 0 240px;
         margin: 0;
    }
     blockquote.rp2026-quote.rp2026-quote-left, blockquote.rp2026-quote.rp2026-quote-right {
         max-width: 300px;
         border-left: none !important;
         border-top: 5px solid #8f55e0;
         padding: 20px 0 0 0;
    }
     blockquote.rp2026-quote.rp2026-quote-left {
         float: left;
         margin: 2rem 2rem 5rem -12rem;
    }
     .rp2026-quote-right {
         float: right;
         margin: 2rem -12rem 3rem 5rem;
    }
}
/* ========================================================================== Story bottom — Previous/Next navigation across the whole issue, in rapport-2026-contents-web.xlsx order. Adapted from the 2025 print edition's story-bottom/.readMore component (thumbnail + storyInfo -container + Read More button, prev/next side by side). Rebuilt with this site's own pieces rather than the old liteBg/storyInfo -readMoreButton classes: the default .storyInfo-container is already light-background/dark-text (it isn't sitting on a hero image here), and Read More reuses .btn-western-purple-light, same as the section index pages. Lifted here from its own per-page prototype once every article page confirmed byte-identical CSS — only the prev/next content (thumb, tag, title, teaser, links) differs per page, so that stays inline. <section class="rp2026-story-bottom"> <div class="rp2026-story-bottom-share a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-icon-color="white,#4f2683"> <a class="a2a_button_linkedin"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_bluesky"></a> <a class="a2a_button_email"></a> </div> <div class="rp2026-readmore"> <div class="rp2026-readmore-prev"> <div class="rp2026-readmore-label">Previous Story</div> <a class="rp2026-readmore-thumb" href="..."><img src="..." alt=""></a> <div class="storyInfo-container"> <div class="storyInfo-header"> <div class="storyInfo-tag">Tag</div> <div class="storyInfo-divider"></div> </div> <h3 class="storyInfo-mainTitle">Heading</h3> <div class="storyInfo-subTitle">Teaser.</div> <a class="btn btn-western-purple-light" href="...">Read More</a> </div> </div> <div class="rp2026-readmore-next"> ... same shape ... </div> </div> </section> ========================================================================== */
 .rp2026-story-bottom {
    /* max-width: 900px;
     */
     margin: 60px auto 0;
     padding: 40px 20px;
     border-top: 1px solid rgba(32, 20, 54, 0.15);
}
 .rp2026-readmore {
     display: flex;
     flex-direction: column;
     gap: 40px;
}
 .rp2026-readmore-prev, .rp2026-readmore-next {
     flex: 1;
     min-width: 0;
}
 .rp2026-readmore-label {
     font-family: "BentonSans Medium", sans-serif;
    /* font-size: 0.85rem;
     */
     color: #4f2683;
     margin-bottom: 12px;
}
 .rp2026-readmore-thumb {
     display: block;
}
 .rp2026-readmore-thumb img {
     display: block;
     width: 100%;
     height: auto;
     aspect-ratio: 1200 / 650;
     object-fit: cover;
}
 .rp2026-readmore .storyInfo-container {
     padding: 16px 0 0;
}
/* !important because some article pages set their own broad heading-colour rules (e.g. #rp2026body h1..h6 on the genome feature) that would otherwise win on specificity and bleed into this navigational component, which should stay a consistent colour regardless of the article it's attached to. */
 .rp2026-readmore .storyInfo-mainTitle {
     color: #201436 !important;
     font-family: "BentonSans Medium", sans-serif !important;
     font-size: 1.4rem;
     line-height: 1.3;
     margin-top: 8px;
}
 .rp2026-readmore .btn-western-purple-light {
     margin-top: 16px;
}
 .rp2026-story-bottom-share {
     margin-top: 24px;
}
 @media (min-width: 768px) {
     .rp2026-readmore {
         flex-direction: row;
    }
     .rp2026-story-bottom {
         padding-left: 0;
         padding-right: 0;
    }
}
 .rp2026-chapter-pattern{
     filter: hue-rotate(var(--rp2026-pattern-hue, 0deg));
}

.rp2026-chapter-inner .rp2026-source-note {
  font-size: 0.9rem;
}

p.end-mark {
  margin: 0;
  margin-bottom: 1rem;
}

/* Magazine-style "end of article" mark: a solid circle sized in em so it
   always tracks the paragraph's own font-size (rather than relying on a
   Unicode glyph, whose rendered size varies unpredictably by font/browser
   and needs a licensed font — magazine.westernu.ca's own end-mark uses
   ABC Monument Grotesk, which isn't available to this project).
   Sits on the baseline, one word-space after the last line of copy, and
   inherits the paragraph's color via currentColor. */
p.end-mark:after {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.15em;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: baseline;
}