/* Theme Name: GSRRA - Newsup Child Theme URI: https://gsrra.com/ Description: Child theme of Newsup carrying the approved GSRRA front-end redesign: a dark hero with the wave mark, a LATEST ticker, flagship analysis, Editor's Picks, the Dispatch wire desk, browse-by-subject and region, the chairman's message, memberships and partners, and a footer. Also supplies the single-post template, so the redesign covers all article pages rather than only the front page. Author: GSRRA Template: newsup Version: 2.9.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gsrra-newsup */ /* --------------------------------------------------------------------------- The rules below are GENERATED from Code\code_mockup_v4.2-SHIPPING.html by _build.py. Do not hand-edit the generated region: edit the mockup and regenerate, so the approved design and the live theme cannot drift apart. Everything after the NEW RULES marker is hand-written and safe to edit. --------------------------------------------------------------------------- */ :root{ --navy:#0a1526; --navy-2:#10203c; --navy-3:#060d1a; --paper:#f7f8f9; --card:#ffffff; --rule:#e2e5e9; --rule-2:#eef0f2; --tint:#eef6fb; --cyan:#22d3ee; --cyan-dim:#7dd3fc; --blue:#3b82f6; --ink:#16202e; --muted:#475569; --muted-2:#5b6875; --link:#0369a1; --link-dk:#075985; --gold:#f5b942; --on-navy:#e8eef5; --on-navy-2:#b6c4d6; --focus:#0e7490; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --cjk:"Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; /* 1360px, widened from 1280px on 12 October 2026 at the chairman's request ("make it a little bit more width"). 1280 was itself a restore of the width the v4.1 mockup was pixel-scanned at. 1360 sits between Al Jazeera's 1200 and the full-width think-tank sites, keeps ~40px gutters at a 1440 viewport, and still leaves the article reading column at 74ch, which does not widen. */ --wrap:1360px; --gut:clamp(16px,4vw,32px); } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} /* v4.0 regression: v3.1 set text-decoration:none on the base rule. v4.0 dropped it, so EVERY link rendered underlined - the nav, the footer columns, the ticker. Restored, with an explicit underline reserved for links inside running prose, where a reader needs the affordance. */ a{color:inherit;text-decoration:none} a:hover{text-decoration:none} p a, .abstract a{text-decoration:underline} h1,h2,h3,h4{line-height:1.22;margin:0} p{margin:0} ul{margin:0;padding:0;list-style:none} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)} .cn{font-family:var(--cjk)} a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:99;background:var(--cyan);color:#04202a;padding:9px 15px;border-radius:5px;font-weight:700} /* ---------- date bar ---------- */ .topbar{background:var(--navy-3);color:#8fa3bd;font-size:12.5px} .topbar-in{display:flex;justify-content:space-between;gap:14px;padding:8px var(--gut);max-width:var(--wrap);margin:0 auto} /* ---------- DARK HERO, rebuilt to v1.7.5 ---------- */ .hero{position:relative;background:linear-gradient(160deg,#081222 0%,var(--navy) 45%,#0d1e38 100%); color:#fff;overflow:hidden} .glow{position:absolute;border-radius:50%;pointer-events:none} .g1{width:520px;height:520px;top:-260px;right:-120px;background:radial-gradient(circle,rgba(34,211,238,.30) 0%,transparent 70%)} .g2{width:420px;height:420px;bottom:-240px;left:-140px;background:radial-gradient(circle,rgba(37,99,235,.24) 0%,transparent 70%)} .hero-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:30px var(--gut) 20px} /* justify-content:center added 12 October 2026. The chairman measured what the widening did: at --wrap 1180px the brand started at x=145.5, at 1280px at x=95.5 - each width step pushed the logo 50px further left because the brand was left-aligned inside a centred container. A masthead belongs in the middle of its own header, so the lockup is centred now; the nav is centred to match, and both stop drifting when the wrap widens. */ .brand{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,26px)} /* The wave, transparent. v1.7.5 wrapped its logo in a white .logo-slot chip because the source JPG had no alpha. This file does, so no chip. */ .brand-mark{flex:0 0 auto;width:clamp(96px,11vw,132px)} /* color:#fff is REQUIRED here, not decoration. The parent theme ships h1,.h1,h2,.h2,h3,.h3,...{color:#212121}, and a direct h1 rule ALWAYS beats an inherited colour - so .hero{color:#fff} never reached this heading and "Global Silk Route" rendered near-black on the dark hero while "Research Alliance" stayed cyan, because the .accent span carries its own colour. Seen on the live site, 12 October 2026, the hour it was published. .h1 is included because non-front pages render a

and the parent's rule targets that class as well. */ .brand h1,.brand .h1{font-size:clamp(21px,3.1vw,34px);font-weight:800;letter-spacing:.2px;color:#fff} .brand h1 .accent{color:var(--cyan)} .brand .org-zh{font-family:var(--cjk);font-size:clamp(14px,1.7vw,20px);color:var(--on-navy-2);margin-top:3px;letter-spacing:5px} .tagline{font-size:12px;color:#8fa3bd;letter-spacing:1.6px;text-transform:uppercase;margin-top:7px} /* 10 items. "Start here" was removed from this row in session 70, and the page behind it was deleted outright on 14 October 2026 - the footer held the last link to it and that went in the same build. So: the chairman's original nine plus News. Measured: the row needs more than the 1100px container below that, so it is allowed to wrap and the second line centres under the first rather than sitting flush to the edge. justify-content:center added 12 October 2026 to match the centred masthead; with a wrapping row the lines centre as blocks, which reads better than a centred lockup over a left-hugging nav. The bottom rule moved off the links and onto this container on 13 October 2026. Every link carried its own border-bottom, so at 390px the ten items wrapped to four rows and each row drew a rule only as wide as the items on it: four stepped, broken lines instead of one nav. The container now draws a single rule under the whole block. One line when the items fit on a row, still one line when they wrap - which is the point. The top rule was already on the container, so the nav reads as a banded strip either way. */ .mainnav{position:relative;margin-top:22px;border-top:1px solid rgba(148,180,214,.20); border-bottom:1px solid rgba(148,180,214,.20); display:flex;flex-wrap:wrap;justify-content:center} /* Padding trimmed from 15px to 13px per side, which is not a visible change at 13.5px type but buys 34px of slack, so the wrap point is not decided by 2px of font-metric luck. */ .mainnav a{padding:12px 13px;font-size:13.5px;font-weight:600;color:var(--on-navy-2); white-space:nowrap} .mainnav a:first-child{padding-left:0} .mainnav a:hover{color:var(--cyan)} .mainnav a.gold{color:var(--gold)} @media (max-width:640px){ .mainnav a{padding:13px 11px;font-size:12.5px} } .route{position:absolute;left:0;right:0;bottom:46px;height:2px; background:linear-gradient(90deg,transparent,rgba(34,211,238,.42),transparent)} .route span{position:absolute;top:-1px;left:0;width:130px;height:4px;border-radius:3px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); filter:drop-shadow(0 0 8px var(--cyan));animation:run 7s linear infinite} @keyframes run{from{transform:translateX(-140px)}to{transform:translateX(110vw)}} /* ---------- LATEST ticker ---------- */ .ticker{position:relative;background:rgba(4,10,20,.78);display:flex;align-items:stretch} .tk-label{background:var(--cyan);color:#04202a;font-weight:800;font-size:12.5px;letter-spacing:1.5px; padding:9px 15px;display:flex;align-items:center;flex:0 0 auto} .tk-viewport{overflow:hidden;flex:1;display:flex;align-items:center} .tk-track{display:inline-flex;align-items:center;white-space:nowrap;width:max-content; animation:tick 44s linear infinite;will-change:transform} .ticker:hover .tk-track{animation-play-state:paused} /* WCAG 2.2.2. The pause BUTTON was removed 1 October 2026 at the chairman's instruction. What is left, and it is less than the four-part rule asks: - `.ticker:hover` pauses the track (pointer users) - `.tk-viewport:focus-within` pauses it while a headline link has focus (keyboard users) - `prefers-reduced-motion` removes the animation entirely A touch user has no control they can operate. The motion stops for them only if their OS asks for reduced motion. This is a knowing reduction, requested twice by the chairman; it is recorded here and in the worklog rather than presented as compliant. */ .tk-viewport:focus-within .tk-track{animation-play-state:paused} /* 15px, up from 13px, 12 October 2026. The chairman asked for the scrolling headlines to be bigger: 13px was the smallest text in the header, smaller than the nav below it. 15px keeps the strip a strip while making it legible. */ .tk-item{color:#c3d2e4;font-size:15px;padding:9px 0} .tk-item b{color:#fff;font-weight:600} .tk-sep{color:var(--cyan);margin:0 15px} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .tk-track{animation:none} .tk-viewport{overflow-x:auto} .route span{animation:none;display:none} } /* ---------- section furniture ---------- */ main{padding-bottom:20px} section{padding:34px 0} .sec-head{margin-bottom:18px} .sec-head h2{font-size:clamp(20px,2.4vw,26px);font-weight:800} .sec-head h2 .zh{font-family:var(--cjk);font-size:.62em;color:var(--muted-2);font-weight:400;margin-left:8px;letter-spacing:1px} .sec-note{color:var(--muted);font-size:14px;margin-top:5px} .tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px} .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase; color:var(--link-dk);background:var(--tint);border:1px solid #cfe4f0;border-radius:3px;padding:3px 8px} .tag-flagship{color:#0b4f63;background:#e2f4f8;border-color:#a9dce8} .zh-sub{display:block;font-family:var(--cjk);color:var(--link-dk);font-size:13.5px;margin-top:4px} .byline{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted-2);margin-top:9px} .byline a{color:var(--link-dk);font-weight:600} .abstract{color:#3c4c61;font-size:14.5px;margin-top:10px} /* The .why rules ("Why it matters" callout) were removed on 1 October 2026 with the four callouts they styled - the chairman's instruction. Left behind, they were dead CSS and check-html.ps1 correctly failed the build on them: a rule with no matching markup is a rule that is not doing anything. Removed rather than kept "in case", because a dead rule is indistinguishable from a broken one and this file has been bitten by exactly that before. */ /* Scoped to .btn-solid on purpose: the parent theme uses Bootstrap, and a bare .btn rule here would restyle every Bootstrap button on every other template. */ .btn.btn-solid{display:inline-block;font-size:13.5px;font-weight:700;padding:10px 18px;border-radius:6px;text-decoration:none} .btn-solid{background:var(--navy-2);color:#fff} .btn-solid:hover{background:#0b3a63} /* ---------- 4. CATEGORIES - restored, on real slugs ---------- */ /* RESTORED. v3.1 cut the category section to shorten the page and it was never put back, which left a reader with no way to browse by subject at all. It is the one thing a visitor arrives on a research site to do. Every slug below was read from the live WordPress REST API and returns HTTP 200. This comment previously claimed that all five "pillar" slugs this page used to link to returned 404. That is no longer true, and the change is recorded here rather than left to rot. Re-tested 30 Sep 2026: geopolitics-security 404 still absent belt-and-road-initiative 200 term 35689, 45 posts, indexable regional-economy-trade 404 still absent strategic-national-interests 404 still absent science-technology-cooperation 404 still absent The other four were written from display names, not real ones. The fifth is live with 45 filed posts, and every prediction this comment used to make has since happened in public, with nobody hand-editing anything: the sidebar category list - TOP-LEVEL categories with at least one post - picked it up by itself, and the live grid on /my-blog/ went from 20 tiles to 21, reading "Belt & Road Initiative - 45 pieces". Counts age within days; the plugin renders them live, so never type one into a page. The live taxonomy mixes three axes, so it is presented as three things rather than forced into one flat list that would misdescribe it. */ .browse-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px; border-bottom:2px solid var(--navy);padding-bottom:6px} .browse-h h2{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--navy-2);font-weight:800} .browse-h .zh{font-family:var(--cjk);font-size:11.5px;color:var(--muted-2);letter-spacing:1px} .browse-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)} @media (min-width:640px){ .browse-grid{grid-template-columns:repeat(3,1fr)} } @media (min-width:1000px){ .browse-grid{grid-template-columns:repeat(4,1fr)} } .browse-grid.regions{grid-template-columns:repeat(2,1fr)} @media (min-width:560px){ .browse-grid.regions{grid-template-columns:repeat(3,1fr)} } @media (min-width:900px){ .browse-grid.regions{grid-template-columns:repeat(6,1fr)} } /* Depth cue, added 29 Sep 2026. The chairman asked what makes the weak categories look weak; the honest answer was that 20 tiles of identical weight made "Oceania 1 piece" and "Asia 163 pieces" scan the same. Each tile now draws a 3px rule along its bottom edge, scaled to its OWN block's maximum - subjects against Geopolitical Reports (83), regions against Asia (163) - passed per tile as the --d custom property. It is a background, not an element: nothing is added to the accessibility tree and the count text still carries the meaning. A 2% floor keeps a 1-piece category visible as a visible stub rather than an invisible rounding error. */ .b-card{display:flex;flex-direction:column;justify-content:space-between;gap:6px; background:var(--card) no-repeat 0 100%; background-image:linear-gradient(90deg,var(--link-dk),var(--blue)); background-size:var(--d,0%) 3px; border:1px solid var(--rule);border-radius:8px;padding:13px 15px; text-decoration:none;min-height:74px;transition:.2s} .b-card:hover{border-color:var(--link-dk);transform:translateY(-2px); box-shadow:0 8px 20px rgba(10,30,60,.10)} .b-card b{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)} .b-card small{font-size:11px;color:var(--muted-2);letter-spacing:.4px} /* .b-card.cn and .b-card.region were removed 12 October 2026: the tile renderer never emits those modifier classes, so both rules were dead (Addendum CT, bug 9). The base .b-card b carries the sizing. */ /* ---------- 5. CHAIRMAN, laid out as v1.7.5 ---------- */ .chair-about{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:1fr;align-items:start} @media (min-width:900px){ .chair-about{grid-template-columns:1.05fr 1.35fr} } .chair-card{background:linear-gradient(150deg,var(--navy-2),var(--navy));color:var(--on-navy); border-radius:12px;padding:clamp(20px,2.6vw,28px);position:relative;overflow:hidden} .chair-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;top:-90px;right:-60px; background:radial-gradient(circle,rgba(34,211,238,.18) 0%,transparent 70%)} .chair-in{position:relative;display:flex;gap:16px;align-items:flex-start} /* Now a real photograph, not a placeholder. overflow:hidden so the square image is clipped by the 50% radius, and padding:0 - the old 4px padding was for the "[ PHOTO received ]" text and left a visible ring once a real image went in. .chair-photo picture / .chair-photo img were removed 12 October 2026: the markup puts the class on the itself and renders no wrapper, so both descendant selectors were dead (Addendum CT, bug 11). The photo is styled by .chair-photo directly. */ /* 110px, not the mockup's 84px. MEASURED 12 October 2026: at 84px the founder's photograph on his own homepage read as a badge rather than a person - the chairman's word was "an afterthought". 110px keeps the card balanced (the text column still gets ~330px of the 476px card) while giving the face real presence. The square source means height:auto from img[width][height] (see section 5) still resolves to the same 110px, so no !important is needed here. */ .chair-photo{flex:0 0 110px;width:110px;height:110px;border-radius:50%; border:2px solid var(--cyan);overflow:hidden;background:rgba(34,211,238,.08); display:flex;align-items:center;justify-content:center} .chair-card h2{font-size:15px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--cyan)} .chair-name{font-size:clamp(17px,2vw,21px);font-weight:800;margin-top:5px} .chair-zh{font-family:var(--cjk);color:var(--cyan-dim);font-size:15px;letter-spacing:2px;margin-top:2px} .chair-role{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#9fb3cb;margin-top:5px} .chair-bio{font-size:13.5px;color:#c3d2e4;margin-top:11px} .chair-link{display:inline-block;margin-top:13px;color:var(--cyan);font-size:13px;font-weight:700; padding:9px 0} .about-card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:clamp(20px,2.6vw,28px)} .about-card h3{font-size:15px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy-2);margin-bottom:10px} /* .cn is included because the markup renders class="cn", not class="zh" - measured 12 October 2026 (Addendum CT, bug 6): the About card's Chinese subtitle had carried full h3 styling since launch because this rule never matched it. */ .about-card h3 .zh,.about-card h3 .cn{font-family:var(--cjk);color:var(--muted-2);font-weight:400;letter-spacing:1px} .about-card>p{font-size:14.5px;color:#3c4c61} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .chip{font-size:12px;font-weight:700;color:var(--navy-2);background:var(--card); border:1px solid var(--rule);border-radius:20px;padding:6px 13px} /* The right-hand column holds the About card and nothing else. It was built to also carry the credentials box, which existed to close a 175px hole - the About card is short and the Chairman's card is tall, so side by side they left dead white space. The chairman removed the credentials box on 29 September 2026 and the hole is measured BACK: 175px of empty column under the About card at 1280px (chairman card bottom y=3373, About card bottom y=3198 - pixel scan of v4.1-desktop-1280.png). Left as-is on purpose; what fills it is the chairman's call, not a silent CSS fix. The .cred rules went with the box, so no dead selector is left behind. */ .rail{display:flex;flex-direction:column;gap:18px} /* ---------- LEAD ---------- */ .lead{background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden; display:grid;grid-template-columns:1fr} .lead-body{padding:clamp(18px,2.4vw,26px)} .lead h3{font-size:clamp(20px,2.7vw,27px);font-weight:800;margin-top:2px} .lead h3 a{text-decoration:none} .lead h3 a:hover{color:var(--link-dk)} /* LEAD MEDIA - added 1 October 2026 at the chairman's instruction: "why there is no image placeholder for flagship analysis". He was right and it was a real omission, not a style choice. Every Editor's Pick and every Dispatch item carried a featured image; only the flagship - the one item the section calls "the lead item" - had none, so the most important card on the page looked like a text block while the lesser cards looked like articles. The live site gives this post a large featured image too. The live file is 1024x735, an aspect ratio of about 1.39:1. That is taller than the .pick-media 16/9 box, so object-fit:cover in a 16/9 frame would have cropped the top and bottom off a photograph. aspect-ratio is set explicitly to match the source, so nothing is cut. Image: /wp-content/uploads/2026/09/c8L7CsSC9e1MfFn6.jpg (media id 38424), the featured image of post 38465. The media library stores NO alt text for it, so the alt is written here from the photograph itself - which is the right order anyway, and is what the site should carry at build. */ /* width:100% IS A GUARD, added 15 October 2026 after the lead card exploded. aspect-ratio turns a HEIGHT into a WIDTH when the height is what the layout gives this box - and as a stretched grid item its height comes from the ROW. So when the abstract grew to 2,087px (915 non-breaking spaces in one post, see gsrra_trimmed_excerpt), the row stretched, the aspect-ratio computed a 5,138px-wide media column, and the image followed it. The card was 3,690px tall and the flagship looked broken. width:100% pins the column to its grid track, so the aspect-ratio derives the HEIGHT from a width it cannot run away from - the order it was designed for. */ .lead-media{width:100%;aspect-ratio:1024/735;background:#e6e9ed;overflow:hidden} .lead-media img{width:100%;height:100%;object-fit:cover;display:block} /* Text column needs min-width:0 or a long word can force the grid wider than its track - the flex/grid min-width:auto trap. */ .lead-body{min-width:0} @media (min-width:900px){ .lead{grid-template-columns:1.15fr 1fr;align-items:stretch} /* FLAGSHIP CARD BLANK SPACE - fixed 13 October 2026. align-items:stretch sized .lead-body to the image column: measured 496.78px tall at a 1422px viewport while its content (tagrow + h3 + byline + abstract) came to about 208px, leaving roughly 236px of empty card below the abstract. The text now centres in its column instead of hanging off the top. "safe center", not plain center: at a 902px viewport the content measured 308.64px against 308.62px available - an exact fit - and at any width narrower than that, plain center would push content past the edges where .lead{overflow:hidden} would CLIP it. safe center falls back to start whenever there is not enough room. Flex does not collapse adjacent margins the way the block layout did, so the two collapsed gaps are normalised here: .tagrow's 9px margin-bottom already produced the 9px gap (it was collapsing with h3's 2px margin-top, so dropping that 2px keeps the gap at 9), and .byline's bottom margin is pinned to 0 so the following gap stays the 10px .abstract asks for. Rendered gaps remain 9 / 9 / 10. Below 900px the card is single-column and nothing here applies. */ .lead-body{display:flex;flex-direction:column;justify-content:center;justify-content:safe center} .lead .lead-body > h3{margin-top:0} .lead .lead-body .byline{margin-bottom:0} } /* ---------- PICKS ---------- */ .picks{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:1fr} @media (min-width:760px){ .picks{grid-template-columns:repeat(2,1fr)} } @media (min-width:1080px){ .picks{grid-template-columns:repeat(3,1fr)} } .pick{background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden} .pick-media{aspect-ratio:16/9;background:#e6e9ed;overflow:hidden} .pick-media img{width:100%;height:100%;object-fit:cover} .pick>div:last-child{padding:16px 18px 20px} .pick h3{font-size:17px;font-weight:800;margin-top:2px} .pick h3 a{text-decoration:none} .pick h3 a:hover{color:var(--link-dk)} /* ---------- DISPATCH ---------- */ .dispatch{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:clamp(16px,2.2vw,24px)} .dispatch-head{border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:14px} .dispatch-head h3{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--navy-2)} .dispatch-head p{font-size:13px;color:var(--muted);margin-top:4px} .dispatch ul{display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:700px){ .dispatch ul{grid-template-columns:repeat(2,1fr)} } @media (min-width:1080px){ .dispatch ul{grid-template-columns:repeat(4,1fr)} } .dthumb{display:block;aspect-ratio:16/10;background:#e6e9ed;border-radius:8px;overflow:hidden;margin-bottom:9px} .dthumb img{width:100%;height:100%;object-fit:cover} .dmeta{display:flex;gap:9px;font-size:11.5px;color:var(--muted-2);margin-bottom:4px} .dmeta .cat{color:var(--link-dk);font-weight:700} /* THE SELECTOR IS li h3, NOT h4, AND IT MATTERS. The markup renders each wire headline in an

, but these rules said h4 - so they matched NOTHING and the titles rendered at the browser's un-styled h3 size. Measured on the live site 12 October 2026: each dispatch headline measured 136px tall, which is what made the wire desk look like a row of editorial cards with the same weight as the Editor's picks directly above it. Scoped with li so the section head's own .dispatch-head h3 label is not caught. */ .dispatch li h3{font-size:14px;font-weight:700;line-height:1.38} .dispatch li h3 a{text-decoration:none} .dispatch li h3 a:hover{color:var(--link-dk)} .dispatch-foot{font-size:13px;color:var(--muted);margin-top:16px} /* ---------- 5. MEMBERSHIPS & PARTNERS ---------- */ .partners{background:linear-gradient(150deg,#081222,var(--navy));color:#dbe7f5;padding:32px 0} .partners h2{text-align:center;font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:#8ea3bd;margin-bottom:20px} .partners h2 .cn{font-family:var(--cjk)} .part-row{display:flex;flex-wrap:wrap;gap:13px;align-items:stretch;justify-content:center} /* 14 October 2026. The chairman spotted that the first partner mark did not start where the footer logo starts. Measured: the footer lockup begins at the content edge (x=55.5) but the first chip began at x=105.8, because a centred row insets its first item by half the leftover width (~50px). On ONE line the row is now spread edge to edge, so the first mark starts at the content edge and the last ends flush at the right edge. The media query is load-bearing: once the chips wrap (content narrower than their total 1,143px plus the 4x13px minimum gaps, i.e. below a ~1260px viewport), space-between would push the last line's chips to opposite edges and leave a hole between them. Wrapped lines therefore stay centred. */ @media (min-width:1260px){ .part-row{justify-content:space-between} } /* Partner marks, added 1 October 2026 from the chairman's Intro PDF page 2. They sit on white chips rather than being flattened to white: Huawei's red flower and NUST's navy roundel ARE those organisations' identity, and recolouring them on a page about precision would misrepresent two real institutions. Extracted at 600 dpi, cropped tight against a background threshold, padded evenly, baked at 2x. A FIXED HEIGHT, not a max-width: the first attempt used max-width alone and the marks rendered at intrinsic size, one per row (measured .p-logo 780x330, img 748x310). Logos of different proportions also need a common optical height, or the row reads as a ransom note. */ .p-logo{background:#fff;border-radius:10px;padding:12px 18px; display:flex;align-items:center;justify-content:center} /* WHY !important IS HERE - MEASURED AND PROVEN, 12 October 2026. * * The marks were rendering at full intrinsic size (nust 420x174, huawei * 420x125, jiangsu 420x157), the partner row 586px tall, because somewhere * upstream (WordPress core / Jetpack image handling) this rule exists: * * img[width][height] { height: auto } * * FIRST WRONG ASSUMPTION: that it scores (0,1,1). It does not. ATTRIBUTE * selectors score at CLASS level, so img[width][height] is * element(0,0,1) + two attributes(0,2,0) = (0,2,1). * * SECOND WRONG ASSUMPTION: that `.part-row .p-logo img` at (0,2,1) would * beat it. It does not - (0,2,1) vs (0,2,1) is a TIE, broken by source * order, and the upstream rule is served later, so it wins. A local test * page "proved" the specificity fix worked only because the test happened * to place my rule later than the upstream one - a cascade order that did * not match production. False positive, caught only by measuring the live * site after upload. * * THE ONLY RELIABLE OVERRIDE: !important. An important declaration cannot * lose to a non-important one, whatever the specificity or order. Verified * locally (nust 135.2x56, huawei 188.2x56, jiangsu 149.8x56, all in * proportion). The reasoning is written here in full so nobody "cleans up" * the !important and silently re-breaks the partner row. */ .part-row .p-logo img{display:block;height:56px !important;width:auto} /* 14 October 2026, FINAL ATTEMPT - and it is the FIRST attempt's rule again. The university wordmarks were enlarged (72px), then Sichuan was tried as a seal (88px, then 112px), then as its official wordmark at 72px. The chairman's verdict on the enlarged row: "its too big ... one is big another one is small" - and his requirement: "a visitor looks at the logo and dont have any judgement". That requirement is a UNIFORM OPTICAL HEIGHT, which is exactly what this 56px rule was doing all along. So every mark returns to 56px. The university wordmarks stay readable because they are now the universities' OWN crisp files (Sichuan's official 350x95 wordmark replaced the PDF copy on 14 October). Widths will still differ - a wordmark is wide, an emblem is compact - but the shared height is what makes the row read as one family. No per-partner size rules remain. */ /* The .p-tile rules that set the ZGCTA text card, and the dashed "membership" treatment that went with it, were removed 1 October 2026 when ZGCTA's own mark replaced the card. check-html.ps1 failed the build on the leftover .p-tile selector, correctly: a rule with no matching markup is not styling anything. The historical note is kept because the reasoning still holds - ZGCTA is a MEMBERSHIP, not a partnership, and the Intro PDF evidences five partners with ZGCTA not among them. That distinction now shows as ZGCTA's mark sitting in the same row, which is honest enough on its own. */ /* ZGCTA's wordmark is 14.9:1, so at a uniform 56px height it would be 351px wide and crowd the row. Its chip is capped narrower to keep the row even. */ .p-logo-wide{max-width:320px} /* .part-note was removed 1 October 2026 along with the note it styled - the chairman asked for the ZGCTA line to go. The rule went too, so no dead CSS is left behind for check-html.ps1 to fail the build on. */ /* ---------- 6. FOOTER, rebuilt to v1.7.5, with the reversed logo ---------- */ .foot{background:var(--navy-3);color:#9fb2c8;font-size:13.5px} .foot-grid{display:grid;gap:26px;padding:34px var(--gut) 24px;max-width:var(--wrap);margin:0 auto; grid-template-columns:1fr} @media (min-width:720px){ .foot-grid{grid-template-columns:1fr 1fr} } @media (min-width:1000px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr 1fr} } /* The lockup is LIVE TEXT + the wave mark, 12 October 2026, replacing the rasterized logo-footer-sharp.png. The PNG baked its own typeface (a thin face with a "THINK TANK" ribbon chip) that did not match the site font - the chairman's word: "it doesn't look good with the website". The header already builds the name from the wave image plus real text, so the footer now uses the same construction: crisp at any size, one brand, two places. logo-footer-sharp.png remains in assets unused. */ .foot-lockup{display:flex;align-items:center;gap:14px;margin-bottom:16px} .foot-wave{width:58px;height:auto;flex:0 0 auto} /* FOOTER WORDMARK - fixed 13 October 2026 after the chairman compared the header and footer wordmarks side by side and asked "does this 2 image look same?". They did not, and this is why: .foot-brand p below set font-size and color with specificity 0,1,1 (one class + one element) while .foot-name is only 0,1,0 (one class), so the generic footer-body rule WON and .foot-name was dead code. Measured on the live site: the wordmark rendered at 12.5px in rgb(142,163,189) - grey body text - instead of the 22px white this rule always declared. Two changes: the generic rule now skips the wordmark, and the wordmark takes --headFont so it matches the header. The header gets Montserrat from the parent theme's "h1..h6{font-family:var(--headFont)}"; the footer wordmark is a

, so it inherited the body system stack and never matched. .foot-zh and the description paragraph are untouched by this - they still resolve to 12.5px / rgb(142,163,189), exactly as before. */ .foot-name{font-size:clamp(19px,2vw,22px);font-weight:800;color:#fff;line-height:1.15;margin:0; font-family:var(--headFont, Montserrat, sans-serif)} .foot-name span{color:var(--cyan)} .foot-zh{font-family:var(--cjk);font-size:13px;color:#8fa3bd;letter-spacing:2px;margin-top:4px} .foot-brand p:not(.foot-name){font-size:12.5px;color:#8ea3bd;max-width:34ch} /* Footer column titles: was .foot h4, now .foot h3 to match the markup change of 14 October 2026 (partners heading h3 -> h2, these h4 -> h3). Selectors move WITH the markup, or the styling silently drops off the page. */ .foot h3{color:#fff;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px} .foot li{margin:7px 0} /* Touch rows, 12 October 2026: footer links measured ~18px tall on a phone, below the 24px floor. The padding turns each link into a tappable row. */ .foot li a{display:inline-block;padding:3px 0} /* FOOTER LINK COLOUR, 16 October 2026. The chairman noticed the footer column links rendering blue instead of the footer's own light grey. THE CAUSE: this rule set only text-decoration, so the links fell through to the base rule `a{color:inherit}` and depended on inheriting .foot's #9fb2c8. That ought to have worked - but the autoptimized stylesheet bundle was REBUILT on 16 October (Last- Modified 08:09 GMT, the day the theme was uploaded twice), which changed the cascade the browser sees, and a bare `a{color:...}` rule started winning. Bootstrap ships `a{color:#007bff}` and the parent Newsup ships `a{color:var(--pri-color)}`; both are bare `a` selectors, so whichever the bundle places last takes the footer with it. THE FIX: state the colour here. `.foot a` is 0,1,1 against a bare `a` at 0,0,1, so this wins outright and no longer depends on load order. inherit keeps the design intent - the link takes the footer's own colour - and the cyan hover below still overrides it on hover. */ .foot a{color:inherit;text-decoration:none} .foot a:hover{color:var(--cyan)} .foot-bottom{border-top:1px solid #16233a;text-align:center;padding:14px;font-size:12px;color:#6f8299} .foot-bottom .cn{font-family:var(--cjk)} @media print{ .topbar,.ticker,.route,.partners,.mainnav{display:none} body{background:#fff} } /* =========================================================================== NEW RULES - the article template. Hand-written, not generated. =========================================================================== */ /* ---------- 7. SINGLE POST ---------- */ .art{background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden} .art-head{padding:clamp(18px,2.6vw,30px) clamp(16px,2.4vw,26px) 0} .art-head h1{font-size:clamp(23px,3.1vw,34px);font-weight:800;line-height:1.18;margin:6px 0 0} .art-zh{display:block;font-family:var(--cjk);color:var(--link-dk);font-size:clamp(14px,1.7vw,17px); margin-top:7px;line-height:1.5} .art-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12.5px; color:var(--muted-2);margin-top:12px} .art-meta a{color:var(--link-dk);font-weight:600} .art-fig{margin:18px 0 0} .art-fig img{width:100%;height:auto;display:block} .art-fig figcaption{font-size:12px;color:var(--muted-2);padding:8px 2px 0} /* The reading column. 74ch is within the project's own rule of 60-75 characters for this face at this size. AND IT MUST BE CENTRED. MEASURED 12 October 2026 on the live PLA article: the headline and featured image run 1114px/1062px from x=172.5, while this 638px body block started at the SAME x=172.5 and stopped after 638px - leaving 476px of dead white space beside every paragraph, directly under the right half of the image. A plain block with max-width and no auto margins stays flush left; that is what made the page read as "disoriented" - three widths, no spine. margin-inline:auto puts the reading column in the middle of the image above it, which is where the eye expects it. */ .art-body{padding:6px clamp(16px,2.4vw,26px) 26px;max-width:74ch;margin-inline:auto} .art-body>*+*{margin-top:1.05em} .art-body p{font-size:16.5px;line-height:1.72;color:#26333f} .art-body h2{font-size:clamp(19px,2.3vw,23px);font-weight:800;margin-top:1.7em;line-height:1.25} .art-body h3{font-size:clamp(17px,2vw,20px);font-weight:800;margin-top:1.5em;line-height:1.3} .art-body ul,.art-body ol{padding-left:1.35em} .art-body li{font-size:16.5px;line-height:1.7;margin-top:.4em;color:#26333f} .art-body a{color:var(--link-dk)} .art-body blockquote{margin:1.5em 0;padding:2px 0 2px 16px;border-left:3px solid var(--cyan); color:#33445a;font-size:17px} .art-body img{max-width:100%;height:auto;border-radius:8px} .art-body figure{margin:1.5em 0} .art-body figcaption{font-size:12.5px;color:var(--muted-2);margin-top:6px} .art-body code{background:var(--tint);padding:1px 5px;border-radius:4px;font-size:.92em} .art-body pre{background:#0d1726;color:#dbe7f5;padding:14px 16px;border-radius:8px;overflow-x:auto} .art-body pre code{background:none;color:inherit;padding:0} .art-body table{width:100%;border-collapse:collapse;font-size:15px} .art-body th,.art-body td{border:1px solid var(--rule);padding:7px 10px;text-align:left} /* Disclosure line, when a post is wire rather than original. */ .art-wire{background:var(--tint);border-left:3px solid var(--cyan);border-radius:0 6px 6px 0; padding:11px 14px;font-size:13.5px;color:#33445a;margin-top:14px} .art-wire b{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase; color:#0b4f63;margin-bottom:3px} /* Share row */ .art-share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:22px; padding-top:18px;border-top:1px solid var(--rule)} .art-share span{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-2)} .art-share a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px; padding:0 12px;border:1px solid var(--rule);border-radius:7px;font-size:12.5px;font-weight:700; color:var(--link-dk);text-decoration:none} .art-share a:hover{border-color:var(--focus);color:var(--focus)} /* Category and tag output, below the body */ .art-tax{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);display:flex; flex-direction:column;gap:10px} .art-tax .row{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline} .art-tax .row span{font-size:11px;letter-spacing:1.2px;text-transform:uppercase; color:var(--muted-2);min-width:74px} /* Author card at the foot of the article */ .art-author{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:18px; background:var(--paper);border:1px solid var(--rule);border-radius:10px} .art-author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto} .art-author b{display:block;font-size:15.5px;color:var(--ink)} .art-author small{display:block;font-size:12px;color:var(--muted-2);margin-top:2px; letter-spacing:.6px;text-transform:uppercase} .art-author p{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.6} /* Post-to-post navigation */ .art-nav{display:grid;gap:12px;grid-template-columns:1fr;margin-top:22px} @media (min-width:700px){ .art-nav{grid-template-columns:1fr 1fr} } .art-nav a{display:block;padding:14px 16px;border:1px solid var(--rule);border-radius:10px; text-decoration:none;background:var(--card)} .art-nav a:hover{border-color:var(--focus)} .art-nav small{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--muted-2);margin-bottom:5px} /* The neighbouring story's category, added 12 October 2026 at the chairman's request (the cards said only "Previous"/"Next" - a position, not a subject). */ .art-nav small .art-nav-cat{color:var(--link-dk)} .art-nav b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3} .art-nav .next{text-align:right} /* ---------- 8. RELATED POSTS - the Option C card the chairman chose ---------- Photograph above, words on a solid card below, one category. Chosen because its contrast is a property of the design rather than of whichever photograph loads: headline #16202e on card #ffffff measures 15.4:1, and it holds on all 11,113 articles. The live site's current card prints the headline on the photograph and measures 1.59:1, which fails AA even for large text. */ .rel-grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr} @media (min-width:700px){ .rel-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1080px){ .rel-grid{grid-template-columns:repeat(3,1fr)} } .rel-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule); border-radius:10px;overflow:hidden} .rel-card .thumb{aspect-ratio:16/9;overflow:hidden;background:#e6e9ed;display:block} .rel-card .thumb img{width:100%;height:100%;object-fit:cover;display:block} .rel-card .body{padding:12px 13px 15px;display:flex;flex-direction:column;gap:7px;flex:1} .rel-card .one-tag{align-self:flex-start;font-size:9.5px;font-weight:800;letter-spacing:.8px; text-transform:uppercase;color:var(--link-dk);background:#eef6fb;border:1px solid #cfe4f0; border-radius:3px;padding:2px 7px} .rel-card h3{font-size:16px;line-height:1.24;font-weight:800;margin:0} .rel-card h3 a{color:var(--ink);text-decoration:none} .rel-card h3 a:hover{color:var(--link-dk)} .rel-card .meta{font-size:11px;color:var(--muted-2);margin-top:auto;display:flex;gap:9px; flex-wrap:wrap} /* ---------- 9. ARCHIVE / FALLBACK ---------- */ .arch-head{background:linear-gradient(150deg,#081222,var(--navy));color:#dbe7f5; border-radius:12px;padding:clamp(20px,2.6vw,30px);margin-bottom:22px} .arch-head h1{font-size:clamp(22px,2.8vw,30px);font-weight:800;color:#fff} .arch-head .zh{font-family:var(--cjk);font-size:.6em;color:#bcd6ee;font-weight:400;margin-left:9px; letter-spacing:1px} .arch-head p{color:#9fb3cb;font-size:14px;margin-top:8px;max-width:70ch} .arch-list{display:flex;flex-direction:column;gap:16px} .arch-item{display:grid;gap:14px;grid-template-columns:1fr;background:var(--card); border:1px solid var(--rule);border-radius:10px;overflow:hidden} @media (min-width:640px){ .arch-item{grid-template-columns:230px 1fr} } .arch-item .thumb{aspect-ratio:16/9;overflow:hidden;background:#e6e9ed} .arch-item .thumb img{width:100%;height:100%;object-fit:cover;display:block} .arch-item .body{padding:14px 16px 16px} .arch-item h2{font-size:18px;font-weight:800;line-height:1.26;margin:6px 0 0} .arch-item h2 a{color:var(--ink);text-decoration:none} .arch-item h2 a:hover{color:var(--link-dk)} .arch-item .ex{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6} .pager{display:flex;justify-content:center;gap:10px;margin-top:26px} .pager a,.pager span{padding:9px 15px;border:1px solid var(--rule);border-radius:7px; font-size:13.5px;font-weight:700;text-decoration:none;color:var(--link-dk);background:var(--card)} /* ---------- 10. LAYOUT SHELL ---------- The parent theme wraps content in a Bootstrap container with a sidebar. The redesign is full width, so the child supplies its own shell and a sidebar.php that outputs nothing. .site-main carries the same measure as the mockup. */ .gsrra-main{display:block;width:100%} .gsrra-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} /* ---------- 11. CHAIRMAN PROFILE (page-chairman.php) ---------- A full profile page, so "Read the full profile" has somewhere real to land. The record list is a

rather than paragraphs because each claim carries its source, and a definition list is the honest shape for claim -> evidence. */ .chair-profile{background:var(--card);border:1px solid var(--rule);border-radius:12px; padding:clamp(20px,2.8vw,34px)} .chair-profile-head{display:flex;gap:clamp(16px,2.4vw,26px);align-items:flex-start; flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--rule)} .chair-profile-photo{flex:0 0 140px;width:140px;height:140px;border-radius:50%;object-fit:cover; border:3px solid var(--cyan);background:var(--tint)} .chair-profile-head>div{flex:1;min-width:240px} .chair-profile-kicker{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase; color:var(--link-dk)} .chair-profile h1{font-size:clamp(24px,3.2vw,34px);font-weight:800;line-height:1.15;margin:5px 0 0} .chair-profile-role{font-size:13px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-2); margin-top:7px} .chair-profile-links{margin-top:12px;font-size:14px} .chair-profile-links a{color:var(--link-dk);font-weight:600} .chair-profile-bio{margin-top:20px;max-width:74ch} .chair-profile-bio p{font-size:16.5px;line-height:1.72;color:#26333f} .chair-profile-bio p+p{margin-top:1em} .chair-profile-placeholder{margin-top:20px;background:var(--tint);border-left:3px solid var(--cyan); border-radius:0 6px 6px 0;padding:12px 15px;font-size:14px;color:#33445a;max-width:74ch} .chair-facts{margin-top:28px} .chair-facts h2,.chair-signpost h2{font-size:13px;font-weight:800;letter-spacing:1.6px; text-transform:uppercase;color:var(--link-dk)} .chair-facts-note{font-size:13.5px;color:var(--muted);margin-top:7px;max-width:74ch} .chair-dl{margin-top:14px;display:grid;gap:0} .chair-dl dt{font-size:16px;font-weight:700;color:var(--ink);padding-top:14px;line-height:1.4} .chair-dl dt+dd{margin-top:5px} .chair-dl dd{font-size:14px;color:var(--muted);line-height:1.6;max-width:74ch; padding-bottom:14px;border-bottom:1px solid var(--rule-2)} .chair-signpost{margin-top:26px} .chair-signpost ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0} .chair-signpost li{font-size:13.5px;color:var(--muted); border:1px solid var(--rule);border-radius:7px;padding:7px 12px;background:var(--paper)} .chair-signpost a{color:var(--link-dk);font-weight:600} /* Editor-only. A reader never sees this block; it renders only for a logged-in user who can edit posts. */ .chair-confirm{margin-top:26px;border:1px dashed #b45309;border-radius:10px; background:#fffbeb;padding:16px 18px} .chair-confirm h2{font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:#92400e} .chair-confirm p{font-size:13px;color:#78350f;margin-top:7px;max-width:74ch} .chair-confirm ul{margin-top:10px;padding-left:1.15em} .chair-confirm li{font-size:13.5px;color:#78350f;line-height:1.6;margin-top:7px} .chair-confirm strong{color:#b45309} /* ---------- 12. TRUST AND POLICY PAGES ---------- */ .policy{background:var(--card);border:1px solid var(--rule);border-radius:12px; padding:clamp(20px,2.8vw,34px);max-width:82ch} .policy h1{font-size:clamp(23px,3vw,32px);font-weight:800;line-height:1.18} .policy h2{font-size:clamp(17px,2.1vw,21px);font-weight:800;margin-top:1.6em;line-height:1.3} .policy p,.policy li{font-size:16px;line-height:1.7;color:#26333f} .policy p{margin-top:.9em} .policy ul,.policy ol{padding-left:1.3em;margin-top:.7em} .policy li{margin-top:.4em} .policy a{color:var(--link-dk)} .policy .updated{font-size:12.5px;color:var(--muted-2);margin-top:8px; letter-spacing:.4px;text-transform:uppercase} .policy .needs{background:#fffbeb;border:1px dashed #b45309;border-radius:10px;padding:14px 16px; margin-top:1.4em} .policy .needs h2{font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:#92400e; margin-top:0} .policy .needs li,.policy .needs p{color:#78350f;font-size:13.5px} .policy .needs strong{color:#b45309} /* Contact block, built from WordPress's own settings so nothing is invented. */ .contact-facts{display:grid;gap:12px;grid-template-columns:1fr;margin-top:16px} @media (min-width:640px){ .contact-facts{grid-template-columns:repeat(2,1fr)} } .contact-fact{border:1px solid var(--rule);border-radius:9px;padding:13px 15px;background:var(--paper)} .contact-fact dt{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase; color:var(--muted-2)} .contact-fact dd{font-size:15px;color:var(--ink);margin-top:5px;line-height:1.5} .contact-fact dd a{color:var(--link-dk);font-weight:600} .contact-fact.missing{background:#fffbeb;border-style:dashed;border-color:#b45309} .contact-fact.missing dd{color:#92400e;font-weight:700} /* ---------- 15. THE INLINE-MEDIA BUG ---------- FOUND 2 Oct 2026, in the shipping build the chairman opened: Editor's Picks rendered as three photographs with NO TITLES. The markup was correct - h3, byline, category, all present. The fault was one missing declaration. `aspect-ratio` does nothing on an INLINE element, and an is inline by default, so: - .pick-media never got its 16/9 height - the inside rendered at its full intrinsic height (1200x900) - .pick carries overflow:hidden, so the taller image PUSHED THE TEXT OUT of the card and it was silently clipped away The card looked like a picture with no headline - exactly what he photographed. Three wrappers were affected. Two escaped: .dthumb and .rel-card .thumb already declared display:block, and .thumb was saved by .pick-media img{width:100%} not applying to them. Fixed by making all of them explicit rather than relying on which ancestor happened to save which one. THE LESSON: a rendered OUTPUT check caught a CSS fault that a selector cross-reference cannot - the selector existed and matched, it just could not do anything. Looking at the page is the check. */ .pick-media{display:block} .arch-item .thumb{display:block} .lead-media{display:block} /* ---------- 15a-2. EVERY FIXED-FRAME IMAGE, ONE OVERRIDE ---------- MEASURED 12 October 2026 on the live site, one root cause, four visible faults. Upstream (WordPress core / Jetpack) ships img[width][height]{height:auto}, which scores (0,2,1) - element(0,0,1) + two attribute selectors at CLASS level(0,2,0). Every "fill the frame" rule below also scores (0,2,1), so each one TIES and loses on source order. Measured consequences on the live pages: - category thumbs: the K-2 photo rendered 230x345 inside a 129px frame - only the top third of the mountain was visible - homepage lead: the image rendered 397px inside a 427px frame, leaving a 30px strip of empty frame under the biggest image on the page - dispatch thumbs: four images at 152-190px inside a 159px frame - one showed a 6px gray strip, the others were clipped mid-image - pick cards: three images at 197/235/287px inside a 198px frame - two clipped height:100% !important cannot lose this fight (important beats non-important regardless of specificity), and object-fit:cover then crops each image properly inside its frame. The partner marks were fixed the same way in section 5. .art-body img keeps height:auto on purpose - content images must keep their own proportions. Only the fixed-frame slots are listed here. */ .dthumb img,.lead-media img,.pick-media img,.arch-item .thumb img,.rel-card .thumb img,.art-nav-thumb img,.mr-thumb img{height:100% !important} /* ---------- 15b. THE SKIP LINK ---------- Same fault class as 15: the child inherited a style from a stylesheet it does not always have. WordPress core and the parent theme style .skip-link; a standalone build loads neither, so the link rendered as a VISIBLE "Skip to content" button above the masthead - the chairman photographed it and asked why I had "created this button". I had not; I had shipped a page whose only style for it was missing. The child now carries its own copy so it never depends on the parent again, and the standalone build cannot show it uninvited. */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100000; background:#10203c;color:#fff;padding:10px 16px;font-weight:700;font-size:14px; border-radius:0 0 8px 0;text-decoration:none} .skip-link:focus{left:0;outline:2px solid #22d3ee;outline-offset:2px} /* ---------- 16. AUTHOR ARCHIVE (author.php) ---------- */.author-head-in{display:flex;gap:clamp(14px,2.2vw,22px);align-items:flex-start;flex-wrap:wrap} .author-head .avatar{border-radius:50%;flex:0 0 108px;width:108px;height:108px;object-fit:cover; border:3px solid var(--cyan);background:rgba(34,211,238,.08)} .author-head .author-head-in>div{flex:1;min-width:240px} .author-kicker{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#bcd6ee} .author-head h1{color:#fff;margin-top:4px} .author-role{font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;color:#9fb3cb;margin-top:6px} .author-bio{margin-top:11px;max-width:72ch} .author-bio p{color:#dbe7f5;font-size:15px;line-height:1.65} .author-bio p+p{margin-top:.8em} .author-links{margin-top:12px;font-size:14px;color:#9fb3cb} .author-links a{color:var(--cyan);font-weight:600} .arch-count{font-size:14px;color:var(--muted);margin-top:16px} /* ---------- 14. FOOTER BRAND COLUMN - THE LOGO NEEDS ROOM ---------- MEASURED, 2 Oct 2026. The chairman said the footer logo "looks dull" and asked for it to be brightened. The brightness was measured first: the wordmark strokes are luminance 226 (p90 255) on a navy of 12 - about 14.7:1, against an AA requirement of 4.5:1. It was never faint. The real cause is SIZE. The lockup is 1821px wide and the footer column gave it 178px, a 10.2x reduction, and its wordmark is an OUTLINED face with a silver gradient - dark centre, bright edge. At 178px that gradient collapses and the type reads as grey mush. Give the same file 320px and it is crisp. So the fix is space, applied here, and it touches no brand asset. Re-setting a wordmark in another typeface would change the brand mark, which is the chairman's decision and not a side effect of a CSS bug fix. */ @media (min-width:1000px){ .foot-grid{grid-template-columns:2.3fr 1fr 1fr 1fr 1fr} } /* the two .foot-logo rules that were here (max-width:320px in the 1000px query, and the base width:100% rule) were removed 12 October 2026 with the rasterized lockup they sized - the footer brand is now .foot-lockup, live text plus the wave mark. */ /* ---------- 17. THE WIDE PARTNER MARK WAS BEING SQUASHED ---------- MEASURED by Lighthouse, 3 October 2026. The ZGCTA wordmark was rendering at 284 x 56 (aspect 5.07) while the file itself is 420 x 67 (aspect 6.27) - a 19% horizontal squash, the logo visibly distorted. WHY. The mockup sets a uniform optical height for the partner row, which is right - logos of different proportions at intrinsic size read as a ransom note. But `.p-logo img{height:56px;width:auto}` forces EVERY mark to 56px tall, and ZGCTA's wordmark is 6.3:1, so it wants to be 351px wide. Its chip is capped at 320px to keep the row even, and a flex item that cannot fit is squeezed rather than scaled - so the browser narrowed the image while holding the 56px height, and the proportions broke. THE FIX. Let the wide mark scale BY WIDTH with `height:auto`, inside the same capped chip. It stays in proportion, still sits in the row, and no other mark is touched. Deleting the cap instead would let the wordmark crowd the row, which is what the cap is for. AND THE !important HERE, 12 October 2026. The sibling rule `.part-row .p-logo img` now carries `height:56px !important` (see section 5 for the full specificity analysis: img[width][height] is (0,2,1), not (0,1,1), and a specificity tie is lost on source order). Without its own !important, this height:auto would lose to that important 56px and the wide wordmark would be squashed again. Both rules being important, specificity decides between them, and (0,2,1) = (0,2,1) with this rule later in the file, so height:auto wins for the wide mark alone. */ .part-row .p-logo-wide img{height:auto !important;width:auto;max-width:320px} /* ---------- 18. PREVIOUS / NEXT GET THEIR PICTURES ---------- The chairman asked why the Previous and Next cards at the end of an article had no images. Because they never had any: the markup was a label and a title. Sitting at the bottom of an image-led article, they read as two links rather than two more stories. A small thumbnail now sits on the outer edge of each card, so the pair reads as outward-pointing: picture on the left going back, picture on the right going forward. `.next` reverses the row order rather than moving the image, which keeps the text aligned to the outer edge where the eye already. `min-width:0` on the text block is what allows the title to wrap instead of overflowing; a flex child defaults to min-width:auto and pushes its container. */ .art-nav a{display:flex;gap:13px;align-items:center} .art-nav .next{flex-direction:row-reverse;text-align:right} .art-nav-thumb{flex:0 0 76px;width:76px;height:57px;border-radius:7px;overflow:hidden; background:#e6e9ed;display:block} .art-nav-thumb img{display:block;width:100%;height:100%;object-fit:cover} .art-nav-txt{min-width:0} .art-nav b{display:block} /* ---------- 19. COMMENTS - THE CHILD THEME HAD NONE ---------- MEASURED, 5 October 2026: not one of `.comment`, `#comments`, `.commentlist`, `.comment-form` or `.comment-respond` appeared anywhere in this stylesheet. The site carries 47,355 comments and single.php calls comments_template(), so every one of them would have rendered in the PARENT theme's styling, inside the new design. The gap was invisible because the live site still runs the parent theme. These rules follow the article's own vocabulary: the same card background, the same hairline rule, the same type scale. Nothing here is decorative - a comment thread only has to be legible and clearly nested. */ .art-comments{margin-top:30px} .art-comments h2,.art-comments .comments-title{font-size:19px;font-weight:800;color:var(--ink); margin:0 0 4px;padding-top:20px;border-top:1px solid var(--rule)} .art-comments .comment-list{list-style:none;margin:0;padding:0} .art-comments .comment-list li.comment, .art-comments .comment-list li.pingback{list-style:none} .art-comments .comment-body{background:var(--card);border:1px solid var(--rule);border-radius:10px; padding:14px 16px;margin-top:12px} /* nesting: children indent and lose the card, so depth is visible without stacking boxes inside boxes three deep */ .art-comments .comment-list .children{list-style:none;margin:10px 0 0;padding-left:16px} .art-comments .comment-list .children .comment-body{background:transparent;border-left:2px solid var(--rule); border-radius:0;padding:0 0 0 14px} .art-comments .comment-author{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:700; color:var(--ink)} .art-comments .comment-author .avatar{border-radius:50%;display:block} .art-comments .comment-author .says{display:none} .art-comments .comment-meta{font-size:12px;color:var(--muted-2);margin-top:3px} .art-comments .comment-meta a{color:var(--muted-2);text-decoration:none} .art-comments .comment-content{font-size:15px;line-height:1.62;color:var(--muted);margin-top:9px} .art-comments .comment-content p{margin:0 0 9px} .art-comments .comment-content p:last-child{margin-bottom:0} .art-comments .reply{font-size:12.5px;margin-top:9px} .art-comments .reply a{color:var(--link-dk);font-weight:600;text-decoration:none} .art-comments .reply a:hover{text-decoration:underline} /* the form */ .art-comments .comment-respond{background:var(--card);border:1px solid var(--rule);border-radius:12px; padding:18px 20px;margin-top:20px} .art-comments .comment-reply-title{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 4px} .art-comments .comment-notes,.art-comments .logged-in-as{font-size:12.5px;color:var(--muted-2);margin:0 0 12px} /* THE COMMENT FORM SHARES THE READING MEASURE, AND THE BOX HAS A HEIGHT. MEASURED 12 October 2026 on the live site: the form rendered 1034px wide while the article text above it was 586px - 76% wider than the column the reader had just finished. And the textarea stood 342px tall, about 3x the height of the tallest paragraph on the page, because nothing here set a height and the markup's rows="8" plus inherited line-height was left to decide. Both faults are fixed the same way the body was: match the 74ch reading measure and centre, so the whole page runs on one spine instead of three competing widths. The box keeps resize:vertical so a long reply can still grow by hand. */ .art-comments .comment-form{max-width:74ch;margin-inline:auto} .art-comments .comment-form p{margin:0 0 12px} .art-comments .comment-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px} .art-comments .comment-form input[type=text], .art-comments .comment-form input[type=email], .art-comments .comment-form input[type=url], .art-comments .comment-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;font-size:15px; font-family:inherit;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:8px} /* 150px, not the 342px rows="8" produced on the live site; resize stays on so a long reply can still be stretched by hand. */ .art-comments .comment-form textarea{height:150px;resize:vertical} .art-comments .comment-form input:focus, .art-comments .comment-form textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)} .art-comments .comment-form .submit, .art-comments .comment-form input[type=submit]{background:var(--navy);color:#fff;border:0;border-radius:8px; padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit} .art-comments .comment-form .submit:hover, .art-comments .comment-form input[type=submit]:hover{background:var(--link-dk)} /* the cookie-consent checkbox must not inherit a 100% width input */ .art-comments .comment-form .comment-form-cookies-consent{display:flex;gap:9px;align-items:flex-start} .art-comments .comment-form .comment-form-cookies-consent input{width:auto;margin-top:3px} .art-comments .comment-form .comment-form-cookies-consent label{font-weight:400;font-size:12.5px;color:var(--muted)} .art-comments .nav-links{display:flex;gap:10px;justify-content:center;margin-top:16px;font-size:13px} .art-comments .nav-links a{color:var(--link-dk);font-weight:600;text-decoration:none} /* ---------- 20. THE STRAY WHITE LOGO ON THE CONTACT PAGE ---------- MEASURED 8 October 2026 on gsrra.com/contact-us/. The page carries an Elementor Image widget (elementor-element-81ce315) holding /uploads/2025/09/cropped-Logo-1.png. That file is drawn in WHITE - 24% of its opaque pixels are pure white, counted with PIL - because it was made for the site's dark navy header. On this page's white background the wordmark is invisible and only the blue wave and the blue THINK TANK badge show. It reads as a broken image, sitting directly above the contact form. It could not be removed through Elementor. Clicking it selects the CONTAINER that also holds the contact form, and pressing Delete there would take the form with it - he tried for twenty minutes and could not select the image at all. Hiding it by its own class is safer and reversible: that class exists on this one widget and nowhere else on the site. Scoped to page-id-2795 as well, so even a duplicate widget id elsewhere could not be caught by it. If a logo is ever wanted here, replace the widget's image with the dark version (Documents/logo/gsrra-logo-on-light.png) and delete these lines. */ .page-id-2795 .elementor-element-81ce315{display:none} /* Second half of the same fault. The page ALSO has a FEATURED IMAGE set to the same white logo (featured_media 24616, confirmed through the REST API), and the Newsup theme prints it as a post thumbnail above the page content - the img carrying class="img-responsive wp-post-image" inside div.post-thumbnail. He tried removing the featured image twice and it came back on save, which is what the active auto-post-thumbnail plugin (5.0.6, "Auto Featured Image") exists to do: its job is to SET featured images. So the data cannot be won by deleting it. Hiding the OUTPUT wins regardless of the data, and keeps winning if the plugin re-creates it. Scoped to the page, so no other page's thumbnail is affected. */ .page-id-2795 .post-thumbnail{display:none} /* ---------- 21. WIDGET SLOTS - footer subscribe and article ad ---------- These two areas render NOTHING until a widget is placed in them - the template gates each behind is_active_sidebar() - so this CSS only matters once the chairman drops a newsletter form or an ad in. The requirement: an empty slot must leave no hole, and a filled one must look like part of the design rather than an afterthought. */ .foot-subscribe{ max-width:var(--wrap); margin:0 auto 20px; padding:24px var(--gut); background:var(--navy-2); border-radius:12px; color:#c8d6e8; } .foot-subscribe .gsrra-widget-title{color:#fff;font-size:1.05rem;letter-spacing:.4px;margin:0 0 12px} .foot-subscribe p{color:#a8bcd4;font-size:13.5px;margin:0} .foot-subscribe .gsrra-widget{max-width:560px} .art-slot{margin:28px 0 4px} .art-slot .gsrra-widget{width:100%} .gsrra-widget-title{font-size:1rem;font-weight:700;margin:0 0 10px;color:var(--ink)} /* ---------- 22. THE OPENING PARAGRAPH, AND LONG SOURCE LINKS ---------- MEASURED 12 October 2026 on the live article page. The wire copy arrives with its first paragraph wrapped entirely in :

Prime Minister Shehbaz Sharif on Saturday renamed Islamabad's National Technology Park as the Danish IT Park...

That is two tags per article, written by hand, not the theme. Rendered as ordinary body text a fully-bold paragraph reads as a mistake rather than a choice - the chairman's words were "it doesn't look like a real think tank website". So it is given the shape it was reaching for: a standfirst. Slightly larger, a cyan rule down its left edge, and more space beneath, which is how a lead paragraph is set on any news site. The bold then reads as deliberate because the whole block reads as deliberate. Scoped to :first-of-type inside .art-body only, so it cannot reach a second paragraph, a blockquote or a caption. overflow-wrap covers the other thing the wire copy carries: a bare "Reference Link:- https://..." line whose URL is longer than the reading column on a phone. */ .art-body > p:first-of-type{ font-size:clamp(17px,1.95vw,18.5px); line-height:1.62; color:#1c2733; border-left:3px solid var(--cyan); padding-left:16px; margin-bottom:1.7em; } .art-body > p:first-of-type strong{font-weight:700} .art-body{overflow-wrap:break-word} .art-body a{overflow-wrap:anywhere} /* ---------- 23. THE 404 PAGE ---------- Added 12 October 2026 with 404.php. Before that, dead links rendered the PARENT theme's stock mg-error-404 block inside our header and footer (Addendum CT, bug 2) - a hybrid page with no
. Roughly 44,000 requests a month land on 404, so this page gets the full treatment: a centred card on the paper background, a search box, and four starting points. */ .nf404{padding:clamp(48px,8vw,90px) var(--gut)} .nf404-in{max-width:56ch;margin:0 auto;text-align:center} .nf404-kicker{font-size:clamp(44px,8vw,72px);font-weight:800;color:var(--cyan); letter-spacing:6px;line-height:1;margin-bottom:10px} .nf404 h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;color:var(--ink);margin-bottom:10px} .nf404-text{font-size:15.5px;color:var(--muted);line-height:1.65;margin-bottom:24px} .nf404-search{margin:0 auto 26px;max-width:420px} .nf404-search form{display:flex;gap:8px} .nf404-search input[type=search],.nf404-search input[type=text]{ flex:1;min-width:0;padding:11px 14px;font-size:15px;font-family:inherit; color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:8px} .nf404-search input:focus{outline:2px solid var(--focus);outline-offset:1px} .nf404-search button,.nf404-search input[type=submit]{ background:var(--navy);color:#fff;border:0;border-radius:8px;padding:11px 15px; font-size:14px;font-weight:700;cursor:pointer;font-family:inherit; display:flex;align-items:center;justify-content:center} .nf404-search button:hover,.nf404-search input[type=submit]:hover{background:var(--link-dk)} .nf404-links{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center; font-size:13.5px;font-weight:600} .nf404-links a{color:var(--link-dk)} .nf404-links a:hover{text-decoration:underline} /* ---------- 24. HEADER SEARCH + MOST READ ---------- Added 12 October 2026, from the reference-site comparison. BBC and Al Jazeera carry a visible search in the header; this site had none (search existed only via the 404 page). And a most-read module is on every reference homepage while this site collected 1.16M view rows and displayed them nowhere. */ /* THE HEADER SEARCH - size history, because it has now been corrected twice. v1 a thin full-width form under the nav. Chairman: "it looks weird". v2 a 660px pill, 660 x 83 rendered, input 604 x 68, button 46px. Chairman: first "can u make it little bigger", then "make the search bar small". The v2 pill ate ~83px of hero height for one field. v3 THIS VERSION. Measured target: a 38px-tall pill inside a 440px box, so the whole block drops from 83px to ~38px - roughly half. height is DECLARED rather than left to padding arithmetic: v2 came out at 68px when the padding said it should have been ~47px, which is exactly the kind of guess the project has been wrong about before. Measured after the change with _build\measure-live.mjs, not assumed. Reference behaviour, unchanged: BBC a header icon that expands to an overlay, Al Jazeera a compact field in the utility bar, the Guardian an icon with a dropdown. A masthead header reads best with a small centred field under the nav. The 404 page reuses the same form via .nf404-search and is deliberately NOT sized by these rules. */ .hero-search{margin:14px auto 0;max-width:440px;display:flex;justify-content:center} .hero-search .gsrra-searchform{display:flex;gap:8px;width:100%} /* * SEARCH FIELD MARGIN, 14 October 2026. * The parent theme's base rule for input[type=search] carries margin-bottom:15px, * which this stylesheet never reset. Measured on the live site: the field itself * is 38px tall, but its own bottom margin pushed the flex row to 53px, so the * search bar reserved 53px to hold a 38px control and the button sat 15px short * of the container's full height. The gap was invisible as colour or border - * it only existed as reserved space, which is why it survived several reviews. * margin:0 reclaims it; the bar now hugs its contents at 38px. */ .hero-search input[type=search]{ flex:1;min-width:0;height:38px;margin:0; background:rgba(255,255,255,.08); border:1px solid rgba(148,180,214,.28); border-radius:19px; padding:0 16px; color:#fff;font-size:14.5px;font-family:inherit} .hero-search input[type=search]::placeholder{color:#8fa3bd} .hero-search input[type=search]:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus);background:rgba(255,255,255,.12)} .hero-search button{ flex:0 0 38px;width:38px;height:38px; display:flex;align-items:center;justify-content:center; background:var(--cyan);color:#04202a;border:0;border-radius:50%; cursor:pointer;padding:0} .hero-search button:hover{background:var(--cyan-dim)} /* most read this week: five cards with thumbnail, rank and category */ .mostread{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr} @media (min-width:760px){ .mostread{grid-template-columns:repeat(2,1fr)} } @media (min-width:1080px){ .mostread{grid-template-columns:repeat(5,1fr)} } .mostread li{background:var(--card);border:1px solid var(--rule);border-radius:8px; padding:12px 13px 14px;display:flex;flex-direction:column;gap:8px} .mostread li:hover{border-color:var(--link-dk)} .mr-thumb{display:block;aspect-ratio:16/10;background:#e6e9ed;border-radius:7px;overflow:hidden} .mr-thumb img{width:100%;height:100%;object-fit:cover;display:block} .mr-row{display:flex;align-items:center;gap:9px} .mr-num{font-size:20px;font-weight:800;color:var(--cyan);line-height:1; font-variant-numeric:tabular-nums} .mostread li h3{font-size:14px;font-weight:700;line-height:1.38;margin:0} .mostread li h3 a{color:var(--ink)} .mostread li h3 a:hover{color:var(--link-dk)} /* the per-card view count was removed 12 October 2026 at the chairman's request - the "N views this week" line is gone; the ranking still works */ /* ========================================================================== THE 中文 / EN SWITCH - added 16 October 2026 ========================================================================== Top-right of the dark hero on a wide screen, because .hero-in is position:relative and nothing else lives in that corner. On a narrow screen it drops back into the flow as the first line of the hero, above the logo, where a thumb can reach it - which is why header.php prints it FIRST. The active language is filled, the other is an outline: at a glance the reader can see which one they are reading, and the pattern is the same one the site already uses for selected chips. */ .lang-switch{position:absolute;top:16px;right:var(--gut);z-index:5; display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700; letter-spacing:.04em} .lang-switch .ls-opt{color:rgba(255,255,255,.66);text-decoration:none; padding:4px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px; line-height:1;transition:color .15s,border-color .15s,background .15s} .lang-switch .ls-opt:hover{color:#fff;border-color:rgba(255,255,255,.5)} .lang-switch .ls-opt.is-on{color:#08161f;background:var(--cyan); border-color:var(--cyan)} .lang-switch .ls-opt.is-on:hover{color:#08161f;border-color:var(--cyan)} .lang-switch .ls-sep{color:rgba(255,255,255,.28)} @media (max-width:640px){ .lang-switch{position:static;justify-content:center;margin:0 0 14px} .lang-switch .ls-opt{font-size:13px;padding:5px 11px} }