/* ============================================================================
   Market Insights — shared by /market-insights (the library) and every piece
   under /market-insights/<slug>. Article styles (covers, case-study layout,
   editorial column) were lifted from the old single-page version unchanged;
   the library row styles at the bottom are used by both the index and the
   "More insights" list at the foot of each piece.
   ========================================================================= */
/* ---- Chapter cover ----
   The offering memorandum's cover treatment, on the page: dark green band,
   two-tone Playfair title, caps subtitle held between two gold rules. Each
   study opens with one, which is what turns a long scroll into chapters. */
/* A contained box rather than an edge-to-edge band, sized and finished like
   the About page's principles box (same 24px-0 corners and soft shadow), so
   the green still marks each study without striping the page. The study's
   beige ground starts above it, so the box sits on the same colour as the
   write-up beneath. The side margin keeps 40px of beige at narrow widths and
   centres a 1340px box at wide ones. */
.cs-entry { background: #f5f3ef; padding-top: 48px; }
.cs-entry.is-shown { animation: csShow 0.3s ease; }
@keyframes csShow { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cs-entry.is-shown { animation: none; } }
.cs-cover {
  background: var(--dark-green); padding: 52px 40px 46px; text-align: center;
  margin: 0 max(40px, calc((100% - 1340px) / 2));
  border-radius: 24px 0; box-shadow: 0 18px 44px rgba(0,0,0,0.10);
}
.cs-cover-title {
  font-family: var(--font-serif); font-weight: 400; color: var(--white);
  font-size: clamp(31px, 4.3vw, 54px); line-height: 1.08; margin: 0 0 20px;
}
.cs-cover-title em { color: var(--gold); font-style: italic; }
.cs-cover-sub {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  max-width: 820px; margin: 0 auto;
}
.cs-cover-sub::before, .cs-cover-sub::after {
  content: ""; flex: 1 1 0; max-width: 96px; height: 1px;
  background: rgba(191, 165, 107, 0.6);
}
.cs-cover-sub span {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--white);
}
/* Photo cover: the same box with a full-frame photo behind it, darkened to
   green toward the bottom so the left-aligned title reads over any image. */
.cs-cover.cs-cover--photo {
  position: relative; overflow: hidden; padding: 0; text-align: left;
  min-height: clamp(380px, 40vw, 540px); display: flex; align-items: flex-end;
}
.cs-cover--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-cover--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,53,25,0.10) 0%, rgba(12,53,25,0.58) 45%, rgba(12,53,25,0.94) 100%);
}
.cs-cover-body { position: relative; z-index: 1; padding: 48px 56px 46px; max-width: 900px; }
.cs-cover-eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 18px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
}
.cs-cover-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.cs-cover--photo .cs-cover-title { text-shadow: 0 2px 18px rgba(0,0,0,0.25); }
.cs-cover--photo .cs-cover-sub { justify-content: flex-start; margin: 0; }
.cs-cover--photo .cs-cover-sub::before, .cs-cover--photo .cs-cover-sub::after { display: none; }
/* Says what the photo is when it is not one of the article's own deals */
.cs-cover-note {
  position: absolute; z-index: 1; top: 18px; right: 22px; max-width: calc(100% - 44px);
  font-family: var(--font-sans); font-size: 11.5px; font-style: italic; color: var(--white);
  background: rgba(12,53,25,0.55); padding: 6px 12px; border-radius: 10px 0; text-decoration: none;
}
a.cs-cover-note:hover { color: var(--gold); }

/* Fallback for the no-JS case only; with JS the offset is measured, since
   the sticky header changes height between the top of the page and scrolled. */
.cs-entry { scroll-margin-top: 150px; }
/* Notable case study — reuses the deal-spotlight layout from styles.css */
.deal-spotlight-text h2 { white-space: normal; }
.deal-spotlight-text .eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 14px; }

/* Press link beside the case study's Contact Us: newspaper icon, the source
   named under a short label, opens the article in a new tab. */
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 8px; }
.cs-press { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px 18px 10px 12px; border: 1px solid rgba(12,53,25,0.18); border-radius: 12px 0; background: var(--white); transition: border-color 0.25s ease, transform 0.25s ease; }
.cs-press:hover { border-color: var(--gold); transform: translateY(-2px); }
.cs-press-icon { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-press span { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-dark); line-height: 1.3; }
.cs-press b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-green); }
/* Status pill, echoing the SOLD badge on the offering memorandum */
.cs-sold { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); background: var(--gold-bg); border-radius: 999px; padding: 7px 20px; margin: -8px 0 22px; }

