/* ========== WEEKEND MAGAZINE STYLES ========== */

/* Weekend Masthead */
.brand-link {
display: flex;
align-items: center;
gap: var(--md);
text-decoration: none;
}

.brand-logo {
width: 40px;
height: 40px;
border-radius: 8px;
}

.brand-name em {
font-style: italic;
font-weight: 400;
}

.edition-label {
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--burgundy);
}

.publication-date {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--ink-secondary);
}

/* Magazine Hero */
.magazine-hero {
margin-bottom: var(--xl);
}

.hero-image {
position: relative;
width: 100%;
height: 420px;
overflow: hidden;
border-radius: 0;
}

.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 100px 48px 40px 48px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.4) 40%,
rgba(0, 0, 0, 0.85) 100%
);
}

.hero-label {
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
background: var(--burgundy);
padding: 6px 14px;
border-radius: 2px;
display: inline-block;
margin-bottom: var(--md);
}

.hero-headline {
font-family: var(--serif);
font-size: 2.5rem;
font-weight: 600;
line-height: 1.15;
color: var(--white);
margin: 0 0 var(--sm) 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
max-width: 800px;
}

.hero-subtitle {
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 400;
line-height: 1.4;
color: rgba(255,255,255,0.9);
margin: 0;
max-width: 600px;
}

/* Weekend Grid - Same 3-column but different proportions */
.weekend-grid {
grid-template-columns: 280px 1fr 320px;
}

/* Key Dates Section */
.index-section {
margin-bottom: var(--xl);
}

.index-section .index-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: var(--sm);
border-bottom: 2px solid var(--burgundy);
margin-bottom: var(--md);
}

.index-title {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--burgundy);
margin: 0;
}

.index-subtitle {
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 500;
color: var(--ink-tertiary);
}

/* Key Dates List */
.key-dates-list {
display: flex;
flex-direction: column;
gap: var(--sm);
}

.key-date {
display: flex;
gap: var(--md);
padding: var(--sm) 0;
border-bottom: 1px solid var(--rule);
}

.key-date:last-child {
border-bottom: none;
}

.date-day {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 600;
color: var(--teal);
min-width: 50px;
}

.date-event {
font-family: var(--serif);
font-size: 0.9rem;
color: var(--ink);
line-height: 1.3;
}

/* Regional Labels */
.card-label.region-apac {
color: #D4A017;
}

.card-label.region-emea {
color: #2E7D32;
}

.card-label.region-americas {
color: #1565C0;
}

/* Magazine Article Styling */
.magazine-article {
max-width: 720px;
}

/* Section Image */
.section-image {
position: relative;
width: 100%;
max-width: 720px;
margin-bottom: var(--lg);
border-radius: 4px;
overflow: hidden;
}

.section-image img {
width: 100%;
height: auto;
display: block;
}

.image-caption {
font-family: var(--sans);
font-size: 0.75rem;
color: var(--ink-tertiary);
padding: var(--sm) 0;
display: block;
font-style: italic;
}

/* Article Figure (inline images) */
.article-figure {
margin: var(--xl) 0;
max-width: 720px;
}

.article-figure img {
width: 100%;
height: auto;
border-radius: 4px;
}

.article-figure figcaption {
font-family: var(--sans);
font-size: 0.75rem;
color: var(--ink-tertiary);
padding: var(--sm) 0;
font-style: italic;
}

/* Segments List */
.segments-list {
display: flex;
flex-direction: column;
gap: var(--md);
}

.segment-item {
padding: var(--sm) 0;
border-bottom: 1px solid var(--rule);
cursor: pointer;
transition: background 0.15s;
}

.segment-item:hover {
background: var(--paper-dark);
margin: 0 calc(var(--sm) * -1);
padding-left: var(--sm);
padding-right: var(--sm);
}

.segment-item:last-child {
border-bottom: none;
}

.segment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}

.segment-name {
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
}

.segment-change {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
}

.segment-change.positive {
color: var(--green);
}

.segment-change.negative {
color: var(--red);
}

.segment-change.neutral {
color: var(--ink-tertiary);
}

.segment-tokens {
font-family: var(--sans);
font-size: 0.7rem;
color: var(--ink-tertiary);
margin-bottom: 6px;
}

.segment-bar {
height: 4px;
background: var(--rule);
border-radius: 2px;
overflow: hidden;
}

.segment-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease;
}

.segment-fill.positive {
background: var(--teal);
}

.segment-fill.negative {
background: var(--red);
}

.segment-fill.neutral {
background: var(--ink-tertiary);
}

/* ===== THE GRAPH: Dry Powder on Sidelines ===== */
.the-graph {
    margin-bottom: var(--md);
}

.graph-header {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--md);
    padding-bottom: var(--sm);
    border-bottom: 2px solid var(--teal);
}

.graph-label {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
}

