/* article css */

/* ===== Cancerworld typography tokens =====
   Mirrors the live cancerworld.net article page:
   body = Crimson Text serif at 1.2rem / line-height 1.75 / letter-spacing 0,
   headings = Barlow 600,
   excerpts/callouts = Lato. */
:root {
    --font-article: "Crimson Text", Georgia, "Times New Roman", Times, serif;
    --font-heading: "Barlow", "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-excerpt: "Crimson Text", Georgia, "Times New Roman", Times, serif;
    --font-callout: "Lato", "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --article-color: #1f2937;
    --article-blockquote-color: #0076b1;
}

/* ===== Article Typography ===== */
#category-title,
#oncocalendar-title,
#tag-title,
#archive-title,
#search-title,
#grants-type,
#newsfeed-title {
    margin: clamp(18px, 1.5vw, 36px) !important;
}

/* Article hero title (rendered outside .prose in single.php).
   Font-weight and tracking come from existing Tailwind utility classes;
   we only override the font family. */
.single .article h1,
.single-oncologist .article h1 {
    font-family: var(--font-heading);
}

#article-body,
#page-body,
.prose {
    font-family: var(--font-article);
    font-size: 1.2rem;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--article-color);
}

/* Headings (Barlow, semi-bold) */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
#article-body h1,
#article-body h2,
#article-body h3,
#article-body h4,
#article-body h5,
#article-body h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: clamp(28px, 2.4vw, 44px) 0 clamp(12px, 1.2vw, 20px);
    color: #111827;
}

.prose h1 { font-size: clamp(1.9rem, 4.2vw, 2.4rem); }
.prose h2 { font-size: clamp(1.55rem, 3.4vw, 1.95rem); }
.prose h3 { font-size: clamp(1.3rem, 2.6vw, 1.55rem); }
.prose h4 { font-size: clamp(1.15rem, 2vw, 1.3rem); }
.prose h5 { font-size: clamp(1.05rem, 1.6vw, 1.15rem); }
.prose h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }

.prose p {
    font-family: var(--font-article);
    font-size: 1.2rem;
    line-height: 1.75;
    letter-spacing: 0;
    margin: 0 0 clamp(18px, 1.8vw, 28px);
    color: var(--article-color);
}

.prose p:first-child { margin-top: 0; }

.prose strong,
.prose b { font-weight: 700; }

.prose em,
.prose i { font-style: italic; }

/* Images & figures */
#article-body img,
#article-body svg,
#page-body img,
#page-body svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2.5% 0;
    padding: clamp(4px, 1.5vw, 8px);
    border-radius: 1rem;
    background: #E8F6F2;
    background: linear-gradient(45deg, rgba(232, 246, 242, 0.61) 0%, rgba(238, 242, 255, 1) 25%, rgba(232, 246, 242, 1) 50%, rgba(245, 245, 245, 1) 75%, rgba(242, 242, 242, 1) 100%);
}

/* ===== Left-bleed images on the article details page =====
   On wide viewports (≥ xl), default images extend ~150–200px to the LEFT of
   the article column while keeping their RIGHT edge flush with the prose
   right edge — making the image visually larger without breaking the reading
   column. Floated/aligned images keep their normal behaviour. */
@media (min-width: 1280px) {
    #article-body > figure:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.aligncenter),
    #article-body > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.aligncenter),
    #article-body > p:has(> img:only-child),
    #article-body > p:has(> a:only-child > img:only-child),
    #article-body > p:has(> img:only-child) + p.img-caption,
    #article-body > p:has(> a:only-child > img:only-child) + p.img-caption,
    #page-body > figure:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.aligncenter),
    #page-body > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull):not(.aligncenter),
    #page-body > p:has(> img:only-child),
    #page-body > p:has(> a:only-child > img:only-child),
    #page-body > p:has(> img:only-child) + p.img-caption,
    #page-body > p:has(> a:only-child > img:only-child) + p.img-caption {
        margin-left: clamp(-200px, -14vw, -150px);
        width: calc(100% + clamp(150px, 14vw, 200px));
        max-width: none;
    }

    /* Caption under a left-bled image: align text to the LEFT of the image
       so the caption sits flush with the image's new left edge. */
    #article-body > p:has(> img:only-child) + p.img-caption,
    #article-body > p:has(> a:only-child > img:only-child) + p.img-caption,
    #page-body > p:has(> img:only-child) + p.img-caption,
    #page-body > p:has(> a:only-child > img:only-child) + p.img-caption {
        text-align: left;
        padding-left: 0;
    }
}

