/* Origin hero — About v4.
 *
 * The hero *is* a Norwegian flag. A cross divides it into four quadrants and
 * the content sits inside them: the year in the upper hoist, the headline in
 * the upper fly, the big figure in the lower hoist, the story in the lower fly.
 *
 * The cross is a band 96px across at full size — a red core with white
 * fimbriation a quarter of the band on each side, which is what makes it read
 * as a flag rather than as two coloured rules.
 *
 * **The cross is the grid's middle track, in both directions.** That is the
 * whole design: text cannot land on the red because the red is the gap between
 * the quadrants, at any viewport width and however long the copy grows. An
 * earlier build placed the arms at percentages of the section and they cleared
 * the type at 1440px while running through it at 1280px — two coordinate
 * systems that drift. This one cannot drift; there is only one.
 *
 * Namespaced `pl-origin-hero`, not `pl-origin`: `.pl-origin` and
 * `.pl-origin__flag` belong to the origin device (C9, the little flag beside a
 * micro-label, template-parts/origin-device.php).
 *
 * On the brandbook's cap on flag red, see C37 in docs/content-gaps.md.
 */
.pl-origin-hero {
  /* The band, and the red core inside it — exactly half, leaving a quarter of
   * white on each side. 7.5vw is the design's 96px at a 1280 viewport. */
  --pl-band: clamp(2rem, 7.5vw, 6rem);
  --pl-core: calc(var(--pl-band) / 2);

  /* Viewport edge to the wrap's content box, so the arm can bleed to the page
   * edge and still be scaled from its own left edge. */
  --pl-bleed: calc(max((100vw - var(--wrap)) / 2, 0px) + var(--gutter));

  position: relative;
  overflow: hidden;
  padding-block: 0;
}

.pl-origin-hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 0;
}

/* ------------------------------------------------------------------ narrow */
/* Four quadrants do not survive a phone: the hoist column would be too narrow
 * to set "30 000" in. The quadrants stack, the mast is dropped, and the arm
 * stays as the one full-bleed band — the flag reduced to its clearest mark
 * rather than crammed.
 *
 * The cut-off is 48rem, not the 64rem it was first built at. At 64rem a 900px
 * window — an ordinary half-screen browser, not a phone — got the phone layout
 * with room to spare for the whole flag. The hoist only has to hold "30 000",
 * so 48rem is where it genuinely stops fitting. */
.pl-origin-hero__mast,
.pl-origin-hero__mast-edge {
  display: none;
}

.pl-origin-hero__year,
.pl-origin-hero__lead,
.pl-origin-hero__figure,
.pl-origin-hero__story {
  padding-block: var(--sp-4);
}

.pl-origin-hero__year {
  padding-block-start: var(--section-y);
}

.pl-origin-hero__story {
  padding-block-end: var(--section-y);
}

/* ----------------------------------------------------------------- the flag */
.pl-origin-hero__arm-edge,
.pl-origin-hero__arm {
  /* Bleeds to both page edges, as the design's does. */
  margin-inline: calc(-1 * var(--pl-bleed));
  transform-origin: left center;
}

.pl-origin-hero__mast-edge,
.pl-origin-hero__arm-edge {
  background: var(--pl-paper);
}

.pl-origin-hero__mast,
.pl-origin-hero__arm {
  background: var(--c-origin);
}

/* Stacked, the arm sits between the two hoist blocks and the two fly blocks.
 *
 * The column is named explicitly on both pieces because they share a row: left
 * to auto-placement the second one does not stack on the first, it opens an
 * implicit *second column* beside it — which put the red core in a 48px stub
 * against the right edge while the white band ran the full width. */
.pl-origin-hero__arm-edge,
.pl-origin-hero__arm {
  grid-column: 1;
  grid-row: 3;
}

.pl-origin-hero__arm-edge {
  height: var(--pl-band);
}

.pl-origin-hero__arm {
  height: var(--pl-core);
  align-self: center;
}

.pl-origin-hero__year   { grid-row: 1; }
.pl-origin-hero__lead   { grid-row: 2; }
.pl-origin-hero__figure { grid-row: 4; }
.pl-origin-hero__story  { grid-row: 5; }