/* Deal-profile stat boxes — full-width row beneath both columns, as on the OM */
.cs-stats { max-width: 1340px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cs-stat { background: #fff; border: 1px solid rgba(0,0,0,0.09); border-radius: 16px 0; padding: 26px 20px 24px; text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.cs-stat:hover { box-shadow: 0 14px 34px rgba(0,0,0,0.08); transform: translateY(-3px); }
.cs-stat-icon { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 14px; }
.cs-stat .val { font-family: var(--font-serif); font-size: 27px; line-height: 1.1; color: var(--dark-green); margin-bottom: 7px; }
.cs-stat .lbl { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-gray); font-weight: 600; }

/* Body copy sized so the text column lands level with the carousel */
.deal-spotlight-text p { font-size: 15.5px; line-height: 1.8; margin-bottom: 17px; }

/* Let the carousel stretch to the full height of the text column */
.deal-spotlight-inner { align-items: stretch; }
.deal-spotlight-image { display: flex; }
.deal-spotlight-image .ds-carousel { aspect-ratio: auto; height: 100%; min-height: 460px; }

/* Rule-flanked subheading, keeping the callouts subordinate to the case study */
.cs-rule-head { max-width: 1340px; margin: 56px auto 36px; display: flex; align-items: center; gap: 20px; }
.cs-rule-head::before, .cs-rule-head::after { content: ""; flex: 1; height: 1px; background: rgba(12,53,25,0.14); }
.cs-rule-head span { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

/* Closing callouts — same beige ground as the rest of the case study */
.cs-callouts { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.cs-callout { padding: 0 40px; border-left: 1px solid rgba(12,53,25,0.14); }
.cs-callout:first-child { border-left: none; padding-left: 0; }
.cs-callout:last-child { padding-right: 0; }
.cs-callout .num { font-family: var(--font-serif); font-size: 30px; color: var(--gold); line-height: 1; margin-bottom: 12px; }
.cs-callout h4 { font-family: var(--font-serif); font-size: 21px; font-weight: 400; color: var(--dark-green); margin-bottom: 10px; line-height: 1.25; }
.cs-callout p { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: var(--text-dark); }

.cs-vitals { max-width: 1340px; margin: 46px auto 0; padding-top: 26px; border-top: 1px solid rgba(12,53,25,0.14); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.cs-vital { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

/* ---- Perspectives: written articles ----
   Each piece is a plain editorial column in a white panel on the studies'
   beige ground: a summary line, a date line, body copy under serif subheads,
   one pull quote, and a gray italic source note. No cards or charts, on
   purpose - these read like a published article, not an OM. */
.bp-section { padding: 56px 40px 90px; }
.bp-panel {
  max-width: 1340px; margin: 0 auto; padding: 56px 44px 60px;
  background: var(--white); border-radius: 24px 0; box-shadow: 0 18px 44px rgba(0,0,0,0.10);
}
.ed { max-width: 720px; margin: 0 auto; }
.ed-dek { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 24px); line-height: 1.5; color: var(--dark-green); margin: 0 0 16px; }
.ed-byline {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 34px; padding-bottom: 22px; border-bottom: 1px solid rgba(12,53,25,0.16);
}
.ed p { font-family: var(--font-sans); font-size: 17px; line-height: 1.85; color: var(--text-dark); margin: 0 0 20px; }
.ed h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(23px, 2.2vw, 27px); line-height: 1.25; color: var(--dark-green); margin: 40px 0 14px; }
.ed-pull {
  margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--gold);
  font-family: var(--font-serif); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.45; color: var(--dark-green);
}
.ed-fig { margin: 0 0 34px; }
.ed-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 20px 0; }
.ed-fig figcaption { font-family: var(--font-sans); font-size: 12.5px; font-style: italic; color: var(--text-gray); margin-top: 10px; }
.ed .ed-src { font-size: 12.5px; font-style: italic; color: var(--text-gray); margin: 36px 0 0; padding-top: 16px; border-top: 1px solid rgba(12,53,25,0.12); }
@media (max-width: 560px) {
  .bp-section { padding: 32px 20px 56px; }
  .bp-panel { padding: 30px 20px 36px; border-radius: 18px 0; }
  .ed p { font-size: 16px; line-height: 1.8; }
}
@media (max-width: 900px) {
  .cs-callouts { grid-template-columns: 1fr; gap: 30px; }
  .cs-callout { border-left: none; border-top: 1px solid rgba(12,53,25,0.14); padding: 26px 0 0; }
  .cs-callout:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 768px) {
  /* Stacked on mobile, the carousel no longer needs to match a text column,
     so drop the stretch and let it sit square */
  .deal-spotlight-image .ds-carousel { aspect-ratio: 1/1; height: auto; min-height: 0; }
  .cs-stats { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
  .cs-stat { padding: 18px 12px 16px; }
  .cs-stat .val { font-size: 21px; }
  .cs-rule-head { margin: 40px auto 28px; gap: 14px; }
  .cs-vitals { gap: 8px 20px; margin-top: 34px; }
}
@media (max-width: 768px) {
  .cs-cover { padding: 36px 20px 30px; margin: 0 20px; border-radius: 18px 0; }
  .cs-entry { padding-top: 32px; }
  .cs-cover-sub { gap: 12px; }
  .cs-cover-sub::before, .cs-cover-sub::after { max-width: 28px; }
  .cs-cover-sub span { font-size: 9.5px; letter-spacing: 0.2em; }
  .cs-cover.cs-cover--photo { padding: 0; min-height: 340px; }
  .cs-cover-body { padding: 30px 22px 28px; }
  .cs-cover-eyebrow { font-size: 9.5px; letter-spacing: 0.22em; gap: 12px; }
  .cs-cover-eyebrow::before { width: 24px; }
}

/* ---- Breadcrumb bar on each piece ---- */
.ins-crumb { background: #F2F0EA; border-bottom: 1px solid rgba(12,53,25,0.14); padding: 0 40px; }
.ins-crumb-inner { max-width: 1340px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 18px 0; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.ins-crumb a { color: var(--text-dark); transition: color 0.25s ease; }
.ins-crumb a:hover { color: var(--gold); }
.ins-crumb-sep { width: 18px; height: 1px; background: rgba(12,53,25,0.3); }
.ins-crumb-here { color: var(--gold); }
.ins-crumb-date { margin-left: auto; color: var(--text-gray); }

/* ---- Library rows: a ruled, dated list. No cards or boxes. ---- */
.ins-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(12,53,25,0.14); }
.ins-row { border-top: 1px solid rgba(12,53,25,0.14); }
.ins-row[hidden] { display: none; }
.ins-row a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px; gap: 40px; align-items: center; padding: 30px 0; color: inherit; }
.ins-meta { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.9; align-self: start; padding-top: 4px; }
.ins-meta time { display: block; color: var(--text-dark); }
.ins-meta span { display: block; color: var(--gold); }
.ins-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.25; color: var(--dark-green); margin: 0 0 10px; transition: color 0.25s ease; }
.ins-dek { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; color: var(--text-dark); margin: 0 0 14px; max-width: 640px; }
.ins-read { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dark-green); }
.ins-read span { display: inline-block; margin-left: 6px; color: var(--gold); transition: transform 0.25s ease; }
.ins-thumb { aspect-ratio: 3 / 2; overflow: hidden; background: #e9e6df; }
.ins-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ins-row a:hover .ins-title { color: var(--gold); }
.ins-row a:hover .ins-read span { transform: translateX(4px); }
.ins-row a:hover .ins-thumb img { transform: scale(1.04); }

/* ---- "More insights" at the foot of each piece ---- */
.ins-more { padding: 80px 40px 96px; background: var(--white); }
.ins-more-inner { max-width: 1100px; margin: 0 auto; }
.ins-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.ins-more-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); color: var(--dark-green); }
.ins-more-head h2 em { color: var(--gold); font-style: italic; }
.ins-more-head a { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dark-green); border-bottom: 1px solid var(--gold); padding-bottom: 3px; white-space: nowrap; }
.ins-more-head a:hover { color: var(--gold); }

