/* KDMN Studios — Insights archive, cards, reader and loader. Loaded after v6-blocks.css on Insights pages only.
   Desktop sizes follow the 1920 Figma frame × --u (the site-wide design unit); phones (≤820px) follow the 402 frame. */
.kdmn-ins .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kdmn-ins .screen-reader-text:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:400;background:var(--yellow);color:#000;padding:10px 14px;border-radius:12px}
.kdmn-ins .skip:focus{top:12px}
.kdmn-ins .kd-main.ins-main{padding:0;margin:0;background:var(--black)}
.kdmn-ins .nav-links a[href*="/insights/"]{color:var(--red)!important}

/* ---------- archive header ---------- */
body.kdmn-ins .ins{position:relative;color:var(--white);padding:calc(var(--hdr-total) - 2 * var(--u)) calc(24 * var(--u)) 0;overflow:hidden}
body.kdmn-ins .ins-head{position:relative;min-height:calc(170 * var(--u))}
body.kdmn-ins .ins-year-ghost{position:absolute;right:calc(236 * var(--u));top:calc(-46 * var(--u));margin:0;font:400 calc(310 * var(--u))/1.06 var(--display);color:transparent;
  -webkit-text-stroke:max(1px,calc(2 * var(--u))) rgba(255,255,255,.22);pointer-events:none;user-select:none;letter-spacing:0}
body.kdmn-ins .ins-title{position:relative;margin:0 0 0 calc(16 * var(--u));font:400 calc(142 * var(--u))/1.06 var(--display);color:var(--white);letter-spacing:0;text-transform:uppercase}
body.kdmn-ins .ins-sub{position:relative;margin:calc(-6 * var(--u)) 0 0 calc(20 * var(--u));font:400 max(13px,calc(24 * var(--u)))/1.3 var(--mono);color:var(--white)}
body.kdmn-ins .ins-count{position:absolute;right:calc(142 * var(--u));bottom:calc(6 * var(--u));margin:0;font:700 max(12px,calc(16 * var(--u)))/1.3 var(--mono);color:var(--yellow)}

body.kdmn-ins .ins-controls{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:calc(20 * var(--u));margin-top:calc(14 * var(--u))}
body.kdmn-ins .ins-years{display:flex;align-items:center;gap:calc(18 * var(--u));flex-wrap:wrap;min-width:0}
body.kdmn-ins .ins-lbl{font:400 max(16px,calc(23 * var(--u)))/1.06 var(--display);width:calc(90 * var(--u));color:var(--white)}
body.kdmn-ins .ins-pill{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;height:calc(46 * var(--u));min-height:34px;
  min-width:calc(120 * var(--u));padding:0 calc(14 * var(--u));border-radius:calc(14 * var(--u));border:1.5px solid var(--white);background:var(--black);color:var(--white);
  font:700 max(13px,calc(22 * var(--u)))/1.3 var(--mono);letter-spacing:0;cursor:pointer;transition:transform 90ms steps(2,jump-end),box-shadow 90ms steps(2,jump-end)}
body.kdmn-ins .ins-year[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
body.kdmn-ins .ins-sort{min-width:calc(260 * var(--u))}
@media (hover:hover){body.kdmn-ins .ins-pill:hover{transform:scale(1.04);box-shadow:4px 4px 0 0 var(--red)}}
body.kdmn-ins .ins-pill:focus-visible,body.kdmn-ins .ins-month:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
body.kdmn-ins .ins-pill:active{transform:translate(2px,2px);box-shadow:none}

body.kdmn-ins .ins-months{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(12 * var(--u)) 0;
  border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.6)}
body.kdmn-ins .ins-month{appearance:none;background:none;border:1.5px solid transparent;color:var(--white);font:400 max(12px,calc(18 * var(--u)))/1.3 var(--mono);
  min-width:calc(72 * var(--u));height:calc(42 * var(--u));min-height:30px;border-radius:calc(14 * var(--u));cursor:pointer;padding:0 6px}
