/* Article covers, drawn in the browser from each post's title.

   Posts JJ has given a picture from his brand guide (covers/brand/, listed in jj-covers.js)
   show that picture instead; see .jc-photo at the end. Every other post falls back to this
   tile. Why a tile and not stock art: the brand guide (p25) sets the identity apart from
   "graphs, money or corporate portraits", which is what the previous cover art was. Its own
   post tiles (p37-38) are text-forward: a caps headline in the accent face on a
   leather-textured ground, tiles alternating between green, cool black and khaki. That is
   reproduced here from the title alone, so a post published later still gets an on-brand
   cover with no image to make.

   Grounds follow the guide's contrast rules: khaki and gold on green (6.1:1), khaki and
   gold on cool black (9.3:1), night-turquoise on khaki (6.1:1). Anzac is never set on
   khaki. Container-query units (cqw) keep the type proportional to the tile. */
.jc{position:absolute;inset:0;overflow:hidden;container-type:inline-size;
  background:var(--jc-bg);color:var(--jc-ink);font-family:"Archivo Expanded","Arial Black",sans-serif}
.jc::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;
  background:url('/brand/texture/jj-leather.jpg') center/cover}
.jc__peaks{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%;display:block}
.jc__peaks path{fill:var(--jc-peak)}
.jc__title{position:absolute;z-index:1;left:28px;right:28px;top:30px;margin:0;
  font-weight:900;font-size:22px;line-height:1.06;letter-spacing:-.005em;text-transform:uppercase;
  color:var(--jc-ink);overflow-wrap:break-word;hyphens:none}
.jc__title em{font-style:normal;color:var(--jc-key)}
.jc__lock{position:absolute;z-index:1;left:28px;bottom:24px;display:flex;align-items:center;gap:9px}
.jc__lock img{display:block;height:26px;width:auto}
.jc__lock span{font-weight:900;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--jc-lock)}

/* the three grounds of the guide, in the guide's own proportions (green leads) */
.jc--green{--jc-bg:#004137;--jc-ink:#C6BE8B;--jc-key:#E0B848;--jc-peak:#222F28;--jc-lock:#E0B848}
.jc--night{--jc-bg:#121923;--jc-ink:#C6BE8B;--jc-key:#E0B848;--jc-peak:#1B2533;--jc-lock:#E0B848}
.jc--night .jc__title{font-family:"Libre Baskerville",Baskerville,Georgia,serif;font-weight:400;text-transform:none;
  letter-spacing:0;line-height:1.24;font-size:20px}
.jc--night .jc__title em{font-style:italic;font-weight:700}
.jc--khaki{--jc-bg:#C6BE8B;--jc-ink:#004137;--jc-key:#C6BE8B;--jc-peak:rgba(0,65,55,.1);--jc-lock:#004137}
.jc--khaki::after{opacity:.32}
.jc--khaki .jc__title em{background:#004137;color:#C6BE8B;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

@supports (font-size:1cqw){
  .jc__title{left:8.5cqw;right:8.5cqw;top:9cqw;font-size:var(--jc-fs,8cqw)}
  .jc--night .jc__title{font-size:calc(var(--jc-fs,8cqw) * .9)}
  .jc__lock{left:8.5cqw;bottom:7cqw;gap:2.6cqw}
  .jc__lock img{height:7.4cqw}
  .jc__lock span{font-size:max(11px,3.5cqw)}
}

/* the cover already shows the title; keep the caption's copy for screen readers and link text.
   The card must be its containing block: otherwise each hidden title sits outside the scrolling
   carousel's clip, widens the page and makes phones zoom out. */
.pcard{position:relative}
.pcard .cap h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pcard .cap{padding-top:12px}

/* Posts with a picture from the brand guide (JJCover.fill). The picture carries no title, so
   these cards show the caption title as text again, above the date line. Square, no filter:
   the cover's own rule frames it like every other image on the site. Until the picture loads
   the box shows khaki, the ground of both sections that hold cards (index.html's Insights
   section has no --surface-raised, so the fallback is what shows there).
   Kerning is off on the title: Archivo Expanded kerns Y against the space, which shrinks the
   gap in "WHY YOUR" to about half a word space and reads as one word. */
.jc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-raised,#C6BE8B)}
.pcard.has-photo .cap{padding-top:16px}
.pcard.has-photo .cap h3{position:static;width:auto;height:auto;margin:0 0 8px;overflow:visible;clip:auto;white-space:normal;overflow-wrap:break-word;font-kerning:none}

/* The homepage's skeleton cards (index.html #homePosts) hold the room a picture card's caption
   takes, so the carousel keeps its height when the posts arrive: a title box four lines tall
   (the longest live title wraps to four on most card widths, and the tallest card sets the
   carousel's height), then the date line. */
.pcard.skel .cap{padding-top:16px}
.pcard.skel .cap h3{position:static;width:auto;height:auto;margin:0 0 8px;overflow:visible;clip:auto;white-space:normal;
  min-height:5.04em;min-height:4lh}
.pcard.skel .cap .cat{min-height:1.65em;min-height:1lh}