/* Do Good feed (lsl-dogood-feed.php): the latest posts under the Do Good paragraph on the 2026 home page.
   Loaded after home.css, so its tokens (--lav, --in-abyss, --in-gold...) are here. Same tile look as the shirt mosaic:
   edge to edge, 6px gaps, Inochi abyss/deep with a gold ring on hover.
   The title and the source switches stay at the top of the screen while the feed scrolls (sticky). The carousel's
   overflow:hidden would stop that, so where the browser has overflow:clip (same look, no scroll box) it is used. */
@supports (overflow:clip){.lsl-home26 .viewport{overflow:clip}}
.lsl-dgf{--gap:6px}
.lsl-dgf .dgf-head{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  padding:10px max(16px,4vw) 12px;margin-bottom:4px;background:rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lsl-dgf h3{margin:0;font-family:var(--f-logo);font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:.03em;
  color:var(--lav);text-shadow:0 0 8px var(--lav-glow),0 0 22px var(--lav-glow);text-transform:none}
.lsl-dgf ul{list-style:none;margin:0;padding:0}
.lsl-dgf li{margin:0;padding:0;min-width:0}
/* source switches: on = lit (frost icon, gold ring, deep fill); off = dim, dashed ring. Not color alone: fill, ring
   style and brightness all change, and the state is read out as "pressed". */
.dgf-bar{display:none;flex-wrap:wrap;gap:8px}
.dgf-ready .dgf-bar{display:flex}
.lsl-home26 .dgf-tog{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:rgba(234,244,246,.45);
  background:transparent;box-shadow:inset 0 0 0 1px rgba(234,244,246,.25);outline-offset:3px;
  transition:color .25s,background .25s,box-shadow .25s,opacity .25s}
.lsl-home26 .dgf-tog::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(234,244,246,.35)}
.lsl-home26 .dgf-tog{position:relative}
.lsl-home26 .dgf-tog[aria-pressed="true"]{color:var(--in-frost);background:var(--in-deep);box-shadow:inset 0 0 0 2px var(--in-gold),0 0 12px rgba(227,197,122,.35)}
.lsl-home26 .dgf-tog[aria-pressed="true"]::after{display:none}
.lsl-home26 .dgf-tog:hover{color:var(--in-gold-bright)}
.dgf-tog svg{width:20px;height:20px}
.lsl-dgf .dgf-empty{margin:0;padding:48px max(16px,4vw);text-align:center;font-family:var(--f-hand);font-size:clamp(20px,2.2vw,28px);color:var(--muted)}
.lsl-dgf .dgf-empty[hidden],.dgf-grid[hidden]{display:none}

.dgf-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dgf-grid li[hidden]{display:none!important}
.dgf-card{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;color:var(--in-frost);text-decoration:none;
  background:linear-gradient(155deg,var(--in-deep),var(--in-abyss) 70%)}
.dgf-img{position:absolute;inset:0}
.dgf-img img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.dgf-noimg{display:grid;place-items:center;padding-bottom:22%;color:rgba(234,244,246,.16)}
.dgf-noimg svg{width:42%;height:42%}
.dgf-play{position:absolute;top:38%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(11,42,60,.55);box-shadow:inset 0 0 0 2px rgba(234,244,246,.85);transition:background .3s}
.dgf-play::before{content:"";position:absolute;left:21px;top:16px;width:16px;height:20px;background:var(--in-frost);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.dgf-badge{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--in-frost);background:rgba(11,42,60,.72);box-shadow:inset 0 0 0 1px rgba(201,162,74,.45)}
.dgf-badge svg{width:18px;height:18px}
.dgf-badge,.dgf-lsl{box-shadow:inset 0 0 0 1px rgba(201,162,74,.45),0 1px 6px rgba(0,0,0,.45)}
/* the LSL mark (James's glyph, gold-bright) on posts LeoScorpioLeo made itself; shares and reposts go without it */
.dgf-lsl{position:absolute;top:8px;right:8px;width:56px;height:34px;border-radius:17px;
  background:rgba(11,42,60,.78) url(lsl-mark.webp) center/40px auto no-repeat}
.dgf-cap{position:absolute;left:0;right:0;bottom:0;padding:2.6em .8em .7em;
  background:linear-gradient(rgba(11,42,60,0),rgba(11,42,60,.92) 42%)}
.dgf-meta{display:block;margin-bottom:.3em;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--in-gold-bright)}
.dgf-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--f-body);font-weight:500;font-size:clamp(14px,1.05vw,16px);line-height:1.3;color:var(--in-frost)}
.dgf-card::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 0 var(--in-gold);transition:box-shadow .3s;pointer-events:none}
.dgf-card:hover img,.dgf-card:focus-visible img{transform:scale(1.045)}
.dgf-card:hover .dgf-play,.dgf-card:focus-visible .dgf-play{background:rgba(201,162,74,.7)}
.dgf-card:hover::after,.dgf-card:focus-visible::after{box-shadow:inset 0 0 0 2px var(--in-gold)}
.dgf-card:focus-visible{outline:2px solid var(--lav);outline-offset:2px}

.dgf-foot{display:flex;justify-content:center;padding:22px 16px 0}
.lsl-home26 .dgf-morebtn{min-height:44px;padding:0 28px;border-radius:22px;font-family:var(--f-body);font-size:14px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--in-gold-bright);box-shadow:inset 0 0 0 2px var(--in-gold);transition:background .25s,color .25s}
.lsl-home26 .dgf-morebtn:hover,.lsl-home26 .dgf-morebtn:focus-visible{background:var(--in-gold);color:var(--in-abyss)}
.lsl-home26 .dgf-morebtn[hidden]{display:none}
.lsl-home26 .dgf-morebtn:disabled{opacity:.6;cursor:progress}

@media (max-width:760px),(orientation:portrait) and (max-width:1100px){
  .lsl-dgf{--gap:4px}
  .lsl-dgf .dgf-head{justify-content:center;text-align:center;gap:8px 16px;padding-block:8px 10px}
  .lsl-dgf h3{font-size:24px;width:100%}
  .dgf-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .dgf-cap{padding:2.2em .6em .55em}
  .dgf-meta{font-size:11px}
  .dgf-title{font-size:13px;-webkit-line-clamp:3}
  .dgf-badge{width:30px;height:30px;top:6px;left:6px}
  .dgf-badge svg{width:16px;height:16px}
  .dgf-lsl{width:48px;height:30px;top:6px;right:6px;background-size:34px auto}
  .dgf-play{width:44px;height:44px;margin:-22px 0 0 -22px}
  .dgf-play::before{left:17px;top:13px;width:14px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .dgf-img img,.dgf-card::after,.dgf-play,.lsl-home26 .dgf-tog,.lsl-home26 .dgf-morebtn{transition:none}
  .dgf-card:hover img,.dgf-card:focus-visible img{transform:none}
}