/* insights.css: the /insights/ hub and the article pages beneath it.
   Tokens from core.css, layout patterns from platform.css, accents from
   theme-oxford.css. Nothing here redefines a token.

   Two rules this file is written to obey:

   1. No component hard-codes var(--ink) or var(--paper) as a text colour on a
      band that might be dark. .sec-dark flips the ground, not the tokens, so a
      component that names --ink directly disappears on the dark band. Every
      dark-band case below is stated explicitly.
   2. The accent (Oxford blue) is used once per view as a committed hit, not
      sprinkled. On the hub that is the lead card's rule; in an article it is
      the pull quote and the module box.
   ------------------------------------------------------------------------ */

/* ── Hub: the cards ─────────────────────────────────────────────────────── */

.ins-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
#latest .ins-grid{
  margin-top:40px;
}

/* A single card is one <a>, so the whole plate is the hit area. Grid rather
   than flex inside it, because the art plate must keep a fixed band height
   while the body takes whatever is left: two cards side by side then align
   their titles regardless of deck length. */
.ins-card{
  display:grid;
  grid-template-rows:auto 1fr;
  background:var(--paper);
  padding:0;
  text-decoration:none;
  color:inherit;
  transition:background .18s ease, transform .18s ease;
}
.ins-card:hover{background:var(--paper-2)}

.ins-art{
  display:block;
  border-bottom:1px solid var(--rule);
  background:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px) 0 0/26px 26px,
    var(--paper);
  padding:26px 30px;
  color:var(--ink-2);
  transition:color .18s ease;
}
.ins-art svg{display:block;width:100%;height:auto;max-height:180px;margin:0 auto}
.ins-art.has-photo{
  padding:0;
  background:var(--paper);
  overflow:hidden;
}
.ins-art.has-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.ins-ac{fill:var(--hazard);stroke:none}
.ins-card:hover .ins-art{color:var(--ink)}
.ins-card:hover .ins-art.has-photo img{transform:scale(1.03)}
.ins-art.has-photo img{transition:transform .35s ease}

.ins-body{display:block;padding:26px 30px 30px}

.ins-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--f-ui);font-size:var(--fs-xs);
  letter-spacing:.04em;color:var(--ink-mute);
}
.ins-tag{
  font-family:var(--f-ui);font-size:var(--fs-xs);
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--hazard-ink);background:var(--hazard);
  padding:4px 10px;white-space:nowrap;
}
.ins-dot{color:var(--rule)}

.ins-title{
  display:block;margin:14px 0 0;
  font-family:var(--f-deck);font-weight:var(--fw-deck);
  font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.14;
  color:var(--ink);
}
.ins-deck{
  display:block;margin:10px 0 0;
  font-size:var(--fs-md);line-height:1.55;color:var(--ink-mute);
}
.ins-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--f-ui);font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  text-decoration:none;
}
.ins-go-t{text-decoration:underline;text-underline-offset:3px;}
.ins-go .arr{transition:transform .16s ease;display:inline-block}
.ins-card:hover .ins-go .arr{transform:translateX(5px)}

/* The lead card spans the row and turns horizontal: art on the left, an
   editorial column on the right. It is the one card carrying the accent rule,
   which is what makes it read as the lead rather than merely the first. */
.ins-card.is-lead{
  grid-column:1 / -1;
  grid-template-rows:none;
  grid-template-columns:1fr 1fr;
  border-top:3px solid var(--hazard);
}
.ins-card.is-lead .ins-art{
  border-bottom:0;border-right:1px solid var(--rule);
  display:flex;align-items:center;padding:40px;
}
.ins-card.is-lead .ins-art svg{max-height:230px}
.ins-card.is-lead .ins-art.has-photo{
  padding:0;
  align-items:center;
  justify-content:center;
  background:var(--paper);
}
.ins-card.is-lead .ins-art.has-photo img{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  object-fit:contain;
}
.ins-card.is-lead .ins-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:44px 48px;
}
.ins-card.is-lead .ins-title{font-size:var(--fs-h2);line-height:1.06;margin-top:18px}
.ins-card.is-lead .ins-deck{font-size:var(--fs-lg);margin-top:16px;color:var(--ink-2)}

/* The eyebrow that names the lead. Sits above the meta row so the card still
   reads correctly if it is ever rendered without one. */
.ins-lead-flag{
  display:inline-block;margin-bottom:2px;
  font-family:var(--f-ui);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--hazard);
}

/* An odd number of cards leaves one alone on the last row, and because the
   grid paints its own ground through a 1px gap, the hole is not empty space:
   it renders as a grey slab the width of a card. So the odd one out takes the
   whole row instead.
   Which child is "the odd one out" depends on whether a lead card is present,
   because the lead occupies child 1 and spans the row on its own. Without a
   lead, an odd count ends on an odd child; with one, it ends on an even child.
   Both cases are stated rather than left to a single rule that is wrong in one
   of them: with 1 lead + 2 cards the first version of this file spanned the
   third card and left a grey slab beside the second. */
