/* A band of brand blue carrying four white cards. One card is open at a time: it widens
   and shows its image and text, the others stay narrow and show only their number and
   title. The row is a flex line, so opening one takes width from the rest; its height is
   pinned by view.js to the tallest open state so the band behind never moves. */
.pri{position:relative;background:var(--blue);padding:var(--section-pad) 0}
.pri__inner{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}

.pri__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem clamp(2rem,5vw,4rem);
}
.pri__head .eyebrow{color:rgba(255,255,255,.8)}
.pri__head .sec-head{margin-top:1rem;color:#fff;max-width:34rem}
/* The site's heading accent is brand blue, which on this brand-blue band would vanish into it.
   Here the accent is the pale blue the numerals use: still reads as the emphasised phrase,
   still passes for large text on the blue. */
.pri:not(.pri--light) .pri__head .sec-head strong,
.pri:not(.pri--light) .pri__head .sec-head b,
.pri:not(.pri--light) .pri__head .sec-head em{color:#bcdcf5}
.pri__lead{
  margin:1.25rem 0 0;max-width:34rem;
  font-size:var(--lead-size);line-height:var(--lead-lh);letter-spacing:var(--lead-track);color:rgba(255,255,255,.78);
}
.pri__cta{min-width:13.5rem;max-width:100%;flex:none}   /* see intro: a fixed width spills nowrap labels */

.pri__cards{
  display:flex;gap:clamp(.75rem,1.2vw,1.25rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);align-items:stretch;
}
/* view.js measures every card's open state and holds the row at the tallest, so pointing
   at a different card never resizes the blue band behind it. Cards carry images of their
   own or none at all, so their open heights genuinely differ; without this the section
   grew and shrank on every hover. */
.pri__cards.is-measuring,.pri__cards.is-measuring *{transition:none!important}
.pri__card{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;   /* see view.js lock(): the row is fixed, cards clip the overshoot */
  display:flex;flex-direction:column;
  padding:clamp(1.25rem,2vw,1.75rem);
  background:#fff;border-radius:1.25rem;cursor:default;
  transition:flex-grow .55s var(--b2-ease);
}
.pri__card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The open card takes roughly twice the share of the row. */
.pri__card.is-open{flex-grow:2.2}

.pri__num{
  margin:0;font-weight:var(--w-ui);font-size:clamp(1.5rem,1rem + 1.2vw,2rem);line-height:1;
  letter-spacing:var(--h2-track);color:#bcdcf5;
  max-height:3rem;overflow:hidden;
  transition:max-height .55s var(--b2-ease),opacity .25s ease;
}
/* Collapsed away rather than display:none, which dropped its height in a single frame
   while the image below was still easing open — that snap was the jerk. */
.pri__card.is-open .pri__num{max-height:0;opacity:0}

/* The image only exists while the card is open; it is clipped to nothing otherwise so
   the card never jumps when it opens. */
.pri__media{
  margin:0;overflow:hidden;border-radius:.625rem;background:var(--panel-bg);
  max-height:0;opacity:0;transition:max-height .55s var(--b2-ease),opacity .35s ease,margin .55s var(--b2-ease);
}
.pri__card.is-open .pri__media{max-height:9rem;opacity:1;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.pri__img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:400/112}

.pri__icon{
  display:grid;place-items:center;width:2rem;height:2rem;margin-top:auto;
  border-radius:.5rem;background:var(--chip-bg);color:var(--muted-3);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.pri__card.is-open .pri__icon{background:var(--tint-1);color:var(--blue)}

.pri__title{
  margin:clamp(1rem,2vw,1.5rem) 0 0;
  font-family:var(--font-display);font-weight:var(--w-display);
  font-size:var(--ui-size);line-height:1.35;letter-spacing:var(--h4-track);color:var(--ink-heading);
}
.pri__body{
  margin:0;max-height:0;overflow:hidden;opacity:0;
  font-size:var(--body-size);line-height:var(--body-lh);letter-spacing:var(--body-track);color:var(--muted);
  transition:max-height .55s var(--b2-ease),opacity .35s ease,margin .55s var(--b2-ease);
}
.pri__card.is-open .pri__body{max-height:12rem;opacity:1;margin-top:.75rem}

/* ---- light tone: columns on white ------------------------------------------ */
/* The same one-open-at-a-time row, on the page's own white and divided by hairlines rather
   than cut into cards. Each column carries a large ghost numeral in the serif — the count
   the blue band uses — so the row has something to look at above the titles without an image
   for every point, and it is the only numeral: a second small one under it read as a repeat.
   Icons are not shown; they belong to the cards. */
.pri--light{background:#fff}
.pri--light .pri__head .eyebrow{color:var(--ink-eyebrow)}
.pri--light .pri__head .sec-head{color:var(--ink-heading);max-width:44rem}
.pri--light .pri__lead{color:var(--muted);margin-inline:auto}
/* Centred, unlike the band: the columns below are symmetrical, and a left-set heading over
   three equal columns made the row look like it started late. */
.pri--light .pri__head{justify-content:center;text-align:center}
.pri--light .pri__head > div{display:flex;flex-direction:column;align-items:center}
.pri--light .pri__head .sec-head{text-align:center}
.pri--light .pri__head .eyebrow{text-align:center}
.pri--light .pri__cards{gap:0;margin-top:clamp(2.5rem,5vw,4rem)}
.pri--light .pri__card{
  background:none;border-radius:0;
  padding:0 clamp(1.25rem,2.6vw,2.5rem) clamp(1.5rem,2.6vw,2.25rem);
}
/* The divider runs from the ghost numeral's top to the foot of the titles, not the whole
   row: the row is held at the tallest open state, and a line that long ran on past the
   closed columns into empty space. view.js measures the titles' foot into --rule-h. */
.pri--light .pri__card::before{
  content:"";position:absolute;left:0;top:0;width:1px;height:var(--rule-h,100%);
  background:var(--hairline);
}
.pri--light .pri__card:first-child{padding-left:0}
.pri--light .pri__card:first-child::before{display:none}
.pri--light .pri__card.is-open{flex-grow:1.8}
.pri--light .pri__icon{display:none}
/* One count, not two: the ghost is the numeral here, so the small one is not drawn. */
.pri--light .pri__num{display:none}
/* Ghost numeral: a band of its own above the small numeral, the digits sitting on its floor
   so every column's title starts on the same line whether or not it is open. */
.pri__ghost{
  margin:0 0 clamp(1.5rem,3vw,2.5rem);height:clamp(6rem,10vw,9.5rem);
  display:flex;align-items:flex-end;overflow:hidden;
  font-family:var(--font-serif);font-weight:500;font-size:clamp(5rem,9vw,8.5rem);line-height:.9;letter-spacing:-.04em;
  color:var(--tint-2);user-select:none;
  transition:color .45s var(--ease),transform .55s var(--b2-ease);
}
.pri--light .pri__card.is-open .pri__ghost{color:var(--tint-3);transform:translateX(.25rem)}
.pri--light .pri__title{font-size:var(--h4-size);line-height:var(--h4-lh);letter-spacing:var(--h4-track);margin-top:0;max-width:var(--title-w,none)}
/* Laid out at the open column's width in both states (see view.js), clipped by the card while
   it is narrow, and grown to its measured height. Opacity comes in a beat behind the width so
   the first frames of the opening show the column, not a paragraph being uncovered. */
.pri--light .pri__body{width:min(var(--body-w,100%),28rem);max-width:none}
.pri--light .pri__card.is-open .pri__body{
  max-height:var(--body-h,14rem);
  transition:max-height .55s var(--b2-ease),opacity .4s ease .12s,margin .55s var(--b2-ease);
}
.pri--light .pri__card:not(.is-open) .pri__body{transition:max-height .45s var(--b2-ease),opacity .2s ease,margin .45s var(--b2-ease)}
/* Straight after a page opening, and making room for the blue band that lifts over it. */
.intro + .pri--light{padding-top:calc(var(--section-pad) * .5)}
.steps + .pri--light{padding-top:calc(var(--section-pad) * .5)}
.pri--light:has(+ .sld){padding-bottom:calc(var(--section-pad) + var(--section-lift))}

/* ---- narrow: the cards stack and all of them open ------------------------ */
@media (max-width:64em){
  .pri__cards{flex-direction:column}
  .pri__card,.pri__card.is-open{flex:0 0 auto}
  .pri__num{display:block}
  .pri__num,.pri__card.is-open .pri__num{max-height:none;opacity:1}
  .pri__media,.pri__card.is-open .pri__media{max-height:9rem;opacity:1;margin-bottom:1.25rem}
  .pri__body,.pri__card.is-open .pri__body{max-height:none;opacity:1;margin-top:.75rem}
  .pri__icon{margin-top:1.25rem}
  /* Stacked columns: dividers go horizontal and the ghost shrinks to a header of its own. */
  .pri--light .pri__card{padding-inline:0;border-top:1px solid var(--hairline);padding-top:clamp(1.5rem,3vw,2rem)}
  .pri--light .pri__card::before{display:none}
  .pri--light .pri__card:first-child{border-top:0;padding-top:0}
  .pri__ghost{height:auto;margin-bottom:1rem;font-size:clamp(3.5rem,12vw,5rem)}
}

@media (prefers-reduced-motion:reduce){
  .pri__card,.pri__media,.pri__body,.pri__num,.pri__ghost{transition:none}
}

/* ---------- Static: every card reads at rest, no hover ----------
   The same state the block already falls back to below 64em, applied at every width. The row
   is not height-locked here, because nothing opens or closes, so nothing can jump. */
.pri--static .pri__cards{height:auto!important;min-height:0!important}
.pri--static .pri__card,.pri--static .pri__card.is-open{overflow:visible}
@media (min-width:64.01em){
  .pri--static .pri__cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}
.pri--static .pri__num{max-height:none;opacity:1}
.pri--static .pri__media{max-height:9rem;opacity:1;margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.pri--static .pri__body{max-height:none;opacity:1;margin-top:.75rem;width:auto}
.pri--static .pri__card{cursor:default}
.pri--static .pri__card:hover .pri__icon{background:inherit}

/* ---------- Light + static: the plain three-up ---------------------------------
   The interactive deck earns its big serif numerals, because they are what moves as a
   column opens. Standing still they are just ornament, and three of them at 8.5rem were
   the loudest thing in the section. Here the index is small, set in the machine face and
   carried in the accent, the same way it reads in the notes and the dark list. The rule
   moves from between the columns to above each one, so three columns no longer look like
   a table, and the heading sits left with everything else on the page. */
.pri--light.pri--static .pri__head{justify-content:flex-start;text-align:left}
.pri--light.pri--static .pri__head > div{align-items:flex-start;max-width:46rem}
.pri--light.pri--static .pri__head .sec-head,
.pri--light.pri--static .pri__head .eyebrow,
.pri--light.pri--static .pri__lead{text-align:left}
.pri--light.pri--static .pri__lead{max-width:38rem}

.pri--light.pri--static .pri__cards{gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.pri--light.pri--static .pri__card{padding:clamp(1.25rem,2.4vw,1.75rem) 0 0}
.pri--light.pri--static .pri__card::before{
  left:0;top:0;width:100%;height:1px;background:rgba(10,26,51,.14);
}
.pri--light.pri--static .pri__card:first-child{padding-left:0}
.pri--light.pri--static .pri__card:first-child::before{display:block}

.pri--light.pri--static .pri__ghost{
  height:auto;margin:0 0 clamp(.75rem,1.6vw,1.125rem);
  font-family:var(--font-mono);font-weight:500;font-size:.6875rem;line-height:1;letter-spacing:.1em;
  color:var(--accent);
}
.pri--light.pri--static .pri__title{font-size:1.125rem;line-height:1.3}
.pri--light.pri--static .pri__body{margin-top:.625rem;font-size:1rem;line-height:1.6;color:var(--muted)}

/* ---------- Paper: the same cards, on the page's own white --------------------
   Everything that was reversed out of the blue comes back to ink. Nothing is left in a
   pale grey: the eyebrow and the lead take the slate that passes against white, and the
   cards gain a hairline because a white card on a white ground has no edge of its own. */
.pri--paper{background:#fff}
.pri--paper .pri__head .eyebrow{color:var(--muted)}
.pri--paper .pri__head .sec-head{color:var(--navy)}
.pri--paper .pri__head .sec-head strong,
.pri--paper .pri__head .sec-head b,
.pri--paper .pri__head .sec-head em{color:var(--blue)}
.pri--paper .pri__lead{color:var(--muted)}
.pri--paper .pri__card{border:1px solid var(--hairline);box-shadow:0 1.5rem 3rem -1.5rem rgba(15,23,42,.14)}
.pri--paper .pri__num{color:var(--muted)}
.pri--paper .pri__title{color:var(--navy)}
.pri--paper .pri__body{color:var(--muted)}

/* Quiet closing line under the cards, on the heading's own measure. */
.pri__note{margin:clamp(2rem,4vw,3rem) 0 0;max-width:46rem;font-size:var(--body-size);line-height:1.6;color:var(--muted)}
.pri--band .pri__note{color:rgba(255,255,255,.72)}