/* Wall Street Explained | Shared site chrome, Broadsheet edition
   ------------------------------------------------------------------
   One masthead, one section bar, one footer for every page that is not
   the homepage. The homepage carries the same design inline. This file
   re-skins the .nav / .footer markup that every hand authored and
   pipeline generated page already has, so no page needs re-authoring.

   Broadsheet: salmon paper, slate ink, copper for the one accent.
   A centred serif nameplate, an italic standfirst, and a section bar
   ruled top and bottom, the way a financial daily sets its front page.

   Values are literal hex on purpose: pages define different token
   names for the same colours, so inheriting would differ per page.
   Selectors are doubled or descendant-qualified so they outrank the
   per-page rules whichever order the sheets load in.
   ------------------------------------------------------------------ */

/* Marketing furniture the homepage does not have. */
.cta-bar.cta-bar,
.top-bar.top-bar,
.floating-cta.floating-cta {
  display: none;
}

/* ---------- MASTHEAD ---------- */

.nav.nav {
  background: #f6ede4;
  border: 0;
  border-top: 4px solid #1a1e26;
  border-image: none;
  box-shadow: none;
  padding: 0;
  position: relative;
  z-index: 50;/* design-lint: divider */}

.nav .nav-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* Beat line above the nameplate, as a newspaper carries its edition line. */
.nav .nav-inner::before {
  content: 'Macro \B7  Derivatives \B7  Delta-Neutral Volatility';
  grid-row: 1;
  padding-top: .9rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: #6b645d;
  white-space: nowrap;
}

.nav .nav-inner::after {
  content: none;
  display: none;
}

.nav .nav-brand {
  grid-row: 2;
  display: block;
  margin: .35rem 0 0;
  padding: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: none;
  color: #1a1e26;
  -webkit-text-fill-color: currentColor;
  background: none;
  transition: color .15s ease;
}

.nav .nav-brand:hover {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #93522d;
  color: #93522d;
}

.nav .nav-subtitle {
  grid-row: 3;
  display: block;
  margin: .45rem 0 0;
  padding-bottom: .9rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0;
  text-transform: none;
  color: #6b645d;
}

.nav .nav-subtitle::before,
.nav .nav-subtitle::after {
  display: none;
  content: none;
}

/* ---------- SECTION BAR ---------- */

.nav .nav-links {
  grid-row: 4;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem 1.75rem;
  flex-wrap: wrap;
  min-height: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-top: 1px solid #1a1e26;
  background: #f6ede4;
  /* Paint the bottom rule out to the viewport edges without a wrapper. */
  box-shadow: 0 1px 0 0 #d9c9b8, 100vmax 1px 0 0 #d9c9b8, -100vmax 1px 0 0 #d9c9b8;/* design-lint: divider */}

.nav .nav-links li,
.nav .nav-links li:first-child {
  border: 0;
  position: static;
}

.nav .nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  background: none;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #1a1e26;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.nav .nav-links a:hover {
  color: #93522d;
  background: none;
  border-bottom-color: #d9c9b8;
}

.nav .nav-links a::after {
  display: none;
  content: none;
}

.nav .nav-links a.active,
.nav .nav-links a[aria-current='page'] {
  color: #1a1e26;
  border-bottom-color: #c0734a;
  box-shadow: none;
;/* design-lint: divider */}

/* The one call to action, the newsletter. Set as a dark block, the way the
   homepage sets it. The Fund is an ordinary section link since 2026-10-08. */
.nav .nav-links .nav-cta a {
  min-height: 34px;
  padding: 0 1rem;
  background: #1a1e26;
  color: #f6ede4;
  border: 0;
  font-size: 13px;
}

.nav .nav-links .nav-cta a:hover {
  background: #93522d;
  color: #ffffff;
}


/* ---------- FOOTER ---------- */

.footer.footer {
  background: #1a1e26;
  border: 0;
  border-image: none;
  padding: 2.75rem clamp(1rem, 4vw, 2rem) 1.75rem;
  color: #bdb3a8}

/* Markup puts the copyright first; column-reverse sets the visual order,
   so the nameplate (last child, generated) reads at the top. */
.footer .footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  text-align: left;
}

.footer .footer-inner::after {
  content: 'Wall Street Explained';
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: #ffffff;
}

.footer .footer-copy {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #bdb3a8;
  opacity: 1;
}