.ins-grid > .ins-card:not(.is-lead):last-child:nth-child(odd){grid-column:1 / -1}
.ins-grid.has-lead > .ins-card:not(.is-lead):last-child:nth-child(odd){grid-column:auto}
.ins-grid.has-lead > .ins-card:not(.is-lead):last-child:nth-child(even){grid-column:1 / -1}

@media (max-width: 900px){
  .ins-grid{grid-template-columns:1fr}
  .ins-card.is-lead{grid-template-columns:1fr}
  .ins-card.is-lead .ins-art{border-right:0;border-bottom:1px solid var(--rule);padding:28px}
  .ins-card.is-lead .ins-art.has-photo{padding:0}
  .ins-card.is-lead .ins-body{padding:26px 26px 30px}
  .ins-card.is-lead .ins-title{font-size:var(--fs-h3)}
  .ins-card.is-lead .ins-deck{font-size:var(--fs-md)}
  .ins-grid > .ins-card:not(.is-lead):last-child:nth-child(odd){grid-column:auto}
}

/* ── Article page ───────────────────────────────────────────────────────── */

/* .pf-hero is a LIGHT band on this site: white ground, black display type.
   The first version of this file styled the hero plate for a dark hero (pale
   strokes on a black wash) and it rendered as a grey slab with almost nothing
   visible on it. Same grid-paper plate as the card art, at hero scale. */
.art-hero-art{
  display:block;margin:38px 0 0;max-width:760px;
  color:var(--ink-2);
  border:1px solid var(--rule);
  background:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px) 0 0/26px 26px,
    var(--paper);
  padding:30px;
}
.art-hero-art svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.art-hero-art .ins-ac{fill:var(--hazard)}
.art-hero-art.has-photo{
  max-width:min(960px,100%);
  padding:0;
  background:var(--paper);
  overflow:hidden;
}
.art-hero-art.has-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Matches .guide-dates in content.css, which does the same job on the two
   guides, with a reading time added. */
.art-dates{
  margin:20px 0 0;
  font-family:var(--f-ui);font-size:var(--fs-xs);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute);
}
.art-dates time{color:inherit}
.art-dates .sep{opacity:.5;padding:0 8px}

/* Body column. .prose in content.css already sets the measure and the
   paragraph rhythm; this adds the furniture a long article needs and that a
   guide page does not. */
.art-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:64px;
  align-items:start;
}
@media (max-width: 1080px){
  .art-wrap{grid-template-columns:1fr;gap:40px}
}

.art-body h3{scroll-margin-top:130px}

/* Standfirst: the one paragraph before the first heading, set larger. */
.art-stand{
  font-family:var(--f-deck);font-weight:500;
  font-size:var(--fs-xl);line-height:1.42;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 34px;
  padding-bottom:30px;border-bottom:1px solid var(--rule);
}

.art-body ul,.art-body ol{
  margin:0 0 24px;padding-left:0;list-style:none;
  max-width:74ch;
}
.art-body ul li,.art-body ol li{
  position:relative;padding-left:26px;margin:0 0 12px;
  font-size:var(--fs-md);line-height:1.6;color:var(--ink-2);
}
.art-body ul li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:8px;height:1px;background:var(--ink-mute);
}
.art-body ol{counter-reset:artstep}
.art-body ol li{counter-increment:artstep;padding-left:34px}
.art-body ol li::before{
  content:counter(artstep);position:absolute;left:0;top:0;
  font-family:var(--f-ui);font-size:var(--fs-xs);color:var(--hazard);
  font-variant-numeric:tabular-nums;
}
.art-body li strong{color:var(--ink);font-weight:600}

/* Pull quote. The single accent moment in the body. */
.art-pull{
  margin:40px 0;padding:0 0 0 26px;
  border-left:3px solid var(--hazard);
  font-family:var(--f-deck);font-weight:var(--fw-deck);
  font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);max-width:52ch;
}

/* Contents rail. Sticky on desktop, a plain block above the body on narrow
   screens. position:sticky needs a top offset clear of the fixed header. */
.art-toc{position:sticky;top:118px}
.art-toc-hd{
  font-family:var(--f-ui);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.art-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.art-toc li{counter-increment:toc;border-bottom:1px solid var(--rule-soft)}
.art-toc a{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;
  padding:12px 0;text-decoration:none;
  font-size:var(--fs-sm);line-height:1.35;color:var(--ink-2);
  transition:color .14s ease;
}
.art-toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--f-ui);font-size:var(--fs-xs);color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
}
.art-toc a:hover{color:var(--ink)}
/* The rail is second in the DOM so the article itself is the first thing a
   crawler and a screen reader meet. Below the two-column breakpoint that would
   drop a contents list underneath the article it indexes, which is useless, so
   it is reordered to the top visually. Keyboard order still follows the DOM;
   the block is short and labelled, so that trade is worth taking to keep the
   prose first in source. */
@media (max-width: 1080px){
  .art-toc{position:static;order:-1;margin-bottom:8px}
  .art-toc ol{columns:2;column-gap:24px}
  .art-toc li{break-inside:avoid}
}
@media (max-width: 560px){
  .art-toc ol{columns:1}
}

