/* A quieter photo-led layer over the expressive Bangro direction. */
:root {
  --ink: #162424;
  --paper: #f5f1e9;
  --sand-wash: #dcc799;
  --sea-deep: #123c3e;
  --orange: #ca694a;
  --teal: #2c7773;
  --yellow: #e2b84e;
  --line: color-mix(in srgb, var(--ink) 20%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 12%, transparent);
  --display: clamp(3.15rem, 6.4vw, 7rem);
  --h1: clamp(2.65rem, 5.5vw, 5.9rem);
  --h2: clamp(1.85rem, 3.3vw, 3.5rem);
}

html, body { overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: 1.62; }
body::before { display: none; }
h1, h2, h3 { font-weight: 400; text-transform: none !important; }
.eyebrow, .section-label > span, .section-label > p, .article-rail p, .article-rail a, .footer-note, .mast-meta { font-weight: 600; letter-spacing: .12em; }

.site-header { background: color-mix(in srgb, var(--paper) 94%, transparent); }
.masthead { min-height: 74px; border-bottom: 1px solid var(--line); }
.wordmark { gap: .2em; font-size: clamp(1.45rem, 2.1vw, 2rem); letter-spacing: -.07em; }
.wordmark span, .wordmark em { letter-spacing: -.07em; }
.wordmark i { display: none; }
.wordmark em { font-style: normal; }
.main-nav { border-bottom: 1px solid var(--line); }
.main-nav a { min-height: 50px; border-right: 1px solid var(--line); color: var(--ink); background: transparent !important; font-family: Arial, sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--paper); background: var(--sea-deep) !important; }
.main-nav small { color: var(--orange); font-weight: 600; }

.home-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-content: end; min-height: min(740px, calc(100vh - 124px)); padding-top: clamp(5rem, 14vw, 10rem); padding-bottom: clamp(4.5rem, 9vw, 8rem); overflow: hidden; color: var(--paper); background: var(--sea-deep); }
.home-hero::before { position: absolute; z-index: 1; inset: 0; width: auto; height: auto; border-radius: 0; content: ""; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 80%, transparent) 0%, color-mix(in srgb, var(--ink) 54%, transparent) 43%, color-mix(in srgb, var(--ink) 22%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--ink) 45%, transparent), transparent 58%); }
.home-hero::after { display: none; }
.hero-figure { position: absolute; z-index: 0; inset: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--sea-deep); }
.hero-figure::after { inset: 0; width: auto; height: auto; background: transparent; }
.hero-figure img { width: 100%; height: 100%; min-height: 0; filter: saturate(.85) contrast(1.04) brightness(.82); }
.hero-figure figcaption { right: max(var(--pad), 4vw); bottom: 1.15rem; font-size: .56rem; font-weight: 600; letter-spacing: .14em; }
.home-hero > *:not(.hero-figure) { z-index: 2; }
.hero-index { justify-content: end; gap: 1.1rem; height: 100%; padding: 0 1rem 0 0; border-color: color-mix(in srgb, var(--paper) 42%, transparent); color: color-mix(in srgb, var(--paper) 82%, transparent); font-weight: 600; }
.hero-index strong { color: var(--sand-wash); font-size: clamp(2.8rem, 4vw, 4.6rem); }
.hero-copy { max-width: 760px; padding: 0; }
.hero-copy .eyebrow { padding: 0; color: color-mix(in srgb, var(--paper) 74%, transparent); background: none; }
.hero-copy h1 { max-width: 11ch; margin-bottom: 1.3rem; color: var(--paper); font-size: var(--display); line-height: .88; letter-spacing: -.055em; }
.hero-copy h1 i { display: inline; margin: 0; color: var(--sand-wash); -webkit-text-stroke: 0; text-shadow: none; }
.hero-dek { max-width: 48ch; margin-bottom: 1.6rem; font-family: Arial, sans-serif; font-size: clamp(1rem, 1.45vw, 1.22rem); font-weight: 400; line-height: 1.55; }
.hero-link { border: 0; padding: 0; color: var(--paper); background: none; font-weight: 600; }
.hero-link span { color: var(--sand-wash); }

.lead-story { background: var(--paper); }
.feature-story { position: relative; display: block; min-height: 560px; padding: clamp(3rem, 7vw, 7rem); overflow: hidden; color: var(--paper); }
.feature-story figure { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.feature-story figure::before { inset: 0; width: auto; height: auto; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 82%, transparent), color-mix(in srgb, var(--ink) 46%, transparent) 54%, color-mix(in srgb, var(--ink) 15%, transparent)); }
.feature-story img { width: 100%; height: 100%; min-height: 0; filter: saturate(.78) contrast(1.05) brightness(.78); }
.feature-copy { position: relative; z-index: 2; max-width: 650px; padding: 0; }
.feature-copy .eyebrow, .feature-copy .eyebrow span:first-child { color: color-mix(in srgb, var(--paper) 76%, transparent); }
.feature-copy h2 { max-width: 13ch; margin-bottom: 1.35rem; font-size: clamp(2.65rem, 4.8vw, 5.2rem); line-height: .88; }
.feature-copy h2 a { text-decoration: none; }
.feature-copy > p:not(.eyebrow) { max-width: 47ch; color: var(--paper); font-size: 1.02rem; font-weight: 400; line-height: 1.58; }
.feature-copy .arrow-link { color: var(--paper); }
.feature-copy .arrow-link span { color: var(--sand-wash); }

