/* nairajournal.io, The Two Nairas (/rates/)
   Official and street naira as a visual history.
   Tokens come from styles.css. Motion is decorative and off under prefers-reduced-motion. */

.tr-live{
  position:sticky;top:0;z-index:8;
  background:var(--forest);color:#f3f6ee;
  border-bottom:2px solid var(--green-deep);
  padding:10px 0;
}
.tr-live-in{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.tr-live-pair{display:flex;align-items:baseline;gap:10px;min-width:0;}
.tr-live-k{
  font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#9fb39a;
}
.tr-live-v{
  font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:1.05rem;color:#fdfff9;
}
.tr-live-v.is-par{color:var(--amber-bright);}
.tr-live-v.is-stale{color:#9fb39a;font-weight:600;font-size:.88rem;}
.tr-live-spread{
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  color:var(--amber-bright);white-space:nowrap;
}
.tr-live-asof{
  font-family:var(--sans);font-size:.72rem;color:#9fb39a;white-space:nowrap;
}

.tr-hero{
  position:relative;min-height:88vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--forest);color:#f3f6ee;
}
.tr-hero-bg{position:absolute;inset:0;z-index:0;}
.tr-hero-img{
  position:absolute;inset:0;width:100%;height:115%;
  object-fit:cover;object-position:center 30%;opacity:.42;
}
.tr-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,24,18,.4) 0%,rgba(12,24,18,.18) 28%,rgba(12,24,18,.78) 70%,rgba(12,24,18,.98) 100%);
}
.tr-hero-inner{position:relative;z-index:2;padding:120px 0 80px;max-width:780px;}
.tr-eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.tr-eyebrow-line{width:36px;height:2px;background:var(--amber-bright);flex-shrink:0;}
.tr-eyebrow{
  font-family:var(--sans);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-bright);
}
.tr-h1{
  font-family:var(--display);font-size:clamp(2.5rem,1.7rem + 4vw,4.8rem);
  font-weight:400;line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;
  max-width:16ch;text-wrap:balance;
}
.tr-dek{
  font-family:var(--sans);font-size:1.12rem;line-height:1.65;
  color:#cfdcc6;max-width:52ch;margin:0 0 26px;
}
.tr-intro{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:18px 22px;margin:0 0 24px;max-width:64ch;
}
.tr-intro p{margin:0;font-size:1.02rem;line-height:1.7;color:#d7e3cf;}
.tr-pills{display:flex;gap:8px;flex-wrap:wrap;}
.tr-pill{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#9fb39a;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:4px 12px;
}

.tr-chart-sec{background:var(--paper);padding:56px 0 28px;}
.tr-chart-head{max-width:720px;margin:0 0 22px;}
.tr-kicker{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);margin:0 0 8px;
}
.tr-h2{
  font-family:var(--display);font-size:var(--fs-h2);font-weight:400;
  line-height:1.12;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance;
}
.tr-lede{margin:0;color:var(--ink-muted);max-width:60ch;line-height:1.65;}
.tr-chart-card{
  background:var(--paper-raised);border:1px solid var(--rule);
  border-radius:var(--radius-l);box-shadow:var(--shadow-card);
  padding:18px 16px 12px;margin:0 0 14px;
}
.tr-chart-svg{display:block;width:100%;height:auto;}
.tr-axis{font-family:var(--sans);font-size:11px;fill:var(--ink-muted);font-weight:600;}
.tr-legend{
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--ink-muted);
  margin:8px 0 0;
}
.tr-sw{display:inline-block;width:18px;height:3px;margin-right:6px;vertical-align:middle;border-radius:2px;}
.tr-sw.off{background:var(--green-deep);}
.tr-sw.par{background:var(--amber);height:0;border-top:3px dashed var(--amber);}
.tr-chart-note{font-size:.88rem;color:var(--ink-muted);max-width:68ch;margin:8px auto 0;text-align:center;}
.tr-tip{
  position:absolute;pointer-events:none;z-index:4;
  background:var(--forest);color:#edf2e4;border:1px solid rgba(233,168,59,.35);
  border-radius:8px;padding:8px 12px;font-family:var(--sans);font-size:.82rem;
  white-space:nowrap;box-shadow:var(--shadow-card);
}
.tr-tip b{color:var(--amber-bright);}
.tr-chart-wrap{position:relative;}

