/* WordPress only: where the Signature theme differs from the static 03, which stays as
   it is. */

/* No newsletter here (the static one is a mockup with no list behind it): the brand and
   the dashboard's five footer menus share the row (About, What we do, Programs, Get
   involved, Tzu Chi worldwide); under 1200px they fold into three columns. */
@media (min-width:1200px){
  .foot__in{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
  .foot__nav{grid-template-columns:repeat(5,max-content);column-gap:36px}
}
@media (min-width:721px) and (max-width:1199px){
  .foot__nav{grid-template-columns:repeat(3,max-content);column-gap:48px}
}

/* A menu item with a description (Programs: who each is for, the next step) shows it
   under its title; that dropdown is wider so the lines read in one go. */
.nv__dd{display:block;margin-top:3px;max-width:34ch;font-size:14px;font-weight:400;line-height:1.45;color:var(--ink-2)}
.nv__dt--d{padding-block:12px}
@media (min-width:1024px){.nv__i--rich .nv__d{min-width:340px}} /* wide only: the phone menu below 1024px has no room for it */

/* What we do, Liaison offices (inc/nav.php): the province offices open beside the dropdown on
   hover or focus; on a phone, below it, by its + button. */
.nv__fly{position:relative}
.nv__dt--fly{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nv__c--r{transform:rotate(-45deg)}
.nv__y{display:none}
@media (min-width:1024px){
  .nv__s--fly{position:absolute;left:100%;top:-11px;min-width:220px;padding:10px 0 12px;background:var(--paper);
              border:1px solid var(--rule);box-shadow:0 18px 40px rgba(23,32,27,.14);
              opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility 0s linear .16s;z-index:61}
  .nv__fly:hover>.nv__s--fly,.nv__fly:focus-within>.nv__s--fly{opacity:1;visibility:visible;transition:opacity .16s var(--ease),visibility 0s}
  .nv__fly:hover>.nv__dt,.nv__fly:focus-within>.nv__dt{background:var(--stone)}
  .nv__s--fly a{padding:9px 24px;font-size:16px;font-weight:600;color:var(--ink)}
  .nv__s--fly a:hover,.nv__s--fly a.is-here{background:var(--stone);text-decoration:none}
}
@media (max-width:1023px){
  .nv__c--r{display:none}
  .nv__y{display:block;position:absolute;top:0;right:-8px;width:44px;height:44px;border:0;background:none}
  .nv__y::before,.nv__y::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink)}
  .nv__y::before{width:12px;height:2px;transform:translate(-50%,-50%)}
  .nv__y::after{width:2px;height:12px;transform:translate(-50%,-50%)}
  .nv__fly.is-open>.nv__y::after{display:none}
  .nv__s--fly{display:none}
  .nv__fly.is-open>.nv__s--fly{display:block}
}

/* Signed in, WordPress's bar covers the top of the page: the sticky header stops below it
   (32px on a desktop, 46px on a phone; under 600px the bar scrolls away). */
.admin-bar .top{top:32px}
@media (max-width:782px){ .admin-bar .top{top:46px} }
@media (max-width:600px){ .admin-bar .top{top:0} }
/* and whatever sticks below the header moves down with it, keeping its gap (the user,
   2026-10-14: "this should have a padding above so it does not look cutoff when scrolling") */
.admin-bar{--wpbar:32px}
@media (max-width:782px){ .admin-bar{--wpbar:46px} }
@media (max-width:600px){ .admin-bar{--wpbar:0px} }
.admin-bar .sd-give,.admin-bar .side,.admin-bar .mn-story__ph{top:calc(var(--top-h) + var(--wpbar) + 24px)}
.admin-bar .give--page{top:calc(var(--top-h) + var(--wpbar) + 20px)}
/* and a link to a part of the page lands below both bars, as it does signed out */
html:has(body.admin-bar){scroll-padding-top:calc(var(--top-h) + 52px)}
@media (max-width:782px){ html:has(body.admin-bar){scroll-padding-top:calc(var(--top-h) + 66px)} }
@media (max-width:600px){ html:has(body.admin-bar){scroll-padding-top:calc(var(--top-h) + 20px)} }

/* ---- the news list, stories and pages (inc/list.php): drawn on the server, so the
   section pills are links, and the lists are paged ---- */
