/* Issue 02 — The API Economy. Same reading room as Issue 01 (columns, panels, one body size, the marks);
   its own wall and its own display face. The wall is a deep banker's green; the panels are bond paper,
   a pink-salmon like a financial broadsheet, and a pale ledger grey. Headings are Bricolage Grotesque. */
.pg-take{--wall:#173a2d;--wall-2:#0f2a20;--paper:#f3efe4;--stone:#e3e5dc;--clay:#f1dccd;--ink:#101713;--ink-t:#14171a;--ink-2:#525a56;--rail:#f3efe4;
  background:radial-gradient(130% 44vh at 50% 0%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 60%) top/100% 100vh no-repeat,
             linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);color:#eef3ee}
.t-col{width:min(780px,calc(100% - 2 * var(--gut)));margin-inline:auto}

/* the title page — Bricolage Grotesque for the title, Caslon italic for the dek (as Issue 01) */
.t-head{text-align:center;max-width:980px;margin:0 auto;padding:0 var(--gut) clamp(40px,6vh,68px)}
.t-head .kick{color:rgba(238,243,238,.72)}
/* the title page wears the cover's own sticker type, at the size and place Issue 01 set its title and dek */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-title{width:min(360px,62vw);margin:clamp(20px,3vh,30px) auto 0;line-height:0}
.t-title img{display:block;width:100%;height:auto;margin-left:6%;filter:drop-shadow(0 14px 24px rgba(0,0,0,.3))}
.t-dek{width:min(440px,80vw);margin:clamp(12px,1.8vh,18px) auto 0;line-height:0}
.t-dek img{display:block;width:100%;height:auto}
.t-by{margin:clamp(24px,3.2vh,34px) 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;
  font:500 12.5px/1.5 var(--f);color:rgba(238,243,238,.64)}
