/* insights.css — PAAK Insights, index + article interiors.
 *
 * ART DIRECTION — "Meridian": the article as a measured line down the page.
 *
 * Spine taken from the reference (monof-template.webflow.io/post/…), because these
 * four moves are what make it feel like a document rather than a landing page:
 *   1. a centred, near-empty hero — the title is the only thing on screen;
 *   2. a hairline down the exact centre, terminating in a filled dot, so the
 *      whitespace reads as composition instead of absence;
 *   3. a CURVED ground change — the reading surface arcs up to meet the hero, so
 *      poster → document is a physical event, not a margin;
 *   4. a very narrow measure with a tight heading rhythm, closed by one pill button.
 *
 * Signature changed for PAAK:
 *   - No hero photograph. PAAK articles have none, and stock would contradict the
 *     "claims deserve receipts" voice. The arc band carries the meta strip and the
 *     lede at display size instead — the curve still fires, the content stays honest.
 *   - Switzer + IBM Plex Mono (paak-v3's existing pair), not the reference's Inter.
 *   - Body line-height 1.62, not the reference's 1.3. These are 6–9 minute
 *     plain-English reads; 1.3 is a caption value and punishes a long column.
 *
 * Banned here: stock-photo card grids, gradient heroes, author avatars, share rows,
 * coloured category pills, reading-progress bars.
 *
 * Everything below resolves through tokens.css / styles.css variables, so a palette
 * or type change on the homepage propagates here.
 */

/* ── ground ─────────────────────────────────────────────────────────────── */

.pk-ins {
  --ins-measure: 620px;          /* the column. the whole design is this number. */
  --ins-gutter: clamp(20px, 5vw, 60px);
  --ins-grey: var(--colors--footer-color);   /* whitesmoke */
  --ins-ink: var(--colors--first-color);     /* near-black */
  --ins-paper: var(--colors--second-color);  /* white */
  --ins-rule: rgba(26, 26, 26, 0.13);
  /* The arc is an ellipse this wide, hung half-above the edge it curves. Rise is
     therefore (width x viewport) / ratio / 2 — ~67px at 1440. Enough to read as a
     curve, shallow enough that the hero's last line clears it. */
  --ins-arc: 150%;
  --ins-arc-ratio: 16;

  background: var(--ins-paper);
  color: var(--ins-ink);
  font-family: var(--font--third-font);
  cursor: auto;                  /* styles.css hides the cursor for the homepage's
                                    custom one; an article needs a real pointer. */
}
/* styles.css styles every <a> dark-and-underlined for the homepage; neutralise that
   here so link colour is decided per component. NOTE the specificity: `.pk-ins a` is
   (0,1,1), so any component that sets its own colour must beat that — see the
   `a.pk-cta` / `a.footer-cta` rules below, which is why they carry the tag. */
.pk-ins a { cursor: auto; text-decoration: none; color: inherit; }
.pk-ins ::selection { background: var(--ins-ink); color: var(--ins-paper); }

/* Keyboard focus. The default ring is a hairline that disappears against the ink
   grounds this page uses (the inverted row, the dark footer), so state it explicitly
   in both polarities. `:focus-visible`, not `:focus` — a mouse click on a card should
   not leave a ring behind. */
