/* ==========================================================================
   Insights: the index (/insights/) and the article template (/insights/{slug}/)

   Design notes, so the next person does not undo them by accident:

   - `.display` sets family, weight and tracking but NO font-size. Every hero on
     this site supplies its own (.svc-h1, .legal-h1, .work-h1 and so on). A
     display heading without a size rule renders at the browser default of about
     32px, which is what made the first version of this page look small next to
     the rest of the site. Both H1s below are sized deliberately.

   - The index carries no thumbnails. The only images available for these
     articles are the same photographs the service pages already use, so putting
     them here made the index read as a duplicate of /bespoke-it-services/ and
     gave three near-identical rows nothing to distinguish them. A list set in
     large type, divided by hairline rules, is more confident, matches the
     monochrome identity, and puts the article titles where the attention is.
     Articles keep their own hero image; the index does not need one.

   Articles load legal.css first (sticky contents, prose column), then this file.
   ========================================================================== */

/* ==========================================================================
   1. Index hero
   ========================================================================== */

.ins-index-hero {
  padding-top: clamp(132px, 16vw, 218px);
  padding-bottom: clamp(30px, 3.4vw, 52px);
}

.ins-index-h1 {
  margin: clamp(18px, 2vw, 30px) 0 0;
  font-size: clamp(48px, 8.6vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.032em;
  max-width: 18ch;
}

.ins-index-hero .lead {
  max-width: 56ch;
  margin-top: clamp(24px, 2.6vw, 38px);
  color: var(--gray-1);
  font-size: clamp(17px, 1.25vw, 21px);
}

/* ==========================================================================
   2. Index list
   The row is a two column record: what it is on the left, what it says on the
   right. The rules do the structural work, so nothing needs a box around it.
   ========================================================================== */

.ins-index { padding-top: 0; }

.ins-list {
  border-top: 1px solid var(--ink);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ins-item {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px);
  padding: clamp(34px, 4.4vw, 68px) 0;
  border-bottom: 1px solid var(--line-strong);
}
.ins-item:last-child { border-bottom-color: var(--ink); }

/* --- left column: the record --- */
.ins-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.ins-meta-date {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.2;
  color: var(--ink);
}
.ins-meta-cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.ins-meta-time { font-size: 13px; color: var(--gray-2); }

/* --- right column: the article --- */
.ins-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3.5vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 20ch;
}
.ins-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease);
}
.ins-item:hover .ins-title a,
.ins-title a:focus-visible { background-size: 100% 1px; }

.ins-summary {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--gray-1);
}

@media (max-width: 780px) {
  .ins-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: clamp(28px, 7vw, 40px) 0;
  }
  .ins-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding-top: 0;
  }
  .ins-meta-date { font-size: 14px; }
  .ins-meta-date::after,
  .ins-meta-cat::after { content: "·"; margin-left: 10px; color: var(--gray-3); }
  .ins-title { max-width: none; }
}

/* ==========================================================================
   3. Article hero
   ========================================================================== */

.ins-hero { padding-bottom: clamp(24px, 2.8vw, 40px); }
.ins-hero .eyebrow { display: inline-flex; }

.ins-h1 {
  max-width: 20ch;
  margin: clamp(16px, 1.8vw, 26px) 0 0;
  font-size: clamp(38px, 6.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

/* The answer, stated before anything else. Set above body size on purpose: it
   is the first thing a reader sees and the passage an assistant quotes. */
.ins-dek {
  max-width: 60ch;
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.5;
  color: var(--ink-soft);
}

.ins-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: clamp(22px, 2.4vw, 32px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--gray-2);
}
.ins-byline .ib-author { font-weight: 600; color: var(--ink); }
.ins-byline .ib-role   { font-weight: 400; color: var(--gray-2); }
.ins-byline .ib-sep    { color: var(--gray-3); }
.ins-byline time       { color: inherit; }
@media (max-width: 560px) { .ins-byline .ib-role { display: none; } }

/* ==========================================================================
   4. Article body
   ========================================================================== */

.ins-figure {
  margin: 0 0 clamp(30px, 3.4vw, 50px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-3);
}
.ins-figure img { display: block; width: 100%; height: auto; }

.ins-body .legal-block h2 { scroll-margin-top: 110px; }
.ins-body .legal-block ul,
.ins-body .legal-block ol {
  margin: 0 0 18px;
  padding-inline-start: 1.25em;
  color: var(--gray-1);
  line-height: 1.65;
}
.ins-body .legal-block li { margin-bottom: 10px; }
.ins-body .legal-block li:last-child { margin-bottom: 0; }
.ins-body .legal-block li strong { color: var(--ink); }
.ins-body .table-wrap { margin: 24px 0 6px; }

.ins-related {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ins-related li { border-bottom: 1px solid var(--line); }
.ins-related a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--ink);
  text-decoration: none;
}
.ins-related a:hover { color: var(--gray-1); }
.ins-related .arr { font-size: 0.8em; flex: none; }

.ins-signoff {
  margin: 0;
  color: var(--gray-1);
}

/* ==========================================================================
   5. More reading, at the foot of an article
   ========================================================================== */

.ins-more-list {
  border-top: 1px solid var(--ink);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ins-more-item { border-bottom: 1px solid var(--line-strong); }
.ins-more-item a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  text-decoration: none;
  color: inherit;
}
.ins-more-cat {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.ins-more-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ins-more-item .arr {
  font-size: 18px;
  color: var(--gray-2);
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.ins-more-item a:hover .arr { transform: translate(3px, -3px); color: var(--ink); }

/* ==========================================================================
   6. Reading rhythm
   legal.css gives policy pages their rhythm with numbered markers. Articles
   have no numbers, so the sections are separated by the same hairline the rest
   of the site uses. The existing padding-top on .legal-block supplies the space.
   ========================================================================== */
.ins-body .legal-block + .legal-block { border-top: 1px solid var(--line); }