.tr-eras{padding:12px 0 64px;}
.tr-era{
  display:grid;grid-template-columns:1fr;gap:18px;
  padding:36px 0;border-top:1px solid var(--rule);
}
@media (min-width:861px){
  .tr-era{grid-template-columns:200px 1fr;gap:36px;padding:48px 0;align-items:start;}
}
.tr-era.is-on{
  background:color-mix(in srgb,var(--green) 5%,transparent);
  margin:0 calc(var(--wrap-pad) * -1);padding-left:var(--wrap-pad);padding-right:var(--wrap-pad);
  border-radius:var(--radius-m);
}
.tr-era-rail{min-width:0;}
.tr-era-year{
  font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:1.05rem;color:var(--ink);margin:0 0 6px;
}
.tr-era-badge{
  display:inline-block;font-family:var(--sans);font-size:.64rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sage);
  background:color-mix(in srgb,var(--green) 8%,var(--paper));
  border:1px solid var(--rule);border-radius:100px;padding:3px 10px;
}
.tr-pair{
  display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0;
}
.tr-pair-item{
  flex:1 1 120px;background:var(--paper-raised);border:1px solid var(--rule);
  border-radius:var(--radius-s);padding:10px 12px;
}
.tr-pair-k{
  font-family:var(--sans);font-size:.64rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 4px;
}
.tr-pair-v{
  font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:1.15rem;color:var(--green-deep);margin:0;
}
.tr-pair-v.par{color:var(--amber);}
.tr-pair-v.prem{color:var(--ink);}
.tr-era-h3{
  font-family:var(--display);font-size:clamp(1.45rem,.9rem + 2vw,2rem);
  font-weight:400;line-height:1.12;margin:0 0 8px;max-width:22ch;
}
.tr-era-sum{margin:0 0 16px;line-height:1.7;max-width:62ch;}
.tr-gap{
  display:flex;gap:12px;align-items:flex-start;
  background:color-mix(in srgb,var(--amber-bright) 6%,var(--paper-raised));
  border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  border-radius:8px;padding:12px 14px;margin:0 0 16px;max-width:64ch;
}
.tr-gap-label{
  font-family:var(--sans);font-weight:700;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);margin:0 0 4px;
}
.tr-gap-text{font-size:.88rem;line-height:1.6;color:var(--ink-muted);margin:0;}
.tr-src-toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--green-deep);
  background:none;border:1px solid var(--rule);border-radius:100px;
  padding:6px 14px;cursor:pointer;
}
.tr-src-toggle:hover{background:color-mix(in srgb,var(--green) 6%,transparent);border-color:var(--green);}
.tr-src-list{margin:12px 0 0;padding:0;list-style:none;}
.tr-src-item{padding:10px 0;border-bottom:1px solid var(--rule);font-size:.82rem;line-height:1.5;}
.tr-src-item a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.tr-src-acc{color:var(--sage);font-style:italic;}

.tr-close{
  background:var(--forest);color:#f3f6ee;padding:80px 0 72px;
  border-top:2px solid var(--green-deep);
}
.tr-close-h{
  font-family:var(--display);font-size:clamp(1.6rem,1rem + 2.4vw,2.4rem);
  font-weight:400;line-height:1.12;margin:0 0 18px;color:#fdfff9;max-width:20ch;
}
.tr-close p{font-size:1.04rem;line-height:1.72;color:#cfdcc6;max-width:64ch;margin:0 0 22px;}
.tr-close-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 28px;}
.tr-close-note{
  font-size:.88rem;color:#9fb39a;border-top:1px solid rgba(159,179,154,.25);
  padding-top:18px;max-width:72ch;margin:0;
}

.tr-dot{cursor:pointer;}
.tr-dot:focus{outline:2px solid var(--amber-bright);outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  .tr-hero-img{transform:none!important;}
  html{scroll-behavior:auto;}
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tr-chart-card{background:var(--paper-raised);}
  :root:not([data-theme="light"]) .tr-pair-item{background:var(--paper-sunken);}
}
:root[data-theme="dark"] .tr-chart-card{background:var(--paper-raised);}
:root[data-theme="dark"] .tr-pair-item{background:var(--paper-sunken);}