@media (max-width: 860px) {
  .ins-row a { grid-template-columns: minmax(0, 1fr) 120px; gap: 10px 20px; padding: 24px 0; }
  .ins-meta { grid-column: 1 / -1; display: flex; gap: 12px; padding: 0; }
  .ins-meta time, .ins-meta span { display: inline; }
  .ins-dek { display: none; }
  .ins-crumb { padding: 0 20px; }
  .ins-crumb-date { display: none; }
  .ins-more { padding: 56px 20px 64px; }
}

/* ---- Author note on Perspectives pieces, above the sources ----
   A thin rule, a small round headshot, and a quiet caps label: the sign-off
   a magazine column ends with. */
.ed-author { display: flex; align-items: center; gap: 20px; margin: 44px 0 0; padding-top: 28px; border-top: 1px solid rgba(12,53,25,0.16); }
.ed-author img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; }
.ed .ed-author p { margin: 0; }
.ed .ed-author-label { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); line-height: 1.4; margin-bottom: 4px; }
.ed .ed-author-name { font-family: var(--font-serif); font-size: 22px; line-height: 1.25; color: var(--dark-green); }
.ed .ed-author-title { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--text-gray); font-style: italic; }
/* The sources note follows directly, so it drops its own rule. */
.ed .ed-author + .ed-src { border-top: 0; margin-top: 22px; padding-top: 0; }