/* "Where this touches the platform": the one product box inside an article.
   Deliberately after the argument, not before it. */
.art-mod{
  margin:44px 0 0;border:1px solid var(--rule);
  border-top:3px solid var(--hazard);
  padding:28px 30px;background:var(--paper-2);
}
.art-mod-hd{
  font-family:var(--f-ui);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--hazard);margin-bottom:12px;
}
.art-mod p{font-size:var(--fs-md);line-height:1.6;color:var(--ink-2);margin:0 0 18px}
.art-mod-links{display:flex;flex-wrap:wrap;gap:10px}
.art-mod-links a{
  font-family:var(--f-ui);font-size:var(--fs-sm);
  border:1px solid var(--rule);padding:8px 14px;
  text-decoration:none;color:var(--ink);background:var(--paper);
  transition:border-color .14s ease, color .14s ease;
}
.art-mod-links a:hover{border-color:var(--hazard);color:var(--hazard)}

/* ── Read next, and anything else these components do on the dark band ──── */

/* Both the card grid and content.css's .idx get used inside .sec-dark on these
   pages, and neither was authored for it. .sec-dark sets only
   `background: var(--ink); color: var(--paper)`, so a component that names a
   light-palette colour of its own survives unchanged and disappears: --ink is
   pure #000, which on that ground is literally 1:1. Every colour below is
   therefore restated rather than inherited. See the same fix applied to
   .pf-int-grid in platform.css. */

.ins-grid-more{margin-top:8px}

.sec-dark .ins-grid{
  background:oklch(0.32 0.01 60);
  border-color:oklch(0.32 0.01 60);
}
/* Not transparent: a hair of lift is what makes a card read as a card on a
   near-black ground, and it gives hover somewhere to go. */
.sec-dark .ins-card{background:color-mix(in oklab, var(--paper) 5%, var(--ink))}
.sec-dark .ins-card:hover{background:color-mix(in oklab, var(--paper) 9%, var(--ink))}

.sec-dark .ins-art{
  border-bottom-color:oklch(0.32 0.01 60);
  color:oklch(0.74 0.005 60);
  /* the light grid paper would blaze on black; redraw it in the dark hairline */
  background:
    linear-gradient(to right, oklch(0.24 0.01 60) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(to bottom, oklch(0.24 0.01 60) 1px, transparent 1px) 0 0/26px 26px,
    transparent;
}
.sec-dark .ins-card:hover .ins-art{color:var(--paper)}
.sec-dark .ins-ac{fill:var(--accent-on-dark)}

.sec-dark .ins-meta{color:oklch(0.68 0.005 60)}
.sec-dark .ins-dot{color:oklch(0.40 0.01 60)}
.sec-dark .ins-tag{background:var(--accent-on-dark);color:oklch(0.15 0.02 268)}
.sec-dark .ins-title{color:var(--paper)}
.sec-dark .ins-deck{color:oklch(0.76 0.005 60)}
.sec-dark .ins-go{color:var(--paper)}

/* .idx lives in content.css and is authored light: .idx-name is var(--ink),
   which is invisible here, and the hub puts the guide index on the dark band. */
.sec-dark .idx{border-top-color:oklch(0.32 0.01 60)}
.sec-dark .idx-row{border-bottom-color:oklch(0.32 0.01 60)}
.sec-dark .idx-name{color:var(--paper)}
.sec-dark .idx-line{color:oklch(0.76 0.005 60)}
.sec-dark .idx-tag{background:var(--accent-on-dark);color:oklch(0.15 0.02 268)}
.sec-dark .idx-row .arr{color:oklch(0.68 0.005 60)}
.sec-dark .idx-row:hover .arr{color:var(--paper)}

#guides .idx{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:16px;
  border-top:0;
}
#guides .idx-row{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:24px;
  border:1px solid oklch(0.32 0.01 60);
  border-bottom-color:oklch(0.32 0.01 60);
  position:relative;
  transition:background .16s ease, box-shadow .16s ease;
}
#guides .idx-row:hover{
  padding-left:24px;
  background:color-mix(in oklab, #a0b5ff 10%, #0a0a0a);
  box-shadow:
    inset 0 0 0 1px #a0b5ff,
    inset 0 0 40px rgba(160, 181, 255, 0.35),
    inset 0 0 80px rgba(160, 181, 255, 0.18),
    0 0 18px rgba(160, 181, 255, 0.28);
  z-index:1;
}
#guides .idx-row:hover .idx-tag{
  background:#fff;
  color:#0a0a0a;
}
#guides .idx-tag{order:-1}
#guides .idx-row:nth-child(4){grid-column:2 / 4}
#guides .idx-row:nth-child(5){grid-column:4 / 6}
@media (max-width:900px){
  #guides .idx{grid-template-columns:1fr}
  #guides .idx-row,
  #guides .idx-row:nth-child(4),
  #guides .idx-row:nth-child(5){grid-column:auto}
}