.pk-ins a:focus-visible,
.pk-ins button:focus-visible {
  outline: 2px solid var(--ins-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.pk-ins .footer a:focus-visible,
.pk-ins__row > a:hover:focus-visible,
.pk-ins a.pk-cta:focus-visible { outline-color: currentColor; }

.pk-ins__wrap { max-width: var(--ins-measure); margin-inline: auto; padding-inline: var(--ins-gutter); }
.pk-ins__wide { max-width: 1180px; margin-inline: auto; padding-inline: var(--ins-gutter); }

/* Labels. These were IBM Plex Mono, on the theory that the section deserved one
   voice that is never Switzer. Walking the homepage DOM settled it: mono renders
   on exactly zero elements there, so it was not a second voice in the brand — it
   was a second typeface only this section used. Size, weight, tracking and case
   now come from the site label tier in type-system.css (Switzer 12px/500/+0.08em,
   the same spec as .pk-ps__step). Only the box and the tone stay here. */
.pk-ins__label {
  display: block;
  opacity: 0.66;
}

/* ── navbar ground ──────────────────────────────────────────────────────────
   The navbar carries no background of its own; on the homepage it floats on
   `.blur-effect`, whose mask tops out at 15% alpha, so the scrim is a whisper.
   That is enough over the homepage's pale hero. It is not enough here: the nav sits
   over the grey band, and over a row that inverts to solid black on hover — dark
   links on a black row are unreadable. Give it a real paper scrim that still fades
   out, so the nav keeps its floating character and stays legible over anything. */
.pk-ins .blur-effect {
  height: 128px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(#000 48%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(#000 48%, rgba(0, 0, 0, 0) 100%);
}
@media screen and (max-width: 991px) {
  .pk-ins .blur-effect { height: 86px; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.pk-ins__hero {
  position: relative;
  text-align: center;
  /* bottom padding has to clear the arc that bulges up out of the band below
     (~67px at 1440) or the last line of the title sits on grey */
  padding: clamp(132px, 16vh, 200px) var(--ins-gutter) clamp(112px, 14vh, 168px);
  background: var(--ins-paper);
}

.pk-ins__hero .pk-ins__label { margin-bottom: clamp(22px, 3.4vh, 34px); }

.pk-ins__title {
  margin: 0 auto;
  max-width: 19ch;
  font-family: var(--font--third-font);
  font-size: clamp(2.05rem, 4.4vw, 3.55rem);
  font-weight: var(--font-weight--500);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.pk-ins__title em { font-style: normal; opacity: 0.42; }

/* ── the arc: white hero → grey reading ground ──────────────────────────── */

.pk-ins__band {
  position: relative;
  background: var(--ins-grey);
  overflow-x: clip;                      /* the arc is wider than the viewport */
  padding: clamp(58px, 8vh, 92px) 0 clamp(58px, 8vh, 96px);
}
/* an oversized ellipse painted in the band's own colour, hung above its top edge:
   the edge bulges up into the white. same trick the reference uses on its image. */
.pk-ins__band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ins-arc);
  aspect-ratio: var(--ins-arc-ratio) / 1;
  transform: translate(-50%, -50%);
  background: var(--ins-grey);
  border-radius: 50%;
  pointer-events: none;
}
/* The meridian: one hairline down the exact centre of the page, ending in a dot on
   the apex of the arc. It is drawn from the BAND, not the hero, because the hero's
   white ground would have to sit above the grey bulge to carry it — which would
   paint the curve out. Hung on the band's stacking context it clears the arc, and
   `bottom: 100%` anchors its foot to the dot regardless of the hero's height.
   The band clips horizontally only, so the upward overflow is kept. */
.pk-ins__band::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 100vh;
  background: var(--ins-rule);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 1;
}

/* the meridian's terminator, sitting on the apex */
.pk-ins__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ins-ink);
  z-index: 2;
}

/* the mirrored arc, for a section that hands the page back to white */
.pk-ins__band--up::after,
.pk-ins__paper--arc::before {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--ins-arc);
  aspect-ratio: var(--ins-arc-ratio) / 1;
  border-radius: 50%;
  pointer-events: none;
}
.pk-ins__paper--arc {
  position: relative;
  background: var(--ins-paper);
  overflow-x: clip;
  padding-top: clamp(56px, 8vh, 96px);
}
.pk-ins__paper--arc::before {
  top: 0;
  transform: translate(-50%, -50%);
  background: var(--ins-paper);
}

/* ── article meta + lede, inside the grey band ──────────────────────────── */

.pk-ins__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-bottom: clamp(26px, 3.6vh, 40px);
}
.pk-ins__meta .pk-ins__label { display: inline; }

.pk-ins__lede {
  margin: 0 auto;
  max-width: 40ch;
  text-align: center;
  font-size: clamp(1.12rem, 1.55vw, 1.4rem);
  font-weight: var(--font-weight--400);
  line-height: 1.42;
  letter-spacing: -0.02em;
  opacity: 0.74;
  text-wrap: pretty;
}

