/* =============================================================
   Lensfield Market Neutral — fund sub-site
   Layered on top of styles.css: same tokens, same tonal world,
   same hairline/mono/serif vocabulary. Only what the fund page
   adds lives here.

   Section tonal sequence:
     Hero        ink       (positioning + key facts strip)
     Neutrality  bone      (what "neutral" means + long/short diagram)
     Sleeves     charcoal  (the four strategy options, accordion)
     Process     bone      (numbered rail)
     Risk        graphite  (exposure table + limits)
     Vehicle     bone      (indicative terms)
     Contact     ink       (enquiries + legal)
   ============================================================= */

/* ---------------------------------------------------------------
   Nav additions — back link and audience note
   --------------------------------------------------------------- */
.nav--fund {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.nav__crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.nav__crumb a { color: var(--muted); }
.nav__crumb a:hover { color: var(--accent); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.fund-hero { min-height: 86vh; }

.fund-hero__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}

.fund-hero__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 86px);
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: pretty;
}

.fund-hero__lede {
  margin: 28px 0 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--muted-warm);
}

/* The neutrality glyph: a long bar and a short bar that cancel.
   Decorative; the real numbers are in the risk section. */
.fund-hero__figure {
  width: 100%;
  max-width: 420px;
  justify-self: end;
  opacity: 0.9;
}

/* Key facts strip — mono label, serif figure, hairline dividers. */
/* Each fact carries its own top hairline, so the strip reads the
   same whether it lays out as four columns or a single stack. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px clamp(24px, 3vw, 40px);
  margin: clamp(56px, 8vh, 96px) 0 0;
}

.facts__item {
  padding-top: 22px;
  border-top: 1px solid var(--line-on-dark-strong);
}

.facts__label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.facts__value {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  color: var(--text);
}

.facts__note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   Section scaffolding shared by the fund page
   --------------------------------------------------------------- */
.fund-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
  margin-bottom: clamp(44px, 6vh, 80px);
}

.fund-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.15;
  text-wrap: pretty;
}

.fund-body {
  margin: 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}
.section--bone .fund-body { color: var(--bone-body); }
.fund-body + .fund-body { margin-top: 16px; }

/* Numbered eyebrow: "01 — Neutrality" */
.eyebrow__num {
  display: inline-block;
  min-width: 2.4em;
  color: var(--accent);
}

/* ---------------------------------------------------------------
   Neutrality — four definitions + a comparison table
   --------------------------------------------------------------- */
.neutral__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.neutral__item {
  padding-top: 20px;
  border-top: 1px solid var(--line-on-bone);
}

.neutral__glyph {
  width: 56px;
  height: 28px;
  margin-bottom: 18px;
}

.neutral__title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
}

.neutral__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bone-body);
}

.neutral__target {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone-label);
}

/* Hairline comparison table: market neutral vs long/short equity */
.compare {
  width: 100%;
  margin-top: clamp(56px, 8vh, 96px);
  border-collapse: collapse;
  font-size: 14px;
}

.compare caption {
  text-align: left;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-label);
}

.compare th,
.compare td {
  padding: 16px 20px 16px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line-on-bone);
  line-height: 1.55;
}
.compare tr:last-child th,
.compare tr:last-child td { border-bottom: 1px solid var(--line-on-bone); }

.compare thead th {
  border-top: 0;
  padding-top: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-label);
}

.compare tbody th {
  width: 24%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--text-dark);
}

.compare td { color: var(--bone-body); }
.compare td.is-ours { color: var(--text-dark); }

/* ---------------------------------------------------------------
   Sleeves — the strategy options, as an accordion.
   Reuses the technology accordion's behaviour via the same classes
   (.tech__row / .tech__panel / .is-open) so app.js drives it.
   --------------------------------------------------------------- */
.sleeves {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(48px, 6vw, 110px);
}

.sleeves__intro { flex: 1 1 320px; max-width: 440px; }
.sleeves__menu  { flex: 1.4 1 460px; border-top: 1px solid var(--line-on-dark-strong); }

