/* Insights · the blog index (insights.html) and its two posts (insight-why-panama.html, insight-buenaventura.html).
   Page-scoped additions to the shared post cards (COMPONENTS.md 19) and prose (COMPONENTS.md 18); every selector starts
   with one of the three Insights body classes. Tokens only, sharp corners, no shadows. Page doc: docs/pages/insights.md.
   Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5, G7): the index opens on hero C1 short (the canonical .vhero block, §2), its
   two posts become feature rows in the homepage core card's grammar under a crest rule; the posts open on hero G, a
   crest-navy article head whose lead photograph straddles the navy and the white page. All three close on one new band
   picture. Motion: the index hero's light parallax (js/pages/insights.js, its one scrub stage); the posts have none.
   Decisions: lab/revamp/insights-notes.md. */

/* ═════════════ INDEX · HERO · the .vhero family, canonical block (REVAMP-PLAN.md §2), scoped to this page; C1 short ═════════════ */
.page-insights .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-insights .vhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--deep); }
.page-insights .vhero__img, .page-insights .vhero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-insights .vhero__img, .page-insights .vhero__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-insights .vhero__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-insights .vhero__film.is-playing { opacity: 1; }
/* a band under the clear bar and a deep foot under the words; the bottom edge stays clean */
.page-insights .vhero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--veil) / 0.55), rgb(var(--veil) / 0) 24%),
              linear-gradient(to top, rgb(var(--veil) / 0.9), rgb(var(--veil) / 0.55) 34%, rgb(var(--veil) / 0) 64%); }
.page-insights .vhero__inner { display: grid; align-content: end; gap: var(--space-head); min-height: max(38rem, 100svh);
  padding: calc(var(--nav-h) + 4rem) var(--edge) clamp(3rem, 2rem + 4vw, 6rem); }
.page-insights .vhero__head, .page-insights .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-insights .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-insights .vhero__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.page-insights .vhero__title { max-width: 18ch; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-insights .vhero__title { font-weight: 400; } }
.page-insights .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-insights .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-insights .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .page-insights .vhero__head { grid-column: 1 / span 7; }
  .page-insights .vhero__aside { grid-column: 9 / -1; }
}
.page-insights .vhero--short .vhero__inner { min-height: max(32rem, 76svh); }
/* this page's photograph: the clear sky sits right under the bar's Menu and "Investor access", and the sunlit headlands
   come down to the words, so the band under the bar is deeper (0.72, gone by 22%) and the foot reaches higher than the
   canonical veil (verify 2026-10-14: 3.97:1 and 4.3:1 under the bar with the canonical values); on phones, where the
   stacked words climb to the foot of the rocks, the foot is deeper still. The bottom edge stays clean */
.page-insights .vhero__veil { background: linear-gradient(to bottom, rgb(var(--veil) / 0.72), rgb(var(--veil) / 0) 22%),
  linear-gradient(to top, rgb(var(--veil) / 0.9), rgb(var(--veil) / 0.6) 38%, rgb(var(--veil) / 0) 70%); }
@media (max-width: 767px) {
  .page-insights .vhero__veil { background: linear-gradient(to bottom, rgb(var(--veil) / 0.72), rgb(var(--veil) / 0) 18%),
    linear-gradient(to top, rgb(var(--veil) / 0.92), rgb(var(--veil) / 0.76) 44%, rgb(var(--veil) / 0.46) 68%, rgb(var(--veil) / 0) 90%); }
}
/* the arrival */
.page-insights .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-insights .vhero__crest, .page-insights .vhero__label, .page-insights .vhero__title, .page-insights .vhero__lede, .page-insights .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-insights .vhero__crest { animation-delay: 60ms; } .page-insights .vhero__label { animation-delay: 160ms; } .page-insights .vhero__title { animation-delay: 280ms; }
.page-insights .vhero__lede { animation-delay: 460ms; } .page-insights .vhero__action { animation-delay: 600ms; }
@keyframes vhero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes vhero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ═════════════ INDEX · ARTICLES · the centred head, the crest rule, two feature rows as core cards ═════════════ */
.page-insights .posts__head { margin-bottom: 0; }
.page-insights .posts__head .section-head__text { max-width: 58ch; }
.page-insights .posts__rule { margin-block: var(--space-open); }
.page-insights .posts__list { row-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
/* the homepage core card (site.css .core__link): a white card with a hairline edge, the photograph flush at the top, the
   words padded under it, the action along a hairline at the foot */
.page-insights .post-card { display: flex; flex-direction: column; gap: 0; height: 100%; background-color: var(--card); border: 1px solid var(--line); transition: border-color var(--dur-3) var(--ease-out); }
.page-insights .post-card__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--raised); }
.page-insights .post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86); }
.page-insights .post-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.5rem, 1rem + 1.8vw, 3rem); }
.page-insights .post-card__title { max-width: 26ch; }
.page-insights .post-card__excerpt { max-width: 44ch; }
.page-insights .post-card__more { align-self: stretch; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .page-insights .post-card:hover { border-color: var(--line-2); } }
/* touch screens (mobile pass 2026-10-15): the card crossing the middle of the screen takes the hover state
   (js/pages/insights.js initInsightsTouch) */
