/* HAND-WRITTEN, like _share-box.css: no builder draws it. A COLLECTION'S PULL-OUTS, lines from our own magazine among
   its cards, each linking to its article (Jack, 7 November 2026). Taken from the sheet /design-2026/collection-pullouts/
   (cpo.css there), in Jack's mix of two of its ideas: "mix of on the photo and d3 but dont use boath cabin".
     .cpo-a1  the band: A1 on stone (D3). One line across the whole row of cards, centred, Lora italic, the source under
              it in Jost with the gold underline; a fact's heading in Larken over its words.
     .cpo-a5  on the photograph: A5. Two cards' room, the article's photograph as tall as a card's picture, the tip's
              heading in white on it over a shade from the foot, the tip's words under it where a card's line goes.
   The grid packs densely, so a band waits for the end of its row and no hole is left before it or a two-wide cell.
   Prefix cpo- (checked unused, 7 November 2026). The component is in resources/js/pages/collections/show.tsx; the
   words are in config/collection-pullouts.php. config('design.extras') puts this sheet on every collection. */

.cl-ex.cpo-host{grid-auto-flow:row dense;container-type:inline-size}
.cpo{--cpo-sz:30px;margin:0;color:var(--ink)}
.cpo p{margin:0}
.cpo a{color:inherit;text-decoration:none}
.cpo-head{font:400 calc(var(--cpo-sz) * .86)/1.15 var(--face);letter-spacing:-.005em;text-wrap:balance}
.cpo-line{font:italic 400 var(--cpo-sz)/1.34 var(--serif);letter-spacing:-.01em;text-wrap:pretty}
.cpo-by{margin-top:16px;font:400 15px/1.45 var(--sans);color:var(--ink-75)}
.cpo-by a{text-decoration:underline;text-decoration-color:#C08C3D;text-decoration-thickness:1px;text-underline-offset:5px;transition:color .3s var(--ease)}
.cpo-by a:hover{color:var(--ink)}
.cpo-q .cpo-line::before{content:"\201C"}
.cpo-q .cpo-line::after{content:"\201D"}
.cpo-t .cpo-line{font:400 18px/1.6 var(--serif);color:var(--ink-75)}
.cpo-t .cpo-head + .cpo-line{margin-top:14px}

/* the band, A1 on stone */
.cpo-a1{grid-column:1/-1;padding:68px 40px;background:var(--stone);text-align:center}
.cpo-a1 .cpo-line,.cpo-a1 .cpo-head{max-width:30ch;margin-left:auto;margin-right:auto}
.cpo-a1.cpo-t .cpo-line{max-width:52ch;text-wrap:balance}
.cpo-a1 .cpo-by{margin-top:22px}

/* on the photograph, A5: the picture as tall as a card's 3:4 picture in a column of this grid */
.cpo-a5{grid-column:span 2}
.cpo-pic{display:block;position:relative;overflow:hidden;height:calc((100cqw - (var(--ex-cols) - 1) * var(--ex-gap)) / var(--ex-cols) * 4 / 3)}
.cpo-pic img{display:block;width:100%;height:100%;object-fit:cover}
.cpo-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,18,.66),rgba(20,20,18,.22) 55%,rgba(20,20,18,0) 80%)}
.cpo-on{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 28px;color:#fff}
.cpo-a5 .cpo-on .cpo-head{font-size:32px;color:#fff}
.cpo-a5 .cpo-body{margin:12px 0 0;max-width:62ch;font:400 15px/1.62 var(--serif);color:var(--ink-75)}
.cpo-a5 .cpo-by{margin-top:10px}

@media(max-width:680px){
  .cpo{--cpo-sz:24px}
  .cpo-a1{padding:41px 20px}
  .cpo-on{padding:18px}
  .cpo-a5 .cpo-on .cpo-head{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.cpo *{transition:none!important}}