.footer .footer-links {
  display: flex;
  justify-content: flex-start;
  align-self: stretch;
  gap: .5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 1.25rem 0;
  border-top: 1px solid #3a3f49;
  border-bottom: 1px solid #3a3f49;
  flex-wrap: wrap;
}

.footer .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #e7ded4;
  transition: color .15s ease;
}

.footer .footer-links a::after {
  display: none;
  content: none;
}

.footer .footer-links a:hover {
  color: #e6a57f;
}

/* The regulatory note that follows the footer on article pages. Joined to
   the footer so the page ends on one dark band, as the homepage does. */
.footer + .disclaimer {
  max-width: none;
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 2rem) 2.5rem;
  background: #1a1e26;
}

.footer + .disclaimer .disclaimer-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 0 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.footer + .disclaimer .disclaimer-inner p {
  max-width: 100ch;
  font-size: 12px;
  line-height: 1.6;
  color: #a59c93;
}

/* ---------- MOBILE MENU BAR ----------
   Injected by /js/chrome.js into .nav-inner on every page, including the
   pipeline generated articles. Hidden on desktop. */

.nav .nav-bar {
  display: none;
}

.nav .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #1a1e26;
  min-height: 44px;
}

.nav .nav-toggle svg {
  width: 20px;
  height: 20px;
}

.nav .nav-toggle .bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}

.nav .nav-toggle[aria-expanded='true'] .bar-1 {
  transform: translateY(6px) rotate(45deg);
}

.nav .nav-toggle[aria-expanded='true'] .bar-2 {
  opacity: 0;
}

.nav .nav-toggle[aria-expanded='true'] .bar-3 {
  transform: translateY(-6px) rotate(-45deg);
}

.nav .nav-bar-cta {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 1rem;
  background: #1a1e26;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #f6ede4;
  transition: background .15s ease;
}