#article-body .img-caption,
#page-body .img-caption {
    font-family: var(--font-callout);
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0 0 5px 10px;
    color: #3e444a;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    margin-top: -5px;
}

#article-body .img-caption b, #article-body .img-caption strong,
.prose .img-caption b, .prose .img-caption strong {
    font-weight: 600;
}

.prose figure {
    margin: clamp(24px, 3vw, 40px) 0;
}

.prose figcaption {
    font-family: var(--font-callout);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.5em;
    color: #555;
    text-align: center;
    font-style: italic;
}

/* Lists */
.prose ul,
.prose ol {
    margin: 0 0 clamp(18px, 1.8vw, 28px);
    padding-left: 1.6em;
    line-height: 1.75;
    color: var(--article-color);
    font-family: var(--font-article);
    font-size: 1.2rem;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li {
    margin-bottom: 0.5em;
}

.prose li::marker {
    color: #6b7280;
}

.prose li > ul,
.prose li > ol {
    margin: 0.5em 0 0.5em;
}

.prose dl {
    margin: 0 0 clamp(18px, 1.8vw, 28px);
}

.prose dt {
    font-family: var(--font-heading);
    font-weight: 600;
    margin-top: 1em;
}

.prose dd {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}

/* Blockquotes — soft tinted card, cancerworld.net colour (#0076b1) accent,
   Crimson italic body. Distinct from running paragraphs but restrained. */
.prose blockquote {
    position: relative;
    margin: clamp(32px, 3.6vw, 56px) 0;
    padding: clamp(22px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px) clamp(22px, 2.6vw, 36px) clamp(40px, 4.2vw, 64px);
    background: rgba(0, 118, 177, 0.05);   /* very pale brand blue */
    border-left: 4px solid var(--article-blockquote-color);
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--article-blockquote-color);
    font-family: var(--font-article);
    font-style: italic;
    font-weight: 500;
    line-height: 1.55;
}

/* Decorative opening quotation mark — sits behind the text, very low opacity */
.prose blockquote::before {
    content: "\201C";                       /* left double quotation mark */
    position: absolute;
    top: clamp(-8px, -0.6vw, -4px);
    left: clamp(10px, 1.2vw, 18px);
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(3.5rem, 6vw, 5rem);
    line-height: 1;
    color: var(--article-blockquote-color);
    opacity: 0.18;
    pointer-events: none;
}

.prose blockquote p {
    color: var(--article-blockquote-color);
    font-size: clamp(1.12rem, 1.9vw, 1.3rem);
    line-height: 1.55;
    margin: 0 0 0.7em;
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

/* Attribution: a <cite> or <footer> in the blockquote gets a small, non-italic,
   small-caps caption styling for clear distinction from the quoted text. */
.prose blockquote cite,
.prose blockquote footer {
    display: block;
    margin-top: 0.8em;
    font-family: var(--font-callout);
    font-style: normal;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 118, 177, 0.75);
}

