/* Briefing/Story surface treatment. Geometry and typography stay in headlines-layout.css. */
.briefing-page {
  background: #f7f8f6;
}

.briefing-page .site-header {
  border-bottom-color: #34443c;
  background: #182521;
  color: #fff;
}

.site-header .brand-mark {
  background: #fff;
  color: #182521;
}

.site-header .brand small,
.site-header .live-status {
  color: #b9c6bf;
}

.site-header .main-nav {
  border-color: #34443c;
  background: rgba(255, 255, 255, 0.04);
}

.site-header .main-nav a {
  color: #c3cfc8;
}

.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: none;
}

.site-header .main-nav a.active {
  background: var(--mint-soft);
  color: #182521;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.site-header .date-chip {
  border-color: #3a4a42;
  background: rgba(255, 255, 255, 0.04);
  color: #c3cfc8;
}

.site-header .live-status i {
  background: #8fd8bc;
  box-shadow: 0 0 0 4px rgba(143, 216, 188, 0.12);
}

.briefing-page .site-header :focus-visible {
  outline-color: #8fd8bc;
}

.report-section,
.relay-outer {
  scroll-margin-top: 88px;
}

.hero-focus {
  border-radius: 1.7rem;
}

.hf-visual {
  isolation: isolate;
  overflow: hidden;
}

/* A tonal treatment of the existing archive photo; no scene elements are added. */
.hero-focus[data-story="hormuz"] .hf-visual img {
  filter: brightness(0.74) contrast(1.28) saturate(0.6);
  object-position: center 55%;
}

.hf-visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 18, 28, 0.16), transparent 40%, rgba(8, 18, 28, 0.48));
  content: "";
  pointer-events: none;
}

.hero-focus[data-story="hormuz"] .hf-visual::after {
  background:
    linear-gradient(180deg, rgba(6, 16, 29, 0.3), rgba(6, 16, 29, 0.06) 48%, rgba(6, 16, 29, 0.66)),
    linear-gradient(90deg, rgba(6, 16, 29, 0.15), transparent 60%);
}

.hf-photo-label {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(14, 26, 32, 0.7);
  color: #fff;
  font-size:0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  backdrop-filter: blur(8px);
}

.hf-photo-label i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #eaa197;
}

.hero-focus .hf-visual .cr {
  z-index: 2;
}

.hf-summary {
  margin: 0;
  color:#53615c;
  font-size:0.902rem;
  line-height: 1.65;
}

.hf-data-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.6rem;
  color: var(--blue);
  font-size:0.858rem;
  font-weight: 700;
}

.hf-data-link:hover {
  color:#294db8;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.fr,
.mkt,
.ref,
.tbl,
.stm-list,
.trend-card {
  border-color: var(--line);
  border-radius: 1.2rem;
  background: var(--paper);
  box-shadow: 0 8px 30px rgba(35, 49, 44, 0.04);
}

.fr img,
.ref img,
.ref .ph {
  border-radius: 0.95rem;
}

.hf-metrics span {
  border-color: transparent;
  background: #f4f6f4;
  border-radius: 0.75rem;
}

/* Category badges use the reference story-section palette without extra line height. */
.hf-kick,
.fr-body small {
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--category-bg, var(--blue-soft));
  color: var(--category-ink, #3b58ab);
  box-shadow: 0 0 0 3px var(--category-bg, var(--blue-soft));
}

.hf-kick {
  align-self: flex-start;
}

[data-category="technology"] {
  --category-bg: var(--blue-soft);
  --category-ink: #3b58ab;
}

[data-category="global"] {
  --category-bg: var(--mint-soft);
  --category-ink: #24795c;
}

[data-category="commodities"] {
  --category-bg: var(--coral-soft);
  --category-ink: #a9554d;
}

[data-category="flows"] {
  --category-bg: var(--lavender);
  --category-ink: #6653a4;
}

[data-category="crypto"] {
  --category-bg: #fff0c2;
  --category-ink: #866612;
}

.fr {
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.fr:hover,
.fr.active {
  border-color: #9eb2ed;
  background: #f8faff;
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.briefing-page :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.relay-outer {
  background: #edf2ef;
}

.tr-sess {
  background: var(--blue-soft);
  color:#3b58ab;
  border-radius: 0.4rem;
}

.tr-cell {
  border-radius: 0.4rem;
}

.tr-cell.dn {
  color:#a9554d;
}

.ref .ph {
  background: #edf2ef;
}

.ref:first-child .x {
  color: var(--blue);
}

/* The source's numeric status and wording are retained; only the badge treatment changes. */
.tbl .pill.state-critical {
  border-color: transparent;
  background: var(--coral-soft);
  color:#a9554d;
}

.tbl .pill.state-warning,
.tbl .pill.state-caution {
  border-color: transparent;
  background: var(--yellow-soft);
  color:#866612;
}

.tbl .pill.state-normal {
  border-color: transparent;
  background: var(--mint-soft);
  color:#24795c;
}

.stm > .pill {
  border-radius: 999px;
  background: var(--yellow-soft);
  color:#866612;
  box-shadow: 0 0 0 4px var(--yellow-soft);
}

.tbl th {
  background: #edf2ef;
}

.tbl tbody tr:hover {
  background: #f8faf8;
}

/* Keep the source's font sizes and line heights at small breakpoints too. */
@media (prefers-reduced-motion: reduce) {
  .fr {
    transition: none;
  }
}