.graph-subtitle {
    font-family: var(--serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 2px;
}

.graph-chart {
    position: relative;
    height: 80px;
    margin-bottom: var(--sm);
}

.graph-svg {
    width: 100%;
    height: 100%;
}

.graph-grid {
    stroke: var(--rule);
    stroke-width: 1;
    stroke-dasharray: 2, 4;
}

.graph-area {
    fill: rgba(0, 128, 128, 0.1);
}

.graph-line {
    fill: none;
    stroke: var(--teal);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.graph-dot {
    fill: var(--teal);
}

.graph-y-labels {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 0.65rem;
    color: var(--ink-tertiary);
    padding: 2px 0;
    pointer-events: none;
}

.graph-current {
    display: flex;
    align-items: baseline;
    gap: var(--sm);
    margin-bottom: var(--xs);
}

.graph-value {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--teal);
    line-height: 1;
}

.graph-range {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--ink-tertiary);
}

.graph-insight {
    font-family: var(--serif);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ink-secondary);
    line-height: 1.4;
    margin: 0;
}

/* ===== Sectors Section - Compact Bar Style ===== */
.sectors-section {
margin-top: var(--lg);
}

.sectors-header-compact {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--md);
padding-bottom: var(--sm);
border-bottom: 2px solid var(--burgundy);
}

.sectors-label {
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--burgundy);
}

.sectors-label span {
color: var(--ink);
}

.sectors-baseline {
font-family: var(--serif);
font-size: 0.75rem;
font-style: italic;
color: var(--ink-tertiary);
}

.sectors-chart {
display: flex;
flex-direction: column;
}

/* Sector Row - mirrors relative-row style */
.sector-row {
display: grid;
grid-template-columns: 90px 52px 1fr 52px;
align-items: center;
gap: 8px;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
cursor: pointer;
transition: background 0.15s;
}

.sector-row:hover {
background: var(--paper-dark);
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
}

.sector-row:last-child {
border-bottom: none;
}

.sector-row .sector-name {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
color: var(--ink);
}

.sector-row .sector-change {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 500;
text-align: right;
color: var(--ink-secondary);
}

.sector-bar-container {
position: relative;
height: 16px;
background: var(--surface);
border-radius: 2px;
}

.sector-baseline {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--ink-tertiary);
}

.sector-bar {
position: absolute;
top: 3px;
height: 10px;
border-radius: 2px;
transition: width 0.3s ease;
}

.sector-bar.outperform {
left: 50%;
background: var(--teal);
}

.sector-bar.underperform {
right: 50%;
background: #c9a87c;
}

.sector-vs {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 500;
text-align: right;
}

.sector-vs.positive {
color: var(--teal);
}

.sector-vs.negative {
color: var(--ink-tertiary);
}

.sector-vs.baseline {
color: var(--ink-tertiary);
font-style: italic;
}

/* Sector Detail Panel */
.sector-detail-panel {
margin-top: var(--md);
padding: var(--md);
background: var(--white);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sector-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sm);
padding-bottom: var(--sm);
border-bottom: 1px solid var(--rule);
}

.sector-detail-name {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 700;
color: var(--burgundy);
}

.sector-detail-close {
font-size: 1.2rem;
color: var(--ink-tertiary);
cursor: pointer;
line-height: 1;
}

.sector-detail-close:hover {
color: var(--ink);
}

.sector-detail-panel .sector-weekly {
font-family: var(--serif);
font-size: 0.9rem;
font-style: italic;
line-height: 1.5;
color: var(--ink);
margin: 0 0 var(--sm) 0;
}

.sector-detail-panel .sector-drivers {
font-family: var(--sans);
font-size: 0.75rem;
color: var(--ink-secondary);
margin: 0 0 var(--sm) 0;
}

.sector-detail-panel .sector-about {
font-family: var(--serif);
font-size: 0.8rem;
color: var(--ink-tertiary);
margin: 0;
}

/* Weekend Market Mood - 9-box grid positioning */
.nine-box-wrapper {
position: relative;
}

.nine-box-grid {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
aspect-ratio: 1;
}

/* Mood dot positioning */
.mood-dot {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
transform: translate(-50%, 50%);
z-index: 10;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
display: none;
}

.mood-dot-teal {
background: var(--teal);
border: 2px solid white;
}

.mood-dot-burgundy {
background: var(--burgundy);
border: 2px solid white;
}

/* 7-day trail SVG overlay */
.mood-trail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}

.mood-trail .trail-line {
stroke-width: 3;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}

#trail-path-7day {
stroke-width: 3;
fill: none;
}

/* Current zone highlight */
.box.current-zone {
outline: 3px solid var(--ink);
outline-offset: -3px;
z-index: 2;
}

/* Legend dots */
.mood-legend {
display: flex;
gap: var(--lg);
margin-top: var(--md);
}

