/* 消息 · News (/news/ and /news/<post>/) — 18 Oct 2026. The list is a gallery of posts (cards of type A: picture = "what"),
   every post has its own page; the slogan and the picture of the children (和合中文) sit at the bottom of the list as "About".
   Pages are written by HeHeChinese/05-serwis-www/news/build-news.py from content.json → messages; behaviour in assets/news.js. */
:root{
  --sky:#E9F1F8; --paper:#FFFFFF; --ink:#16324F; --ink-soft:#5A748C; --line:#CFDEEA; --glow:#FFD76B;
  --ui:"Baloo 2","Nunito","Avenir Next Rounded",system-ui,sans-serif;
  --cjk:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--ui);background:var(--sky);color:var(--ink);-webkit-font-smoothing:antialiased;padding:40px 20px 64px}
.wrap{max-width:980px;margin:0 auto}
.cjk{font-family:var(--cjk)}
h1.sech{margin-top:18px}

/* ---------- gallery of posts ---------- */
.ngrid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){ .ngrid{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .ngrid{grid-template-columns:1fr 1fr 1fr} }
.ncard{position:relative;display:block;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#DCE8F2;color:#fff;text-decoration:none;
  box-shadow:0 2px 0 rgba(22,50,79,.08),0 8px 22px rgba(22,50,79,.10);transition:transform .15s ease, box-shadow .15s ease}
.ncard:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(22,50,79,.08),0 14px 28px rgba(22,50,79,.16)}
.ncard:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
.ncard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ncard .nshade{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(10,26,44,.86),rgba(10,26,44,.55) 45%,rgba(10,26,44,0))}
.ncard .nbadges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.ncard .nb{font-size:.78rem;font-weight:700;line-height:1;padding:6px 10px;border-radius:999px;background:rgba(22,50,79,.78);color:#fff}
.ncard .nb.new{background:#E0352B}
.ncard .nb.new[hidden]{display:none}
.ncard .ntitle{position:absolute;left:14px;right:62px;bottom:12px;font-size:1.12rem;font-weight:700;line-height:1.22;text-shadow:0 1px 2px rgba(0,0,0,.35);text-wrap:balance}
.ncard .ngo{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.ncard.here{outline:3px solid #fff;outline-offset:-3px}

/* ---------- about (the old banner, now at the bottom of the list) ---------- */
.nhead{background:linear-gradient(180deg,#B3D4EE 0%,#C9E2F5 35%,#D7EBF9 62%);border:2px solid var(--line);border-radius:24px;overflow:hidden;margin:0}   /* as on 18.10 (border, no shadow); darker blue at the top for contrast with the page, ending in the sky colour of the picture (#D7EBF9) so it has no edge */
.nsay{padding:20px 22px 12px;text-align:center}
.nsay .hz{margin:0;font-family:var(--cjk);font-weight:700;font-size:2rem;line-height:1.2;letter-spacing:.06em}
.nsay .py{display:block;font-family:"Andika",var(--ui);font-size:.95rem;font-weight:700;color:var(--ink-soft);letter-spacing:.02em}
.nsay .t1{color:#E8871E} .nsay .t2{color:#1E8E52}
.nsay .sl{display:block;margin-top:4px;font-size:1.12rem;font-weight:600;line-height:1.3;text-wrap:balance}
.nsay .tg{display:block;max-width:60ch;margin:6px auto 0;font-size:.95rem;font-weight:600;line-height:1.4;color:#34506B;text-wrap:balance}
.kids{display:block;width:100%;height:auto;aspect-ratio:2.4/1;object-fit:cover;object-position:50% 100%}
@media (min-width:700px){ .nsay{padding:24px 40px 14px} .nsay .hz{font-size:2.5rem} .nsay .sl{font-size:1.25rem} .kids{aspect-ratio:3/1} }

/* ---------- one post ---------- */
.post{max-width:760px;margin:0 auto;background:var(--paper);border:2px solid var(--line);border-radius:22px;overflow:hidden}
.post .phero{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#DCE8F2}
.post .pin{padding:16px 18px 6px}
.post .plab{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#C0392B}
.post .plab time{color:var(--ink-soft);letter-spacing:0;text-transform:none;font-size:.85rem}
.post h1{margin:4px 0 10px;font-size:1.6rem;line-height:1.2;font-weight:700;text-wrap:balance}
.post .pbody p{margin:0 0 .8em;font-size:1.04rem;font-weight:500;line-height:1.58}
.post .pbody .cjk{font-weight:700;white-space:nowrap}
@media (min-width:700px){ .post .pin{padding:22px 28px 8px} .post h1{font-size:2rem} }

.mparts{display:flex;flex-direction:column;gap:14px;padding:4px 18px 18px}
@media (min-width:700px){ .mparts{padding:4px 28px 22px} }
.part{background:#F4F8FB;border-radius:16px;padding:12px}
.part h2{margin:0 0 8px;font-size:1.05rem;font-weight:700;line-height:1.25}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair figure,.shot figure{margin:0}
.part img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:zoom-in}
.pair figcaption{margin-top:5px;text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.pair figure.now figcaption{color:#1E8E52}
.shot{display:grid;grid-template-columns:42% 1fr;gap:12px;align-items:start}
.shot p{margin:0 0 8px;font-size:.95rem;font-weight:500;line-height:1.45}
.plink{display:inline-block;font-weight:700;color:var(--ink);text-decoration:none;border:2px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;font-size:.9rem}
.plink:hover{border-color:var(--ink)}
.part > .plink{margin-top:10px}
@media (min-width:700px){ .pair{max-width:560px;margin:0 auto} .shot{grid-template-columns:240px 1fr} .part h2{font-size:1.12rem} }
.zoom{position:fixed;inset:0;z-index:1000;background:rgba(10,24,40,.82);display:flex;align-items:center;justify-content:center;padding:14px;cursor:zoom-out}
.zoom img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.4)}

/* ---------- comments ---------- */
.cmts{border-top:2px solid var(--line);margin:0 18px;padding:16px 0 20px}
@media (min-width:700px){ .cmts{margin:0 28px} }
.cmts h2{margin:0 0 10px;font-size:1.05rem;font-weight:700}
.cmts h2 small{color:var(--ink-soft);font-weight:700;margin-left:4px}
.clist{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.clist li{background:#F4F8FB;border-radius:14px;padding:10px 12px}
.clist .cwho{font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.clist .ctext{margin:2px 0 0;font-size:.98rem;font-weight:500;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.clist .crep{margin:8px 0 0 10px;padding-left:10px;border-left:3px solid #1E8E52}
.cform{display:flex;flex-direction:column;gap:8px}
.cform label{font-size:.88rem;font-weight:700}
.cform textarea,.cform input[type=text],.cform input[type=email]{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 11px;width:100%}
.cform textarea{min-height:88px;resize:vertical}
.cform textarea:focus,.cform input:focus{outline:none;border-color:var(--ink)}
.cvis{display:flex;flex-wrap:wrap;gap:6px}
.cvis label{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:700;background:#fff}
.cvis label:has(input:checked){border-color:var(--ink);background:#E9F1F8}
.cvis input{margin:0;accent-color:#16324F}
.cnote{margin:0;font-size:.85rem;font-weight:600;color:var(--ink-soft);line-height:1.4}
.cnotify{display:flex;align-items:flex-start;gap:8px;font-weight:600 !important}
.cnotify input{margin-top:4px;accent-color:#16324F}
.crow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cgo{appearance:none;font:inherit;font-weight:700;font-size:1rem;color:#fff;background:#16324F;border:0;border-radius:999px;padding:10px 20px;cursor:pointer}
.cgo:disabled{opacity:.5;cursor:default}
.cmsg{font-size:.9rem;font-weight:700}
.cmsg.bad{color:#C0392B}
.cdone{background:#EAF6EF;border-radius:14px;padding:12px 14px;font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nsay .nstory{display:inline-block;margin:8px 0 4px;font-size:.9rem;font-weight:700;color:var(--ink);text-decoration:none;background:#fff;border:2px solid var(--line);border-radius:999px;padding:5px 14px}
.nsay .nstory:hover{border-color:var(--ink)}   /* a white pill (Dave, 19.10), so it does not look like the capitals under the characters */
/* a picture inside the text of a post (content.json → messages[].inline) */
.post .pfig{margin:4px 0 18px}
.post .pfig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#DCE8F2}
.post .pfig figcaption{margin-top:6px;font-size:.85rem;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.35}
.post .pfig figcaption .cjk{font-weight:700}
/* 和合中文 with pinyin over each character and a word-for-word gloss under it (19 Oct 2026) */
.nsay .hzr{margin:0 auto 8px;display:flex;justify-content:center;gap:4px}
.nsay .zc{display:flex;flex-direction:column;align-items:center;min-width:4.6em}
.nsay .zp{font-family:"Andika",var(--ui);font-size:1rem;font-weight:700;line-height:1.1}
.nsay .zz{font-family:var(--cjk);font-weight:700;font-size:2.4rem;line-height:1.15;color:var(--ink)}
.nsay .zg{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--ink-soft);line-height:1.2;margin-top:2px}
@media (min-width:700px){ .nsay .zz{font-size:3rem} .nsay .zp{font-size:1.1rem} .nsay .zg{font-size:.72rem} .nsay .zc{min-width:5.4em} }

/* About on a wide screen (19.10, second try — Dave): one column as on the phone, as wide as the post cards; the text wider
   (fewer lines), the children smaller and never cropped, the box has the colour of their sky, so the picture has no visible edge */
@media (min-width:960px){
  .nsay{padding:30px 48px 6px}
  .nsay .tg{max-width:78ch;font-size:1rem;line-height:1.55}
  .kids{width:min(100%,620px);margin:0 auto;aspect-ratio:2.4/1;height:auto;object-fit:cover;object-position:50% 100%;}
}
.nsay .sl{font-weight:700;font-size:1.22rem;line-height:1.25;margin-top:6px}
@media (min-width:700px){ .nsay .sl{font-size:1.55rem} }   /* the mission line bigger and bolder (Dave, 19.10) */
.nsay .sl{margin-top:20px}
@media (min-width:700px){ .nsay .sl{margin-top:32px} }   /* the mission and its paragraph sit in the middle between the name above and the children below (19.10) */