/* The Activities posts (activities.js): the home page's latest posts, the list, one post, its gallery and the photo
   viewer. Dark like the rest of the site; the home page's section is paper. Logical properties throughout, so
   right-to-left pages mirror; nothing newer than the site's browser baseline (Chrome 89, Firefox 89, Safari 15.4). */

/* The owner's text may hold a long link or an unbroken word: it wraps inside its column instead of widening the page. */
.act-body,.act-card-title,.act-card-excerpt,.act-post-intro h1,.act-post-meta,.act-lb-caption,.act-state-text,.act-band .lede{overflow-wrap:break-word;overflow-wrap:anywhere}

/* ---------- Labels: type, day, "coming soon", what a post holds ---------- */
.act-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12px;line-height:1.6;color:var(--muted)}
.act-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 11px;border:1px solid rgba(181,228,135,.34);border-radius:var(--r-pill);color:var(--lime);font-size:11px;font-weight:500;line-height:1.6;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
html[dir=rtl] .act-pill{font-size:12px;letter-spacing:0;text-transform:none}
.act-date{white-space:nowrap}
.act-soon{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);background:var(--lime);color:#15240f;font-size:11px;font-weight:600;line-height:1.6;white-space:nowrap}
html[dir=rtl] .act-soon{font-size:12px}
.act-chips{position:absolute;inset-inline-start:12px;bottom:12px;z-index:1;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.act-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border-radius:var(--r-pill);background:rgba(5,11,13,.74);color:#eef3ee;font-size:11px;line-height:1.5}
html[dir=rtl] .act-chip{font-size:12px}
.act-chip svg.icon{width:14px;height:14px}

/* ---------- Cards: one link (the title's, stretched over the card), a calm lift on hover and focus ---------- */
.act-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:28px 0 0;padding:0;list-style:none}
.act-grid-item{display:flex;min-width:0}
.act-card{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(180deg,#111b1e,#0c1518);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.act-card:hover,.act-card:focus-within{transform:translateY(-4px);border-color:rgba(181,228,135,.34);box-shadow:0 24px 46px -22px rgba(0,0,0,.7)}
.act-card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0c1719}
.act-card-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.act-card:hover .act-card-media>img{transform:scale(1.035)}
.act-card-body{display:flex;flex-direction:column;flex:1;gap:12px;min-width:0;padding:20px 22px 22px}
.act-card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:19px;font-weight:500;line-height:1.6;letter-spacing:-.01em;color:var(--text)}
html[dir=rtl] .act-card-title{line-height:1.75;letter-spacing:0}
.act-card-link{color:inherit}
.act-card-link:after{content:'';position:absolute;inset:0;z-index:2;border-radius:var(--r-card)}
.act-card-link:focus{outline:0}
/* The card clips its corners, so its keyboard ring is drawn just inside its edge. */
.act-card-link:focus-visible:after{outline:2px solid var(--lime);outline-offset:-2px}
.act-card-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px;line-height:1.95;color:var(--muted)}
.act-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:auto;padding-top:2px}
.act-card-place{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;font-size:12px;color:var(--muted)}
.act-card-place>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-card-place svg.icon{width:15px;height:15px;color:var(--lime)}
.act-card-cta{display:inline-flex;align-items:center;gap:10px;padding-block:4px;border-bottom:1px solid currentColor;font-size:13px;color:var(--text)}
.act-card-cta svg.icon{width:16px;height:16px}