/* ── prose ──────────────────────────────────────────────────────────────── */

.pk-ins__prose {
  padding-bottom: clamp(56px, 8vh, 96px);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: var(--font-weight--400);
  letter-spacing: -0.011em;
}
.pk-ins__prose > :first-child { margin-top: 0; }

/* styles.css sets `p { opacity: .7 }` and `li { opacity: .7 }` for the homepage's
   muted body copy. Inherited here it washes out the article text. This was invisible
   during development because the reveal writes an inline `opacity: 1`, so the page
   only looked right while JS was running — reduced-motion and no-JS readers got
   greyed-out prose. Reset it at the source. */
.pk-ins__prose p,
.pk-ins__prose li { opacity: 1; }

/* the opening paragraph carries the weight the reference gives its hero image */
.pk-ins__prose > p:first-of-type {
  font-size: 1.22rem;
  line-height: 1.5;
  letter-spacing: -0.018em;
  margin-bottom: 1.5em;
}

.pk-ins__prose p { margin: 0 0 1.25em; }
.pk-ins__prose h2 {
  margin: 2.7em 0 0.85em;
  font-size: clamp(1.32rem, 1.9vw, 1.62rem);
  font-weight: var(--font-weight--500);
  line-height: 1.16;
  letter-spacing: -0.03em;
}
.pk-ins__prose h3 {
  margin: 2em 0 0.6em;
  font-size: 1.1rem;
  font-weight: var(--font-weight--600);
  letter-spacing: -0.02em;
}
/* h2s are the article's skeleton — give each one a hairline so the column reads
   as sections, which is what the reference's bold-heading rhythm achieves */
.pk-ins__prose h2::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ins-rule);
  margin-bottom: 1.5em;
}
.pk-ins__prose > h2:first-child::before { display: none; }

.pk-ins__prose strong { font-weight: var(--font-weight--600); }
.pk-ins__prose em { font-style: italic; }

.pk-ins__prose ul,
.pk-ins__prose ol { margin: 0 0 1.4em; padding-left: 1.15em; }
.pk-ins__prose li { margin-bottom: 0.5em; padding-left: 0.2em; }
.pk-ins__prose ul { list-style: none; padding-left: 0; }
.pk-ins__prose ul > li { position: relative; padding-left: 1.15em; }
.pk-ins__prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--ins-ink);
  opacity: 0.45;
}

.pk-ins__prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 26, 26, 0.32);
  transition: text-decoration-color 0.2s ease;
}
.pk-ins__prose a:hover { text-decoration-color: var(--ins-ink); }

.pk-ins__prose blockquote {
  margin: 2em 0;
  padding-left: 1.2em;
  border-left: 1px solid var(--ins-rule);
  font-size: 1.15rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
  opacity: 0.8;
}
.pk-ins__prose hr { border: 0; height: 1px; background: var(--ins-rule); margin: 2.6em 0; }
.pk-ins__prose table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: 0.95rem; }
.pk-ins__prose th,
.pk-ins__prose td { text-align: left; padding: 0.7em 0.8em 0.7em 0; border-bottom: 1px solid var(--ins-rule); }
.pk-ins__prose th { font-weight: var(--font-weight--600); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.66; }

/* ── the button. the one we already use (see .footer-cta in styles.css) ──── */

/* Shape, height, type size and hover for .pk-cta now come from buttons.css, which
   is the site's single button and loads after this file. What is left here is only
   the fallback ground colour, so the button is never an unstyled inline link if
   that file fails to load — buttons.css out-specifies all of it (`a.pk-cta.pk-cta`)
   the moment it does. Do not re-add geometry here: two owners is how the section
   ended up with a 43px pill against the homepage's 64px rectangle in the first
   place. */
.pk-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--button--round-corners);
  background: var(--ins-ink);
  color: var(--ins-paper);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.pk-cta svg { width: 15px; height: 15px; flex: none; }