.t-by b{font-weight:600;color:#fff}
.t-by>span{display:flex;align-items:center;white-space:pre}
.t-by>span+span::before{content:"";width:3px;height:3px;margin-right:20px;border-radius:50%;background:currentColor;opacity:.5}

/* on the cover: the painting, hung with its label */
.oncover{max-width:900px;margin:0 auto;padding:0 var(--gut) clamp(50px,8vh,90px)}
.oncover>.kick{margin:0 0 clamp(20px,3vh,30px);color:rgba(238,243,238,.72)}
.oc-hang{display:grid;grid-template-columns:minmax(0,420px);justify-content:center;gap:clamp(20px,2.8vw,42px);align-items:end}
.oc-frame{margin:0;padding:clamp(10px,1.3vw,18px);background:#fbf9f4;border-radius:2px;
  box-shadow:0 0 0 clamp(5px,.6vw,8px) #16130f,0 46px 70px -30px rgba(0,0,0,.65),0 6px 16px rgba(0,0,0,.3)}
.oc-frame img{width:100%;height:auto}
.label{background:var(--paper);color:var(--ink-t);padding:clamp(18px,2vw,26px);border-radius:2px;
  font:400 13.5px/1.55 var(--f);box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.label p{margin:0}
.label .who{font:600 15px/1.3 var(--f)}
.label .life{margin-top:3px;color:var(--ink-2)}
.label .ti{margin-top:12px;font:italic 400 17px/1.3 var(--i)}
.label .ti span{font-style:normal;font-family:var(--f);font-size:14px}
.label .md{margin-top:10px;font-size:11px;line-height:1.45;color:var(--ink-2)}
.label .line{margin-top:12px;padding-top:12px;border-top:1px solid rgba(21,22,26,.14);font-size:12.5px;line-height:1.5;color:var(--ink-t)}

/* ---------- the reading: a column of panels, one body size throughout ---------- */
.t-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vh,26px)}
.plq{--fs:clamp(16px,1.18vw,17.5px);border-radius:3px;padding:clamp(30px,4.2vw,64px) clamp(22px,4.4vw,64px);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.c-paper{background:var(--paper);color:var(--ink-t)}
.c-stone{background:var(--stone);color:var(--ink-t)}
.c-clay{background:var(--clay);color:var(--ink-t)}
.c-ink{background:var(--ink);color:#ece9e1}
.plq p{margin:0 0 1.15em;font:400 var(--fs)/1.86 var(--f);letter-spacing:-.003em}
.plq p:last-child{margin-bottom:0}
.plq h2{margin:0 0 clamp(18px,2.6vh,28px);font:italic 900 clamp(30px,3.4vw,48px)/1.04 CQF,Georgia,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 96;letter-spacing:-.012em;text-shadow:.055em .055em 0 var(--acid)}
.c-ink h2{text-shadow:.055em .055em 0 #2c5747}
.plq p+h2{margin-top:clamp(34px,5vh,52px)}
/* the words that are hers to keep: always in Caslon italic */
.plq i,.plq em,.plq h2 i{font-style:italic;font-family:var(--i);font-size:1.02em;line-height:1;letter-spacing:0}
/* in the display headings, the italic is the display face itself, slanted, so it keeps the heading's weight */
.plq h2 i{font-family:CQF,Georgia,serif;font-size:1em}
.plq b{font-weight:600}
.plq blockquote{margin:clamp(22px,3.4vh,32px) 0;padding:0 0 0 clamp(16px,2.2vw,26px);border-left:2px solid rgba(21,22,26,.22)}
.plq blockquote p{font-family:var(--i);font-style:italic;font-size:calc(var(--fs) * 1.08);line-height:1.7;color:#2a2b31}
.plq blockquote cite{display:block;margin-top:-.4em;font:500 11px/1.4 var(--m);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--ink-2)}
.plq blockquote cite::before{content:"— "}
.c-ink blockquote{border-left-color:rgba(236,233,225,.3)}
.c-ink blockquote p{color:#efece4}

/* links: a thin line of highlighter that floods the word when you reach for it */
.plq a{color:inherit;text-decoration:none;padding:0 .08em;margin:0 -.08em;border-radius:2px;
  background:linear-gradient(rgba(237,255,6,.85),rgba(237,255,6,.85)) 0 100%/100% .22em no-repeat;
  transition:background-size .45s var(--e-out),color .3s}
.plq a:hover,.plq a:focus-visible{background-size:100% 100%;color:#0a0a0a}
.c-ink a{background-image:linear-gradient(rgba(237,255,6,.7),rgba(237,255,6,.7))}

/* ---------- the highlighter: drawn on as you reach it, line by line ---------- */
.mk{background:linear-gradient(100deg,rgba(237,255,6,.38),rgba(237,255,6,.7) 4%,rgba(237,255,6,.62) 96%,rgba(237,255,6,.3)) 0 70%/0% .9em no-repeat;
  padding:.04em .1em;margin:0 -.1em;transition:background-size 1.6s var(--e-out) .2s}
.plq.in .mk{background-size:100% .9em}
.c-ink .mk{background-image:linear-gradient(rgba(237,255,6,.3),rgba(237,255,6,.3))}
/* a more formal emphasis — a fine rule, not a marker fill — for a line that wants weight without shouting */
.mk-form{background:none;padding:0;border-bottom:1.5px solid currentColor;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  border-bottom:none;transition:background-size 1.4s var(--e-out) .2s}
.plq.in .mk-form{background-size:100% 1.5px}
/* a loose maroon ring, drawn in and traced again a few times so it's noticed */
.ci{position:relative;display:inline-block;white-space:nowrap}
.ci svg{position:absolute;left:-13%;top:-24%;width:128%;max-width:none;height:150%;overflow:visible;pointer-events:none}
.ci path{fill:none;stroke:#8c1d12;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.plq.in .ci path{animation:circleIt 2.3s var(--e-out) .3s 3}
@keyframes circleIt{0%{stroke-dashoffset:1}42%,58%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.c-ink .ci path{stroke:var(--acid)}
.ty::after{content:"";display:inline-block;width:.08em;height:1em;margin-left:.06em;background:currentColor;vertical-align:-.12em;animation:caret 1s steps(2) infinite}
.ty.done::after{display:none}
@keyframes caret{50%{opacity:0}}

/* a small comic-book "???" that appears right beside the word, typed in once and gone —
   kept inline (not floated above) so it can never collide with the line above it */
.ty-bubble-wrap{white-space:nowrap}
.ty-bubble-tip{display:inline-block;vertical-align:.25em;margin-left:.35em;max-width:0;overflow:hidden;
  padding:.1em 0;border-radius:999px;background:#1c1d22;color:#fff;
  font:700 .62em/1 var(--f);letter-spacing:.02em;white-space:nowrap;
  opacity:0;transition:opacity .2s,max-width .35s var(--e-out),padding .35s var(--e-out)}
.ty-bubble-wrap.ty-bubble-on .ty-bubble-tip{opacity:1;max-width:3em;padding:.1em .5em}
.c-ink .ty-bubble-tip{background:var(--acid);color:#0a0a0a}

.plq .sign{margin-top:clamp(28px,4.2vh,44px);padding-top:clamp(22px,3vh,30px);border-top:1px solid rgba(21,22,26,.16);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.plq .sign b{display:block;font:italic 400 clamp(24px,2.2vw,30px)/1.2 var(--i)}
.plq .sign > div:first-child span{display:block;margin-top:8px;font:500 12.5px/1.5 var(--f);color:var(--ink-2)}
.c-ink .sign{border-top-color:rgba(236,233,225,.2)}
.c-ink .sign > div:first-child span{color:rgba(236,233,225,.6)}
.stamp{display:flex;align-items:center}
.t-stamp{display:flex;justify-content:center;margin:clamp(22px,3vh,30px) auto 0}

/* the Pangram stamp: a quiet label; hover (or tap) and the original stamp rises above it on a small card */
.pgs{position:relative;display:inline-flex;cursor:default;outline:none;-webkit-tap-highlight-color:transparent}
.pgs .pgs-l{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 13px 6px 10px;border-radius:999px;
  font:600 9.5px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .3s,border-color .3s}
.pgs-l svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pgs-top .pgs-l{color:rgba(238,243,238,.82);border:1px solid rgba(238,243,238,.24)}
.pgs-top:hover .pgs-l,.pgs-top:focus-visible .pgs-l{border-color:rgba(238,243,238,.5);background:rgba(255,255,255,.05)}
.pgs-end .pgs-l{color:rgba(236,233,225,.72);border:1px solid rgba(236,233,225,.22)}
.pgs-end:hover .pgs-l,.pgs-end:focus-visible .pgs-l{border-color:rgba(236,233,225,.5)}
.pgs .pgs-pop{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:20;display:grid;justify-items:center;gap:6px;width:152px;margin:0;padding:14px 14px 10px;
  border-radius:14px;background:#f4f1ea;box-shadow:0 18px 40px -14px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.94);transform-origin:50% 100%;pointer-events:none;
  transition:opacity .28s ease,transform .38s cubic-bezier(.2,.9,.3,1),visibility 0s linear .38s}
.pgs-pop::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:#f4f1ea;transform:translate(-50%,-6px) rotate(45deg);border-radius:0 0 3px 0}
.pgs-pop img{display:block;width:100%;height:auto}
.pgs-pop small{font:600 8.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#6b6a66}
.pgs:hover .pgs-pop,.pgs:focus-visible .pgs-pop,.pgs.on .pgs-pop{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}

/* how far you have read, and how many words of it */
.rail{position:fixed;right:clamp(12px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:120;display:grid;gap:14px;justify-items:center;
  opacity:0;transition:opacity .5s var(--e);pointer-events:none}
.rail.on{opacity:1}
.rail .trk{position:relative;width:2px;height:clamp(90px,16vh,150px);background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.rail .trk i{position:absolute;inset:0 0 auto 0;height:var(--p,0%);background:var(--rail);border-radius:2px}
.rail .n{font:600 14px/1 var(--f);letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.rail .l{margin-top:-7px;font:600 8.5px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}

/* the share card, at the end of the issue */
.t-share{margin:clamp(36px,5vh,64px) auto clamp(18px,2.4vh,28px)}
.t-resub{margin:0 auto clamp(80px,13vh,150px)}
.t-resub-in{background:#0d0c0a url("/assets/img/paper-in.webp?v=5004c6a95e") center/max(1100px,100%) auto;border-radius:6px;
  box-shadow:0 20px 44px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 70px rgba(0,0,0,.45);
  padding:clamp(20px,2.8vw,30px) clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,26px)}
.t-resub-t{flex:1 1 100%;min-width:0}
.t-resub-in .t-resub-t p.sub-note{max-width:none}
.t-resub-in .t-resub-t p{margin:0;font:400 15px/1.4 var(--f);color:rgba(244,241,234,.9)}
.t-resub-in .t-resub-t p.sub-note{margin:8px 0 0;padding-left:18px;font:400 12.5px/1.5 var(--f);color:rgba(244,241,234,.6)}
.t-resub-in form{flex:1 1 100%;width:auto;max-width:440px}
.t-resub-in .inline{gap:8px;flex-wrap:nowrap}
.t-resub-in .field{display:block}
.t-resub-in label{display:none}
.t-resub-in .field input{height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(244,241,234,.22);background:rgba(255,255,255,.04);color:#f4f1ea;font:400 14px/1 var(--f)}
.t-resub-in .field input::placeholder{color:rgba(244,241,234,.45)}
.t-resub-in .btn{height:44px;flex:none}
.t-resub-in .said{flex-basis:100%;margin:0;font:400 12.5px/1.4 var(--f);color:rgba(244,241,234,.6)}
@media (max-width:640px){.t-resub-in{flex-direction:column;align-items:stretch;gap:14px;padding:20px 18px}.t-resub-t,.t-resub-in form{flex:none;max-width:none}.t-resub-in .said:empty{display:none}}
.t-share-in{background:#0d0c0a url("/assets/img/paper-in.webp?v=5004c6a95e") center/max(1100px,100%) auto;border-radius:6px;box-shadow:0 30px 60px -36px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 90px rgba(0,0,0,.45);padding:clamp(28px,4vw,52px);display:grid;gap:clamp(22px,3vw,32px);
  grid-template-columns:minmax(0,1fr) auto;align-items:center}
.t-share .kick{color:var(--acid)}
.t-share h3{margin:14px 0 0;font:italic 900 clamp(26px,2.6vw,36px)/1.05 CQF,Georgia,serif;font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:-.01em;color:#fff}
.t-share p{margin:8px 0 0;font:400 13.5px/1.5 var(--f);color:var(--mute-2)}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-row a,.share-row button{display:inline-flex;align-items:center;height:42px;padding:0 17px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:none;cursor:pointer;font:600 11px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;
  transition:background .25s,color .25s,border-color .25s}
.share-row a:hover,.share-row button:hover,.share-row button.done{background:var(--acid);border-color:var(--acid);color:#0a0a0a}

@media (max-width:900px){
  .oc-hang{grid-template-columns:1fr}
  .label{max-width:560px}
  .t-share-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rail{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px;transform:none;grid-auto-flow:column;align-items:center;gap:9px;
    padding:9px 14px;border-radius:999px;background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .rail .trk{width:46px;height:2px}
  .rail .trk i{inset:0 auto 0 0;width:var(--p,0%);height:100%}
  .rail .n{font-size:13px}
  .rail .l{margin:0;font-size:8.5px}
}

/* photographs set into the column, newspaper style: small, wrapped by the text, a quiet caption */
.plq .fig{width:44%;margin:.35em 0 1.1em;padding:0}
.plq .fig-big{width:54%}
.plq .fig-r{float:right;margin-left:clamp(18px,2.4vw,30px)}
.plq .fig-l{float:left;margin-right:clamp(18px,2.4vw,30px)}
.plq .fig-full{float:none;clear:both;width:100%;margin:.5em 0 1.6em}
.plq .fig img{display:block;width:100%;height:auto;border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 22px -16px rgba(0,0,0,.55)}
.plq .fig figcaption{margin-top:8px;font:italic 400 12.5px/1.35 var(--i);color:rgba(21,22,26,.66)}
.plq.c-ink .fig figcaption{color:rgba(236,233,225,.6)}
.plq h2,.plq .sign,.plq blockquote{clear:both}
.plq::after{content:"";display:block;clear:both}
@media (max-width:700px){
  .plq .fig,.plq .fig-r,.plq .fig-l{float:none;width:100%;margin:.4em 0 1.4em}
}

/* the end of the essay: the count becomes a small trophy and one quiet line */
.rail .n svg{display:block;width:18px;height:18px;fill:none;stroke:var(--rail,#edff06);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail.done .n{animation:rail-win .6s cubic-bezier(.2,1.4,.4,1) both}
.rail.done .l{font:500 11px/1.3 var(--f);letter-spacing:.01em;text-transform:none;color:rgba(255,255,255,.82);margin-top:-6px;animation:rail-in .6s ease .1s both}
@keyframes rail-win{from{transform:scale(.4);opacity:0}}
@keyframes rail-in{from{opacity:0;transform:translateY(4px)}}

/* ---------- Issue 02's own pieces ---------- */
/* a statement that carries a section: set in the display face, between the paragraphs */
.plq p.pull{margin:0 0 1em;font:italic 800 clamp(24px,2.5vw,34px)/1.16 CQF,Georgia,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;letter-spacing:-.01em}
.plq p.say{font-weight:500}

/* film stills: colour frames from a dark room, so they sit in a thin black frame with a slate for a caption */
.plq .fig-film img{border:4px solid #0b0b0b;border-radius:2px;box-shadow:0 18px 30px -18px rgba(0,0,0,.7)}
.plq .fig-film figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:baseline;gap:9px;font:400 11.5px/1.4 var(--m);font-style:normal;letter-spacing:.01em;color:rgba(21,22,26,.66)}
.plq .fig-film figcaption span{flex:none;padding:3px 6px 2px;border-radius:2px;background:#0b0b0b;color:#f3efe4;font:600 10px/1 var(--m);letter-spacing:.08em}
.plq .fig-small{width:38%}

/* ---------- charts: drawn in the page, not pasted in, so they share its type and come alive as you reach them ---------- */
.plq .chart{margin:1.4em 0 1.9em;padding:clamp(18px,2.4vw,28px) clamp(16px,2.4vw,28px) clamp(14px,1.8vw,20px);
  background:rgba(255,255,255,.42);border:1px solid rgba(21,22,26,.1);border-radius:3px}
.ch-head{margin:0 0 clamp(18px,2.4vw,26px)!important;display:grid;gap:4px;font-style:normal!important}
.ch-head b{font:700 clamp(17px,1.5vw,20px)/1.2 var(--g);font-stretch:96%;letter-spacing:-.01em;color:var(--ink-t)}
.ch-head span{font:400 13px/1.4 var(--f);color:var(--ink-2)}
.ch-note{margin:clamp(14px,2vw,20px) 0 0!important;font:400 11px/1.5 var(--m)!important;letter-spacing:.01em!important;color:var(--ink-2)}

/* share of revenue the builder kept */
.ch-bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ch-bars li{display:grid;grid-template-columns:minmax(150px,36%) minmax(0,1fr) 46px;align-items:center;gap:14px}
.ch-bars .nm{font:400 13.5px/1.25 var(--f);color:var(--ink-t)}
.ch-bars .bar{position:relative;height:26px;border-left:1px solid rgba(21,22,26,.3)}
.ch-bars .bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 1%);border-radius:0 3px 3px 0;background:#b9bdae;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--e-out)}
.ch-bars li:nth-child(1) .bar i{transition-delay:.05s}.ch-bars li:nth-child(2) .bar i{transition-delay:.12s}.ch-bars li:nth-child(3) .bar i{transition-delay:.19s}
.ch-bars li:nth-child(4) .bar i{transition-delay:.26s}.ch-bars li:nth-child(5) .bar i{transition-delay:.33s}
.plq.in .ch-bars .bar i{transform:none}
.ch-bars .val{font:600 13px/1 var(--m);color:var(--ink-t)}
.ch-bars li.ai{margin-top:14px;padding-top:14px;border-top:1px solid rgba(21,22,26,.12)}
.ch-bars li.ai .nm{font-weight:600}
.ch-bars li.ai .bar{height:auto;min-height:34px;display:flex;align-items:center;padding:7px 12px;border:1.5px dashed #b2271b;border-radius:4px;background:rgba(178,39,27,.07);
  font:500 12.5px/1.3 var(--f);color:#7c1a12;opacity:0;transform:translateY(6px);transition:opacity .7s ease .9s,transform .7s var(--e-out) .9s}
.ch-bars li.ai .bar{grid-column:2/3}
.plq .ch-bars li.ai .bar em{font:inherit;font-style:normal;letter-spacing:0}
.plq.in .ch-bars li.ai .bar{opacity:1;transform:none}

/* venture deal value (bars) and deal count (the line) */
.ch-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.ch-scroll::-webkit-scrollbar{display:none}
.ch-plot{position:relative;min-width:520px;height:clamp(230px,26vw,290px);margin-top:26px}
.ch-cols{list-style:none;margin:0;padding:0;position:absolute;inset:0 0 26px;display:grid;grid-template-columns:repeat(11,1fr);border-bottom:1px solid rgba(21,22,26,.3)}
.ch-cols .col{position:relative}
.ch-cols .cb{position:absolute;left:9%;right:9%;bottom:0;height:calc(var(--h) * 1%);background:#2c5747;border-radius:2px 2px 0 0;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform 1s var(--e-out) calc(var(--i) * 60ms)}
.plq.in .ch-cols .cb{transform:none}
.ch-cols .cb b{font:500 10px/1 var(--m);letter-spacing:-.02em;color:#eef3ee;white-space:nowrap}
.ch-cols .col.ytd .cb{background:repeating-linear-gradient(135deg,#2c5747 0 6px,#386a57 6px 12px)}
.ch-cols .cd{position:absolute;z-index:3;left:50%;bottom:calc(var(--c) * 1%);transform:translate(-50%,50%);display:grid;justify-items:center}
.ch-cols .cd i{width:8px;height:8px;border-radius:50%;background:#c58b14;box-shadow:0 0 0 2px var(--paper)}
.ch-cols .col.ytd .cd i{background:var(--paper);box-shadow:0 0 0 2px #c58b14}
.ch-cols .col.ytd .cd small{color:#f3efe4}
.ch-cols .cd small{position:absolute;bottom:13px;font:500 10px/1 var(--m);letter-spacing:-.02em;color:var(--ink-t);white-space:nowrap;
  opacity:0;transition:opacity .6s ease calc(.6s + var(--i) * 60ms)}
.plq.in .ch-cols .cd small{opacity:1}
.ch-cols .yr{position:absolute;left:0;right:0;top:calc(100% + 8px);text-align:center;font:500 10.5px/1 var(--m);color:var(--ink-2)}
.ch-cols .yr sup{font-size:7px;letter-spacing:.06em;margin-left:1px}
.ch-line{position:absolute;z-index:2;inset:0 0 26px;width:100%;height:calc(100% - 26px);overflow:visible;pointer-events:none}
.ch-line{clip-path:inset(-10% 100% -10% 0);transition:clip-path 1.6s var(--e-out) .3s}
.ch-line polyline{fill:none;stroke:#c58b14;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.plq.in .ch-line{clip-path:inset(-10% 0 -10% 0)}
.ch-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0!important;font:500 11.5px/1.3 var(--f)!important;color:var(--ink-2)}
.ch-key span{display:inline-flex;align-items:center;gap:7px}
.ch-key span::before{content:"";flex:none}
.ch-key .k-bar::before{width:11px;height:11px;border-radius:1px;background:#2c5747}
.ch-key .k-line::before{width:16px;height:2px;background:#c58b14}
.ch-key .k-ytd::before{width:11px;height:11px;border-radius:1px;background:repeating-linear-gradient(135deg,#2c5747 0 3px,#4d7a68 3px 6px)}

.ch-swipe{display:none}
@media (max-width:700px){
  .ch-swipe{display:block;margin:10px 0 0!important;font:500 10px/1 var(--m)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--ink-2)}
  .plq .fig-small{width:100%}
  .ch-bars li{grid-template-columns:1fr 40px;gap:6px 10px}
  .ch-bars .nm{grid-column:1/-1}
  .ch-bars li.ai .bar{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .ch-bars .bar i,.ch-cols .cb{transform:none;transition:none}
  .ch-cols .cd small,.ch-bars li.ai .bar{opacity:1;transform:none;transition:none}
  .ch-line{clip-path:none;transition:none}
}

/* her name links to her profile: a quiet underline that brightens on hover */
.t-by a.by-link,.sign a.by-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35);transition:text-decoration-color .25s,color .25s}
.t-by a.by-link:hover,.sign a.by-link:hover{text-decoration-color:var(--acid)}
.plq .sign a.by-link{background:none;padding:0;margin:0;text-decoration-color:rgba(21,22,26,.3)}
.c-ink .sign a.by-link{text-decoration-color:rgba(236,233,225,.35)}
.plq .sign a.by-link:hover{color:inherit}

/* the photographs sit tight in the text: the paragraph comes back to full width right under the caption */
.plq .fig-r,.plq .fig-l{margin-top:.4em;margin-bottom:.15em}
.plq .fig-film figcaption{margin-top:6px;line-height:1.2}
.t-resub-in .said:empty{display:none}