/* TWB v3 — layout.css
   Header, primary nav, secondary nav, footer.
   The dual-spine visibility lives in homepage.css (Step 6).
*/

.site-header {
  background: var(--tw-cream);
  border-bottom: 1px solid var(--tw-rule);
}
.masthead {
  max-width: var(--tw-wide-max);
  margin: 0 auto;
  padding: 1.5rem var(--tw-gutter) .75rem;
  text-align: center;
}
@media (min-width: 720px) {
  .masthead { padding: 2rem var(--tw-gutter-lg) 1rem; text-align: left; }
}

/* Primary nav — six entries, equal weight. The dual-spine is visible here. */
.nav-primary {
  border-top: 1px solid var(--tw-rule);
  background: var(--tw-cream);
}
.nav-primary__inner {
  max-width: var(--tw-wide-max);
  margin: 0 auto;
  padding: 0 var(--tw-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.nav-primary__item {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .9rem 1rem;
  color: var(--tw-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-primary__item:hover,
.nav-primary__item.is-active {
  color: var(--tw-link);
  border-bottom-color: var(--tw-link);
}
.nav-primary__item--back-home {
  /* Spine B visibility: slightly distinct, equal weight, never demoted */
  color: var(--tw-spine-b);
}
.nav-primary__item--back-home:hover {
  color: var(--tw-spine-b);
  border-bottom-color: var(--tw-spine-b);
}
@media (min-width: 720px) {
  .nav-primary__item { font-size: 1rem; padding: 1rem 1.25rem; }
}

/* Secondary nav — supporting layer */
.nav-secondary {
  background: var(--tw-rule-soft);
  border-top: 1px solid var(--tw-rule);
}
.nav-secondary__inner {
  max-width: var(--tw-wide-max);
  margin: 0 auto;
  padding: .5rem var(--tw-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}
.nav-secondary__item {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  color: var(--tw-ink-soft);
  text-decoration: none;
  letter-spacing: .04em;
}
.nav-secondary__item:hover { color: var(--tw-link); }
.nav-secondary__sep { color: var(--tw-muted); }

/* Footer */
.site-footer {
  background: var(--tw-cream);
  border-top: 1px solid var(--tw-rule);
  margin-top: 4rem;
  padding: 2.5rem var(--tw-gutter) 2rem;
}
.site-footer__inner {
  max-width: var(--tw-wide-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 720px) {
  .site-footer__inner { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.footer-col h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tw-ink-soft);
  margin: 0 0 .6rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .35rem; }
.footer-col a {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .95rem;
  color: var(--tw-ink);
  text-decoration: none;
}
.footer-col a:hover { color: var(--tw-link); text-decoration: underline; }
.footer-col .footer-col__sub {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--tw-rule-soft);
}
.site-footer__legal {
  max-width: var(--tw-wide-max);
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tw-rule-soft);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  color: var(--tw-muted);
  text-align: center;
}
/* Masthead Subscribe CTA — promoted from secondary nav to constant visibility */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.masthead-cta {
  flex-shrink: 0;
  display: inline-block;
  margin-top: .5rem;
  padding: .5rem 1rem;
  background: var(--tw-ink);
  color: var(--tw-cream);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--tw-radius);
  transition: background .15s ease;
}
.masthead-cta:hover {
  background: var(--tw-spine-b);
  color: var(--tw-cream);
}
@media (max-width: 600px) {
  .masthead { flex-direction: column; align-items: center; gap: .75rem; }
  .masthead-cta { margin-top: 0; }
}
/* ---------- Sticky site header (added 2026-05-28) ---------- */
/* Sticks masthead + both nav rows together. FX ticker (separate element, above) scrolls naturally. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tw-bg, #faf6ee);
  transition: box-shadow 200ms ease;
}
.site-header.is-stuck {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
:target { scroll-margin-top: 12rem; }
/* ---------- /Sticky site header ---------- */
/* ---------- Header compression (added 2026-05-28) ----------
   Per Ajay's compression spec: keep every element, reduce vertical density.
   Targets ~25-30% reduction across 5 layers (FX ticker, masthead, nav-primary,
   nav-secondary, newsletter band). Overrides — does not edit source rules. */

/* Layer 1: FX ticker — 38px → 28px */
.tw-fx-ticker__inner { min-height: 28px; }
.tw-fx-ticker__label { font-size: .68rem; }

/* Layer 2: Masthead — reduce top/bottom padding, tighten wordmark-to-tag gap */
.masthead { padding: 1rem var(--tw-gutter) .5rem; }
@media (min-width: 720px) {
  .masthead { padding: 1rem var(--tw-gutter-lg) .5rem; }
}
.wordmark__tag { margin-top: .15rem; }

/* Layer 3: Primary nav — tighter row height, no item changes */
.nav-primary__item { padding: .55rem 1rem; }
@media (min-width: 720px) {
  .nav-primary__item { padding: .6rem 1.25rem; }
}

/* Layer 4: Secondary nav — utility-rail register */
.nav-secondary__inner { padding: .3rem var(--tw-gutter); gap: 1rem; }
.nav-secondary__item  { font-size: .75rem; }

/* Layer 5: Newsletter band — tighter vertical padding, smaller bottom margins */
.tw-newsletter-band { padding: 1rem 1rem; }
@media (min-width: 720px) {
  .tw-newsletter-band { padding: 1.15rem 2rem; }
}
.tw-newsletter-band__inner { gap: .85rem; }
@media (min-width: 880px) {
  .tw-newsletter-band__inner { gap: 2rem; }
}
.tw-newsletter-band__kicker { margin: 0 0 .25rem; }
.tw-newsletter-band__title  { margin: 0 0 .2rem; line-height: 1.25; }
/* ---------- /Header compression ---------- */

/* ---------- Header compression v2 - AGGRESSIVE (2026-05-28 evening) ----------
   Per Ajay's spec after three independent UX reviews:
   - Option X: single-row masthead restructure (wordmark + tagline + actions all one row)
   - Tagline truncates rather than wraps at narrow widths (no wrap protection)
   - All 5 layers compressed: FX ticker, masthead, primary nav, secondary nav, newsletter band
   - !important used throughout - previous gentle override lost cascade fight
   - Target: ~150-180px vertical reclaim above the fold
   - Sticky behavior preserved (sticky block above is unchanged)
   ============================================================ */

/* ---------- Layer 1: FX ticker - mid-page editorial band (resized 2026-05-28 late) ----------
   Original spec was tight ticker register for top-of-page placement.
   After moving below Abigail block, taller register reads better and uses available space. */
.tw-fx-ticker {
  margin: 1.5rem 0 1rem !important;
}
.tw-fx-ticker__inner {
  min-height: 44px !important;
  padding: .35rem 1rem !important;
}
.tw-fx-ticker__label {
  font-size: .78rem !important;
  padding-right: 1rem !important;
}
.tw-fx-pair__code {
  font-size: .9rem !important;
}
.tw-fx-pair__rate {
  font-size: .95rem !important;
  font-weight: 600 !important;
}
.tw-fx-pair__chg {
  font-size: .85rem !important;
}
.tw-fx-ticker__cta {
  font-size: .78rem !important;
}

/* ---------- Layer 2: Masthead - single-row restructure (Option X) ---------- */
/* Mobile baseline - stays multi-row, just compressed padding */
.masthead {
  padding: .6rem var(--tw-gutter) .5rem !important;
}

/* Desktop and tablet - single-row layout with no-wrap protection */
@media (min-width: 720px) {
  .masthead {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem !important;
    padding: .55rem var(--tw-gutter-lg) .5rem !important;
    text-align: left !important;
  }
  /* Wordmark block: title and tagline side-by-side, not stacked */
  .masthead .wordmark {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: .9rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .wordmark__title {
    font-size: 1.8rem !important;
    line-height: 1.05 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .wordmark__tag {
    font-size: .82rem !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Actions stay right-aligned, no wrap */
  .masthead__actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }
}

/* Narrow desktop / tablet (720-1000px) - hide tagline entirely before it ruins layout */
@media (min-width: 720px) and (max-width: 1000px) {
  .wordmark__tag {
    display: none !important;
  }
}

/* ---------- Layer 3: Primary nav - tighter row, no item changes ---------- */
.nav-primary__item {
  padding: .5rem 1rem !important;
  font-size: .85rem !important;
}
@media (min-width: 720px) {
  .nav-primary__item {
    padding: .55rem 1.15rem !important;
    font-size: .9rem !important;
  }
}

/* ---------- Layer 4: Secondary nav - utility strip register ---------- */
.nav-secondary__inner {
  padding: .25rem var(--tw-gutter) !important;
  gap: .9rem !important;
}
.nav-secondary__item {
  font-size: .72rem !important;
}

/* ---------- Layer 5: Newsletter band - significant vertical cut ---------- */
.tw-newsletter-band {
  padding: .8rem 1rem !important;
}
@media (min-width: 720px) {
  .tw-newsletter-band {
    padding: 1rem 2rem !important;
  }
}
.tw-newsletter-band__inner {
  gap: .75rem !important;
}
@media (min-width: 880px) {
  .tw-newsletter-band__inner {
    gap: 1.75rem !important;
  }
}
.tw-newsletter-band__kicker {
  margin: 0 0 .2rem !important;
  font-size: .62rem !important;
}
.tw-newsletter-band__title {
  margin: 0 0 .15rem !important;
  line-height: 1.2 !important;
  font-size: 1.05rem !important;
}
@media (min-width: 720px) {
  .tw-newsletter-band__title {
    font-size: 1.15rem !important;
  }
}
.tw-newsletter-band__dek {
  font-size: .82rem !important;
  line-height: 1.4 !important;
}
/* ---------- /Header compression v2 ---------- */