/* styles/sections/essay-flow.css
 * The long-form essay (website.pen komiq 1440, BRqWQ 390, DHIxx 1920) is one rail article
 * (editorial.css .article--rail). .article--essay sets the tracks the frames draw: on D a 720
 * text column centered in 240/720/240 with a 40 gap (komiq's column at x=360); on W 312/760/592
 * with an 8 gap (DHIxx's column 320px in, captions labelled in the 312 track). Breakouts:
 * .rail-full spans the tracks; .break-pull (960) and .break-wide (1040) are komiq's centered
 * breakouts on D and run from the text column to the far edge on W, as DHIxx sets them.
 * Also here: the section turns, the PDLC band, the stage list, the PM stack, the fern band and
 * the closing band's frame values. */
@layer sections {
  /* --ed-lh: the frames set body copy on a whole-pixel pitch (17/27 on M, 18/29 on D, 20/32 on
     W) where 1.6 gives 27.2 and 28.8, which drifts a long essay off the frames */
  .article--essay {
    --essay-turn: var(--space-48);
    --essay-era-top: var(--space-40);
    --essay-band-gap: var(--space-24);
    --ed-lh: 27px;

    padding-block: var(--section-sm) var(--section-xl);
  }

  /* Bands and spilled art reach the page edge; the page clips them so nothing scrolls sideways */
  main:has(> .article--essay) {
    overflow-x: clip;
  }

  /* The frames break lines greedily (hero, essay and closing band); the foundation's
     text-wrap: pretty would pull a word down to avoid each short last line and move every
     break after it, and balance would move the hero title's. */
  main:has(> .article--essay) :is(p, li, figcaption, .editorial-hero__title) {
    text-wrap: wrap;
  }

  /* The pull line is the exception: its two lines balance so it never ends on one word
     ("that.", team review, Oct 16); the frames' greedy break is overridden by Stephan's call. */
  main:has(> .article--essay) .pull-line {
    text-wrap: balance;
  }

  /* Between frame widths a greedy break can leave one word alone ("meetings.", "on"). Where
     the pull quote or the PM stack is narrower than its box in the nearest frame (quote 342 /
     960 / 1680, stack 342 / 720 / 720), its lines balance; at the frame widths they break as
     drawn. */
  .article--essay :is(.pull-quote, .essay-stack) {
    container-type: inline-size;
  }

  @media (max-width: 899px) {
    @container (width < 342px) {
      main:has(> .article--essay) :is(.pull-quote p, .essay-stack li) {
        text-wrap: balance;
      }
    }
  }

  @media (min-width: 900px) and (max-width: 1679px) {
    @container (width < 960px) {
      main:has(> .article--essay) .pull-quote p {
        text-wrap: balance;
      }
    }

    @container (width < 720px) {
      main:has(> .article--essay) .essay-stack li {
        text-wrap: balance;
      }
    }
  }

  @media (min-width: 1680px) {
    @container (width < 1680px) {
      main:has(> .article--essay) .pull-quote p {
        text-wrap: balance;
      }
    }

    @container (width < 720px) {
      main:has(> .article--essay) .essay-stack li {
        text-wrap: balance;
      }
    }
  }

  /* The hero title's lines are 49px boxes on BRqWQ (52 x 0.95 is 49.4) */
  @media (max-width: 899px) {
    main:has(> .article--essay) .editorial-hero__title {
      line-height: 49px;
    }
  }

  /* The hero foot drops the frames' "Essay · 7 min read" dateline (BRI-7805 J28); from 900px the
     deck keeps its place at the end edge */
  @media (min-width: 900px) {
    main:has(> .article--essay) .editorial-hero__deck {
      margin-inline-start: auto;
    }
  }

  /* Scribble underline. The 390 frame breaks "goddamn / meetings" with one scribble per line,
     which the shared inline-block .scribble-underline cannot do. Here it is inline and the
     scribble (Pencil exports of the essay frames' underline paths) is a background cloned onto
     each line fragment, set in the glyph box (Piazzolla ascent plus descent, 1.4167em) so its
     bottom lands where the shared rule puts it. It starts --scribble-lead before the word, as
     the frames draw it. The front copy over the first glyph is the shared rule's ::before,
     drawn from the same image; when the phrase wraps, its box spans first to last fragment,
     and under 3em it is clipped away rather than drawn as a sliver. */
  .article--essay .scribble-underline {
    --scribble-img: url("/assets/figures/modern-pdlc/scribble-underline-m.png");
    --scribble-glyph-box: 1.4167em;
    --scribble-lift: calc((var(--scribble-glyph-box) - 1lh) / 2 + var(--ed-scribble-bottom, -0.2em));
    --scribble-lead: 0.125em;

    display: inline;
    isolation: auto;
    margin-inline-start: calc(-1 * var(--scribble-lead));
    padding-inline-start: var(--scribble-lead);
    font-style: inherit;
    background: var(--scribble-img) 0 calc(100% - var(--scribble-lift)) / calc(100% - var(--scribble-lead)) var(--ed-scribble-h, 0.28em) no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .article--essay .scribble-underline::after {
    content: none;
  }

  .article--essay .scribble-underline::before {
    inset: calc(var(--scribble-glyph-box) - var(--scribble-lift) - var(--ed-scribble-h, 0.28em)) 0 auto;
    background: var(--scribble-img) 0 0 / calc(100% - var(--scribble-lead)) 100% no-repeat;
    -webkit-mask: none;
    mask: none;
    clip-path: inset(0 max(100% - 0.62em - var(--scribble-lead), clamp(0px, (3em - 100%) * 1000, 100%)) 0 0);
  }

  /* Section turns: the frames' section pads, less the rail's 28px row gap */
  .article--essay > .essay-turn {
    margin-top: calc(var(--essay-turn) - var(--ed-gap));
  }

  /* Era headings are the board's h2-centered; the frames box them on whole pixels (29 / 50 /
     91 for 28 / 48 / 96px) where 1.05 and 0.95 give 29.4, 50.4 and 91.2 */
  .article--essay > .essay-era__heading {
    margin-top: calc(var(--essay-era-top) - var(--ed-gap));
    line-height: 29px;
  }

  /* The first era follows the eras paragraph and its 20px spacer */
  .article--essay > .essay-eras__intro + .essay-era__heading {
    margin-top: calc(var(--space-20) + var(--essay-era-top));
  }

  /* A frame spacer sits between two 28px gaps; the rail grid gives one, the margin the other.
     Figures carry the frames' 20px spacer above and below. */
  .essay-fig {
    margin-block: calc(var(--space-20) + var(--ed-gap));
  }

  .essay-stages + .essay-map {
    margin-top: calc(36px + var(--ed-gap));
  }

  .essay-map,
  .essay-team {
    margin-bottom: 0;
  }

  .essay-stairs {
    margin-top: 0;
  }

  .article--essay > .pull-line--rule + p {
    margin-top: calc(var(--space-12) + var(--ed-gap));
  }

  /* BRqWQ sets the era 1 pull line on 34px lines (the shared 1.05 gives 33.6) */
  @media (max-width: 899px) {
    .article--essay > .pull-line--rule {
      line-height: 34px;
    }
  }

  .article--essay > .lead {
    margin-top: calc(var(--space-20) + var(--ed-gap));
  }

  /* Full-width bands: the band box spans the article to its outer edge, and its fill (inherited,
     so the fern band keeps its grain) runs on to the viewport edge behind it */
  .essay-band,
  .essay-future {
    position: relative;
    isolation: isolate;
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
  }

  .essay-band::before,
  .essay-future::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background: inherit;
  }

  /* PDLC ≠ SDLC band */
  .essay-band {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--essay-band-gap);
    margin-block: calc(var(--section-xs) - var(--ed-gap));
    padding-block: var(--section-xs);
  }

  /* The display is about 5.8em wide on every frame and may run into the gutters (the 1920 frame
     sets it 18px past them); between frames it shrinks with the band instead of overflowing */
  .essay-band__display {
    display: flex;
    align-items: center;
    gap: 0.172em;
    margin: 0;
    font-family: var(--font-display);
    font-size: min(58px, (100cqi + 2 * var(--page-gutter)) / 6.2);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.7px;
    white-space: nowrap;
  }

  .essay-band__pdlc {
    color: var(--ink);
  }

  .essay-band__ne {
    position: relative;
    color: var(--orange-deep);
  }

  .essay-band__sdlc {
    color: var(--ink-55);
  }

  .essay-band__ring {
    position: absolute;
    top: 2px;
    left: -12px;
    width: 53px;
    max-width: none;
    height: 62px;
    pointer-events: none;
  }

  .essay-band__ring img {
    width: 100%;
    height: 100%;
  }

  .essay-band__gloss {
    max-width: 342px;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    font-weight: 600;
    line-height: var(--t-h5-lh);
    letter-spacing: var(--t-h5-ls);
    text-align: center;
    text-wrap: balance;
    color: var(--ink);
  }

  /* Seven stages. The numerals are text (aria-hidden; the list numbers itself for assistive
     tech) so the .md keeps the ordinals the essay refers to. Rules are inset shadows: Pencil draws strokes inside the box, so they add no height. */
  .essay-stages {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block: 0;
    padding: 0;
    list-style: none;
    box-shadow: inset 0 1.5px var(--ink);
  }

  .prose .essay-stages__item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: var(--space-16);
    row-gap: var(--space-6);
    padding: 22px 0;
    box-shadow: inset 0 -1px var(--line);
  }

  .essay-stages__num {
    grid-row: 1 / 3;
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-55);
  }

  .is-current > .essay-stages__num {
    color: var(--fern);
  }

  .essay-stages__name {
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    font-weight: 600;
    line-height: var(--t-h5-lh);
    letter-spacing: var(--t-h5-ls);
    color: var(--ink);
  }

  .essay-stages__desc {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 27px;
    color: var(--ink-2);
  }

  /* PM stack: index over the line on M, beside it from D */
  .essay-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-block: 0;
    padding: var(--space-8) 0;
    list-style: none;
  }

  .prose .essay-stack__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding: var(--space-16) var(--space-20);
    border-radius: var(--radius-sm);
    background: var(--mist);
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    font-weight: 600;
    line-height: 21px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .prose .essay-stack__item:nth-child(even) {
    background: var(--paper);
  }

  .essay-stack__index {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.4px;
    color: var(--fern);
  }

  /* BRqWQ stacks the index on a 14px line (cells 87 and 108 tall) */
  @media (max-width: 899px) {
    .essay-stack__index {
      line-height: 14px;
    }
  }

  /* Fern band with the future h2 (prose--centered sizes the era h2s, not this one) */
  .essay-future {
    margin-block: calc(120px - var(--ed-gap)) calc(var(--section-sm) - var(--ed-gap));
    padding-block: var(--section-sm);
  }

  .prose .essay-future__heading {
    max-width: 1000px;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--t-display-md-size);
    font-weight: 600;
    line-height: var(--t-display-md-lh);
    letter-spacing: var(--t-display-md-ls);
    text-wrap: wrap;
    color: var(--white);
  }

  .essay-future__break {
    display: none;
  }

  /* The essay's closing band (komiq mjFMo, BRqWQ TIQgE, DHIxx I4PKWc) is the centered recipe
     with the frames' own values: actions in a row on M, a 32px bottom row on M, and a 120px
     display-lg heading with a 640px deck on W. */
  @media (max-width: 899px) {
    .article--essay + .closing-cta {
      --closing-body-gap: var(--space-32);
      --closing-actions-direction: row;
      --closing-actions-align: center;
    }
  }

  @media (min-width: 900px) {
    .article--essay {
      --essay-turn: var(--space-64);
      --essay-era-top: var(--space-56);
      --ed-lh: 29px;

      grid-template-columns: minmax(0, 240fr) minmax(0, 720fr) minmax(0, 240fr);
      column-gap: var(--space-40);
    }

    .article--essay .scribble-underline {
      --scribble-img: url("/assets/figures/modern-pdlc/scribble-underline-d.png");
    }

    .article--essay > :is(.break-pull, .break-wide) {
      grid-column: 1 / -1;
      justify-self: center;
      width: 100%;
      max-width: var(--break-pull);
    }

    .article--essay > .break-wide {
      max-width: var(--break-wide);
    }

    /* komiq (NGHMm) sets the pull line in a 900px text box inside the 960 break:
       960 - 3 rule - 40 pad - 900 = 17 */
    .article--essay > .pull-line--rule {
      padding-inline-end: 17px;
    }

    .essay-band__display {
      gap: 0.227em;
      font-size: min(var(--t-mega-size), (100cqi + 2 * var(--page-gutter)) / 6.2);
      font-weight: 600;
      line-height: 0.95;
      letter-spacing: var(--t-mega-ls);
    }

    .essay-band__ring {
      top: 0.068em;
      left: -0.1875em;
      width: 0.858em;
      height: 0.875em;
    }

    .essay-band__gloss {
      max-width: var(--measure);
      font-size: var(--t-h4-size);
      line-height: var(--t-h4-lh);
      letter-spacing: var(--t-h4-ls);
    }

    .prose .essay-stages__item {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: var(--space-24);
    }

    .essay-stages__num {
      font-size: 32px;
      color: var(--ink-50);
    }

    .essay-stages__name {
      font-size: 22px;
      line-height: 25px;
      letter-spacing: -0.3px;
    }

    .essay-stages__desc {
      line-height: 26px;
    }

    .prose .essay-stack__item {
      flex-direction: row;
      align-items: center;
      line-height: 25px;
    }

    .article--essay > .essay-era__heading {
      line-height: 50px;
    }

    .prose .essay-future__heading {
      font-size: var(--t-display-lg-size);
      line-height: var(--t-display-lg-lh);
      letter-spacing: var(--t-display-lg-ls);
    }
  }

  @media (min-width: 1680px) {
    .article--essay {
      --essay-turn: var(--space-80);
      --essay-era-top: 70px;
      --essay-band-gap: var(--space-40);
      --ed-lh: 32px;

      grid-template-columns: minmax(0, 312fr) minmax(0, 760fr) minmax(0, 592fr);
      column-gap: var(--space-8);
    }

    .article--essay .scribble-underline {
      --scribble-img: url("/assets/figures/modern-pdlc/scribble-underline-w.png");
    }

    /* DHIxx: the pull quote, the pull line and the era headings span the container; the
       pressure card and the inbox run from the text column to its right edge */
    .article--essay > :is(.break-pull, .essay-era__heading) {
      grid-column: 1 / -1;
      max-width: none;
    }

    .article--essay > .break-wide {
      grid-column: 2 / -1;
      max-width: none;
    }

    /* DHIxx sets the pull line in a 1500px text box across the container (the line fills its
       grid area here, so the percentage is its own width) */
    .article--essay > .pull-line--rule {
      padding-inline-end: max(0px, 100% - 1500px - var(--space-48) - 4px);
    }

    .article--essay > .essay-eras__intro {
      grid-column: 1 / -1;
      justify-self: center;
      max-width: var(--measure);
    }

    .article--essay > .lead {
      grid-column: 2 / -1;
      max-width: 1000px;
    }

    .essay-band__display {
      gap: 0.187em;
    }

    .essay-band__ring {
      top: 0.097em;
      left: -0.18em;
      width: 0.867em;
      height: 0.877em;
    }

    .essay-band__gloss {
      max-width: 980px;
    }

    /* The numerals hang in the margin track, right-aligned 24px off the text */
    .prose .essay-stages__item {
      position: relative;
      display: block;
      padding-block: 26px;
    }

    .essay-stages__name,
    .essay-stages__desc {
      display: block;
    }

    .essay-stages__name {
      margin-bottom: var(--space-6);
    }

    .essay-stages__num,
    .is-current > .essay-stages__num {
      position: absolute;
      top: 26px;
      right: calc(100% + var(--space-24));
      width: 296px;
      font-size: 44px;
      text-align: right;
      color: color-mix(in srgb, var(--ink) 25%, transparent);
    }

    .essay-stack {
      max-width: 720px;
    }

    .prose .essay-stack__item {
      line-height: 29px;
    }

    .article--essay > .essay-era__heading {
      line-height: 91px;
    }

    .essay-future {
      display: flex;
      justify-content: flex-end;
    }

    .prose .essay-future__heading {
      flex: 0 1 1400px;
      max-width: 1400px;
    }

    .essay-future__break {
      display: inline;
    }

    .article--essay + .closing-cta {
      --closing-heading-measure: 1400px;
      --closing-heading-size: var(--t-display-lg-size);
      --closing-heading-lh: var(--t-display-lg-lh);
      --closing-heading-ls: var(--t-display-lg-ls);
      --closing-deck-measure: 640px;
      --closing-deck-lh: 1.5;
    }
  }

  /* Forced colors drop box-shadow; the figure and list rules come back as borders */
  @media (forced-colors: active) {
    :is(.essay-stages, .essay-stairs__labels, .essay-sort__stages, .essay-map__grid) {
      border-top: 1px solid CanvasText;
    }

    :is(.essay-stages__item, .essay-sort__stage, .essay-questions__item, .essay-stairs__details, .essay-team__body, .essay-inbox__body, .essay-sort__body, .essay-questions__list, .essay-map__path) {
      border-bottom: 1px solid CanvasText;
    }

    :is(.essay-team__body, .essay-inbox__body, .essay-sort__body, .essay-questions__list, .essay-map__path) {
      border-top: 1px solid CanvasText;
    }

    :is(.essay-pressure__card, .essay-sort__chip) {
      border: 1px solid CanvasText;
    }

    .essay-stairs__detail {
      border-left: 2px solid CanvasText;
    }
  }
}