/* OFFSCRPT front page, editorial edition: a cream page, big serif headings, deep green feature cards, pill tags.
   Plus the reactions (like, comment, share) used on every page, and the comments sheet. Loaded after theme.css. */
:root{--kx-bg:#ecebe6;--kx-card:#f6f5f1;--kx-ink:#13241b;--kx-ink2:#3d4a43;--kx-mute:#6b756f;--kx-rule:#cfd0c8;--g:#1f4535;--g2:#295a45;--on-g:#eef3ef;--on-g2:#b9cbc0;--heart:#ed4956}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--kx-bg:#0d1210;--kx-card:#141a17;--kx-ink:#e7ede9;--kx-ink2:#c2ccc6;--kx-mute:#8a958f;--kx-rule:#26302b;--g:#183a2c;--g2:#21503c;--on-g:#eef3ef;--on-g2:#a9bfb2;--heart:#ff5a67}}
:root[data-theme=dark]{--kx-bg:#0d1210;--kx-card:#141a17;--kx-ink:#e7ede9;--kx-ink2:#c2ccc6;--kx-mute:#8a958f;--kx-rule:#26302b;--g:#183a2c;--g2:#21503c;--on-g:#eef3ef;--on-g2:#a9bfb2;--heart:#ff5a67}

:root:not([data-theme=_]) body:has(.kx){background:var(--kx-bg)} /* outranks theme.css's page colour, so no pale band before the footer */
.kx{background:var(--kx-bg);color:var(--kx-ink);padding-bottom:clamp(40px,6vw,90px)}
.kx a{color:inherit}
.kx section{scroll-margin-top:90px}
.kx-h,.kx-h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;color:var(--g);letter-spacing:-.025em;line-height:.9}
:root[data-theme=dark] .kx-h,:root[data-theme=dark] .kx-h2{color:#9fd0b6}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .kx-h,:root:not([data-theme=light]) .kx-h2{color:#9fd0b6}}
.kx-h2{font-size:clamp(32px,3.6vw,52px)}
.kx-sub{font:400 14px/1.5 var(--ui);color:var(--kx-mute);margin-top:10px}

/* masthead: the date, TOP NEWS, the edition */
.kx-top{padding-top:clamp(24px,3.4vw,48px)}
.kx-mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;border-bottom:1px solid var(--kx-rule);padding-bottom:clamp(14px,1.6vw,22px);margin-bottom:clamp(16px,2vw,26px)}
.kx-mast>span{font:500 11px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--kx-mute);padding-bottom:.9em}
.kx-mast>span:last-child{text-align:right}
.kx-h{font-size:clamp(58px,10vw,148px);text-align:center}

/* pill tags and the pill button */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips>*{font:500 10.5px/1 var(--ui);letter-spacing:.02em;padding:5px 9px;border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:999px;opacity:.9}
.chips a{transition:background .2s,color .2s}
.chips a:hover{background:var(--kx-ink);color:var(--kx-bg);border-color:var(--kx-ink)}
.kc-green .chips a:hover{background:var(--on-g);color:var(--g)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:var(--on-g)!important;border-radius:999px;padding:10px 18px;font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;transition:background .25s,transform .25s var(--ease)}
.pill span{opacity:.7}
.pill:hover{background:var(--g2);transform:translateY(-1px)}

