/* ==========================================================================
   KONFLUO — Design system
   A newsroom that shows its receipts.
   ========================================================================== */

:root {
  /* Ink & paper. Cool off-white, not cream. */
  --ink:        #16181D;
  --ink-2:      #2A2E37;
  --slate:      #5C6270;
  --slate-2:    #8B909C;
  --paper:      #F6F6F3;
  --surface:    #FFFFFF;
  --line:       #DEDED7;
  --line-soft:  #EBEBE5;

  /* Functional colour. Red = live/unverified. Green = corroborated. */
  --sindoor:    #B8242B;
  --sindoor-t:  #FBEEEF;
  --verify:     #0F6E5C;
  --verify-t:   #E9F3F0;
  --amber:      #A66A00;
  --amber-t:    #FBF2E3;

  /* Type */
  --serif:  "Newsreader", Georgia, serif;
  --sans:   "Archivo", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --gut: 1.5rem;
  --max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--sindoor);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* --------------------------------------------------------------------------
   Typography scale — Elements of Typographic Style, modular ~1.28
   -------------------------------------------------------------------------- */

.headline {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

.h-lead   { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.02; letter-spacing: -0.028em; }
.h-major  { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.h-mid    { font-size: clamp(1.18rem, 1.7vw, 1.42rem); line-height: 1.14; }
.h-minor  { font-size: 1.02rem; line-height: 1.22; font-weight: 600; }
.h-section{ font-family: var(--serif); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }

.standfirst {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.48;
  color: var(--ink-2);
  font-weight: 380;
  max-width: 62ch;
  margin: 0;
}

.prose { font-family: var(--serif); font-size: 1.16rem; line-height: 1.72; max-width: 68ch; color: var(--ink-2); }
.prose p { margin: 0 0 1.25em; }
.prose p:first-of-type::first-letter {
  font-size: 3.4em; float: left; line-height: 0.82;
  padding: 0.06em 0.1em 0 0; font-weight: 600; color: var(--ink);
}
.prose h2 { font-family: var(--serif); font-size: 1.5rem; margin: 2.2rem 0 0.8rem; color: var(--ink); letter-spacing: -0.015em; }
.prose blockquote {
  margin: 2rem 0; padding-left: 1.3rem;
  border-left: 3px solid var(--sindoor);
  font-size: 1.32rem; line-height: 1.45; color: var(--ink); font-weight: 450;
}
.prose blockquote cite { display: block; margin-top: .7rem; font-family: var(--sans); font-size: .82rem; font-style: normal; color: var(--slate); }

.meta { font-family: var(--sans); font-size: .78rem; color: var(--slate); letter-spacing: .005em; }
.kicker {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; color: var(--sindoor);
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead-rule {
  height: 4px; background: var(--sindoor);
  transform-origin: left center;
}

.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }

.masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.1rem;
}

.masthead-word {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
.masthead-word sup {
  font-family: var(--sans); font-size: .3em; font-weight: 600;
  letter-spacing: .06em; vertical-align: super; color: var(--sindoor);
}

.nav-rail {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 40;
}
.nav-rail nav { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
.nav-rail nav::-webkit-scrollbar { display: none; }
.nav-link {
  font-size: .85rem; font-weight: 500; padding-block: .82rem;
  white-space: nowrap; color: var(--slate); position: relative;
  transition: color .18s ease;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px;
  height: 2px; background: var(--ink);
}

/* Language toggle */
.lang-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px; background: var(--paper);
}
.lang-toggle button {
  font-family: inherit; font-size: .76rem; font-weight: 600;
  border: 0; background: transparent; color: var(--slate);
  padding: .28rem .72rem; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Breaking ticker
   -------------------------------------------------------------------------- */

.ticker { background: var(--ink); color: var(--paper); overflow: hidden; }
.ticker-inner { display: flex; align-items: center; gap: 1rem; height: 42px; }
.ticker-tag {
  display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0;
  background: var(--sindoor); color: #fff; height: 42px; padding-inline: .9rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.ticker-track { display: flex; gap: 2.6rem; white-space: nowrap; will-change: transform; }
.ticker-item { font-size: .84rem; color: #E4E4DE; display: inline-flex; align-items: center; gap: .55rem; }
.ticker-item time { color: var(--slate-2); font-size: .74rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Source-transparency chips — the signature element
   -------------------------------------------------------------------------- */

.receipt {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--sans); font-size: .715rem; font-weight: 600;
  padding: .22rem .55rem; border-radius: 3px; letter-spacing: .005em;
  border: 1px solid transparent;
}
.receipt--verified { background: var(--verify-t); color: var(--verify); border-color: #CBE3DC; }
.receipt--review   { background: var(--amber-t);  color: var(--amber);  border-color: #EBDCBC; }
.receipt--live     { background: var(--sindoor-t);color: var(--sindoor);border-color: #F0D2D4; }

.receipt svg { width: 11px; height: 11px; flex-shrink: 0; }

.source-stack { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.source-pill {
  font-size: .7rem; color: var(--slate); padding: .18rem .48rem;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  white-space: nowrap;
}
.source-pill[data-tier="1"] { border-color: #CBE3DC; color: var(--verify); font-weight: 600; }

/* Confidence meter */
.confidence { display: flex; align-items: center; gap: .5rem; }
.confidence-bars { display: flex; gap: 2px; }
.confidence-bars i {
  display: block; width: 13px; height: 4px; background: var(--line); border-radius: 1px;
}
.confidence-bars i.on { background: var(--verify); }
.confidence[data-level="review"] .confidence-bars i.on { background: var(--amber); }

/* --------------------------------------------------------------------------
   Story cards — deliberately NOT identical rounded boxes
   -------------------------------------------------------------------------- */

.lead-story { display: grid; gap: 1.4rem; }
.lead-media { position: relative; overflow: hidden; background: var(--line-soft); aspect-ratio: 16 / 9; }
.lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.lead-story:hover .lead-media img { transform: scale(1.028); }

.story { display: block; }
.story-title { transition: color .16s ease; }
.story:hover .story-title { color: var(--sindoor); }

.story--rule { border-top: 1px solid var(--line); padding-top: .95rem; }
.story--boxed { background: var(--surface); border: 1px solid var(--line); padding: 1.15rem; }

.thumb { background: var(--line-soft); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.story:hover .thumb img { transform: scale(1.04); }

/* Live latest list */
.latest-item { display: grid; grid-template-columns: 52px 1fr; gap: .8rem; padding-block: .85rem; border-top: 1px solid var(--line-soft); }
.latest-item:first-child { border-top: 0; padding-top: 0; }
.latest-time { font-size: .74rem; color: var(--slate-2); font-variant-numeric: tabular-nums; padding-top: .12rem; }
.latest-item.is-new { animation: slot-in .55s cubic-bezier(.2,.7,.3,1); }
@keyframes slot-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Data section
   -------------------------------------------------------------------------- */

.data-band { background: var(--ink); color: var(--paper); }
.data-band .h-section { color: var(--paper); }
.data-band .meta { color: var(--slate-2); }

.figure {
  background: #1C1F26; border: 1px solid #2A2E37; padding: 1.15rem 1.15rem 0.9rem;
  display: flex; flex-direction: column; min-height: 100%;
}
.figure-value {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 600;
  letter-spacing: -0.028em; line-height: 1; font-variant-numeric: tabular-nums;
}
.figure-delta { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.figure-delta.up   { color: #4FBF9A; }
.figure-delta.down { color: #E8737B; }
.figure-label { font-size: .78rem; color: var(--slate-2); }
.figure-canvas { flex: 1; min-height: 108px; margin-top: .85rem; }

/* --------------------------------------------------------------------------
   Pipeline / transparency strip
   -------------------------------------------------------------------------- */

.pipeline { display: grid; gap: 0; counter-reset: step; }
.pipeline-step { padding: 1.1rem 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; }
.pipeline-step:last-child { border-bottom: 1px solid var(--line); }
.pipeline-num {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; color: var(--sindoor);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--slate-2); }
.footer a:hover { color: var(--paper); }
.footer h4 { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--paper); margin: 0 0 .8rem; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--ink { background: var(--ink); height: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

.reveal { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { transform: none !important; }
}

/* Skeleton for chart load */
.skeleton { position: relative; overflow: hidden; background: #22252D; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: sweep 1.4s infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* Mobile menu */
.drawer {
  position: fixed; inset: 0; z-index: 60; background: var(--surface);
  transform: translateY(-100%); transition: transform .42s cubic-bezier(.2,.7,.3,1);
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: none; }
.drawer-link { display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 600; padding-block: .55rem; border-bottom: 1px solid var(--line-soft); letter-spacing: -0.02em; }

@media (min-width: 900px) {
  .lead-story { grid-template-columns: 1.35fr 1fr; align-items: start; gap: 2rem; }
}