.legend-item {
display: flex;
align-items: center;
gap: var(--xs);
font-family: var(--sans);
font-size: 0.75rem;
color: var(--ink-secondary);
}

.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}

.legend-dot-burgundy {
background: var(--burgundy);
}

.legend-dot-teal {
background: var(--teal);
}

/* Site Footer */
.site-footer {
margin-top: var(--xl);
padding: var(--xl) 0;
border-top: 1px solid var(--rule);
text-align: center;
}

.site-footer p {
font-family: var(--sans);
font-size: 0.8rem;
color: var(--ink-tertiary);
margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
.weekend-grid {
grid-template-columns: 260px 1fr;
}

.context-sidebar {
display: none;
}

.hero-headline {
font-size: 2rem;
}
}

@media (max-width: 900px) {
.weekend-grid {
grid-template-columns: 1fr;
}

.article-index {
border-right: none;
border-bottom: 1px solid var(--rule);
padding-right: 0;
padding-bottom: var(--xl);
margin-bottom: var(--xl);
}

.hero-image {
height: 300px;
}

.hero-headline {
font-size: 1.75rem;
}

.hero-overlay {
padding: 60px 24px 24px 24px;
}
}

@media (max-width: 600px) {
.hero-image {
height: 250px;
}

.hero-headline {
font-size: 1.4rem;
}

.hero-subtitle {
font-size: 1rem;
}
}

/* ===== 7-Day Relative Performance ===== */
.relative-performance-7d {
margin-top: var(--lg);
padding-top: var(--lg);
border-top: 1px solid var(--rule);
}

.relative-header {
margin-bottom: var(--md);
}

.relative-label {
display: block;
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--burgundy);
margin-bottom: var(--xs);
}

.relative-chart {
display: flex;
flex-direction: column;
gap: 6px;
}

.relative-row {
display: grid;
grid-template-columns: 50px 48px 1fr 52px;
align-items: center;
gap: 8px;
padding: 6px 0;
}

.relative-row.market-row {
border-bottom: 1px solid var(--rule);
padding-bottom: 10px;
margin-bottom: 4px;
}

.rel-name {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
color: var(--ink);
}

.market-row .rel-name {
color: var(--ink-secondary);
}

.rel-change {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 500;
text-align: right;
color: var(--ink-secondary);
}

.rel-bar-container {
position: relative;
height: 16px;
background: var(--surface);
border-radius: 2px;
}

.rel-baseline {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--ink-tertiary);
}

.rel-bar {
position: absolute;
top: 3px;
height: 10px;
border-radius: 2px;
transition: width 0.3s ease;
}

.rel-bar.outperform {
left: 50%;
background: var(--teal);
}

.rel-bar.underperform {
right: 50%;
background: #c9a87c;
}

.rel-vs {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 500;
text-align: right;
}

.rel-vs.positive {
color: var(--teal);
}

.rel-vs.negative {
color: var(--ink-tertiary);
}

.rel-vs.baseline {
color: var(--ink-tertiary);
font-style: italic;
}

/* ===== THE MECHANISM - SPECIAL DESIGN ===== */

/* Left Column: Special card design for Mechanism */
.index-card[data-section="mechanism"] {
    background: linear-gradient(135deg, rgba(26, 95, 90, 0.08) 0%, rgba(26, 95, 90, 0.04) 100%);
    border-left: 3px solid var(--teal);
    margin-left: -12px;
    padding-left: 12px;
    border-radius: 0 6px 6px 0;
}

.index-card[data-section="mechanism"]:hover {
    background: linear-gradient(135deg, rgba(26, 95, 90, 0.12) 0%, rgba(26, 95, 90, 0.06) 100%);
}

.index-card[data-section="mechanism"] .card-label {
    color: var(--teal);
    font-weight: 700;
}

/* Reader: Simplified Mechanism Section */
.mechanism-section {
    margin-top: var(--lg);
    padding: var(--lg);
    background: linear-gradient(135deg, #f8f5f0 0%, #f0ebe3 100%);
    border-left: 4px solid var(--teal);
    border-radius: 0 8px 8px 0;
}

.mechanism-section .mechanism-timing {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teal);
    margin: 0 0 var(--lg) 0;
    padding-bottom: var(--md);
    border-bottom: 1px solid rgba(26, 95, 90, 0.2);
}

.mechanism-content {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink);
}

.mechanism-content p {
    margin-bottom: var(--md);
}

.mechanism-content h4 {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin: var(--lg) 0 var(--sm) 0;
}

.mechanism-content .watch-box {
    background: rgba(26, 95, 90, 0.08);
    padding: var(--md);
    border-radius: 6px;
    margin-top: var(--lg);
}

.mechanism-content .watch-box h4 {
    color: var(--teal);
    margin-top: 0;
}