.prose blockquote cite::before,
.prose blockquote footer::before {
    content: "\2014\00a0";                  /* em-dash + nbsp */
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose blockquote p::first-letter {
    text-transform: uppercase;
}

.prose blockquote p:before,
.prose blockquote p:after {
    content: none !important; /* remove pseudo-element quotes */
}

/* Tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 3% 0;
}

.prose th,
.prose td {
    text-align: left;
    padding: 1.5%;
    vertical-align: top;
}

.prose thead th {
    font-weight: 700;
}

.prose tbody tr:nth-child(odd) {
    background: #fafafa;
}

/* Horizontal rule */
.prose hr {
    height: 0.4%;
    background: #eee;
    margin: 4% 0;
    border: 0;
}

.prose sup,
.prose sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

.prose sup {
    top: -0.5%;
}

.prose sub {
    bottom: -0.5%;
}

/* Links — cancerworld-style: coloured, underlined inline, no underline on hover */
.prose a {
    color: #0076b1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(0, 118, 177, 0.4);
    font-weight: inherit;
    letter-spacing: inherit;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.prose a:hover,
.prose a:focus {
    color: #005a87;
    text-decoration-color: currentColor;
}

/* Drop cap — apply with class "has-drop-cap" or .prose p.dropcap on first paragraph */
.prose p.has-drop-cap:first-of-type::first-letter,
.prose > p:first-of-type.dropcap::first-letter {
    font-family: var(--font-heading);
    font-weight: 700;
    float: left;
    font-size: 3.6em;
    line-height: 0.9;
    margin: 0.05em 0.12em 0 0;
    color: #111827;
}

.prose .col {
    flex: 1 1 48%;
    padding: 1%;
    border-radius: 1%;
    background: #f9f9fb;
}

.prose .responsive_video {
    position: relative;
    display: block;
    padding-bottom: 56.25% !important;
    margin-bottom: 20px !important;
    width: 100%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.prose p video iframe, .prose p video object, .prose p video embed, .responsive_video iframe, .responsive_video embed, .responsive_video object {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;

}

.prose .faq-section {
    padding-bottom: 0;
    border: 0 dashed rgb(49 46 129 / 20%);
    display: block;
    background-color: #fff;
}

.prose .faq-section h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-top: 0;
    border-radius: clamp(6px, 1.5vw, 12px);
    padding: 0;
    margin-bottom: 8px;
}

.prose .faq-item {
    padding: clamp(10px, 1.5vw, 12px) 0;
    display: block;
}

.prose .faq-item h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin: 0;
}

/* ===== Front-page / listing cards =====
   Card titles use Barlow (heading face), excerpts use the same Crimson Text
   serif as the article body, so the home page reads as a coherent extension
   of the article voice. */
.cw-front-hero h3,
.cw-latest-news h2,
.cw-latest-news h3,
.cw-contents-section h2,
.cw-contents-section h3,
.cw-article-teaser__title,
.cw-listing-title,
.cw-article-title {
    font-family: var(--font-heading);
}

.cw-article-title {
    letter-spacing: -0.02em;
}

.cw-listing-title {
    letter-spacing: -0.015em;
}

/* Burger overlay search — bordered wrapper, soft focus ring */
.cw-search-wrap {
    border: 1px solid #cbd5e1; /* slate-300 — visible at rest */
    border-radius: 0.625rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cw-search-wrap:hover {
    border-color: #94a3b8; /* slate-400 */
}

.cw-search-wrap:focus-within {
    border-color: #64748b; /* slate-500 */
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.12); /* soft slate halo */
}

/* Kill all browser focus chrome on the input itself — the ring lives on the wrapper. */
#cw-overlay-search,
#cw-overlay-search:focus,
#cw-overlay-search:focus-visible,
#cw-overlay-search:active {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== Listing-page article teaser =====
   Image on the LEFT, content on the RIGHT on ≥ md (768px). Stacked below.
   Layout lives here rather than in Tailwind classes so the markup stays
   independent of the compiled utility CSS. */
.cw-article-teaser {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.cw-article-teaser:last-child {
    border-bottom: 0;
}

.cw-article-teaser__image {
    display: block;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.cw-article-teaser__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
}

.cw-article-teaser__title {
    /* font-family is set in the heading rule above; sizes come from utilities */
}

.cw-article-teaser__meta time {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-callout);
}

@media (min-width: 768px) {
    .cw-article-teaser {
        flex-direction: row;
        gap: 1.75rem;
        padding: 2rem 0;
    }
    .cw-article-teaser__image {
        width: 42%;
    }
}

@media (min-width: 1024px) {
    .cw-article-teaser {
        gap: 2.25rem;
        padding: 2.5rem 0;
    }
    .cw-article-teaser__image {
        width: 45%;
    }
    .cw-article-teaser__meta {
        margin-top: auto;
    }
}

.cw-excerpt {
    font-family: var(--font-excerpt);
    letter-spacing: 0;
    color: #334155;
}

.cw-excerpt-sm {
    font-size: 1rem;
    line-height: 1.55;
}

.cw-excerpt-lg {
    font-size: 1.125rem;
    line-height: 1.65;
}

.prose .faq-item p {
    margin: clamp(4px, 1.5vw, 8px) 0;
    font-style: italic;
}

.tag-block {

}

.post-categories a {
    text-transform: capitalize;
!important
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pagination {
    width: 100%;
}

.pagination .page-numbers .current {
    background: #322f82;
    color: #fff;
    padding: 4px;
    border-radius: 8px;
}

.pagination .page-numbers a {
    background: #ffffff;
    padding: 4px;
    border-radius: 8px;
}
.prose blockquote.tiktok-embed, .prose blockquote.twitter-tweet {
    border:0!important;
    padding:0!important;
    margin:0!important;
    max-width:320px!important;
    background: transparent !important;
    border-radius: 0 !important;
}

.prose blockquote.tiktok-embed::before,
.prose blockquote.twitter-tweet::before {
    content: none;
}

#article-body blockquote img, #page-body blockquote img {
    display: none !important;
}

.onco-green{
    color: #03C988 !important;
    text-decoration-color: #03C988 !important;
}

.hover-card p,
.hover-card .category,
.hover-card span,
.hover-card h3,
.hover-card h2,
.hover-card h4,
.hover-card time,
.hover-card img {
    opacity: 1;
    transition: opacity 0.045s;
}

.hover-card:hover p,
.hover-card:hover .category,
.hover-card:hover span,
.hover-card:hover h3,
.hover-card:hover h2,
.hover-card:hover h4,
.hover-card:hover time {
    opacity: 0.85;
}

.hover-card:hover .location * {
    text-decoration: none;
}

.swiper-slide {
    max-width: 564px;
}


.special_mega_menu li:hover a {
    text-decoration: underline;
}

.hover-card:hover time span {
    text-decoration: none;
    opacity: 1;
}

.hover-card:hover p,
.hover-card:hover span,
.hover-card:hover h3,
.hover-card:hover h2,
.hover-card:hover h4 {
    text-decoration: underline;
}

.hover-card:hover img {
    opacity: 0.95;
}

.hover-title {
    color: inherit; /* keeps default color */
    transition: color 75ms ease;
}

.hover-title:hover {
    color: #1e1b4b; /* Tailwind's indigo-950 */
    text-decoration: underline;
}


.dropdown-container .selected-label {
    font-weight: bold;
    color: #020617;
}

.dropdown-container .selected-item {
    font-weight: 500;
    background-color: #f3f4f6;
    pointer-events: none;
    cursor: default;
}

.dropdown-container .dropdown-item {
    padding: 0.5rem 1rem;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    -webkit-tap-highlight-color: transparent;
}

/* Hover state */
.dropdown-container .dropdown-item:hover,
.dropdown-container .dropdown-item:focus {
    background-color: #F9FAFB; /* hover:bg-gray-50 */
    outline: none;
}

/* Optional: maintain smooth focus-visible styling for keyboard users */
.dropdown-container .dropdown-item:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); /* subtle outline (optional) */
    border-radius: 0.125rem;
}