@media (hover: none), (pointer: coarse) {
  .page-insights .post-card.is-near { border-color: var(--line-2); }
  .page-insights .post-card.is-near .post-card__media img { transform: scale(1.04); }
  .page-insights .post-card.is-near .post-card__more::after { transform: scaleX(1); }
}
/* both posts' titles carry a deck: the short title, then its second line, quieter (the client's titles) */
.page-insights .post-card__deck {
  display: block; margin-top: 0.55em; max-width: 30ch;
  font-size: var(--fs-lede); font-weight: 400; line-height: 1.35; letter-spacing: 0; color: var(--text-2);
}
/* from 992px each post runs across the row: the photograph over seven twelfths, the words beside it, centred on its
   height; the second row mirrored */
@media (min-width: 992px) {
  .page-insights .posts__item--feature .post-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-insights .posts__item--feature .post-card__media { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 2; }
  .page-insights .posts__item--feature .post-card__body { grid-column: 2; grid-row: 1; justify-content: center; gap: 1.1rem; padding: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .page-insights .posts__item--feature .post-card__title { margin-top: 0.25rem; }
  .page-insights .posts__item--feature .post-card__excerpt { margin-top: 0.35rem; }
  .page-insights .posts__item--feature .post-card__more { margin-top: 1.5rem; }
  .page-insights .posts__item--flip .post-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page-insights .posts__item--flip .post-card__media { grid-column: 2; }
  .page-insights .posts__item--flip .post-card__body { grid-column: 1; }
}

/* ═════════════ POSTS · HERO G · the article head on the crest navy, the lead photograph across the edge ═════════════ */
/* the navy is drawn by the lead figure's ::before, from far above it to the middle of its photograph and across the whole
   width; the article clips it to its own box and isolates it so it paints over the article's ground, under its words */
.page-insight-why-panama .post--g,
.page-insight-buenaventura .post--g { isolation: isolate; overflow: clip; }
.page-insight-why-panama .post--g .post__head,
.page-insight-buenaventura .post--g .post__head { justify-items: center; gap: 1.1rem; text-align: center; color: var(--text-2); }
.page-insight-why-panama .post__crest,
.page-insight-buenaventura .post__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
/* the back link takes the hero label's tracked capitals; its hairline underline stays the link */
.page-insight-why-panama .post--g .post__back,
.page-insight-buenaventura .post--g .post__back { justify-self: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-underline-offset: 0.7em; }
.page-insight-why-panama .post--g .post__title,
.page-insight-buenaventura .post--g .post__title { margin-top: 0.4rem; max-width: 20ch; }
.page-insight-why-panama .post--g .post__meta,
.page-insight-buenaventura .post--g .post__meta { justify-content: center; margin-top: 0.4rem; }
.page-insight-why-panama .post--g .post__lead,
.page-insight-buenaventura .post--g .post__lead { position: relative; justify-self: center; width: 100%; max-width: 64rem; margin-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--space-open); }
.page-insight-why-panama .post--g .post__lead::before,
.page-insight-buenaventura .post--g .post__lead::before { content: ""; position: absolute; z-index: -1; inset: -400rem -100vw 50% -100vw; background-color: var(--brand); pointer-events: none; }
.page-insight-why-panama .post__lead-frame,
.page-insight-buenaventura .post__lead-frame { overflow: hidden; background-color: var(--deep); }
.page-insight-why-panama .post__lead-frame img,
.page-insight-buenaventura .post__lead-frame img { display: block; }
/* the decks: the short title, then its second line, quieter */
.page-insight-why-panama .post__deck,
.page-insight-buenaventura .post__deck {
  display: block; margin: 0.45em auto 0; max-width: 24ch;
  font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-2);
}
@media (min-width: 992px) {
  .page-insight-why-panama .post__deck,
  .page-insight-buenaventura .post__deck { font-weight: 300; }
}
/* the arrival (CSS only, so it runs on the first paint; the editorial pages' one moment): the crest, back link, title and
   meta rise in turn at the hero family's delays while the lead opens from a slight clip and its picture settles */