.ts-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1.5px solid var(--line);
           border-radius:var(--pill);background:var(--paper);font-size:15px;font-weight:700;color:var(--ink);
           text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.ts-tabs a:hover{border-color:var(--ink)}
.ts-tabs a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:640px){ .ts-tabs a{flex:none;white-space:nowrap} }

/* a story with no picture keeps the text at full width; a video's frame is cut to 16:9; an
   award's photo (a medal, a plaque, a certificate) is shown whole */
.nw-row--text a,.nw-lead--text{grid-template-columns:minmax(0,1fr)}
.nw-row img.ts-yt,.nw-lead__img img.ts-yt{aspect-ratio:16/9}
.nw-row img.ts-whole,.nw-lead__img img.ts-whole,.mgc__img img.ts-whole,img.sd-more__img.ts-whole{object-fit:contain}

.ts-pages{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(36px,4.4vw,56px);
          padding-top:18px;border-top:2px solid var(--ink)}
.ts-pages .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
                        padding:8px 14px;border:1.5px solid var(--line);border-radius:var(--pill);font-size:15px;
                        font-weight:700;color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease)}
.ts-pages a.page-numbers:hover{border-color:var(--ink)}
.ts-pages .current{background:var(--ink);border-color:var(--ink);color:#fff}
.ts-pages .dots{min-width:0;padding:8px 2px;border-color:transparent}

.ts-find{display:flex;flex-wrap:wrap;gap:12px;max-width:600px;margin-top:28px}
.ts-find .find{flex:1 1 260px}

/* The news header (inc/list.php; the user, 2026-10-15: "this feels empty full of blank space and
   the filter is bad"; "search bar is too far on the cards"): the title on the frame's left and
   its line on the right; then, in a bar right above the cards, the sections (each with its count)
   on the left and the search on the right, and under them "Show advanced filter", which unfolds
   the features as chips, every choice in view, one click each. On a phone it stacks, and each
   row of pills runs sideways in its own lane so the page never does. */
.nw-h{padding-bottom:0}
.nw-h__top{display:grid;grid-template-columns:minmax(0,1fr);row-gap:18px}
.nw-h h1{overflow-wrap:anywhere;min-width:0}
.nw-h__side .pg-h__p{margin:0}
.ts-about__more{margin:16px 0 0}
@media (min-width:1024px){
  .nw-h__top{grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:56px;align-items:end}
}
.nw-h__bar{margin-top:clamp(24px,3vw,40px);padding:clamp(18px,2vw,24px) 0 clamp(20px,2.4vw,28px);border-top:1px solid var(--rule)}
.nw-h__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.nw-h__row .tabs{min-width:0}
.nw-h__find{flex:0 1 440px;min-width:0}
.nw-h__row>.nw-h__find:only-child{flex-basis:600px}
.nw-h .ts-find{margin:0;max-width:none;flex-wrap:nowrap}
.nw-h .ts-find .find{flex:1 1 auto;min-width:0}
/* narrower, the sections take their own line (a phone keeps them in one sideways lane) and the search the next */
@media (max-width:899px){ .nw-h__row .tabs,.nw-h__find{flex:1 1 100%} }
/* a section's count on its own pill, quieter than its name */
.ts-tabs a{gap:8px}
.ts-tabs__n{font-size:13px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ts-tabs a.is-on .ts-tabs__n{color:inherit;opacity:.75}
/* the features fold away behind "Show advanced filter"; the native disclosure, so it opens by
   keyboard and without script (open on a feature's own news, so its chip shows) */
.nw-more>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;padding:8px 18px;
                 border:1.5px solid var(--line);border-radius:var(--pill);background:var(--paper);font-size:15px;font-weight:700;
                 color:var(--ink);cursor:pointer;list-style:none;user-select:none;white-space:nowrap;
                 transition:border-color .2s var(--ease)}
.nw-more>summary::-webkit-details-marker{display:none}
.nw-more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
                        transform:translateY(-2px) rotate(45deg)}
.nw-more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.nw-more>summary:hover{border-color:var(--ink)}
.nw-more>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nw-more__h,.nw-more[open] .nw-more__s{display:none}
.nw-more[open] .nw-more__h{display:inline}
.nw-about{display:grid;row-gap:12px;margin-top:18px}
.nw-about__g{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px}
.nw-about__l{margin:0;font-size:14px;font-weight:700;color:var(--ink-2)}
.nw-about__c{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.nw-about__c a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 14px;border-radius:var(--pill);
               background:var(--stone);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;
               transition:background-color .2s var(--ease),color .2s var(--ease)}