.sleeves__verdict {
  margin: clamp(28px, 4vh, 44px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-on-dark);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.sleeves__verdict strong { font-weight: 500; color: var(--text); }

.sleeve__index {
  flex: 0 0 auto;
  margin-right: clamp(16px, 2.5vw, 32px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted-dim);
  transition: color 0.4s ease;
}
.tech__row:hover .sleeve__index { color: var(--accent); }

.sleeve__lead {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

/* Sleeve titles sit a step below the technology accordion so that
   title, tag and mark share a line at desktop widths; on narrow
   screens the title wraps within itself and the tag stays beside
   its first line. */
.sleeves .tech__row-title { flex: 0 1 auto; min-width: 0; font-size: clamp(22px, 2vw, 28px); }

.sleeve__tag {
  margin-left: 16px;
  padding: 4px 9px;
  border: 1px solid var(--line-on-dark);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.sleeve__tag--core { border-color: rgba(160, 138, 99, 0.45); color: var(--accent); }

/* Panel body: prose + a meta grid of mono facts. */
.sleeve__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  margin: 22px 0 0;
}
.sleeve__meta div { min-width: 0; }
.sleeve__meta dt {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.sleeve__meta dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

/* The sleeves section reuses the tech accordion's open/close rules.
   Widen the measure so prose + meta grid sit comfortably. */
.sleeves .tech__panel-body { max-width: none; }
.sleeves .tech__panel-body > p { max-width: 60ch; margin: 0; }

/* Reveal on scroll, mirrored from the technology section. */
.js .sleeves__intro,
.js .sleeves .tech__item { opacity: 0; transform: translateY(18px); }
.js .fund-sleeves.is-inview .sleeves__intro,
.js .fund-sleeves.is-inview .tech__item {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .fund-sleeves.is-inview .tech__item:nth-child(1) { transition-delay: 0.12s; }
.js .fund-sleeves.is-inview .tech__item:nth-child(2) { transition-delay: 0.24s; }
.js .fund-sleeves.is-inview .tech__item:nth-child(3) { transition-delay: 0.36s; }
.js .fund-sleeves.is-inview .tech__item:nth-child(4) { transition-delay: 0.48s; }

/* ---------------------------------------------------------------
   Process — numbered rail
   --------------------------------------------------------------- */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  counter-reset: step;
}

.rail__step {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--line-on-bone);
  counter-increment: step;
}

.rail__step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.rail__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
}

.rail__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bone-body);
}

/* ---------------------------------------------------------------
   Risk — exposure table and limits
   --------------------------------------------------------------- */
.risk__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.exposure {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.exposure caption {
  text-align: left;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.exposure th,
.exposure td {
  padding: 14px 0;
  border-top: 1px solid var(--line-on-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.exposure th:first-child,
.exposure td:first-child { text-align: left; }
.exposure tr:last-child td,
.exposure tr:last-child th { border-bottom: 1px solid var(--line-on-dark); }

.exposure thead th {
  border-top: 0;
  padding-top: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.exposure tbody th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
}

.exposure td.is-net { color: var(--text); }
.exposure tfoot th,
.exposure tfoot td {
  border-top: 1px solid var(--line-on-dark-strong);
  color: var(--text);
}

/* Horizontal mirrored bars: short to the left, long to the right.
   Pure CSS, driven by --long / --short custom properties (0–1). */
.exposure__bar {
  position: relative;
  display: block;
  height: 6px;
  margin-top: 10px;
  background: var(--line-on-dark);
}
.exposure__bar::before,
.exposure__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
}
.exposure__bar::before {
  right: 50%;
  width: calc(var(--short, 0) * 50%);
  background: rgba(142, 145, 148, 0.55);
}
.exposure__bar::after {
  left: 50%;
  width: calc(var(--long, 0) * 50%);
  background: var(--accent);
}

.limits { border-top: 1px solid var(--line-on-dark-strong); }

.limits__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-on-dark);
}

.limits__name {
  margin: 0;
  flex: 1 1 200px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--text);
}

.limits__value {
  margin: 0;
  flex: 1 1 100%;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.limits__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-dim);
}

.fund-footnote {
  margin: 28px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--muted-dim);
}
.section--bone .fund-footnote { color: var(--bone-label); }

/* ---------------------------------------------------------------
   Vehicle — indicative terms as a definition ledger
   --------------------------------------------------------------- */
.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 clamp(40px, 6vw, 96px);
  margin: 0;
  border-top: 1px solid var(--line-on-bone);
}

.terms__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-on-bone);
}

.terms__row dt {
  flex: 0 0 160px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--bone-label);
}

.terms__row dd {
  flex: 1 1 160px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dark);
}
.terms__row dd small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--bone-body);
}

/* ---------------------------------------------------------------
   Contact + legal
   --------------------------------------------------------------- */
.legal {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 8vh, 96px);
  columns: 2 320px;
  column-gap: clamp(32px, 4vw, 64px);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted-dim);
}
.legal p { margin: 0 0 12px; break-inside: avoid; }
.legal strong { font-weight: 500; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .js .sleeves__intro,
  .js .sleeves .tech__item { opacity: 1; transform: none; transition: none; }
  .sleeve__index { transition: none; }
}