.dropdown-container li {
    cursor: pointer;
}

html, body {
    scroll-behavior: smooth;
}

.filter-color:after {
    content: "";
    position: absolute;
    opacity: 9%;
    inset: 0;
    background: black;
    z-index: 20;
}

.single-oncologist .article .post-thumbnail img {
    border-radius: 999px;
    max-width: 400px;
    aspect-ratio: 1/1;
}

#box_calendar {
    --tw-bg-opacity: 1;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    background-color: rgb(49 46 129/var(--tw-bg-opacity, 1));
    border-radius: 1rem;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    max-width: 24rem;
    overflow: hidden;
    padding: 1rem
}

#calendar-widget {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%
}

@media (min-width: 640px) {
    #calendar-widget {
        padding: 0
    }
}

@media (min-width: 768px) {
    #calendar-widget {
        padding: 1rem
    }
}
#calendar-widget > div:first-child {
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: rgb(49 46 129/var(--tw-bg-opacity, 1));
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    justify-content: space-between;
    margin: -1rem -1rem 1rem;
    padding: .75rem 1rem
}

#calendar-widget a, #calendar-widget > div:first-child {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

#calendar-widget a {
    flex: 1 1 0%;
    text-align: center;
    text-decoration-line: none
}

#calendar-widget section {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 1.75rem;
    margin-top: 1rem;
    width: 100%
}

.header-calendar #calendar-widget .fa-angle-double-left, .header-calendar #calendar-widget .fa-angle-double-right, .header-calendar #calendar-widget .fa-angle-left, .header-calendar #calendar-widget .fa-angle-right {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

#calendar-widget span[onclick] {
    border-radius: .375rem;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
    padding: .5rem .75rem;
    transition-duration: .2s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#calendar-widget span[onclick]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 48 163/var(--tw-bg-opacity, 1))
}

.header-calendar {
    border-collapse: collapse;
    width: 100%
}

.header-calendar thead {
    padding-bottom: 1rem
}

.header-calendar thead th {
    color: hsla(0, 0%, 100%, .4);
    font-size: .875rem;
    font-weight: 300;
    line-height: 1.25rem;
    text-align: center
}

.header-calendar tbody td:not(.pad):hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 48 163/var(--tw-bg-opacity, 1))
}

.header-calendar tbody td.pad {
    color: rgb(156 163 175/var(--tw-text-opacity, 1))
}