body.kdmn-ins .ins-month.ins-all{min-width:calc(200 * var(--u));font-weight:700;font-size:max(13px,calc(20.16 * var(--u)))}
body.kdmn-ins .ins-month[aria-pressed=true]{background:var(--white);color:var(--black);border-color:var(--white);font-weight:700}
body.kdmn-ins .ins-month.ins-all[aria-pressed=false]{background:var(--black);color:var(--white);border-color:var(--white)}
body.kdmn-ins .ins-month.is-empty{opacity:.42}
@media (hover:hover){body.kdmn-ins .ins-month:not([aria-pressed=true]):hover{border-color:var(--white)}}
body.kdmn-ins .ins-month-select-wrap{display:none}

body.kdmn-ins .ins-how{margin:0;font:400 max(12px,calc(18 * var(--u)))/1.3 var(--mono);color:var(--white)}
body.kdmn-ins .ins-how-tap{display:none}
@media (pointer:coarse){body.kdmn-ins .ins-how-tap{display:inline}body.kdmn-ins .ins-how-click{display:none}}
body.kdmn-ins .ins>.ins-how:not(.ins-how-foot){display:none}
body.kdmn-ins .ins-how-foot{padding:calc(14 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u))}

/* ---------- board ---------- */
body.kdmn-ins .ins-board{position:relative;margin-top:calc(26 * var(--u));height:calc(560 * var(--u));min-height:300px;touch-action:pan-y;isolation:isolate;contain:layout style}
body.kdmn-ins .ins-board.is-empty{display:none}
body.kdmn-ins .ins-list{list-style:none;margin:0;padding:calc(20 * var(--u)) 0;display:grid;gap:10px;font:400 max(14px,calc(18 * var(--u)))/1.4 var(--mono)}
body.kdmn-ins .ins-list a{color:var(--white);font:400 max(20px,calc(28 * var(--u)))/1.1 var(--display);text-decoration:none}
body.kdmn-ins .ins-list a:hover{text-decoration:underline}
body.kdmn-ins .ins-list span{display:block;opacity:.7}
body.kdmn-ins .ins-empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;min-height:calc(420 * var(--u));padding:calc(30 * var(--u)) calc(16 * var(--u))}
body.kdmn-ins .ins-empty[hidden]{display:none}
body.kdmn-ins .ins-empty-t{margin:0;font:400 max(32px,calc(72 * var(--u)))/1.06 var(--display);color:var(--white);max-width:16ch}
body.kdmn-ins .ins-empty-btn{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
body.kdmn-ins .ins-board.is-error::after{content:"Insights couldn’t load. Please refresh the page.";position:absolute;inset:0;display:grid;place-items:center;font:700 16px var(--mono);color:var(--white)}

/* ---------- cards (Polaroids). Sizes scale with --cs (180px on a 1920 screen). ---------- */
body.kdmn-ins .ins-card{position:absolute;left:0;top:0;width:var(--cs);height:var(--cs);box-sizing:border-box;display:flex;flex-direction:column;gap:calc(var(--cs) * .0278);
  padding:calc(var(--cs) * .0444) calc(var(--cs) * .0444) calc(var(--cs) * .0333);border-radius:calc(var(--cs) * .0667);background:var(--cc,#2A9D8F);color:var(--cf,#000);
  box-shadow:calc(var(--cs) * .022) calc(var(--cs) * .039) calc(var(--cs) * .039) 1px rgba(0,0,0,.75),inset 0 1px 1px rgba(255,255,255,.35);
  text-decoration:none;will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:grab;transform-origin:50% 50%}
body.kdmn-ins .ins-board .ins-card{width:var(--cs);height:var(--cs)}
body.kdmn-ins .ins-board{--cs:180px}
body.kdmn-ins .ins-card.is-white{box-shadow:calc(var(--cs) * .022) calc(var(--cs) * .039) calc(var(--cs) * .039) 1px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.08)}
body.kdmn-ins .ins-card.is-held{cursor:grabbing;box-shadow:calc(var(--cs) * .05) calc(var(--cs) * .09) calc(var(--cs) * .08) 1px rgba(0,0,0,.7)}
body.kdmn-ins .ins-card:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
body.kdmn-ins .ins-thumb{display:block;flex:none;width:100%;aspect-ratio:4/3;height:auto;border-radius:calc(var(--cs) * .0333);overflow:hidden;background:rgba(0,0,0,.18)}
body.kdmn-ins .ins-thumb img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
body.kdmn-ins .ins-thumb.is-brand{background:var(--black)}
body.kdmn-ins .ins-card.is-white .ins-thumb.is-brand,body.kdmn-ins .ins-card[style*="#003E1F"] .ins-thumb.is-brand{background:var(--yellow)}
body.kdmn-ins .ins-brand{position:relative;display:block;width:100%;height:100%}
body.kdmn-ins .ins-brand b{position:absolute;left:6%;top:8%;font:400 calc(var(--cs) * .097)/1.1 var(--wide);color:var(--white);letter-spacing:-.02em;z-index:1}
body.kdmn-ins .ins-card.is-white .ins-brand b,body.kdmn-ins .ins-card[style*="#003E1F"] .ins-brand b{color:var(--black)}
body.kdmn-ins .ins-brand i{position:absolute;right:5%;top:9%;width:45%;height:82%;border-radius:calc(var(--cs) * .037);background:var(--cc,#EF233C)}
body.kdmn-ins .ins-card[style*="#EF233C"] .ins-brand i,body.kdmn-ins .ins-card.is-white .ins-brand i{background:var(--red)}
body.kdmn-ins .ins-card.is-white .ins-brand i{background:var(--red)}
body.kdmn-ins .ins-brand em{position:absolute;left:6%;bottom:8%;font:700 normal calc(var(--cs) * .03)/1.2 var(--mono);color:var(--white);max-width:45%}
body.kdmn-ins .ins-card.is-white .ins-brand em,body.kdmn-ins .ins-card[style*="#003E1F"] .ins-brand em{color:var(--black)}
body.kdmn-ins .ins-cap{display:flex;flex-direction:column;gap:calc(var(--cs) * .0167);min-height:0;overflow:hidden}
body.kdmn-ins .ins-cap-t{font:400 calc(var(--cs) * .0722)/1.06 var(--display);text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:0}
body.kdmn-ins .ins-cap-m{font:700 calc(var(--cs) * .032)/1.3 var(--mono);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- reader ---------- */
body.kdmn-ins .ins-reader-scrim{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.76);opacity:0;transition:opacity 180ms ease}
body.kdmn-ins .ins-reader-scrim.is-open{opacity:1}
body.kdmn-ins .ins-reader{--acc:#2A9D8F;--acc-fg:#000;position:fixed;z-index:121;left:7.5vw;right:7.5vw;top:calc(130 * var(--u));bottom:calc(44 * var(--u));
  min-height:0;display:flex;flex-direction:column;background:var(--acc);color:var(--acc-fg);border-radius:calc(40 * var(--u));
  box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;transform:translateY(12px) scale(.985);transition:opacity 200ms ease,transform 200ms ease;overflow:hidden}
body.kdmn-ins .ins-reader[hidden]{display:none}
body.kdmn-ins .ins-reader.is-open{opacity:1;transform:none}
body.kdmn-ins .ins-r-head{position:relative;flex:none;padding:calc(40 * var(--u)) calc(160 * var(--u)) calc(14 * var(--u)) calc(48 * var(--u))}
body.kdmn-ins .ins-r-kicker{margin:0 0 calc(14 * var(--u));font:700 max(11px,calc(20 * var(--u)))/1.45 var(--mono);text-transform:uppercase}
body.kdmn-ins .ins-r-title{margin:0;font:400 max(30px,calc(84 * var(--u)))/1.04 var(--display);text-transform:uppercase;letter-spacing:0;outline:none}
body.kdmn-ins .ins-r-meta{margin:calc(18 * var(--u)) 0 0;font:700 max(12px,calc(22 * var(--u)))/1.45 var(--mono);text-transform:uppercase}
body.kdmn-ins .ins-r-tools{position:absolute;top:calc(24 * var(--u));right:calc(35 * var(--u));display:flex;gap:calc(16 * var(--u))}
body.kdmn-ins .ins-r-share,body.kdmn-ins .ins-r-close{width:max(32px,calc(48 * var(--u)));height:max(32px,calc(48 * var(--u)));border-radius:50%;border:0;padding:0;background:var(--black) center/45% no-repeat;cursor:pointer;display:block;
  transition:transform 90ms steps(2,jump-end),box-shadow 90ms steps(2,jump-end)}
body.kdmn-ins .ins-r-share{background-image:url(../assets/insights/share.svg)}
body.kdmn-ins .ins-r-close{background-image:url(../assets/insights/close.svg)}
@media (hover:hover){body.kdmn-ins .ins-r-share:hover,body.kdmn-ins .ins-r-close:hover{transform:scale(1.06);box-shadow:3px 3px 0 0 var(--white)}}
body.kdmn-ins .ins-r-share:focus-visible,body.kdmn-ins .ins-r-close:focus-visible{outline:3px solid var(--acc-fg);outline-offset:3px}
body.kdmn-ins .ins-r-body{flex:1;min-height:0;margin:0 4px 4px;background:var(--white);color:var(--black);border-radius:0 0 calc(36 * var(--u)) calc(36 * var(--u));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.4) rgba(0,0,0,.08)}
body.kdmn-ins .ins-r-body:focus-visible{outline:3px solid var(--acc);outline-offset:-6px}
body.kdmn-ins .ins-r-content{max-width:1500px;padding:calc(36 * var(--u)) calc(76 * var(--u)) calc(64 * var(--u));font:400 max(16px,calc(26 * var(--u)))/1.45 var(--sans);color:var(--black)}
body.kdmn-ins .ins-r-content>*:first-child{margin-top:0}
body.kdmn-ins .ins-r-content p{margin:0 0 .9em}
body.kdmn-ins .ins-r-content h1,body.kdmn-ins .ins-r-content h2{font:400 max(24px,calc(44 * var(--u)))/1.08 var(--display);text-transform:uppercase;margin:1.3em 0 .45em;letter-spacing:0;color:var(--black)}
body.kdmn-ins .ins-r-content h3{font:700 max(20px,calc(34 * var(--u)))/1.3 var(--sans);margin:1.1em 0 .4em;color:var(--black)}
body.kdmn-ins .ins-r-content h4,body.kdmn-ins .ins-r-content h5,body.kdmn-ins .ins-r-content h6{font:400 max(18px,calc(30 * var(--u)))/1.1 var(--display);text-transform:uppercase;margin:1.1em 0 .4em;color:var(--black)}
body.kdmn-ins .ins-r-content ul,body.kdmn-ins .ins-r-content ol{margin:0 0 1em;padding-left:1.3em}
body.kdmn-ins .ins-r-content li{margin:.25em 0}
body.kdmn-ins .ins-r-content a{color:var(--black);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:3px;text-underline-offset:3px}
body.kdmn-ins .ins-r-content a:hover{background:var(--acc);color:var(--acc-fg)}
body.kdmn-ins .ins-r-content blockquote{margin:1.2em 0;padding:.2em 0 .2em 1em;border-left:6px solid var(--acc);font-weight:700}
body.kdmn-ins .ins-r-content blockquote p:last-child{margin-bottom:0}
body.kdmn-ins .ins-r-content figure{margin:1.2em 0}
body.kdmn-ins .ins-r-content img{max-width:100%;height:auto;border-radius:calc(16 * var(--u))}
body.kdmn-ins .ins-r-content figcaption{font:400 max(12px,calc(16 * var(--u)))/1.4 var(--mono);margin-top:.5em;opacity:.75}
body.kdmn-ins .ins-r-content strong{font-weight:700}
body.kdmn-ins .ins-r-content hr{border:0;border-top:2px solid var(--black);margin:1.6em 0;opacity:.15}
body.kdmn-ins .ins-r-content .wp-block-image.alignwide,body.kdmn-ins .ins-r-content .wp-block-image.alignfull{margin-left:0;margin-right:0}
body.kdmn-ins .ins-r-loading{opacity:.6}
body.kdmn-ins .ins-r-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,20px);margin:0;padding:10px 16px;border-radius:12px;background:var(--black);color:var(--white);
  font:700 13px/1.3 var(--mono);opacity:0;pointer-events:none;transition:opacity 160ms ease,transform 160ms ease;max-width:90%;word-break:break-all;z-index:3}