.pk-cta:hover {
  background: transparent;
  color: var(--ins-ink);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.35);
}
/* on the dark ground */
.pk-cta--invert { background: var(--ins-paper); color: var(--ins-ink); }
.pk-cta--invert:hover { background: transparent; color: var(--ins-paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }

/* An anchor needs the tag in the selector to out-specify `.pk-ins a`, or the label
   inherits the ground colour and the button reads as a solid empty pill. */
.pk-ins a.pk-cta { color: var(--ins-paper); }
.pk-ins a.pk-cta:hover { color: var(--ins-ink); }
.pk-ins a.pk-cta--invert { color: var(--ins-ink); }
.pk-ins a.pk-cta--invert:hover { color: var(--ins-paper); }
/* same trap on the footer button we inherit from styles.css */
.pk-ins a.footer-cta { color: var(--colors--first-color); }
.pk-ins a.footer-cta:hover { color: var(--colors--second-color); }

.pk-ins__end { text-align: center; padding-bottom: clamp(70px, 10vh, 120px); }

/* ── related service + keep reading ─────────────────────────────────────── */

.pk-ins__more { position: relative; background: var(--ins-grey); overflow-x: clip; padding: clamp(64px, 9vh, 110px) 0 clamp(70px, 10vh, 120px); }
.pk-ins__more::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ins-arc);
  aspect-ratio: var(--ins-arc-ratio) / 1;
  transform: translate(-50%, -50%);
  background: var(--ins-grey);
  border-radius: 50%;
  pointer-events: none;
}

.pk-ins__sechead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--ins-rule);
}
.pk-ins__sechead h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: var(--font-weight--500);
  letter-spacing: -0.035em;
  line-height: 1;
}

.pk-ins__svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 40px;
  padding: 30px 32px;
  border-radius: var(--page-container--round-corners);
  background: var(--ins-paper);
  transition: background 0.3s ease, color 0.3s ease;
}
.pk-ins__svc:hover { background: var(--ins-ink); color: var(--ins-paper); }
.pk-ins__svc:hover .pk-cta { background: var(--ins-paper); color: var(--ins-ink); }
.pk-ins__svc h3 {
  margin: 12px 0 0;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: var(--font-weight--500);
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 24ch;
}

.pk-ins__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 46px; }
.pk-ins__pn a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px;
  border-radius: var(--page-container--round-corners);
  background: var(--ins-paper);
  transition: background 0.3s ease, color 0.3s ease;
}
.pk-ins__pn a:hover { background: var(--ins-ink); color: var(--ins-paper); }
.pk-ins__pn a:hover .pk-ins__label { opacity: 0.7; }
/* first and last article: one neighbour, so the card takes the whole row rather than
   sitting stranded in a half column with its title wrapped to five lines */
.pk-ins__pn--single { grid-template-columns: 1fr; }
.pk-ins__pn--single b { max-width: 34ch; }
.pk-ins__pn--next a { text-align: right; align-items: flex-end; }
.pk-ins__pn--single .pk-ins__pn--next a { text-align: left; align-items: flex-start; }
.pk-ins__pn b {
  font-size: 1.05rem;
  font-weight: var(--font-weight--500);
  letter-spacing: -0.025em;
  line-height: 1.22;
}

/* ── index page: the board ──────────────────────────────────────────────── */

.pk-ins__count { display: flex; justify-content: center; }

.pk-ins__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ins-rule); }
.pk-ins__row { border-bottom: 1px solid var(--ins-rule); }
.pk-ins__row > a {
  display: grid;
  grid-template-columns: 56px 190px minmax(0, 1fr) 130px;
  align-items: start;
  gap: 26px;
  padding: 30px 22px;
  margin-inline: -22px;
  border-radius: var(--page-container--round-corners);
  transition: background 0.3s ease, color 0.3s ease;
}
.pk-ins__row > a:hover { background: var(--ins-ink); color: var(--ins-paper); }
.pk-ins__row > a:hover .pk-ins__label { opacity: 0.65; }
.pk-ins__row > a:hover .pk-ins__go { opacity: 1; transform: translateX(4px); }