.nav .nav-bar-cta:hover {
  background: #93522d;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {
  .nav .nav-inner::before {
    display: none;
  }

  .nav .nav-brand {
    grid-row: 1;
    margin-top: 1rem;
  }

  .nav .nav-subtitle {
    grid-row: 2;
    padding-bottom: .75rem;
    font-size: .9rem;
  }

  .nav .nav-bar {
    display: flex;
    grid-row: 3;
    justify-self: stretch;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 52px;
    border-top: 1px solid #1a1e26;
    box-shadow: 0 1px 0 0 #d9c9b8, 100vmax 1px 0 0 #d9c9b8, -100vmax 1px 0 0 #d9c9b8;/* design-lint: divider */}

  /* Links move behind the toggle once chrome.js has added it. Overrides the
     older per page drawer, which used !important. */
  .nav-js .nav .nav-links {
    display: none !important;
    position: absolute !important;
    top: 100%;
    left: calc(clamp(1rem, 4vw, 2rem) * -1);
    right: calc(clamp(1rem, 4vw, 2rem) * -1);
    grid-row: auto;
    flex-direction: column !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
    padding: .25rem 0;
    background: #fbf6f0;
    border: 0 !important;
    border-bottom: 1px solid #d9c9b8 !important;
    box-shadow: 0 16px 40px rgba(26, 30, 38, .16);
    z-index: 60;
  }

  .nav-js .nav .nav-links.is-open {
    display: flex !important;
  }

  /* No JS: the links stay as a wrapping row, so the page is navigable. */
  html:not(.nav-js) .nav .nav-links {
    grid-row: 4;
    gap: .25rem 1.25rem;
    padding-block: .25rem;
  }

  .nav .nav-links li {
    border-bottom: 1px solid #efe3d6;
    text-align: left;
  }

  .nav .nav-links li:last-child {
    border-bottom: 0;
  }

  .nav-js .nav .nav-links a {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding-inline: clamp(1rem, 4vw, 2rem);
    font-size: 15px;
    border-bottom: 0;
    background: none;
    color: #1a1e26;
  }

  .nav-js .nav .nav-links a.active,
  .nav-js .nav .nav-links a[aria-current='page'] {background:rgba(192,115,74,.14);border-radius:8px}

  .nav .nav-links .nav-cta {
    margin-left: 0;
  }

  .hamburger {
    display: none !important;
  }

  .footer .footer-links {
    gap: .25rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav .nav-brand,
  .nav .nav-links a,
  .nav .nav-toggle .bar,
  .nav .nav-bar-cta,
  .footer .footer-links a {
    transition-duration: .01ms !important;
  }
}

/* ---------- NORMALISERS ----------
   Pages bring their own global link and heading rules. These keep the
   chrome identical whatever the page underneath says. */
.nav .nav-inner a,
.footer .footer-inner a {
  text-decoration: none;
}

.nav .nav-subtitle {
  font-weight: 400;
}

/* Pages published without a standfirst: keep the rule clear of the
   nameplate descenders. chrome.js adds the standfirst when it runs. */
.nav .nav-brand + .nav-links,
.nav .nav-brand + .nav-bar {
  margin-top: 1rem;
}

.nav .nav-links .nav-cta {
  margin-left: .5rem;
}

/* Tablet band, 769px to 900px. article.css still carries the old drawer,
   which turns the section bar into an absolute column at 900px and below.
   Above the phone breakpoint the bar stays a row. */
@media (min-width: 769px) {
  .nav .nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: #f6ede4 !important;
    box-shadow: 0 1px 0 0 #d9c9b8, 100vmax 1px 0 0 #d9c9b8, -100vmax 1px 0 0 #d9c9b8 !important;
  }
}

.hamburger {
  display: none !important;
}

/* ---------- THEME TOGGLE ----------
   Injected by chrome.js into the masthead, top right. Moon in light mode,
   sun in dark mode. The choice is applied before first paint by a small
   inline script in every page head, so there is no light flash. */
.nav .nav-inner {
  position: relative;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d9c9b8;
  border-radius: 50%;
  background: transparent;
  color: #1a1e26;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.theme-toggle:hover {
  border-color: #c0734a;
  color: #93522d;
}

.theme-toggle:active {
  transform: scale(.94);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .i-sun,
html[data-theme='dark'] .theme-toggle .i-moon {
  display: none;
}

html[data-theme='dark'] .theme-toggle .i-sun {
  display: block;
}

.nav .nav-inner > .theme-toggle {
  position: absolute;
  top: .6rem;
  right: clamp(1rem, 4vw, 2rem);
  z-index: 5;
}

@media (max-width: 768px) {
  .nav .nav-inner > .theme-toggle {
    top: 1rem;
  }
}

/* ---------- DARK MODE, "Midnight Edition" ----------
   Every token name the site's pages define, redefined once. The attribute
   selector outranks each page's own :root block, so no page needs editing.
   Values: graphite paper, bone ink, copper light. */
html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #111418;
  --paper: #111418;
  --surface: #181c22;
  --surface-2: #1c2128;
  --bg-card: #181c22;
  --bg-elevated: #1c2128;
  --border: #2b3038;
  --border-dark: #3a404a;
  --border-hover: #4a505a;
  --border-accent: rgba(224, 162, 124, .35);
  --color-border: #2b3038;
  --text: #ece6dc;
  --ink: #ece6dc;
  --text-dim: #cfc8bd;
  --text-muted: #9d978d;
  --color-text: #ece6dc;
  --color-text-muted: #9d978d;
  --copper: #e0a27c;
  --copper-light: #c98a63;
  --copper-dark: #e6a57f;
  --copper-deep: #f0b893;
  --copper-pale: #3a2a20;
  --copper-bg: rgba(224, 162, 124, .08);
  --accent: #e0a27c;
  --accent-hover: #f0b893;
  --slate: #0a0c0f;
  --slate-2: #101318;
  --slate-3: #161a20;
  --dark: #0a0c0f;
  --up: #6fcf97;
  --dn: #f08a7e;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
}

html[data-theme='dark'] body {
  background-color: #111418;
  color: #ece6dc;
}

html[data-theme='dark'] .nav.nav {
  background: #111418;
  border-top-color: #ece6dc;
}

html[data-theme='dark'] .nav .nav-inner::before,
html[data-theme='dark'] .nav .nav-subtitle {
  color: #9d978d;
}

html[data-theme='dark'] .nav .nav-brand {
  color: #ece6dc;
}

html[data-theme='dark'] .nav .nav-brand:hover {
  color: #e6a57f;
  -webkit-text-fill-color: #e6a57f;
}

html[data-theme='dark'] .nav .nav-links {
  background: #111418 !important;
  border-top-color: #5a606a;
  box-shadow: 0 1px 0 0 #2b3038, 100vmax 1px 0 0 #2b3038, -100vmax 1px 0 0 #2b3038 !important;
}

html[data-theme='dark'] .nav .nav-links a {
  color: #ece6dc;
}

html[data-theme='dark'] .nav .nav-links a:hover {
  color: #e6a57f;
  border-bottom-color: #2b3038;
}

html[data-theme='dark'] .nav .nav-links a[aria-current='page'] {
  border-bottom-color: #c98a63;
;/* design-lint: divider */}

html[data-theme='dark'] .nav .nav-links .nav-cta a,
html[data-theme='dark'] .nav .nav-bar-cta {
  background: #e6a57f;
  color: #111418 !important;
}

html[data-theme='dark'] .nav .nav-links .nav-cta a:hover,
html[data-theme='dark'] .nav .nav-bar-cta:hover {
  background: #f0b893;
  color: #111418 !important;
}

html[data-theme='dark'] .nav .nav-toggle {
  color: #ece6dc;
}

html[data-theme='dark'] .theme-toggle {
  border-color: #3a404a;
  color: #ece6dc;
}

html[data-theme='dark'] .theme-toggle:hover {
  border-color: #c98a63;
  color: #e6a57f;
}

html[data-theme='dark'] .footer.footer,
html[data-theme='dark'] .footer + .disclaimer {
  background: #0a0c0f;
}

html[data-theme='dark'] .footer .footer-links {
  border-color: #23272e;
}

/* Hard coded light colours on individual pages. */
html[data-theme='dark'] .ch-grid { stroke: #2b3038; }
html[data-theme='dark'] .ch-zero { stroke: #4a505a; }
html[data-theme='dark'] .mt td.mt-na {
  background: repeating-linear-gradient(135deg, transparent 0 6px, #1c2128 6px 12px);
}
html[data-theme='dark'] .press-logo {
  filter: grayscale(1) brightness(0) invert(1) !important;
  opacity: .6 !important;
}
html[data-theme='dark'] .press-name { color: #9d978d !important; }
html[data-theme='dark'] .article-hero-img-inner { background: #1c2128; }
html[data-theme='dark'] .btn-copper,
html[data-theme='dark'] .inline-cta .btn-copper,
html[data-theme='dark'] .bottom-cta .btn-copper,
html[data-theme='dark'] .cta-section .btn-copper,
html[data-theme='dark'] .cta-banner .btn-copper {
  background: #e6a57f !important;
  color: #111418 !important;
  border-color: #e6a57f !important;
}

html[data-theme='dark'] .btn-copper:hover {
  background: #f0b893 !important;
  color: #111418 !important;
  border-color: #f0b893 !important;
}
html[data-theme='dark'] img:not([src$='.svg']) {
  filter: brightness(.94);
}

@media (max-width: 768px) {
  html[data-theme='dark'] .nav .nav-bar {
    border-top-color: #5a606a;
    box-shadow: 0 1px 0 0 #2b3038, 100vmax 1px 0 0 #2b3038, -100vmax 1px 0 0 #2b3038;
  }

  html[data-theme='dark'].nav-js .nav .nav-links {
    background: #181c22 !important;
    border-bottom-color: #2b3038 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
  }

  html[data-theme='dark'] .nav .nav-links li {
    border-bottom-color: #23272e;
  }

  html[data-theme='dark'].nav-js .nav .nav-links a {
    color: #ece6dc;
  }
}

/* ---------- NEWSLETTER, END OF ARTICLE ----------
   Inserted by chrome.js where the piece ends. Slate panel, copper rule, the
   same treatment as the band on the homepage. */
.nl-end {
  margin: 2.5rem 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: #1a1e26;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;border:1px solid var(--border, rgba(26,30,38,.14));border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 28px -16px rgba(20,24,30,.42),0 2px 6px -3px rgba(20,24,30,.16)}

.nl-end .nl-end-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #e6a57f;
}

.nl-end .nl-end-h {
  margin: .4rem 0 .6rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.18;
  color: #ffffff;
}

.nl-end .nl-end-p {
  font-size: 15px;
  line-height: 1.6;
  color: #bdb3a8;
}

.nl-end-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  margin-top: 1.1rem;
}

.nl-end a.nl-end-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.75rem;
  background: #e6a57f;
  color: #1a1e26;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  transition: background .15s ease;
}

.nl-end a.nl-end-btn:hover {
  background: #f0b893;
  color: #1a1e26;
}

.nl-end .nl-end-m {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #bdb3a8;
}

@media (max-width: 560px) {
  .nl-end a.nl-end-btn {
    width: 100%;
  }
}

html[data-theme='dark'] .nl-end {
  background: #0a0c0f;
  border: 1px solid #23272e}

@media (max-width:640px){.nav .nav-brand{font-size:1.6rem !important}}