.topics-section { background: #e8e1d1; }
.topics-grid { gap: 1px; background: var(--paper); }
.topic-card, .topic-card:nth-child(n) { min-height: 355px; color: var(--paper); background: var(--sea-deep); }
.topic-card::after, .topic-card:nth-child(n)::after { background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 83%, transparent), color-mix(in srgb, var(--ink) 8%, transparent) 74%); }
.topic-card img { opacity: .92; mix-blend-mode: normal; filter: saturate(.72) contrast(1.08) brightness(.78); }
.topic-card:hover img { opacity: 1; transform: scale(1.025); }
.topic-card small { color: var(--sand-wash); font-weight: 600; }
.topic-card b { max-width: 8ch; font-size: clamp(2.3rem, 3.3vw, 3.5rem); line-height: .9; letter-spacing: -.055em; }
.topic-card em { max-width: 20ch; font-weight: 400; line-height: 1.45; }

.field-note { position: relative; color: var(--paper); background-image: linear-gradient(110deg, color-mix(in srgb, var(--sea-deep) 93%, transparent), color-mix(in srgb, var(--sea-deep) 78%, transparent)), url("/assets/sand-texture.jpg"); background-position: center; background-size: cover; }
.field-note::before { display: none; }
.field-note .eyebrow { padding: 0; color: var(--sand-wash); background: none; }
.field-note blockquote { max-width: 15ch; font-size: clamp(2.4rem, 5vw, 5.5rem); line-height: .9; text-transform: none; }
.field-note > p:not(.eyebrow) { max-width: 52ch; color: color-mix(in srgb, var(--paper) 82%, transparent); font-weight: 400; }
.field-note .arrow-link { padding: 0; border: 0; color: var(--paper); }

.latest-section, .archive-section, .simple-body { background-image: linear-gradient(color-mix(in srgb, var(--paper) 89%, transparent), color-mix(in srgb, var(--paper) 89%, transparent)), url("/assets/sand-texture.jpg"); background-position: center; background-size: 620px; }
.card-image, .article-card:nth-child(even) .card-image { border: 0; border-radius: 0; background: var(--sea-deep); }
.card-image::before { height: 0; background: transparent; }
.card-image img { filter: saturate(.82) contrast(1.03); }
.article-card h2 { font-size: clamp(1.85rem, 2.8vw, 2.8rem); line-height: .92; }
.article-card .card-copy > p:not(.eyebrow) { font-weight: 400; line-height: 1.55; }
.article-card .card-copy .eyebrow { font-weight: 600; }

.category-hero { display: block; min-height: 570px; padding-top: clamp(5rem, 12vw, 10rem); overflow: hidden; color: var(--paper); background: var(--sea-deep); }
.category-hero::before { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 83%, transparent), color-mix(in srgb, var(--ink) 46%, transparent) 64%, color-mix(in srgb, var(--ink) 17%, transparent)); }
.category-hero::after { display: none; }
.category-hero > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; filter: saturate(.72) contrast(1.05) brightness(.76); }
.category-hero > *:not(img) { position: relative; z-index: 2; }
.category-hero .eyebrow { color: var(--sand-wash); }
.category-hero h1, .simple-hero h1 { max-width: 10ch; font-size: var(--h1); line-height: .9; }
.category-hero > div p { max-width: 47ch; color: var(--paper); font-size: 1.05rem; font-weight: 400; line-height: 1.55; }

.dossier-hero { color: var(--paper); background: var(--sea-deep); }
.dossier-hero h1 { line-height: .9; }
.dossier-hero i { color: var(--sand-wash); -webkit-text-stroke: 0; }
.dossier-hero > p { font-weight: 400; }
.simple-hero { color: var(--paper); background: var(--sea-deep); }
.simple-hero .eyebrow { padding: 0; color: var(--sand-wash); background: none; }
.simple-hero > p:not(.eyebrow) { font-weight: 400; line-height: 1.55; }
.reading { max-width: 67ch; }
.reading h2 { line-height: .92; }
.reading p, .source-master { font-weight: 400; line-height: 1.7; }