/* ---------- the card ---------- */
.kc{display:flex;flex-direction:column;min-width:0;color:var(--kx-ink)}
.kc-i{display:block;overflow:hidden;border-radius:6px}
.kc-i .ph{border-radius:0;box-shadow:none;background:color-mix(in srgb,var(--kx-ink) 8%,transparent)}
.kc-i:hover .ph img{transform:scale(1.04)}
.kc-b{display:flex;flex-direction:column;gap:10px;padding-top:12px;flex:1}
.kc h2,.kc h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.14;color:inherit}
.kc h3{font-size:clamp(17px,1.3vw,20px)}
.kc h2{font-size:clamp(26px,2.5vw,38px);line-height:1.06}
.kc h2 a,.kc h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.kc h2 a:hover,.kc h3 a:hover{background-size:100% 1px}
.kc-d{font:400 13.5px/1.5 var(--ui);color:var(--kx-ink2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.kc-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
.kc-t{font:500 11px/1 var(--ui);letter-spacing:.04em;color:var(--kx-mute);white-space:nowrap}
.kc-green{background:var(--g);color:var(--on-g);border-radius:10px;padding:14px}
.kc-green .kc-d{color:var(--on-g2)}
.kc-green .kc-t{color:var(--on-g2)}
.kc-green .kc-i{border-radius:4px}

/* top news grid */
.kx-grid{display:grid;grid-template-columns:1.15fr 1.15fr 1fr 1fr;grid-template-areas:"lead lead g1 s1" "lead lead g1 s2" "split split m1 g2";gap:clamp(14px,1.4vw,22px);align-items:stretch}
.kc-lead{grid-area:lead}.kc-g1{grid-area:g1}.kc-s1{grid-area:s1}.kc-s2{grid-area:s2}.kc-split{grid-area:split}.kc-m1{grid-area:m1}.kc-g2{grid-area:g2}
.kc-lead .ph{aspect-ratio:16/10}
.kc-lead .kc-d{-webkit-line-clamp:3;font-size:15px;max-width:60ch}
/* the tall green card: its photo grows to fill the two rows instead of leaving a green gap */
.kc-g1 .kc-i{flex:1;min-height:0}.kc-g1 .kc-i .ph{height:100%;aspect-ratio:auto;min-height:200px}.kc-g1 .kc-b{flex:none}
.kc-g1 .kc-d{-webkit-line-clamp:3}
.kc-small{border-bottom:1px solid var(--kx-rule);padding-bottom:12px}
.kc-small .ph{aspect-ratio:16/10}
.kc-small h3{font-size:16px}
.kc-split{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;padding:16px}
.kc-split .kc-i,.kc-split .kc-i .ph{height:100%;aspect-ratio:auto;min-height:220px}
.kc-split .kc-b{padding-top:0}
.kc-split h3{font-size:clamp(22px,2vw,30px);line-height:1.08}
.kc-tall{border-left:1px solid var(--kx-rule);border-right:1px solid var(--kx-rule);padding:0 clamp(10px,1vw,16px)}
.kc-tall .ph{aspect-ratio:4/4.4}
.kc-g2 .ph{aspect-ratio:16/11}

/* editor's choice: a sideways row, round photos, tabs by section */
.kx-ed,.kx-lat,.kx-feed,.kx-near{margin-top:clamp(48px,6vw,96px)}
.kx-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:clamp(16px,2vw,26px)}
.kx-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kx-tabs button{font:500 11px/1 var(--ui);padding:7px 12px;border-radius:999px;border:1px solid var(--kx-rule);background:none;color:var(--kx-ink2);cursor:pointer;transition:all .2s}
.kx-tabs button:hover{border-color:var(--g)}
.kx-tabs button[aria-pressed=true]{background:var(--g);border-color:var(--g);color:var(--on-g)}
.kx-nav{display:flex;gap:8px}
.kx-nav .nb{border-radius:50%;border-color:var(--kx-rule);color:var(--kx-ink);width:42px;height:42px}
.kx-nav .nb:hover{background:var(--g);border-color:var(--g);color:var(--on-g)}
.kx-ed-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*clamp(16px,2vw,32px))/3);gap:clamp(16px,2vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.kx-ed-row::-webkit-scrollbar{display:none}
.ec{display:grid;grid-template-columns:clamp(96px,9vw,140px) 1fr;gap:16px;scroll-snap-align:start;padding-right:clamp(16px,2vw,32px);border-right:1px solid var(--kx-rule)}
.ec[hidden]{display:none}
.ec-i{align-self:start;border-radius:999px 999px 999px 0;overflow:hidden;aspect-ratio:3/4}
.ec-i .ph{height:100%;aspect-ratio:auto;box-shadow:none}
.ec-i:hover .ph img{transform:scale(1.05)}
.ec-b{display:flex;flex-direction:column;gap:8px;min-width:0}
.ec h3{font:400 clamp(17px,1.3vw,20px)/1.15 var(--serif);letter-spacing:-.01em}
.ec h3 a:hover{color:var(--g2)}
.ec p{font:400 12.5px/1.5 var(--ui);color:var(--kx-ink2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ec .sx{margin-top:auto;margin-left:-8px}

/* latest: three text cards, then two big photos */
.kx-lat-t{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px)}
.kc-text{border:1px solid var(--kx-rule);border-radius:10px;padding:16px;background:var(--kx-card);min-height:220px}
.kc-text.kc-green{background:var(--g);border-color:var(--g)}
.kc-text .kc-b{padding-top:12px}
.kx-lat-p{display:grid;grid-template-columns:2fr 1fr;gap:clamp(12px,1.2vw,18px);margin-top:clamp(12px,1.2vw,18px)}
.kc-plain .ph{aspect-ratio:auto;height:clamp(240px,30vw,440px)}
.kc-plain h3{font-size:clamp(18px,1.5vw,22px);max-width:30ch}

/* a section desk: title left, rows of pills right, three photos below */
.kx-desk{display:grid;grid-template-columns:1fr 2fr;gap:clamp(20px,3vw,48px);margin-top:clamp(56px,7vw,110px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--kx-rule)}
.kx-desk-t p{font:400 14px/1.5 var(--ui);color:var(--kx-ink2);margin:14px 0 18px;max-width:28ch}
.kx-rows{list-style:none;display:grid;gap:8px}
.kx-rows a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;border:1px solid var(--kx-rule);border-radius:999px;padding:10px 12px 10px 18px;transition:background .25s,color .25s,border-color .25s}
.kx-rows li:first-child a,.kx-rows a:hover{background:var(--g);border-color:var(--g);color:var(--on-g)}
.kx-dm{font:500 11.5px/1 var(--ui);color:inherit;opacity:.65}
.kx-rows b{font:400 15px/1.25 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kx-ar{display:inline-flex;align-items:center;gap:4px;font:400 13px/1 var(--ui);opacity:.8}
.kx-ar svg,.kx-all svg{width:18px;height:14px;transition:transform .3s var(--ease)}
.kx-rows a:hover .kx-ar svg{transform:translateX(3px)}
.kx-three{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(10px,1.4vw,20px);border-bottom:1px solid var(--kx-rule)}
.kc-col{padding:0 clamp(12px,1.2vw,18px) 14px;border-left:1px solid var(--kx-rule)}
.kc-col:first-child{border-left:0;padding-left:0}.kc-col:last-child{padding-right:0}
.kc-col .ph{aspect-ratio:5/4}

/* the feed: Instagram-style posts */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);align-items:start}
.ig{background:var(--kx-card);border:1px solid var(--kx-rule);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ig-h{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ig-av{width:34px;height:34px;border-radius:50%;padding:2px;background:conic-gradient(from 200deg,var(--g),#7fbf9b,#e5c46a,var(--g));flex:none}
.ig-av img{width:100%;height:100%;border-radius:50%;border:2px solid var(--kx-card);background:#000;object-fit:cover}
.ig-who{display:grid;line-height:1.2;min-width:0;flex:1}
.ig-who b{font:600 13px/1.2 var(--ui)}
.ig-who small{font:400 11.5px/1.2 var(--ui);color:var(--kx-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-go{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--kx-ink2)}
.ig-go:hover{background:color-mix(in srgb,var(--kx-ink) 8%,transparent)}
.ig-go svg{width:18px;height:18px}
.ig-i{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.ig-i .ph{aspect-ratio:4/5;box-shadow:none}
.ig-burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ig-burst svg{width:96px;height:96px;fill:#fff;stroke:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));opacity:0;transform:scale(0)}
.ig-burst.go svg{animation:burst .9s var(--ease) both}
@keyframes burst{0%{opacity:0;transform:scale(0)}15%{opacity:.95;transform:scale(1.15)}30%{transform:scale(.95)}45%{transform:scale(1)}80%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(.6) translateY(-20px)}}
.sx-ig{padding:6px 6px 0}
.ig-c{font:400 13.5px/1.45 var(--ui);padding:4px 14px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ig-c b{font-weight:600;margin-right:2px}
.ig-c a{font-weight:500}.ig-c a:hover{text-decoration:underline}
.ig-c span{color:var(--kx-ink2)}
.ig-all{align-self:flex-start;background:none;border:0;padding:6px 14px 0;font:400 13px/1.4 var(--ui);color:var(--kx-mute);cursor:pointer}
.ig-all:hover{color:var(--kx-ink)}
.ig>.kc-t{padding:6px 14px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}

/* near me: card, a wide green card, card */
.kx-all{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--kx-ink2)}
.kx-all:hover{color:var(--g)}
.kx-near-g{display:grid;grid-template-columns:1fr 2fr 1fr;gap:clamp(14px,1.4vw,22px);align-items:stretch}
.kx-near-g .kc-col{border:0;padding:0}
.kc-wide{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;padding:16px}
.kc-wide .kc-b{padding-top:0}
.kc-wide h3{font-size:clamp(20px,1.8vw,26px)}
.kc-wide .kc-i,.kc-wide .kc-i .ph{height:100%;aspect-ratio:auto;min-height:240px}

/* ---------- reactions bar ---------- */
.sx{display:inline-flex;align-items:center;gap:2px;flex:none}
.sx-b{display:inline-flex;align-items:center;gap:5px;height:32px;min-width:32px;padding:0 7px;border:0;border-radius:999px;background:none;color:inherit;font:500 12.5px/1 var(--ui);cursor:pointer;transition:background .2s,color .2s}
.sx-b:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.sx-b svg{width:19px;height:19px;stroke-width:1.7;transition:transform .2s var(--ease)}
.sx-b:active svg{transform:scale(.85)}
.sx-b span:empty{display:none}
.sx-like[aria-pressed=true]{color:var(--heart)}
.sx-like[aria-pressed=true] svg{fill:var(--heart);stroke:var(--heart)}
/* on cards the icons stay quiet until the card is hovered, or until there is something to count */
.kc .sx-b,.ec .sx-b{color:var(--kx-mute)}
.kc-green .sx-b{color:var(--on-g2)}
.kc:hover .sx-b,.ec:hover .sx-b,.kc .sx-b:focus-visible,.ec .sx-b:focus-visible{color:inherit}
.kc .sx-b:has(span:not(:empty)),.ec .sx-b:has(span:not(:empty)){color:inherit}
.sx-like.pop svg{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.sx-ig .sx-b{height:40px;padding:0 9px}
.sx-ig .sx-b svg{width:24px;height:24px}
.sx-ig .sx-b span{display:none}
.ig-likes{font:400 13px/1.4 var(--ui);color:var(--kx-mute);padding:0 14px 2px}
.ig-likes.on{font-weight:600;color:var(--kx-ink)}
.sx-lg{margin:18px 0 0 -8px;display:flex}
.sx-lg .sx-b{height:40px;padding:0 12px;border:1px solid var(--rule);margin-right:6px;font-size:13.5px}
.sx-lg .sx-b svg{width:20px;height:20px}
.sx-lg .sx-like[aria-pressed=true]{border-color:color-mix(in srgb,var(--heart) 40%,transparent)}

/* the dock: reactions float at the foot of a story while it is read */
.dock{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;transform:translate(-50%,140%);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s}
.dock.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.sx-dock{background:var(--g);border:1px solid color-mix(in srgb,var(--on-g) 18%,transparent);border-radius:999px;padding:5px;box-shadow:0 14px 34px -10px rgba(0,0,0,.45);color:var(--on-g);gap:4px}
.sx-dock .sx-like[aria-pressed=true]{color:#ff8a94}.sx-dock .sx-like[aria-pressed=true] svg{fill:#ff8a94;stroke:#ff8a94}
.sx-dock .sx-b{height:42px;padding:0 14px;font-size:13.5px}
.sx-dock .sx-b svg{width:21px;height:21px}
html.reading .dock,html.sheet-open .dock{display:none}

/* ---------- comments: under a story, and in the sheet ---------- */
.cm{margin-top:clamp(40px,5vw,70px);padding-top:28px;border-top:1px solid var(--rule)}
.cm>h2{font:700 clamp(24px,2.4vw,30px)/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:18px}
.cm-box{display:flex;flex-direction:column}
.cm .cm-box{flex-direction:column-reverse}
.cm-l{list-style:none;display:grid;gap:18px}
.cm .cm-l{margin-top:22px}
.cm-l li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.cm-l li.fresh{animation:fresh .6s var(--ease)}
@keyframes fresh{from{opacity:0;transform:translateY(-6px)}}
.cm-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:var(--on-g);font:600 14px/1 var(--ui)}
.cm-h{display:flex;align-items:baseline;gap:8px;font:400 13px/1.3 var(--ui)}
.cm-h b{font-weight:600;color:var(--ink)}
.cm-h time{color:var(--mute);font-size:12px}
.cm-t{font:400 15px/1.5 var(--ui);color:var(--ink2);white-space:pre-line;overflow-wrap:anywhere;margin-top:3px}
.cm-empty{font:400 14px/1.5 var(--ui);color:var(--mute)}
.cm-empty:empty{display:none}
.cm .cm-empty{margin-top:16px}
.cm-f{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;position:relative}
.cm-fields{display:grid;gap:6px;background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:8px 14px;transition:border-color .2s}
.cm-fields:focus-within{border-color:var(--ink)}
.cm-fields input,.cm-fields textarea{width:100%;background:none;border:0;outline:0;resize:none;color:var(--ink);font:400 15px/1.45 var(--ui)}
.cm-fields input{font-size:12.5px;color:var(--ink2);padding-bottom:6px;border-bottom:1px dashed var(--rule)}
.cm-fields ::placeholder{color:var(--mute)}
.cm-post{height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--g);color:var(--on-g);font:600 13px/1 var(--ui);cursor:pointer;transition:opacity .2s,background .2s}
.cm-post:hover{background:var(--g2)}
.cm-post:disabled{opacity:.4;cursor:default}
.cm-msg{grid-column:1/-1;font:400 12.5px/1.4 var(--ui);color:var(--red)}
.cm-msg:empty{display:none}

/* the sheet */
html.sheet-open{overflow:hidden}
.sxd{border:0;padding:0;background:none;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--ink)}
.sxd::backdrop{background:rgba(5,10,8,.55);backdrop-filter:blur(3px)}
.sxd[open]{display:flex;align-items:center;justify-content:center}
.sxd-in{width:min(540px,calc(100% - 32px));max-height:min(720px,86vh);display:flex;flex-direction:column;background:var(--card);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden;animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}}
.sxd-grab{display:none}
.sxd-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--rule)}
.sxd-h div{display:grid;gap:4px;min-width:0}
.sxd-k{font:600 15px/1.2 var(--ui)}
.sxd-t{font:400 13px/1.35 var(--ui);color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sxd-x{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);font:400 22px/1 var(--ui);cursor:pointer}
.sxd-x:hover{background:var(--rule)}
.sxd-b{overflow:auto;flex:1;display:flex;flex-direction:column}
.sxd .cm-box{flex:1;min-height:0}
.sxd .cm-l{padding:18px 20px;flex:1;overflow:auto;align-content:start;min-height:120px}
.sxd .cm-empty{padding:0 20px 20px;text-align:center}
.sxd .cm-f{padding:12px 16px;border-top:1px solid var(--rule);background:var(--card);position:sticky;bottom:0}
.sh-g{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:18px 16px 22px}
.sh-url{grid-column:1/-1;background:var(--paper);border-radius:12px;padding:12px 14px;font:400 13px/1.3 var(--ui);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:8px}
.sh-o{display:grid;justify-items:center;gap:8px;padding:10px 4px;border:0;background:none;border-radius:12px;color:var(--ink);cursor:pointer;font:500 12px/1.2 var(--ui)}
.sh-o:hover{background:var(--paper)}
.sh-o b{font-weight:500}
.sh-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:var(--on-g);transition:transform .25s var(--ease)}
.sh-o:hover .sh-ic{transform:translateY(-2px)}
.sh-o.done .sh-ic{background:#2f9e5b}
.sh-ic svg{width:22px;height:22px}

/* ---------- smaller screens ---------- */
@media (max-width:1060px){
  .kx-grid{grid-template-columns:1fr 1fr;grid-template-areas:"lead lead" "g1 s1" "g1 s2" "split split" "m1 g2"}
  .kc-tall{border:0;padding:0}
  .kx-ed-row{grid-auto-columns:calc((100% - clamp(16px,2vw,32px))/2)}
  .ig-grid{grid-template-columns:1fr 1fr}
  .ig:nth-child(n+5){display:none}
  .kx-near-g{grid-template-columns:1fr 1fr}.kc-wide{grid-column:1/-1;grid-row:1}
}
@media (max-width:760px){
  .kx-mast{grid-template-columns:1fr 1fr;gap:6px}.kx-h{grid-column:1/-1;grid-row:1}.kx-mast>span{padding:0}
  .kx-desk{grid-template-columns:1fr}
  .kx-lat-t,.kx-three{grid-template-columns:1fr}
  .kc-text{min-height:0}
  .kx-lat-p{grid-template-columns:1fr}
  .kc-col,.kc-col:first-child,.kc-col:last-child{border:0;padding:0 0 18px}
  .kx-three{border:0;gap:6px}
  .kx-ed-row{grid-auto-columns:86%}
  .ec{border-right:0;padding-right:0}
}
@media (max-width:620px){
  .kx-grid{grid-template-columns:1fr;grid-template-areas:"lead" "g1" "s1" "s2" "split" "m1" "g2"}
  .kc-split,.kc-wide{grid-template-columns:1fr}
  .kc-split .kc-i,.kc-split .kc-i .ph,.kc-wide .kc-i,.kc-wide .kc-i .ph{min-height:0;aspect-ratio:16/10}
  .kc-wide .kc-i{order:-1}
  .ig-grid{grid-template-columns:1fr;max-width:470px;margin:0 auto}
  .ig:nth-child(n+5){display:flex}
  .kx-near-g{grid-template-columns:1fr}
  .kx-sh{flex-wrap:wrap}
  .kx-rows a{gap:10px;padding-left:14px}
  .kx-dm{display:none}
  /* the sheet slides up from the bottom, like an app */
  .sxd[open]{align-items:flex-end}
  .sxd-in{width:100%;max-height:82vh;border-radius:20px 20px 0 0;animation:up .35s var(--ease)}
  @keyframes up{from{transform:translateY(100%)}}
  .sxd-grab{display:block;width:40px;height:4px;border-radius:4px;background:var(--rule);margin:8px auto 0}
  .sh-g{grid-template-columns:repeat(3,1fr);row-gap:14px;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .sxd .cm-f{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.sx-like.pop svg,.ig-burst.go svg,.sxd-in,.cm-l li.fresh{animation:none}}