:root {
  --ln-navy: #12263f;
  --ln-navy-2: #1c3a5e;
  --ln-teal: #0e7c86;
  --ln-teal-dark: #0a5f67;
  --ln-bg: #f5f7fa;
  --ln-ink: #1b2430;
  --ln-line: #d7dee7;
  --ln-tab-line: #b7c2d1;
}

body { color: var(--ln-ink); background: var(--ln-bg); }
a { color: var(--ln-teal-dark); }
a:hover { color: var(--ln-navy); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: #fff; color: #000;
  padding: .5rem 1rem; z-index: 2000;
}
.skip-link:focus { left: 0; }

/* Public header (100px tall) and sticky nav */
.site-header {
  position: relative; background: var(--ln-navy) center / cover no-repeat; color: #fff;
  min-height: 100px; display: flex; align-items: center; padding: .4rem 0;
}
.site-header .container { position: relative; }
.site-title { color: #fff; font-size: 1.9rem; font-weight: 700; text-decoration: none; letter-spacing: .01em; line-height: 1.15; }
.site-title:hover { color: #fff; text-decoration: underline; }
.site-tagline { margin: .1rem 0 0; color: #dbe6f3; font-size: .95rem; line-height: 1.2; }

.site-nav {
  position: sticky; top: 0; z-index: 1000;
  background: var(--ln-bg); border-bottom: 1px solid var(--ln-tab-line); padding-top: .55rem;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; align-items: flex-end; }
/* Folder tabs on the page background: inactive tabs are shaded with a soft gradient and shadow;
   the active tab is flat page color and covers the line beneath it, so it is one piece with the page. */
.site-nav a {
  display: block; position: relative; padding: .55rem 1.2rem; color: var(--ln-navy); text-decoration: none; font-weight: 600;
  background: linear-gradient(to bottom, #eef2f7 0%, #d3dbe6 100%);
  border: 1px solid var(--ln-tab-line); border-bottom: 0; border-radius: .6rem .6rem 0 0;
  box-shadow: inset 0 -7px 7px -7px rgba(18, 38, 63, .35), 0 -1px 3px rgba(18, 38, 63, .10);
}
.site-nav a:hover, .site-nav a:focus-visible { background: linear-gradient(to bottom, #ffffff 0%, #e2e9f2 100%); color: var(--ln-teal-dark); }
.site-nav a.active {
  z-index: 1; background: var(--ln-bg); color: var(--ln-navy); box-shadow: 0 -2px 5px rgba(18, 38, 63, .18);
  margin-bottom: -1px; padding-bottom: calc(.55rem + 1px);
}

.site-footer { background: var(--ln-navy); color: #c9d6e6; padding: 1.5rem 0; margin-top: 2rem; text-align: center; }
.site-footer a { color: #fff; }

/* Admin */
.admin-bar { background: var(--ln-navy); color: #fff; }
.admin-bar a { color: #fff; }
.admin-brand span { font-weight: 400; color: #9fb4cc; }
.admin-nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.admin-nav a { padding: .35rem .7rem; text-decoration: none; border-radius: .25rem; }
.admin-nav a:hover { background: var(--ln-navy-2); }
.admin-nav a.active { background: var(--ln-teal); }
.admin-main { max-width: 1100px; margin: 0 auto; }
.admin .card { border-color: var(--ln-line); }
.admin .card-header { background: #fff; font-weight: 600; }
.secret-hint { font-size: .85rem; color: #5b6878; }

.btn-primary { background: var(--ln-teal); border-color: var(--ln-teal); }
.btn-primary:hover, .btn-primary:focus { background: var(--ln-teal-dark); border-color: var(--ln-teal-dark); }

:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }

/* Trend$ tab: bold green dollar sign (contrast checked against the navy nav bars) */
.nav-dollar { color: #14772f; font-weight: 800; }

/* Header with a picture: shown whole, at most 100px tall, centered. The picture carries the site name. */
.site-header.has-image { display: block; padding: 0; min-height: 0; text-align: center; line-height: 0; background: var(--ln-bg); }
.header-img { display: inline-block; height: 100px; width: auto; max-width: 100%; object-fit: contain; }

/* Newsletter reader */
.reader { max-width: 1100px; margin: 0 auto; }
.reader-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.reader-status { font-weight: 600; color: var(--ln-navy); }
.reader-click { display: block; cursor: pointer; }
.reader-img { display: block; width: 100%; height: auto; border: 1px solid var(--ln-tab-line); box-shadow: 0 2px 10px rgba(18, 38, 63, .15); background: #fff; }
.issue-card img { width: 100%; height: auto; border: 1px solid var(--ln-tab-line); }

/* Sponsor slideshow (banners are 728 x 90) */
.sponsors { max-width: 728px; margin: 2rem auto 0; text-align: center; }
.sponsor-frame { aspect-ratio: 728 / 90; background: #fff; border: 1px solid var(--ln-tab-line); }
.sponsor-slide[hidden] { display: none; }
.sponsor-slide img { display: block; width: 100%; height: auto; }
.sponsor-controls { display: flex; justify-content: center; gap: .4rem; margin-top: .35rem; }
.sponsor-controls button { border: 1px solid var(--ln-tab-line); background: #fff; color: var(--ln-navy); border-radius: .3rem; min-width: 2.2rem; padding: .1rem .5rem; line-height: 1.4; }
.sponsor-controls button:hover { background: #eef2f7; }
.sponsor-note { margin: .25rem 0 0; font-size: .75rem; }
.sponsors-empty .sponsor-placeholder { display: block; padding: 1.7rem 1rem; border: 2px dashed var(--ln-tab-line); color: #5b6878; text-decoration: none; aspect-ratio: 728 / 90; }
.tier-card { border: 1px solid var(--ln-tab-line); border-radius: .5rem; background: #fff; padding: 1.25rem; height: 100%; display: flex; flex-direction: column; }
.tier-card .tier-price { font-size: 2rem; font-weight: 700; color: var(--ln-navy); }
.tier-card .btn { margin-top: auto; }

/* Trend$ page */
.trend-card { border: 1px solid var(--ln-tab-line); border-radius: .5rem; background: #fff; padding: 1rem; height: 100%; }
.trend-value { font-size: 1.9rem; font-weight: 700; color: var(--ln-navy); line-height: 1.2; }
.trend-asof { font-size: .8rem; font-weight: 400; color: #5b6878; }
.trend-change { font-size: .9rem; color: #33475f; margin-bottom: .4rem; }
.trend-chart { width: 100%; height: 150px; display: block; margin: .4rem 0; }

/* Legal pages */
.legal h2.h5, .legal h3.h6 { margin-top: 1.5rem; }
.legal ul { padding-left: 1.2rem; }

/* Messages stay visible while you scroll a long settings page */
.admin-main > .alert { position: sticky; top: .5rem; z-index: 60; box-shadow: 0 2px 8px rgba(0,0,0,.15); }