.header-calendar tbody td a {
    border-radius: 9999px;
    display: block;
    font-weight: 500;
    height: 2.5rem;
    line-height: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    width: 2.5rem
}

.header-calendar #calendar-widget #today a, .header-calendar tbody td a {
    --tw-text-opacity: 1;
    color: rgb(49 46 129/var(--tw-text-opacity, 1))
}

.header-calendar caption, .header-calendar tfoot, .wp-calendar-nav {
    display: none
}

.header-calendar tbody td {
    --tw-text-opacity: 1;
    border-radius: 9999px;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    cursor: pointer;
    font-size: .875rem;
    height: 2.5rem;
    line-height: 1.25rem;
    text-align: center;
    transition-duration: .15s;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    vertical-align: middle;
    width: 2.5rem
}

.header-calendar tbody td.pad {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity, 1));
    cursor: default
}

.header-calendar tbody td.pad:hover {
    background-color: transparent
}

.header-calendar tbody td#today {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    border-radius: 9999px;
    color: rgb(49 46 129/var(--tw-text-opacity, 1));
    font-weight: 600
}

/* =========================================================================
 * Issues — listing card, single-issue hero, attached articles, recent strip
 * ===================================================================== */

/* Card (used on /magazine/ and "Recent issues" strip) */
.cw-issue-card {
    color: inherit;
    text-decoration: none;
}

.cw-issue-card__covers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 0.6vw, 12px);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f1f5f9;
    box-shadow: 0 6px 20px -8px rgba(15, 23, 42, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cw-issue-card:hover .cw-issue-card__covers {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(15, 23, 42, 0.28);
}

.cw-issue-card__cover {
    position: relative;
    background: #e2e8f0;
    overflow: hidden;
}

.cw-issue-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cw-issue-card:hover .cw-issue-card__cover img {
    transform: scale(1.03);
}

.cw-issue-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-callout);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: center;
    padding: 0.5rem;
}

.cw-issue-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: clamp(12px, 1.2vw, 18px) 0 4px;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    transition: color 0.2s ease;
}

.cw-issue-card:hover .cw-issue-card__title {
    color: #e30714;
}

.cw-issue-card__date {
    display: block;
    font-family: var(--font-callout);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

/* ----------------------------------------------------------------------
 * Single-issue hero — two big covers side by side, then meta block.
 * Resets the global `header { text-align: center }` rule from style.css
 * so content can opt-in to its own alignment.
 * ------------------------------------------------------------------- */
.cw-issue-hero {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 0 0 clamp(32px, 4vw, 56px);
    text-align: left;
}

/* Centered editorial header for the meta block (eyebrow + title); the
   description and actions opt back to left alignment for readability. */
.cw-issue-hero__meta {
    text-align: center;
}

.cw-issue-hero__description {
    text-align: left;
}

.cw-issue-hero__actions {
    text-align: center;
}

.cw-issue-hero__covers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1vw, 20px);
    width: 100%;
    margin: 0 0 clamp(28px, 3.5vw, 56px);
    line-height: 0; /* prevent rogue baseline gap below the images */
}

/* Empty-cover placeholder (rendered when one cover is missing so the
   side-by-side proportion is preserved). */
.cw-issue-hero__cover--empty {
    background: #f1f5f9;
    aspect-ratio: 1 / 1.27; /* matches a typical magazine cover ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-callout);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: center;
    padding: 1rem;
}

.cw-issue-hero__cover {
    margin: 0;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: 0 30px 60px -25px rgba(15, 23, 42, 0.45),
                0 12px 24px -12px rgba(15, 23, 42, 0.25);
}

.cw-issue-hero__cover img {
    width: 100%;
    height: auto;
    display: block;
}

.cw-issue-hero__eyebrow {
    font-family: var(--font-callout);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e30714;
    margin-bottom: clamp(10px, 1vw, 16px);
}

.cw-issue-hero__title {
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 clamp(16px, 1.6vw, 24px);
}

.cw-issue-hero__description {
    color: #334155;
    font-family: var(--font-article);
    font-size: 1.1rem;
    line-height: 1.7;
    /* style.css ships `.prose { max-width: 65ch }` from the Tailwind
       Typography plugin — unset it so the description fills the meta column. */
    max-width: none;
    width: 100%;
}

.cw-issue-hero__description p {
    margin: 0 0 0.85em;
}

.cw-issue-hero__description p:last-child {
    margin-bottom: 0;
}