.nw-about__c a:hover{background:var(--stone-2)}
.nw-about__c a:active{transform:translateY(1px)}
.nw-about__c a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nw-about__c a.is-on{background:var(--ink);color:#fff}
.nw-about__n{font-size:13px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nw-about__c a.is-on .nw-about__n{color:inherit;opacity:.75}
@media (min-width:900px){
  .nw-about__g{grid-template-columns:140px minmax(0,1fr);column-gap:20px;align-items:baseline}
  .nw-about__l{padding-top:11px}
}
@media (max-width:640px){
  .nw-about__c{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;contain:inline-size;
               margin:0 calc(-1 * var(--gut));padding:2px var(--gut)}
  .nw-about__c::-webkit-scrollbar{display:none}
  .nw-about__c a{min-height:44px}
}
@media (prefers-reduced-motion:reduce){ .nw-about__c a,.nw-more>summary{transition:none} .nw-about__c a:active{transform:none} }
/* the cards start close under the bar */
.nw-h + .nw-list{padding-top:clamp(28px,3vw,44px)}

/* a story: the byline, the video */
.art__by{margin:16px 0 0;font-size:16px;color:var(--ink-2)}
.art__by b{color:var(--ink)}
.ts-embed{margin:32px 0 34px;aspect-ratio:16/9;background:var(--ink)}
.ts-embed iframe{display:block;width:100%;height:100%;border:0}

/* the old site's text: pictures, lists, quotes and tables in 03's type */
.prose>*+h2{margin-top:44px}
.prose h4{font-size:19px;margin:24px 0 8px}
.prose img{margin:28px 0}
.prose figure{margin:28px 0}
.prose figure img,.prose a>img{margin:0}
.prose figcaption,.prose .wp-caption-text{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.3em;font-size:18px;line-height:1.7;color:var(--ink-2);max-width:64ch}
.prose li{margin:0 0 .4em}
.prose blockquote{margin:30px 0;padding:20px 0 0;border-top:2px solid var(--ink)}
.prose blockquote p{font-size:clamp(20px,2vw,24px);line-height:1.4;font-weight:700;color:var(--ink)}
.prose iframe,.prose video{max-width:100%}
.prose table{width:100%;margin:0 0 1.05em;border-collapse:collapse;font-size:16px}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}

/* the photos under a story, as the old site printed them (rebuild/add-story-photos.php): a photo
   in its own shape above its caption, a tall one kept within the screen; photos sharing one
   caption two a row, an odd set led by a wide one; a click opens them large (single.php) */
.prose .ts-photos{display:grid;gap:10px;margin:32px 0}
.prose .ts-photos a{display:block;padding:0;cursor:zoom-in} /* a photo is tap target enough: no text-link padding (styles.css) */
.prose .ts-photos img{display:block;background:var(--stone-2)}
.prose .ts-photos:not(.ts-photos--set) a{width:fit-content;max-width:100%}
.prose .ts-photos:not(.ts-photos--set) img{width:auto;max-width:100%;height:auto;max-height:min(80vh,860px)}
.prose .ts-photos--set{grid-template-columns:repeat(2,minmax(0,1fr))}
.prose .ts-photos--odd>a:first-child{grid-column:1/-1}
.prose .ts-photos--set img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.prose .ts-photos figcaption{grid-column:1/-1;margin-top:0}

/* an album's photographs links that open large; the Gallery's albums as cards */
.gl+.prose,.prose+.gl{margin-top:clamp(40px,5vw,64px)}
.ts-albums .gl__b{cursor:pointer}
.ts-albums figcaption a{font-size:17px;font-weight:700;color:var(--ink);text-decoration:none}
.ts-albums figcaption a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* the page links and a jump to a page number in one bar (the user, 2026-10-08) */
.ts-pagebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;
            margin-top:clamp(36px,4.4vw,56px);padding-top:18px;border-top:2px solid var(--ink)}