/* ----------------------------------------------------------------- the flag */
@media (min-width: 48rem) {
  /* Three tracks each way, and the middle one *is* the cross. The hoist is
   * 19.5% as drawn, but never narrower than the figure it has to hold: paired
   * with the nowrap below, min-content is the figure on one line plus its
   * padding, so "30 000" cannot break across two lines at any width. A flat
   * 19.5% broke it at 900px, and a flat 9rem floor broke it again — the column
   * has to be measured against the type, not guessed. */
  .pl-origin-hero__inner {
    grid-template-columns: minmax(min-content, 19.5%) var(--pl-band) 1fr;
    grid-template-rows: auto var(--pl-band) auto;
  }

  .pl-origin-hero__year-figure,
  .pl-origin-hero__figure-value {
    white-space: nowrap;
  }

  .pl-origin-hero__mast,
  .pl-origin-hero__mast-edge {
    display: block;
    grid-column: 2;
    grid-row: 1 / -1;
    transform-origin: top center;
  }

  .pl-origin-hero__mast-edge {
    width: 100%;
  }

  .pl-origin-hero__mast {
    width: var(--pl-core);
    justify-self: center;
  }

  .pl-origin-hero__arm-edge,
  .pl-origin-hero__arm {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* The reds are laid over both whites so they join in the middle of the
   * cross. Without this the arm's own white edge would cut the mast in two. */
  .pl-origin-hero__mast-edge,
  .pl-origin-hero__arm-edge {
    z-index: 1;
  }

  .pl-origin-hero__mast,
  .pl-origin-hero__arm {
    z-index: 2;
  }

  .pl-origin-hero__year   { grid-area: 1 / 1; }
  .pl-origin-hero__lead   { grid-area: 1 / 3; }
  .pl-origin-hero__figure { grid-area: 3 / 1; }
  .pl-origin-hero__story  { grid-area: 3 / 3; }

  /* The quadrants keep clear of the band on the inside and sit on the page's
   * content edge on the outside. */
  .pl-origin-hero__year,
  .pl-origin-hero__figure {
    padding-inline-end: var(--sp-3);
  }

  .pl-origin-hero__lead,
  .pl-origin-hero__story {
    padding-inline-start: var(--sp-4);
  }

  .pl-origin-hero__year,
  .pl-origin-hero__lead {
    padding-block: var(--section-y) var(--sp-4);
  }

  .pl-origin-hero__figure,
  .pl-origin-hero__story {
    padding-block: var(--sp-4) var(--section-y);
  }
}

/* ------------------------------------------------------------------- motion */
/* The cross draws itself — but only once somebody is there to see it.
 *
 * As a plain load animation this ran while the page was still arriving: it
 * starts when the element first paints, which on a cold load is in the middle
 * of fonts and images landing, and it is over 1.5s later. The animation was
 * real and finished — it just happened before the page had settled.
 *
 * So the default state here is the *finished* cross. That is what renders with
 * no JavaScript, with reduced motion, and in any browser without
 * IntersectionObserver. The module's inline script arms it while the document
 * is still parsing, so there is no flash of the drawn cross, then releases it
 * when the section is actually on screen.
 */
.pl-origin-hero[data-cross="armed"] .pl-origin-hero__mast,
.pl-origin-hero[data-cross="armed"] .pl-origin-hero__mast-edge {
  transform: scaleY(0.06);
}

.pl-origin-hero[data-cross="armed"] .pl-origin-hero__arm,
.pl-origin-hero[data-cross="armed"] .pl-origin-hero__arm-edge {
  transform: scaleX(0.06);
}

.pl-origin-hero[data-cross="run"] .pl-origin-hero__mast,
.pl-origin-hero[data-cross="run"] .pl-origin-hero__mast-edge {
  animation: pl-cross-v 0.85s cubic-bezier(0.22, 0.85, 0.2, 1) both;
}

.pl-origin-hero[data-cross="run"] .pl-origin-hero__arm,
.pl-origin-hero[data-cross="run"] .pl-origin-hero__arm-edge {
  animation: pl-cross-h 1s cubic-bezier(0.22, 0.85, 0.2, 1) 0.5s both;
}

@keyframes pl-cross-v {
  from { transform: scaleY(0.06); }
  to   { transform: scaleY(1); }
}

@keyframes pl-cross-h {
  from { transform: scaleX(0.06); }
  to   { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- the type */
.pl-origin-hero__year-figure,
.pl-origin-hero__figure-value {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--track-tight);
  margin: 0;
}

.pl-origin-hero__year-note,
.pl-origin-hero__figure-note {
  margin: var(--sp-1) 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.pl-origin-hero__title {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin: var(--sp-2) 0 var(--sp-3);
}

.pl-origin-hero__intro {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
  color: var(--c-text-muted);
}

.pl-origin-hero__body {
  margin: 0;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  max-width: 54ch;
  text-wrap: pretty;
}

.pl-origin-hero__stats {
  display: grid;
  gap: 0;
  margin: var(--sp-4) 0 0;
  border-top: var(--rule) solid var(--c-rule);
}

.pl-origin-hero__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: var(--rule) solid var(--c-rule);
}

.pl-origin-hero__stat-value {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1;
  letter-spacing: var(--track-tight);
  min-width: 5ch;
}

.pl-origin-hero__stat-key {
  margin: 0;
  font-size: 0.75rem;
  color: var(--c-text-muted);
}