/* the row index — label tier via type-system.css, like every other label here */
.pk-ins__num {
  opacity: 0.6;
  padding-top: 3px;
}
.pk-ins__rowmeta { display: flex; flex-direction: column; gap: 7px; padding-top: 3px; }
.pk-ins__rowtitle {
  font-size: clamp(1.18rem, 1.8vw, 1.5rem);
  font-weight: var(--font-weight--500);
  letter-spacing: -0.032em;
  line-height: 1.13;
  display: block;
  text-wrap: balance;
}
.pk-ins__rowdek {
  display: block;
  margin-top: 11px;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: var(--font-weight--400);
  letter-spacing: -0.01em;
  opacity: 0.7;
  max-width: 62ch;
}
.pk-ins__go {
  justify-self: end;
  text-align: right;
  padding-top: 4px;
  opacity: 0.66;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── closing CTA, above the shared footer ───────────────────────────────── */

.pk-ins__close { text-align: center; padding: clamp(80px, 12vh, 150px) 0 clamp(80px, 12vh, 140px); }
.pk-ins__close h2 {
  margin: 0 auto 26px;
  max-width: 16ch;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: var(--font-weight--500);
  letter-spacing: -0.038em;
  line-height: 1.02;
}
.pk-ins__close p {
  margin: 0 auto 34px;
  max-width: 44ch;
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0.66;
}

/* ── reveal ─────────────────────────────────────────────────────────────
   Progressive by construction: `pk-ins-js` is only put on <html> once the
   IntersectionObserver that clears these is definitely running, so no JS (or a
   script that dies early) means nothing was ever hidden. */

html.pk-ins-js .pk-ins__reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
html.pk-ins-js .pk-ins__reveal.is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html.pk-ins-js .pk-ins__reveal { opacity: 1; transform: none; transition: none; }
  .pk-ins *,
  .pk-ins *::before,
  .pk-ins *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ── breakpoints ────────────────────────────────────────────────────────── */

@media screen and (max-width: 991px) {
  .pk-ins { --ins-arc: 190%; --ins-arc-ratio: 15; }
  .pk-ins__row > a { grid-template-columns: 44px minmax(0, 1fr) 108px; gap: 18px; }
  .pk-ins__rowmeta { grid-column: 2; flex-direction: row; gap: 14px; }
  .pk-ins__rowbody { grid-column: 2; }
  .pk-ins__go { grid-column: 3; grid-row: 1; }
  .pk-ins__svc { grid-template-columns: minmax(0, 1fr); }
  .pk-ins__svc .pk-cta { justify-self: start; }
}

@media screen and (max-width: 767px) {
  .pk-ins { --ins-arc: 260%; --ins-arc-ratio: 14; --ins-measure: 100%; }
  .pk-ins__wrap { max-width: 560px; }
  .pk-ins__title { max-width: 16ch; }
  .pk-ins__lede { max-width: 34ch; }
  .pk-ins__prose { font-size: 1.02rem; }
  .pk-ins__prose > p:first-of-type { font-size: 1.12rem; }
  .pk-ins__pn { grid-template-columns: 1fr; }
  .pk-ins__pn--next a { text-align: left; align-items: flex-start; }
}

@media screen and (max-width: 479px) {
  .pk-ins__hero { padding-top: 118px; }
  .pk-ins__row > a { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 24px 16px; margin-inline: -16px; }
  .pk-ins__go { display: none; }
  .pk-ins__rowmeta { flex-direction: column; gap: 6px; }
  .pk-ins__svc { padding: 24px 20px; }
  .pk-ins__pn a { padding: 20px 20px; }
}

/* The descender-room block that used to sit here (padding-bottom/-margin on
   .gsap_split_letter-mask, so the nav's clip masks stop cutting the tail off the
   "g" in Insights) is gone: it was a hand copy of the same rule in
   type-system.css, kept only because the insights shell did not load that file.
   It does now, so the copy would just be a second place to keep in sync. */