.ts-pagebar .ts-pages{margin-top:0;padding-top:0;border-top:0}
.ts-jump{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink)}
.ts-jump input{width:5.5em;min-height:44px;padding:8px 14px;border:1.5px solid var(--line);border-radius:var(--pill);
               background:var(--paper);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.ts-jump input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ts-jump span{font-weight:400;color:var(--ink-2)}
.ts-jump .line{min-height:44px;padding:8px 20px}
/* the story's Newer and Older links, now below the story and its side column */
.art + .pager{max-width:none}
/* a story across the frame (the user, 2026-10-14: "dont make it centered just for the sake of
   centering, make it balance ... use the website"): where the sidebar sits beside it, the story's
   column starts at the frame's left edge and the sidebar ends at its right; the text, a little
   larger, runs the column's width, as the photos do, and the pager lines up under the story */
@media (min-width:1121px){
  .art{grid-template-columns:minmax(0,760px) minmax(0,320px);gap:48px;justify-content:space-between}
  .art__main{max-width:none}
  .art__body.prose p{max-width:none;font-size:19px;line-height:1.7}
  .art + .pager{max-width:760px;margin-inline:0}
}
@media (max-width:640px){ .ts-pagebar{flex-direction:column;align-items:flex-start} }

/* ---- the news front, a magazine, and the video wall (the user, 2026-10-08) ---- */
.mg{display:grid;gap:clamp(44px,5.4vw,72px);margin-top:clamp(28px,3.4vw,40px)}
.mg-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;
      margin-bottom:22px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.mg-h h2{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.015em}
.mg-h a{font-size:16px;font-weight:700;color:var(--ink);text-underline-offset:3px}
.mg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,44px)}
.mg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.8vw,36px)}
.mgc a{display:grid;align-content:start;gap:10px;color:var(--ink);text-decoration:none}
.mgc__img{display:block;overflow:hidden;background:var(--stone-2)}
.mgc__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.mgc b{font-size:clamp(20px,1.9vw,26px);font-weight:800;line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.mg3 .mgc b{font-size:clamp(17px,1.4vw,20px);line-height:1.25}
/* every story card stops its summary at three lines, with an ellipsis (the user, 2026-10-15: "use elpisis on long exerpts") */
.mgc p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mgc a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* cards the same size in a row (the user, 2026-10-15: "make the size of cards consistent"): the
   photo is always 3:2, the title keeps two lines and the summary three, longer ones end in an
   ellipsis, so every card's parts line up across the row */
.mgc b{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh}
.mgc p{min-height:3lh}
/* cards the same size in a row (the user, 2026-10-15: "make the size of cards consistent"): the
   photo is always 3:2, the title keeps two lines and the summary three, longer ones end in an
   ellipsis, so every card's parts line up across the row */
.mgc b{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh}
.mgc p{min-height:3lh}
.mg-aw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(22px,2.8vw,36px)}
.mg-aw li{padding:14px 0;border-bottom:1px solid var(--rule)}
.mg-aw a{font-size:17px;font-weight:700;line-height:1.35;color:var(--ink);text-decoration:none}
.mg-aw a:hover{text-decoration:underline;text-underline-offset:3px}

.vw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.vw--wall{margin-top:clamp(24px,3vw,36px);row-gap:clamp(26px,3vw,40px)}
.vw a{display:grid;align-content:start;gap:8px;color:var(--ink);text-decoration:none}
.vw__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.vw__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vw__play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
          background:rgba(23,32,27,.72);box-shadow:0 0 0 2px rgba(255,255,255,.92);transition:background-color .2s var(--ease)}
.vw__play::after{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:10px 0 10px 16px;
                 border-color:transparent transparent transparent #fff}
.vw b{font-size:16px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vw time{font-size:14px;color:var(--ink-2)}
.vw a:hover .vw__play,.vw a:focus-visible .vw__play{background:var(--charity,#00704a)}
.vw a:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1060px){ .vw{grid-template-columns:repeat(3,minmax(0,1fr))} .mg3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .mg2,.mg3,.mg-aw{grid-template-columns:minmax(0,1fr)} .vw{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .vw{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .vw__play{transition:none} }

/* Features and stories as cards (the user, 2026-10-08): three across, a short summary */
.mg3--list{margin-top:clamp(24px,3vw,36px);row-gap:clamp(34px,4vw,52px)}
.mg3--list .mgc p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}