body.kdmn-ins .ins-r-toast.is-on{opacity:1;transform:translate(-50%,0)}
body.kdmn-ins.ins-reading{overflow:hidden}

/* ---------- loader ---------- */
body.kdmn-ins .ins-loader{position:fixed;inset:0;z-index:300;background:var(--yellow);display:grid;place-items:center;color:var(--black);transition:opacity 380ms ease,visibility 380ms}
body.kdmn-ins .ins-loader.is-done{opacity:0;visibility:hidden}
body.kdmn-ins .ins-loader[hidden]{display:none}
body.kdmn-ins.ins-loading{overflow:hidden}
body.kdmn-ins .ins-ld-box{width:min(90vw,calc(480 * var(--u)));min-width:280px;display:flex;flex-direction:column;align-items:center;text-align:center}
body.kdmn-ins .ins-ld-sprite{width:max(150px,calc(280 * var(--u)));aspect-ratio:1;background:url(../assets/insights/drag-sprite.webp) 0 0/200% 100% no-repeat;
  image-rendering:pixelated;animation:insSprite 1s step-end infinite}
@keyframes insSprite{0%{background-position:0 0}50%{background-position:100% 0}}
body.kdmn-ins .ins-ld-t{margin:calc(12 * var(--u)) 0 0;font:700 max(15px,calc(22 * var(--u)))/1.4 var(--mono)}
body.kdmn-ins .ins-ld-bar{position:relative;width:max(244px,calc(340 * var(--u)));height:max(18px,calc(24 * var(--u)));margin-top:calc(14 * var(--u));background:var(--white);
  border:3px solid var(--black);border-radius:999px;overflow:hidden;box-sizing:border-box}