/* A post with no picture: a tile in the site's colours with its type and its day. */
.act-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;color:var(--lime);background:radial-gradient(110% 85% at 88% 8%,rgba(181,228,135,.15),transparent 58%),radial-gradient(90% 80% at 6% 100%,rgba(33,76,59,.62),transparent 62%),linear-gradient(140deg,#11221f,#0a1416)}
.act-ph:before,.act-ph:after{content:'';position:absolute;border:1px solid rgba(134,172,148,.15);border-radius:50%;pointer-events:none}
.act-ph:before{width:78%;padding-top:78%;top:-40%;inset-inline-end:-26%;box-shadow:0 0 0 30px rgba(134,172,148,.03),0 0 0 60px rgba(134,172,148,.02)}
.act-ph:after{width:36%;padding-top:36%;bottom:-16%;inset-inline-start:-10%}
.act-ph .act-ph-icon{width:30px;height:30px;margin-bottom:10px;stroke-width:1.3;opacity:.9}
.act-ph-day{font-size:56px;font-weight:300;line-height:1.05;letter-spacing:-.04em;color:#e8f2de}
.act-ph-month{font-size:13px;color:#9fb3ab}

/* The newest post, wide: the picture beside the text (stacked on phones). */
.act-featured{margin-top:28px}
.act-card-featured{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
.act-card-featured .act-card-media{aspect-ratio:auto;min-height:420px}
.act-card-featured .act-card-body{justify-content:center;gap:16px;padding:40px 44px}
.act-card-featured .act-card-title{-webkit-line-clamp:3;font-size:clamp(25px,2.4vw,34px);line-height:1.5}
html[dir=rtl] .act-card-featured .act-card-title{line-height:1.65}
.act-card-featured .act-card-excerpt{-webkit-line-clamp:4;font-size:15px}
.act-card-featured .act-card-foot{margin-top:10px}
.act-card-featured .act-ph-day{font-size:88px}
.act-card-featured .act-ph-month{font-size:15px}

/* Cards on the home page's paper section. */
.paper .act-card{background:#f7f6f1;border-color:rgba(21,34,35,.13);box-shadow:0 1px 2px rgba(21,34,35,.04)}
.paper .act-card:hover,.paper .act-card:focus-within{border-color:#8fa883;box-shadow:0 24px 42px -24px rgba(31,52,36,.38)}
.paper .act-card-media{background:#dcdbd2}
.paper .act-card-title,.paper .act-card-cta{color:var(--ink)}
.paper .act-pill{border-color:rgba(75,108,55,.4);color:#3f5c2d}
.paper .act-soon{background:#20392b;color:#fff}
.paper .act-card-place svg.icon{color:#4b6c37}

/* ---------- The home page's latest posts ---------- */
.act-home .section-head{margin-bottom:40px}
.act-home .act-grid,.act-home .act-featured{margin-top:0}
.act-grid-home[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- The list ---------- */
.act-list{padding-top:56px}
/* The list's own heading: activities.js draws it only when app.js says the owner hid the page intro, which holds the
   page's h1, so every layout has exactly one h1. When app.js does not say (an older app.js), the heading is drawn
   marked act-list-head-auto and shows only right under the header spacer, as before. */
.act-list-head{margin-bottom:34px}
.act-list-head-auto{display:none}
.header-spacer+[data-site-section="activities"] .act-list-head-auto{display:block}
.act-filters{display:flex;flex-wrap:wrap;gap:8px}
.act-filter{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:#b9c7c2;font-size:13px;line-height:1.4;transition:border-color .2s,background .2s,color .2s}
.act-filter:hover{border-color:rgba(181,228,135,.4);color:var(--text)}
.act-filter.is-active{border-color:var(--lime);background:var(--lime);color:#15240f}
.act-filter-count{min-width:1.4em;font-size:11px;color:var(--muted);text-align:center}
.act-filter.is-active .act-filter-count{color:#33502a}
.act-more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:46px}
.act-count{font-size:12px;color:var(--muted)}
.act-more-btn{min-width:220px}
.act-more-btn svg.icon{width:18px;height:18px}

/* Waiting, nothing yet, and a failed request. */
.act-state{display:grid;justify-items:center;gap:14px;padding:76px 24px;border:1px solid var(--line);border-radius:var(--r-panel);text-align:center;background:radial-gradient(70% 90% at 50% 0,rgba(181,228,135,.07),transparent 70%),#0b1316}
.act-state-mark{display:grid;place-items:center;width:76px;height:76px;margin-bottom:12px;border:1px solid rgba(181,228,135,.28);border-radius:50%;box-shadow:0 0 0 12px rgba(181,228,135,.04),0 0 0 24px rgba(181,228,135,.02);color:var(--lime)}
.act-state-mark svg.icon{width:30px;height:30px;stroke-width:1.3}
.act-state-title{font-size:clamp(22px,2.2vw,28px);line-height:1.6;outline:0}
.act-state-text{max-width:520px;font-size:14px;line-height:2}
.act-state .btn{margin-top:10px}
.act-retry svg.icon{width:18px;height:18px}
.act-state-loading{padding:0 0 22px;border:0;background:none;justify-items:start}
.act-state-wait{font-size:14px;color:var(--muted)}
.act-skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.act-skeleton span{display:block;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(180deg,#121b1e,#0d1518)}
.act-skeleton .act-skeleton-lead{grid-column:1/-1;aspect-ratio:auto;height:360px}

/* ---------- One post ---------- */
/* app.js puts a spacer under the fixed header on a post; the intro band slides up under the header, as every page's
   intro does, so its top matches the other pages exactly. */
.header-spacer+[data-site-section="intro"]+[data-site-section="activities"] .act-post-intro,.header-spacer+[data-site-section="activities"] .act-post-intro{margin-top:-125px}
.act-post-intro h1{max-width:980px;font-size:clamp(30px,3.4vw,48px);line-height:1.5;outline:0}
/* A title only written in another language (English on a Kurdish page) keeps its own direction but lines up with the
   band's other lines (Chrome does not know text-align:match-parent). */
html[dir=rtl] .act-post-intro h1[dir=ltr]{text-align:right}
html[dir=ltr] .act-post-intro h1[dir=rtl]{text-align:left}
html[dir=rtl] .act-post-intro h1{line-height:1.65}
.act-post-intro .breadcrumbs{position:relative;z-index:1;min-width:0}
.act-crumb-current{min-width:0;max-width:min(46ch,52vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-post-kicker,.act-post-meta,.act-band-actions,.act-band-wait{position:relative;z-index:1}
.act-post-kicker{margin-bottom:16px}
.act-post-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:14px;color:#b4c3be}
.act-meta-item{display:inline-flex;align-items:center;gap:9px;min-width:0}
.act-meta-item svg.icon{width:18px;height:18px;color:var(--lime)}
.act-band .lede{margin-top:16px}
.act-band-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.act-band-actions:empty{display:none}
.act-band-wait{font-size:15px;color:var(--muted)}
.act-post-main{padding-block:56px 90px}

/* The post's video, YouTube video or cover photo. */
.act-hero{position:relative;isolation:isolate;margin:0 0 54px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-panel);background:#061012}
/* A definite width: with aspect-ratio alone, max-height would narrow the box instead of letterboxing inside it. */
.act-hero-video{width:100%;aspect-ratio:16/9;max-height:min(74vh,760px)}
.act-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* The frame clips what lies outside it, so the video's keyboard ring is drawn just inside its edge, round its corners. */
.act-video:focus-visible{border-radius:inherit;outline:2px solid var(--lime);outline-offset:-2px}
.act-video-fallback{display:block;padding:24px;color:var(--muted)}
/* The frame takes its photo's or video's shape (activities.js sets the aspect-ratio; 16:9 only when the size is not
   known). A picture taller than the greatest height sits on a quiet panel (no blurred copy behind it). */
.act-hero-photo{width:100%;aspect-ratio:16/9;max-height:min(74vh,760px);background:radial-gradient(75% 110% at 50% 50%,#10201f,#050b0d)}
.act-hero-open{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.act-hero-open .act-hero-img{display:block;width:100%;height:100%;object-fit:contain}
/* The keyboard ring of the cover photo and the YouTube still is drawn above the picture (the picture would cover an
   outline drawn inside its frame), with a dark edge so it also shows on a light photo. */
.act-hero-open:focus,.act-yt-play:focus{outline:0}
.act-hero-open:focus-visible:after{content:'';position:absolute;inset:6px;z-index:2;border:2px solid var(--lime);border-radius:14px;box-shadow:0 0 0 2px rgba(3,8,10,.72),inset 0 0 0 2px rgba(3,8,10,.72);pointer-events:none}
.act-yt{background:#000}
.act-yt-box{position:relative;width:100%;aspect-ratio:16/9;max-height:min(74vh,760px)}
.act-yt-play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.act-yt-play img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity .3s,transform .7s cubic-bezier(.2,.7,.2,1)}
.act-yt-play:hover img{opacity:1;transform:scale(1.02)}
.act-yt-play:focus-visible:after{content:'';position:absolute;inset:6px;z-index:2;border:2px solid var(--lime);border-radius:14px;box-shadow:0 0 0 2px rgba(3,8,10,.72),inset 0 0 0 2px rgba(3,8,10,.72);pointer-events:none}
.act-yt-icon{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border:1px solid rgba(181,228,135,.6);border-radius:50%;background:rgba(6,12,14,.74);color:#fff;transition:transform .3s,background .3s,color .3s}
.act-yt-play:hover .act-yt-icon{transform:scale(1.06);background:var(--lime);color:#15240f}
.act-yt-play:focus-visible .act-yt-icon{transform:scale(1.06);background:var(--lime);color:#15240f}
.act-yt-icon svg.icon{width:30px;height:30px;margin-left:5px;fill:currentColor;stroke:none}
.act-yt-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.act-yt-frame:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}
.act-yt-caption{display:flex;justify-content:flex-end;padding:6px 16px;border-top:1px solid var(--line);background:#081113}
.act-yt-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:#c9d6d1;text-decoration:underline;text-underline-offset:3px}
.act-yt-link svg.icon{width:15px;height:15px}
.act-yt-extra{margin:52px 0 0}

/* The text: a comfortable measure; the first paragraph leads a little larger. */
.act-body{max-width:760px}
.act-body p{margin:0 0 1.3em;font-size:17px;line-height:2.05;color:#cdd7d3}
.act-body p:first-child{font-size:19px;color:#e2e9e5}
.act-body p:last-child{margin-bottom:0}
html[dir=rtl] .act-body p{font-size:18px;line-height:2.15}
html[dir=rtl] .act-body p:first-child{font-size:20px}

/* Every photo: each one opens the viewer. One, two or four photos get fewer columns. */
.act-gallery{margin-top:64px}
.act-gallery-title{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:clamp(22px,2vw,26px);line-height:1.5}
.act-gallery-count{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:12px;color:var(--muted)}
.act-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.act-gallery-grid[data-count="1"]{grid-template-columns:minmax(0,760px)}
.act-gallery-grid[data-count="2"],.act-gallery-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.act-thumb{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:4/3;padding:0;overflow:hidden;border:0;border-radius:12px;background:#0c1719;cursor:zoom-in}
.act-gallery-grid[data-count="1"] .act-thumb{aspect-ratio:3/2}
.act-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.act-thumb:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.act-thumb:hover img{transform:scale(1.045)}
.act-thumb:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* Share and back. */
.act-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.act-share svg.icon{width:18px;height:18px}
.act-back svg.icon{width:17px;height:17px;transform:scaleX(-1)}
html[dir=rtl] .act-back svg.icon{transform:none}
.act-share-status{margin-top:14px;font-size:13px;line-height:1.8;color:var(--lime)}
.act-share-status:empty{margin:0}
.act-share-link{display:block;width:100%;max-width:560px;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:#152522;color:var(--text);font-size:13px}
.act-share-link:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* Other posts under a post. */
.act-related{padding-block:80px 100px;border-top:1px solid var(--line)}
.act-related .section-head{margin-bottom:0}
.act-grid-related{margin-top:30px}

/* ---------- The photo viewer (an overlay on the body, above the header and the 6D panel) ---------- */
.act-lightbox{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:#05090b;color:var(--text);outline:0;-webkit-tap-highlight-color:transparent}
.act-lb-bar{display:flex;align-items:center;gap:16px;min-height:76px;padding:16px 22px}
.act-lb-count{font-size:13px;letter-spacing:.04em;color:#a9b8b3}
.act-lb-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(210,234,229,.22);border-radius:50%;background:rgba(255,255,255,.05);color:#eef3ee;transition:background .2s,border-color .2s}
.act-lb-btn:hover{border-color:rgba(210,234,229,.42);background:rgba(255,255,255,.11)}
.act-lb-btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.act-lb-btn svg.icon{width:22px;height:22px}
.act-lb-close{margin-inline-start:auto}
.act-lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 96px 26px;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.act-lb-img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.act-lb-img.is-dragging{transition:none}
.act-lb-nav{position:absolute;top:50%;width:54px;height:54px;margin-top:-27px}
.act-lb-prev{inset-inline-start:24px}
.act-lb-next{inset-inline-end:24px}
.act-lb-prev svg.icon{transform:rotate(90deg)}
.act-lb-next svg.icon{transform:rotate(-90deg)}
.act-lightbox[dir=rtl] .act-lb-prev svg.icon{transform:rotate(-90deg)}
.act-lightbox[dir=rtl] .act-lb-next svg.icon{transform:rotate(90deg)}
.act-lb-caption{max-width:760px;margin:0 auto;padding:0 24px 26px;font-size:14px;line-height:1.9;text-align:center;color:#cbd6d1}

/* ---------- Tablets and phones ---------- */
@media(max-width:1000px){
.act-grid,.act-skeleton{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.act-card-featured .act-card-media{min-height:340px}
.act-card-featured .act-card-body{padding:30px}
.act-lb-stage{padding-inline:80px}
}
@media(max-width:800px){
.act-card-featured{grid-template-columns:minmax(0,1fr)}
.act-card-featured .act-card-media{min-height:0;aspect-ratio:16/10}
.act-card-featured .act-card-body{padding:24px 22px 26px}
}
@media(max-width:700px){
.act-list{padding-top:36px}
.act-grid,.act-skeleton{grid-template-columns:minmax(0,1fr);gap:18px}
.act-grid-home[data-count="2"]{grid-template-columns:minmax(0,1fr)}
.act-skeleton .act-skeleton-lead{height:240px}
.act-card-body{padding:18px 18px 20px;gap:10px}
.act-card-title{font-size:18px}
.act-card-featured .act-card-title{font-size:24px}
.act-card-featured .act-card-excerpt{font-size:14px;-webkit-line-clamp:3}
.act-card-featured .act-ph-day{font-size:64px}
.act-filter{min-height:40px;padding:7px 14px;font-size:12px}
html[dir=rtl] .act-filter{font-size:13px}
/* The home page and the posts under a post: the first card large, the others as short rows. */
.act-grid-home .act-grid-item+.act-grid-item .act-card,.act-grid-related .act-grid-item+.act-grid-item .act-card{display:grid;grid-template-columns:112px minmax(0,1fr)}
.act-grid-home .act-grid-item+.act-grid-item .act-card-media,.act-grid-related .act-grid-item+.act-grid-item .act-card-media{aspect-ratio:auto;min-height:118px}
.act-grid-home .act-grid-item+.act-grid-item .act-card-body,.act-grid-related .act-grid-item+.act-grid-item .act-card-body{justify-content:center;gap:6px;padding:12px 16px}
.act-grid-home .act-grid-item+.act-grid-item .act-card-title,.act-grid-related .act-grid-item+.act-grid-item .act-card-title{font-size:16px}
.act-grid-home .act-grid-item+.act-grid-item :is(.act-card-excerpt,.act-card-foot,.act-chips,.act-ph-month,.act-ph-icon),.act-grid-related .act-grid-item+.act-grid-item :is(.act-card-excerpt,.act-card-foot,.act-chips,.act-ph-month,.act-ph-icon){display:none}
.act-grid-home .act-grid-item+.act-grid-item .act-ph-day,.act-grid-related .act-grid-item+.act-grid-item .act-ph-day{font-size:34px}
.act-state{padding:56px 20px}
.act-post-intro h1{font-size:28px;line-height:1.55}
html[dir=rtl] .act-post-intro h1{font-size:27px;line-height:1.7}
.act-post-meta{gap:8px 20px;margin-top:16px;font-size:13px}
html[dir=rtl] .act-post-meta{font-size:14px}
.act-crumb-current{max-width:44vw}
.act-post-main{padding-block:28px 64px}
/* On a phone the video or photo runs to the screen's edges. */
.act-hero{margin:0 -20px 36px;border-inline:0;border-radius:0}
.act-hero-video,.act-hero-photo{width:calc(100% + 40px)}
.act-hero-video,.act-hero-photo,.act-yt-box{max-height:70vh}
.act-yt-icon{width:68px;height:68px;margin:-34px 0 0 -34px}
.act-yt-extra{margin-top:40px}
.act-body p{font-size:16px;line-height:2}
.act-body p:first-child{font-size:17px}
html[dir=rtl] .act-body p{font-size:17px;line-height:2.1}
html[dir=rtl] .act-body p:first-child{font-size:18px}
.act-gallery{margin-top:48px}
.act-gallery-grid,.act-gallery-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.act-gallery-grid[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.act-thumb{border-radius:10px}
.act-actions{margin-top:44px;gap:12px 22px}
.act-related{padding-block:56px 64px}
.act-lightbox{padding-bottom:84px}
.act-lb-bar{min-height:64px;padding:12px 14px}
.act-lb-stage{padding:0 0 14px}
.act-lb-img{border-radius:0;box-shadow:none}
.act-lb-nav{top:auto;bottom:18px;width:48px;height:48px;margin-top:0}
.act-lb-prev{inset-inline-start:calc(50% - 64px)}
.act-lb-next{inset-inline-end:calc(50% - 64px)}
.act-lb-caption{padding:0 18px 10px;font-size:13px}
html[dir=rtl] .act-lb-caption{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
.act-card:hover,.act-card:focus-within{transform:none}
.act-card:hover .act-card-media>img,.act-thumb:hover img,.act-yt-play:hover img,.act-yt-play:hover .act-yt-icon{transform:none}
}
@media(forced-colors:active){
.act-filter.is-active{border-width:3px}
.act-card-link:focus-visible:after{outline-color:Highlight}
.act-video:focus-visible{outline-color:Highlight}
.act-hero-open:focus-visible:after{border-color:Highlight}
.act-yt-play:focus-visible:after{border-color:Highlight}
}