.cw-issue-hero__actions {
    margin-top: clamp(20px, 2vw, 28px);
}

.cw-issue-download {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.4rem;
    background: #0f172a;
    color: #fff;
    font-family: var(--font-callout);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cw-issue-download:hover,
.cw-issue-download:focus {
    background: #e30714;
    color: #fff;
}

.cw-issue-download__size {
    font-weight: 500;
    opacity: 0.75;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------------
 * Attached articles + recent issues — generic section heading + lists
 * ------------------------------------------------------------------- */
.cw-section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    letter-spacing: -0.015em;
    color: #0f172a;
    margin: 0 0 clamp(16px, 1.8vw, 28px);
}

.cw-issue-articles {
    padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 48px);
    border-top: 1px solid #e5e7eb;
}

.cw-issue-articles__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cw-issue-article__thumb {
    flex-shrink: 0;
    width: 140px;
    height: 105px;
    overflow: hidden;
    background: #f1f5f9;
    border-radius: 0.25rem;
}

@media (min-width: 768px) {
    .cw-issue-article__thumb {
        width: 200px;
        height: 150px;
    }
}

.cw-issue-article__eyebrow {
    font-family: var(--font-callout);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e30714;
    margin: 0 0 0.4em;
}

/* Download CTA shown between articles and recent issues */
.cw-issue-download-cta {
    padding: clamp(32px, 4vw, 56px) 0;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.cw-issue-download-cta__inner {
    text-align: center;
}

.cw-issue-download-cta .cw-section-title {
    text-align: center;
    margin-bottom: 0.75rem;
}

.cw-issue-download-cta__lead {
    font-family: var(--font-article);
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
    max-width: 36rem;
    margin: 0 auto 1.5rem;
}

.cw-issue-download--lg {
    padding: 1rem 1.75rem;
    font-size: 0.9rem;
}

.cw-issue-recent {
    padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5vw, 80px);
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.cw-issue-recent__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 3vw, 48px) clamp(24px, 2.4vw, 40px);
}

@media (min-width: 640px) {
    .cw-issue-recent__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .cw-issue-recent__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Recent issues header — opt out of the global `header { text-align: center }`. */
.cw-issue-recent > .fluid-container > header,
.cw-issue-articles header,
.cw-issue-download-cta header {
    text-align: left;
}

.cw-issue-recent .cw-issue-card__title {
    font-size: 1rem;
}

.cw-issue-recent .cw-issue-card__date {
    font-size: 0.75rem;
}

/* Make absolutely sure the .prose block inside the hero description doesn't
   inherit massive article-body sizes (font) or the 65ch cap (max-width)
   from style.css's typography-plugin .prose rule. */
.cw-issue-hero__description.prose {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: none;
    width: 100%;
}

/* =========================================================================
 * Main horizontal nav — dropdown caret affordance + show/hide with header
 * ===================================================================== */
.cw-nav-caret {
    display: inline-block;
    margin-top: 1px; /* optical centering against the cap-height of the label */
    color: currentColor;
    opacity: 0.65;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.main-nav-item:hover > a .cw-nav-caret,
.main-nav-item:focus-within > a .cw-nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* The white menu strip belongs to the "compact" header state.
   While the red masthead is still expanded (front page, not scrolled
   past the masthead yet) it fades out; on every other state — non-hero
   pages, or front page after scroll — it sits sticky right under the
   red header. Opacity-only transition avoids the sub-pixel jump that
   transform-on-sticky produced. */
.main-nav {
    position: sticky;
    top: var(--header-h, 56px);
    z-index: 40;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

.site-header.has-hero:not(.is-scrolled) ~ .main-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* delay the visibility flip until the opacity fade-out finishes */
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}

/* =========================================================================
 * Infinite scroll — loader spinner shown below the article list while the
 * next page is being fetched.
 * ===================================================================== */
.cw-infinite-loader {
    display: flex;
    justify-content: center;
    padding: 2rem 0 1.5rem;
    min-height: 4rem;
}

.cw-infinite-loader:not(.is-loading) .cw-infinite-spinner {
    visibility: hidden;
}

.cw-infinite-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #e5e7eb;
    border-top-color: #e30714;
    border-radius: 50%;
    animation: cw-infinite-spin 0.85s linear infinite;
}

@keyframes cw-infinite-spin {
    to { transform: rotate(360deg); }
}

/* Page chunks — used by the infinite-scroll URL tracker. No visual layout. */
.cw-page-chunk {
    display: contents;
}