body.kdmn-ins .ins-ld-fill{position:absolute;inset:0;background:var(--black);border-radius:999px;transform-origin:0 50%;transform:scaleX(0)}
body.kdmn-ins .ins-ld-how{margin:calc(26 * var(--u)) 0 0;font:700 max(15px,calc(22 * var(--u)))/1.4 var(--mono)}
body.kdmn-ins .ins-ld-err{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:12px;font:400 15px/1.45 var(--mono)}
body.kdmn-ins .ins-ld-err[hidden]{display:none}
body.kdmn-ins .ins-ld-err p{margin:0;max-width:30ch}
body.kdmn-ins .ins-ld-retry{appearance:none;border:0;border-radius:999px;background:var(--black);color:var(--white);font:700 15px var(--mono);padding:12px 22px;cursor:pointer}
body.kdmn-ins .ins-ld-retry:focus-visible{outline:3px solid var(--black);outline-offset:3px}
body.kdmn-ins .ins-loader.is-error .ins-ld-sprite{animation:none}
body.kdmn-ins .ins-loader.is-error .ins-ld-bar,body.kdmn-ins .ins-loader.is-error .ins-ld-how{display:none}

/* ---------- phones (402px Figma frame) ---------- */
@media (max-width:820px){
  body.kdmn-ins .ins{padding:calc(66px + 18px) 14px 0}
  body.kdmn-ins .ins-head{min-height:0}
  body.kdmn-ins .ins-year-ghost{right:-6px;top:-10px;font-size:104px;-webkit-text-stroke:1px rgba(255,255,255,.2)}
  body.kdmn-ins .ins-title{margin:0;font-size:min(77px,19vw)}
  body.kdmn-ins .ins-sub{margin:2px 0 0 2px;font-size:12px}
  body.kdmn-ins .ins-count{display:none}
  body.kdmn-ins .ins-controls{grid-template-columns:1fr 1fr;column-gap:10px;row-gap:16px;margin-top:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.65)}
  body.kdmn-ins .ins-years{grid-column:1 / -1;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body.kdmn-ins .ins-years::-webkit-scrollbar{display:none}
  body.kdmn-ins .ins-lbl{font:400 12px/1.3 var(--mono);width:44px;flex:none}
  body.kdmn-ins .ins-pill{height:34px;min-height:34px;min-width:78px;border-radius:9px;border-width:1.3px;font-size:12px;padding:0 10px;flex:none}
  body.kdmn-ins .ins-months{display:none}
  body.kdmn-ins .ins-month-select-wrap{display:block;grid-column:1;grid-row:2}
  body.kdmn-ins .ins-month-select{width:100%;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") right 10px center/10px no-repeat;
    color:var(--black);border-color:var(--white);text-align:center;text-align-last:center;padding:0 24px 0 8px;font-size:12px}
  body.kdmn-ins .ins-sort{grid-column:2;grid-row:2;min-width:0;width:100%}
  body.kdmn-ins .ins>.ins-how:not(.ins-how-foot){display:block;margin-top:13px;font-size:10px}
  body.kdmn-ins .ins-how-foot{display:none}
  body.kdmn-ins .ins-board{margin-top:14px;margin-left:-4px;margin-right:-4px}
  body.kdmn-ins .ins-empty{min-height:300px;padding:24px 4px}
  body.kdmn-ins .ins-empty-t{font-size:36px}
  body.kdmn-ins .ins-reader{left:12px;right:12px;top:146px;bottom:24px;border-radius:24px}
  body.kdmn-ins .ins-r-head{padding:15px 96px 12px 20px}
  body.kdmn-ins .ins-r-kicker{font-size:10px;margin-bottom:22px}
  body.kdmn-ins .ins-r-title{font-size:min(39px,9.8vw);line-height:1.08}
  body.kdmn-ins .ins-r-meta{font-size:12px;margin-top:12px}
  body.kdmn-ins .ins-r-tools{top:16px;right:16px;gap:8px}
  body.kdmn-ins .ins-r-share,body.kdmn-ins .ins-r-close{width:32px;height:32px}
  body.kdmn-ins .ins-r-body{border-radius:0 0 20px 20px}
  body.kdmn-ins .ins-r-content{padding:22px 20px 32px;font-size:16px}
  body.kdmn-ins .ins-r-content h1,body.kdmn-ins .ins-r-content h2{font-size:24px}
  body.kdmn-ins .ins-r-content h3{font-size:20px}
  body.kdmn-ins .ins-r-content h4,body.kdmn-ins .ins-r-content h5,body.kdmn-ins .ins-r-content h6{font-size:20px}
  body.kdmn-ins .ins-ld-sprite{width:150px}
  body.kdmn-ins .ins-ld-t{font-size:15px;margin-top:28px}
  body.kdmn-ins .ins-ld-bar{width:244px;height:18px;margin-top:10px}
  body.kdmn-ins .ins-ld-how{font-size:16px;margin-top:16px}
}
@media (max-width:820px) and (max-height:700px){body.kdmn-ins .ins-reader{top:92px}}
@media (min-width:821px) and (max-height:820px){body.kdmn-ins .ins-reader{top:calc(var(--hdr-total) + 12px);bottom:16px}}
@supports (padding:max(0px)){
  @media (max-width:820px){body.kdmn-ins .ins-reader{bottom:max(24px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}}
}
@media (prefers-reduced-motion:reduce){
  body.kdmn-ins .ins-ld-sprite{animation:none}
  body.kdmn-ins .ins-reader,body.kdmn-ins .ins-reader-scrim{transition:none}
  body.kdmn-ins .ins-pill,body.kdmn-ins .ins-r-share,body.kdmn-ins .ins-r-close{transition:none}
}

/* the V6 footer pulls itself up by default; give the Insights caption room */
body.kdmn-ins .foot{margin-top:calc(8 * var(--u))!important}
@media (max-width:820px){body.kdmn-ins .foot{margin-top:16px!important}}
/* never show a hidden control (the pill display rule would otherwise override [hidden]) */
body.kdmn-ins .ins-pill[hidden],body.kdmn-ins .ins-empty-btn[hidden]{display:none!important}
body.kdmn-ins .ins-board.is-empty~.ins-how-foot{visibility:hidden}

/* ---------- covers: a 4:3 window showing the complete artwork (never cropped; other ratios sit centred) ---------- */
body.kdmn-ins .ins-thumb{background:var(--black)}
body.kdmn-ins .ins-cap{flex:1;justify-content:flex-start}

/* ---------- "KDMN chart" block inside articles (inc/kdmn-charts.php). Colours: site tokens only. ---------- */
.kd-chart{--hi:var(--acc,var(--black));--ink:var(--black);--grid:rgba(0,0,0,.12);--cmp:color-mix(in srgb,var(--black) 18%,var(--white));
  container-type:inline-size;margin:1.6em 0 1.8em;padding:clamp(16px,calc(30 * var(--u)),30px) clamp(16px,calc(34 * var(--u)),34px) clamp(14px,calc(24 * var(--u)),24px);
  border:2px solid var(--ink);border-radius:clamp(16px,calc(24 * var(--u)),24px);background:var(--white);color:var(--ink)}
body.kdmn-ins .ins-reader[style*="#EFBE45"] .kd-chart,body.kdmn-ins .ins-reader[style*="#FFFFFF"] .kd-chart{--hi:var(--black)} /* too light on white */
.kd-chart-head{display:flex;flex-direction:column;gap:6px;margin:0 0 clamp(14px,calc(22 * var(--u)),22px)}
.kd-chart-t{font:700 clamp(17px,calc(28 * var(--u)),28px)/1.25 var(--sans)}
.kd-chart-u{font:700 clamp(11px,calc(16 * var(--u)),16px)/1.4 var(--mono);text-transform:uppercase;opacity:.72}
.kd-chart-rows{display:flex;flex-direction:column}
.kd-chart-row,.kd-chart-axis{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);column-gap:clamp(12px,calc(20 * var(--u)),20px);align-items:center}
.kd-chart-l{font:700 clamp(14px,calc(20 * var(--u)),20px)/1.25 var(--sans);text-align:right}
.kd-chart-track{position:relative;display:block;height:clamp(54px,calc(76 * var(--u)),76px);
  background:linear-gradient(90deg,var(--grid) 0 1px,transparent 1px) 0 0/calc((100% - 1px) / var(--n)) 100% repeat-x,linear-gradient(90deg,transparent calc(100% - 1px),var(--grid) 0)}