.page-insight-why-panama .post--g .post__head > *,
.page-insight-buenaventura .post--g .post__head > * { animation: page-hero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-insight-why-panama .post--g .post__head > :nth-child(1),
.page-insight-buenaventura .post--g .post__head > :nth-child(1) { animation-delay: 60ms; }
.page-insight-why-panama .post--g .post__head > :nth-child(2),
.page-insight-buenaventura .post--g .post__head > :nth-child(2) { animation-delay: 160ms; }
.page-insight-why-panama .post--g .post__head > :nth-child(3),
.page-insight-buenaventura .post--g .post__head > :nth-child(3) { animation-delay: 280ms; }
.page-insight-why-panama .post--g .post__head > :nth-child(4),
.page-insight-buenaventura .post--g .post__head > :nth-child(4) { animation-delay: 460ms; }
.page-insight-why-panama .post__lead-frame,
.page-insight-buenaventura .post__lead-frame { animation: post-lead-open 1600ms var(--ease-out) 300ms both; }
.page-insight-why-panama .post__lead-frame img,
.page-insight-buenaventura .post__lead-frame img { animation: page-hero-settle 2600ms var(--ease-out) both; }
@keyframes post-lead-open { from { clip-path: inset(6% 5% 6% 5%); } to { clip-path: inset(0 0 0 0); } }

/* ───────────── posts · the client photographs keep their own proportions (never cropped up): Buenaventura's lagoon lead
   (16:9) and its wide aerial in the body (2.06:1), the canal in "Why Panama?" (4:3) ───────────── */
.page-insight-buenaventura .post__lead img { aspect-ratio: 16 / 9; }
.page-insight-buenaventura .post__figure img { aspect-ratio: 1280 / 621; }
.page-insight-why-panama .post__figure img { aspect-ratio: 624 / 467; }

/* a pull line sits in the run of the paragraphs, not apart from them: the body's grid keeps its margins from collapsing,
   so the shared 2em on both sides read as a break in the article */
.page-insight-why-panama .post__pull,
.page-insight-buenaventura .post__pull { margin-block: 1.1em; }
.page-insight-why-panama .post__pull + *,
.page-insight-buenaventura .post__pull + * { margin-top: 0; }
/* the same for a figure: its 2.2em below plus the next paragraph's 1.35em left the caption further from the text after it
   than the photograph sits from the text before it; now the space above the photograph and below the caption match */
.page-insight-why-panama .post__figure + *,
.page-insight-buenaventura .post__figure + * { margin-top: 0; }

/* the two links at the foot of a post: the other article and the index, side by side on the wide track from 768px, under
   a crest rule (the separator everywhere, REVAMP-PLAN §3.4) in place of the shared plain hairline */
.page-insight-why-panama .post__rule,
.page-insight-buenaventura .post__rule { grid-column: wide; margin-top: calc(var(--section) * 0.75); }
.page-insight-why-panama .post__nav,
.page-insight-buenaventura .post__nav { display: grid; gap: var(--space-head) var(--col-gap); margin-top: var(--space-head); padding-top: 0; border-top: 0; }
@media (min-width: 768px) {
  .page-insight-why-panama .post__nav,
  .page-insight-buenaventura .post__nav { grid-column: wide; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .page-insight-why-panama .post__next--all,
  .page-insight-buenaventura .post__next--all { justify-items: end; text-align: right; }
}
.page-insight-why-panama .post__next-title,
.page-insight-buenaventura .post__next-title { max-width: 22ch; text-wrap: balance; }
/* touch screens (mobile pass 2026-10-15): the underline the two links show under a pointer is drawn from the start, so
   they read as links without a hover */
@media (hover: none), (pointer: coarse) {
  .page-insight-why-panama .post__next-title,
  .page-insight-buenaventura .post__next-title { text-decoration-color: var(--line-3); }
}

/* ═════════════ reduced motion: everything in place, no settle, no rise, no clip ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .page-insights .vhero__img, .page-insights .vhero__crest, .page-insights .vhero__label, .page-insights .vhero__title, .page-insights .vhero__lede, .page-insights .vhero__action { animation: none; }
  .page-insights .vhero__film { display: none; }
  .page-insight-why-panama .post--g .post__head > *,
  .page-insight-buenaventura .post--g .post__head > *,
  .page-insight-why-panama .post__lead-frame,
  .page-insight-buenaventura .post__lead-frame,
  .page-insight-why-panama .post__lead-frame img,
  .page-insight-buenaventura .post__lead-frame img { animation: none; }
}