@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

.playfair {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.noto-serif {
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.stix-two {
    font-family: "STIX Two Text", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.sans {
    font-family: "Lato", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.logo-wordmark {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    text-decoration: none;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


figcaption {
    color: #666666;
    font-size: .8888889em;
    line-height: 1.5;
    margin-top: 1em;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

/*
#panel {
    transform: translateX(-64px);
}*/

#panel.open,
#nav-panel.open {
    transform: translateX(0);
}

article p {
    padding-top: 1em;
}

article h1 {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 600;
    margin-top: 1.22rem;
}


article h2 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin-top: 1.22rem;
}

article h3 {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin-top: 1.1rem;
}

article a {
    text-decoration: underline;
    color: rgb(249, 115, 22);
}

.card ul,
.card-side ul,
.card-featured ul {
    margin-top: 0.5em;
    font-family: "Lato", sans-serif;
    font-size: .875rem;
    color: var(--color-charcoal-light);
    list-style: disc;
    padding-left: 1em;
}

.card-side ul {
    font-size: 0.8rem;
}

article ul,
.card ul,
.card-side ul,
.card-featured ul {
    list-style: disc;
    padding-left: 1em;
}

.card li::marker,
.card-side li::marker,
.card-featured li::marker {
    color: var(--color-terracotta);
    font-size: 0.7em;
}

.card li,
.card-side li,
.card-featured li {
    line-height: 1.4em;
    margin-top: 0.3em;
    color: var(--color-charcoal-light);
}

article ul {
    padding-top: 1em;
}

article ol {
    padding-top: 1em;
    padding-left: 1em;
    list-style: decimal;
}

article code {
    text-wrap: auto;
}

.content-section h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-bottom: 2.5rem;
    font-weight: 800;
}

.content-section h2 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 700;
    margin-top: 1.22rem;
}

.content-section a {
    text-decoration: underline;
    color: #c2410c;
}

.content-section p,
.content-section li {
    padding-top: 1em;
}

.content-section li {
    padding-left: 1em;
}

.content-section ol {
    list-style: decimal;
    padding-left: 1em;
}

article table {
    margin-top: 1rem;
    display: block;
    width: 100%;
    overflow-x: auto;
}

article th {
    background-color: #F4F4F5;
}

article th,
article td {
    border: 1px solid #D4D4D8;
    padding: 0.5rem;
}

.scroll-touch {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.scroll-touch::-webkit-scrollbar {
    display: none;
}

.shake {
    animation: jump-shaking 2.5s infinite;
}

@keyframes jump-shaking {
    0% {
        transform: translateX(0)
    }

    5% {
        transform: rotate(17deg)
    }

    10% {
        transform: rotate(-17deg)
    }

    15% {
        transform: rotate(17deg)
    }

    20% {
        transform: rotate(-17deg)
    }

    25% {
        transform: translateY(0) rotate(0)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

.heroicon-check-badge {
    display: inline-block;
    --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">\
            <path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />\
        </svg>');
    -webkit-mask: var(--svg);
    mask: var(--svg);
}


.article-body-wrapper-closed {
    height: 150px;
}

.article-body-closed {
    height: 100px;
    overflow: hidden;
}

.tab-component {
    scroll-margin-top: 46px;
}

.rtl {
    direction: rtl;
}


/* ============================================
   BOLD CONTEMPORARY THEME
   ============================================ */

/* Fallback variables — overridden per-publication via base.html inline style */
:root {
    --color-bg: #FFFFFF;
    --color-cream: #FFFFFF;
    --color-cream-dark: #F2F2F2;
    --color-charcoal: #0F0F0F;
    --color-charcoal-light: #555555;
    --color-terracotta: #E8290B;
    --color-terracotta-dark: #C0210A;
    --color-border: #E2E2E2;
    --color-nav-bg: #0F0F0F;
    --color-nav-fg: #ffffff;
}

/* Base */
html,
body {
    background-color: var(--color-bg) !important;
    color: var(--color-charcoal);
}

main {
    background-color: var(--color-bg) !important;
}

/* Navigation — brand masthead */
#main-nav {
    background-color: var(--color-nav-bg) !important;
    box-shadow: none !important;
    border-bottom: none;
    color: var(--color-nav-fg) !important;
}

#main-nav a,
#main-nav span {
    color: var(--color-nav-fg) !important;
}

#main-nav .playfair {
    font-weight: 800;
    letter-spacing: -0.02em;
}

#main-nav ul a {
    font-family: "Lato", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-nav-fg) !important;
    opacity: 0.6;
}