.kd-chart-row:first-child .kd-chart-track{border-top:0}
.kd-chart-track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink)} /* zero line */
.kd-chart-bar{position:absolute;left:0;top:50%;height:clamp(28px,calc(40 * var(--u)),40px);width:calc(var(--v) * 100%);transform:translateY(-50%);transform-origin:0 50%;
  border-radius:0 999px 999px 0;box-sizing:border-box;animation:kdChartGrow 700ms cubic-bezier(.2,.8,.2,1) both}
.kd-chart-row.is-hi .kd-chart-bar{background:var(--hi)}
.kd-chart-row.is-cmp .kd-chart-bar{background:repeating-linear-gradient(135deg,var(--cmp) 0 6px,var(--white) 6px 9px);border:2px solid var(--ink);border-left:0}
.kd-chart-v{position:absolute;top:50%;left:calc(var(--v) * 100% + 10px);transform:translateY(-50%);font:700 clamp(18px,calc(32 * var(--u)),32px)/1 var(--mono);white-space:nowrap}
.kd-chart-row.is-cmp .kd-chart-v{font-weight:400}
.kd-chart-axis{margin-top:6px}
.kd-chart-ticks{position:relative;display:block;height:1.4em;font:400 clamp(11px,calc(15 * var(--u)),15px)/1.4 var(--mono);opacity:.75}
.kd-chart-ticks span{position:absolute;left:calc(var(--t) * 100%);transform:translateX(-50%);white-space:nowrap}
.kd-chart-ticks span:first-child{transform:none}
.kd-chart-ticks span:last-child{transform:translateX(-100%)}
.kd-chart .kd-chart-src{margin:clamp(14px,calc(22 * var(--u)),22px) 0 0!important;padding-top:clamp(10px,calc(14 * var(--u)),14px);border-top:1px solid var(--grid);
  font:400 clamp(12px,calc(16 * var(--u)),16px)/1.5 var(--sans);opacity:.85}
body.kdmn-ins .ins-r-content .kd-chart-src a{text-decoration-thickness:2px}
@container (max-width:520px){
  .kd-chart-row,.kd-chart-axis{grid-template-columns:minmax(0,1fr)}
  .kd-chart-l{text-align:left;padding-top:10px}
  .kd-chart-axis>.kd-chart-l{display:none}
  .kd-chart-track{height:52px}
}
@keyframes kdChartGrow{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.kd-chart-bar{animation:none}}