.article-page { padding-top: 0; background: var(--paper); }
.article-cover { position: relative; min-height: min(760px, calc(100vh - 70px)); overflow: hidden; color: var(--paper); background: var(--sea-deep); }
.article-cover .article-hero { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; background: var(--sea-deep); }
.article-cover .article-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 86%, transparent), color-mix(in srgb, var(--ink) 54%, transparent) 58%, color-mix(in srgb, var(--ink) 15%, transparent)); }
.article-cover .article-hero img { width: 100%; height: 100%; max-height: none; margin: 0; border: 0; filter: saturate(.76) contrast(1.06) brightness(.75); }
.article-cover .article-hero figcaption { position: absolute; z-index: 2; right: max(var(--pad), 4vw); bottom: 1rem; width: auto; margin: 0; padding: 0; color: color-mix(in srgb, var(--paper) 76%, transparent); font-weight: 600; }
.article-header { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: end; min-height: min(760px, calc(100vh - 70px)); max-width: 100%; margin: 0; padding: clamp(5rem, 12vw, 10rem) max(var(--pad), calc((100% - 1040px) / 2 + var(--pad))) clamp(4rem, 8vw, 7rem); overflow: visible; background: transparent; }
.article-header::after { display: none; }
.article-header .eyebrow { padding: 0; color: var(--sand-wash); background: none; }
.article-header .eyebrow a { color: var(--sand-wash); }
.article-header h1 { max-width: 12ch; margin-bottom: 1.35rem; font-size: var(--h1); line-height: .88; }
.article-dek { max-width: 51ch; font-family: Arial, sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.55; }
.article-layout { gap: clamp(2rem, 8vw, 8rem); padding-top: clamp(4rem, 8vw, 7rem); }
.article-rail { border-top: 1px solid var(--line); }
.article-rail p { color: var(--orange); }
.article-rail a { font-weight: 600; }
.article-body { max-width: 67ch; }
.article-body .lede { max-width: 43ch; font-family: Arial, sans-serif; font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 400; line-height: 1.58; }
.article-body section { margin-bottom: 4rem; }
.article-body h2 { max-width: 18ch; margin-bottom: 1.15rem; font-size: clamp(1.75rem, 3.1vw, 2.9rem); line-height: .94; }
.article-body p { margin-bottom: 1.18em; font-family: Arial, sans-serif; font-size: clamp(1.05rem, 1.25vw, 1.18rem); font-weight: 400; line-height: 1.78; }
.article-body p:last-child { margin-bottom: 0; }
.article-body .reading-note { color: color-mix(in srgb, var(--ink) 78%, var(--paper)); }
.context-note { border: 0; border-left: 1px solid var(--orange); background: color-mix(in srgb, var(--sand-wash) 44%, var(--paper)); }
.sources-box { border-top: 1px solid var(--line); }
.sources-box .eyebrow { color: var(--orange); background: none; }

.site-footer { background: var(--sea-deep); }
.footer-title > span { font-family: "UT Bangro", Arial, sans-serif; font-weight: 400; letter-spacing: -.05em; }
.footer-links a, .footer-links b, .footer-note { font-weight: 400; }
.consent { border: 1px solid var(--ink); background: var(--paper); box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.text-button, .ink-button { border: 1px solid var(--ink); font-weight: 600; }
.ink-button { color: var(--paper); background: var(--sea-deep); }

@media (max-width: 900px) {
  .main-nav { border: 1px solid var(--line); box-shadow: none; background: var(--paper); }
  .main-nav a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .home-hero { grid-template-columns: 50px minmax(0, 1fr); min-height: 620px; }
  .feature-story { min-height: 500px; }
  .article-cover, .article-header { min-height: 650px; }
}

@media (max-width: 620px) {
  .masthead { min-height: 66px; }
  .mast-meta { display: none; }
  .home-hero { grid-template-columns: 1fr; min-height: 590px; padding-top: 4rem; }
  .home-hero::before, .feature-story figure::before, .category-hero::before, .article-cover .article-hero::after { background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 80%, transparent), color-mix(in srgb, var(--ink) 36%, transparent) 80%); }
  .hero-index { display: flex; flex-direction: row; justify-content: start; align-items: baseline; height: auto; padding: 0; border: 0; }
  .hero-index strong { font-size: 2.6rem; }
  .hero-copy h1 { max-width: 9ch; font-size: clamp(3.35rem, 15vw, 4.8rem); }
  .hero-figure figcaption { right: var(--pad); }
  .feature-story { min-height: 490px; padding: 2rem; }
  .feature-copy h2 { font-size: clamp(2.6rem, 12.5vw, 4rem); }
  .topic-card, .topic-card:nth-child(n) { min-height: 300px; }
  .topic-card b { font-size: 3.15rem; }
  .category-hero { min-height: 480px; padding-top: 4rem; }
  .dossier-hero { display: block; }
  .article-cover, .article-header { min-height: 590px; }
  .article-header { padding-top: 6rem; padding-bottom: 4.5rem; }
  .article-header h1 { font-size: clamp(3rem, 13.3vw, 4.55rem); }
  .article-layout { grid-template-columns: 1fr; }
  .article-body section { margin-bottom: 3.1rem; }
  .article-body h2 { font-size: 2rem; }
}