#main-nav ul a:hover {
    opacity: 1;
}

#main-nav ul a:hover,
#main-nav ul a.active {
    border-bottom-color: var(--color-nav-fg) !important;
}

/* Section nav gradient fade */
#main-nav .after\:bg-gradient-to-r::after,
#main-nav .before\:bg-gradient-to-r::before {
    display: none;
}

/* Article links — use clamped colour so they're always readable on white */
article a {
    color: var(--color-link);
}

.content-section a {
    color: var(--color-link);
}

/* Article headings — bold */
article h1 {
    font-size: 2.2rem;
    line-height: 2.6rem;
    font-weight: 700;
    color: var(--color-charcoal);
    margin-top: 1.5rem;
}

article h2 {
    font-weight: 700;
    color: var(--color-charcoal);
}

article h3 {
    font-weight: 600;
    color: var(--color-charcoal);
}

/* Article standfirst */
.article-standfirst {
    color: var(--color-charcoal-light);
    font-style: normal;
    font-weight: 500;
    border-left: 4px solid var(--color-terracotta);
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Card */
.card {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent;
}

.card figure {
    margin: 0 0 0.85rem 0;
    overflow: hidden;
}

.card figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.card:hover figure img {
    opacity: 0.85;
}

/* Section label */
.section-label {
    font-family: "Lato", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-link);
    display: block;
    margin-bottom: 0.35rem;
}

/* Card title */
.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45rem;
    color: var(--color-charcoal);
    margin-bottom: 0.4rem;
}

/* Card meta */
.card-meta {
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--color-charcoal-light);
}

/* Hub / list page headings */
.article-list h1.playfair {
    font-weight: 800;
    color: var(--color-charcoal);
    border-bottom: 3px solid var(--color-charcoal);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.article-list h2.playfair {
    font-weight: 800;
    color: var(--color-charcoal);
    border-top: 3px solid var(--color-terracotta);
    padding-top: 0.75rem;
    margin-top: 2rem;
    margin-bottom: 0;
}

/* Tags */
.tags li {
    background-color: var(--color-cream-dark) !important;
    color: var(--color-charcoal-light) !important;
}

/* Sources panel */
.bg-gray-50 {
    background-color: var(--color-cream-dark) !important;
    border-left: 4px solid var(--color-terracotta);
    padding-left: 1rem;
}

/* Pagination */
.article-list-pagination a {
    background-color: var(--color-charcoal) !important;
    color: #ffffff !important;
    border: none !important;
    font-family: "Lato", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0 !important;
}

/* Footer */
footer {
    background-color: color-mix(in srgb, var(--color-nav-bg) 25%, black) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: none;
}

/* ============================================
   MAGAZINE ASYMMETRIC GRID CARDS
   ============================================ */

/* Featured card */
.card-featured {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.card-featured-image {
    margin: 0 0 1rem 0;
    overflow: hidden;
}

.card-featured-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.card-featured:hover .card-featured-image img {
    opacity: 0.85;
}

.card-featured-title {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 2.2rem;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin-bottom: 0.5rem;
}

.card-featured-excerpt {
    font-size: 0.9rem;
    line-height: 1.55rem;
    color: var(--color-charcoal-light);
    margin-top: 0.4rem;
}

/* Side card */
.card-side {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.card-side:first-child {
    padding-top: 0;
}

.card-side:last-child {
    border-bottom: none;
}

.card-side-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4rem;
    color: var(--color-charcoal);
    margin-top: 0.2rem;
}

/* Fetch action buttons */
.btn-fetch-group {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.6rem;
    flex-wrap: wrap;
}

.btn-fetch-primary,
.btn-fetch-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-fetch-primary {
    background-color: var(--color-charcoal);
    color: #fff;
    border: 1px solid var(--color-charcoal);
}

.btn-fetch-primary:hover {
    background-color: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.btn-fetch-primary:disabled {
    background-color: var(--color-cream-dark);
    border-color: var(--color-cream-dark);
    color: var(--color-charcoal-light);
    cursor: not-allowed;
}

.btn-fetch-secondary {
    background-color: transparent;
    color: var(--color-charcoal);
    border: 1px solid var(--color-charcoal);
}

.btn-fetch-secondary:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.btn-fetch-secondary:disabled {
    color: var(--color-charcoal-light);
    border-color: var(--color-cream-dark);
    cursor: not-allowed;
}

.btn-fetch-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.badge-queued {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    font-family: "Lato", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    background-color: var(--color-cream-dark);
    color: var(--color-charcoal-light);
    border: 1px solid var(--color-cream-dark);
}