/* wyg-css-shared -- HO-49, 23 August 2026 * * THE OWNER of every class that more than one page legitimately uses. Loads * SITE-WIDE, deliberately, and at priority 5 rather than the default 10 so it * lands BEFORE every page file -- which is what lets a page override it at its * own scope instead of fighting it on file order. * * WHY THIS FILE EXISTS. Three page snippets had grown copies of the same * components, and none of them carried a load condition, so all of them loaded * on all twelve pages: * * .wyg-sec-label / .wyg-sec-title / .wyg-prose were FILED in wyg-css-homepage * (37) under a comment reading "this page only", and margin-overridden in * wyg-css-about (52) at the same 0,3,0 specificity. 52 wins on file order, so * About's section spacing silently governed the homepage, Research & * Publications, News & Media and Programs & Workshops. Two Userback spacing * tickets filed against Programs & Workshops (#8244819, #8244823) turned out * to be About Us's CSS. * * The chip was written twice, character-for-character: * .wyg-plate-essay__chip in wyg-css-publication-card (36) and .wyg-wk__type in * wyg-css-programs-workshops (56). * * The auto-width button was written twice, character-for-character: * .wyg-essay-under__cta in 36 and .wyg-media-card__cta in wyg-css-news-media * (59), both added at different times for the same reason -- Elementor's * button width control offers 20-100% and no `auto`. * * HOW TO USE IT. A page build that needs a component a second page already uses * ADDS TO THIS FILE. It does not copy the rule into the second page's snippet. * A page that needs a local VARIATION does it in its own snippet at 0,4,0, * scoped under that page's own section class -- never by editing this file. * wyg-css-programs-workshops section 1a is the worked example. */ /* ========================================================================== 1. The section head -- label, title, prose ========================================================================== */ /* 🚨 THE TWO MARGINS BELOW WERE INHERITED, NOT DESIGNED. Todd's decision, 23 August 2026, recorded here because the numbers look arbitrary and are. wyg-css-homepage set `margin: 0` and let container gaps do the spacing; wyg-css-about added .75rem and 1.75rem and won on file order. Every page therefore rendered About's values, and the Homepage, Research & Publications, Contact and Programs & Workshops pages were all reviewed and approved by the client rendering exactly that. Preserving the accident was chosen over restoring the intent, because changing the base would move four approved pages a week before launch. If the section head is ever redesigned, this is the number to revisit and there is no design behind it to defend. */ .wyg-sec-label.wyg-sec-label .elementor-heading-title { /* HO-40: scaled up in Hebrew/Arabic -- see wyg-css-global section 5g. */ font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); margin-block: 0 0.75rem; margin-inline: 0; font-family: var( --wyg-mono ); /* HO-39: --wyg-label-weight carries the emphasis in Hebrew and Arabic, where the mono texture, tracking and case are gone. Undefined in English, so the fallback (this component's own weight, unchanged) is what renders there. */ font-weight: var( --wyg-label-weight, 600 ); text-transform: uppercase; letter-spacing: 0.12em; } .wyg-sec-title.wyg-sec-title .elementor-heading-title { margin-block: 0 1.75rem; margin-inline: 0; } /* 0,5,0, mirroring the shape of Elementor's own framework rule rather than repeating a class four times, so the next reader can see what is being answered: `custom-frontend.min.css` ships `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` at 0,4,0 on a layout property and loads after the snippets. A 0,3,0 component rule loses to it and the measure silently does nothing. */ .elementor.elementor .e-con .elementor-widget.wyg-prose { max-inline-size: 60ch; } /* The paragraph rhythm is NOT here: it is the text widget's own Paragraph Spacing control, which emits `{{WRAPPER}} p { margin-block-end }` -- already a logical property, and visible in the editor where a snippet is not. Only the last-child reset stays, because the control applies to every paragraph including the last and the design closes the block flush. 🚨 `.elementor-widget` is here for specificity, and it is load-bearing. The Paragraph Spacing control emits its rule at 0,3,1 -- the same weight as a doubled class plus :last-child plus an element -- and it loads after the snippets, so the tie goes to Elementor and every prose block keeps an 18px trailing margin. Measured 2026-08-19. */ .elementor-widget.wyg-prose.wyg-prose p:last-child { margin-block-end: 0; } /* ========================================================================== 2. The chip -- one bordered mono label, four consumers ========================================================================== */ /* THE DEVICE, not the page that used it first. A small bordered uppercase mono box carrying one piece of metadata. It appears on the essay plate (language, type), on the workshop card (type), in the essay rail's merged Themes row, and on the Research & Publications library cards. * * 🚨 .wyg-chip IS THE CANONICAL NAME. New components use it. The two legacy * names below are ALIASES on this same declaration block -- one definition, * three names -- because retiring them from the markup means writing to six * published Elementor documents (370, 382, 384 publication card; 519 workshop * card; 529 media card; page 118) AND editing wyg-css-global section 5f, which * names .wyg-plate-essay__chip in its nine-selector Hebrew/Arabic tracking list * and is frozen. Todd's decision, 23 August 2026: not eight days before launch. * Ticketed for after launch. * * BOTH FORMS ARE REQUIRED AND THE `span` QUALIFIER IS LOAD-BEARING. The plate's * and the workshop card's chips carry the class on the Elementor widget DIV, so * they are reached through `.elementor-heading-title`. The essay rail's Themes * row is a bare `` printed by a shortcode (wyg-publication-detail-partials) * with no heading inside it to reach. An UNQUALIFIED second selector would match * the widget div as well and draw a second border and a second set of padding * around the first. Verified 23 August: 12 chips on Research & Publications and * 2 on the homepage each render exactly one border. */ .wyg-chip.wyg-chip .elementor-heading-title, span.wyg-chip.wyg-chip, .wyg-plate-essay__chip.wyg-plate-essay__chip .elementor-heading-title, span.wyg-plate-essay__chip.wyg-plate-essay__chip, .wyg-wk__type.wyg-wk__type .elementor-heading-title, span.wyg-wk__type.wyg-wk__type { /* HO-40: he/ar font-size bump -- see wyg-css-global section 5g. calc() with a fallback of 1 leaves English untouched; the multiplier only exists under html[lang^="he"]/["ar"]. */ font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); display: inline-block; margin: 0; border: 1px solid rgba( 225, 194, 154, .55 ); padding: 0.22rem 0.55rem; font-family: var( --wyg-mono ); /* HO-39: see wyg-css-global section 5e for the token. */ font-weight: var( --wyg-label-weight, 600 ); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; } /* Tan at 55 percent as a hairline, not as text: the chip border is decoration around a label that is already Tan at full strength, and a solid rule at that weight reads as a second element rather than as an outline. Taken from the approved mockup rather than chosen here. Drawn for the DARK BLUE PLATE. Over a light surface it all but vanishes, so wyg-css-publication-single answers the border and text color for the essay rail's Themes row at 0,4,0 -- one property each, nothing else restated. */ /* ========================================================================== 3. The auto-width button ========================================================================== */ /* Elementor's button width control offers 20-100% and no `auto`, and setting a real percentage does not remove the `elementor-button-align-stretch` class either -- measured. An auto-width button needs BOTH `flex-basis` and `inline-size`, because the width comes from the basis. .wyg-cta-auto is the canonical name for new components; the two below are aliases for the same reason as the chip. */ .wyg-cta-auto.wyg-cta-auto .elementor-button, .wyg-essay-under__cta.wyg-essay-under__cta .elementor-button, .wyg-media-card__cta.wyg-media-card__cta .elementor-button { inline-size: auto; flex-basis: auto; } /* ========================================================================== 4. The figure plate -- a photograph in a text column, two consumers ========================================================================== */ /* CONSOLIDATED 2026-08-24 (HO-57). This lived in wyg-css-homepage, which is page-scoped to the front page and its two translations, so the collection landing page could not reach it. wyg-css-homepage's own header says a change everyone should get belongs here; a photograph plate is now everyone's. .wyg-figure-plate is the canonical name for new components; .wyg-mission__figure is an alias, kept because renaming it would mean editing a client-approved page for no visual difference. Same reasoning as the chip and the auto-width button above. The bottom rule is 6px in the accent color and is the whole signature of the treatment -- it is what makes the photograph read as a plate rather than a loose image. */ .wyg-mission__figure.wyg-mission__figure img, .wyg-figure-plate.wyg-figure-plate img { display: block; inline-size: 100%; border: 1px solid var( --e-global-color-5f8039f0 ); border-block-end: 6px solid var( --e-global-color-0e573e58 ); } /* ========================================================================== 5. Mobile reading-size unification -- HO-70, 25 August 2026 ========================================================================== */ /* Todd, 25 August: "certain texts were too small to read on mobile... based on the areas I flagged, they need to be increased a bit and uniform across the site." A scope change from HO-66's narrower version (workshop description only) to every reading-size class sitewide. One floor -- 17px -- for text a visitor actually reads at 375px. 13px meta labels and chips (essay-under__meta, plate-essay__themes, quote__more, fellow-row__aff, pub-masthead__proj) are DELIBERATELY excluded: they are labels, not sequential reading, and re-measuring on 25 August found every one of them ALREADY rendering at 17px live -- HO-66's "stays 13px" table describes a state that does not exist on the current site. Nothing to protect there; they were left out of this rule and are unaffected by it either way. 🚨 SPECIFICITY, NOT LOAD ORDER. This file's own header says priority 5, loading BEFORE every page file -- the opposite of HO-70's assumption that snippet 60 "loads after every page snippet in scope." That assumption was wrong: on file order alone, an equal-specificity rule here would LOSE to a page snippet's own rule for the same class, silently. So every selector below is tripled (0,3,0) rather than doubled to the usual project convention (0,2,0) -- enough to beat both a page snippet's doubled class and Elementor's own per-element generated rule regardless of which file loads last. Verified against the live page after writing, per the project's own rule: read the rendered output, not the cascade on paper. Class-by-class source of the 375px value measured 25 August, before this rule: .wyg-quote__cite 17px (already correct -- HO-66's table said 14, wrong; a heading widget on kit default type) .wyg-essay-under__abstract 14px (Homepage, Research & Publications x7 -- not x6, an eighth essay (Schwake) landed since HO-66's count -- and About's held-back fellows/partners intros reuse this pattern) .wyg-wk__where 14px (the actual paragraph the shortcode prints; HO-66's table named .wk__wherewrap, which is only the wrapping div and was already 17px with nothing to raise -- corrected here) .wyg-wk__desc 16px .wyg-person-card__teaser 17px (already correct) .wyg-about-fellows__intro 14px (held-back section, included per HO-70) .wyg-about-partners__intro 14px (held-back section, included per HO-70) .wyg-media-card__desc 17px (already correct) .wyg-media-card__outlet 17px (already correct) .wyg-card__body 15px .wyg-pub-authorwrap 17px (already correct) .wyg-pub-factswrap 17px (already correct) .wyg-pub-facts__v 14px (NOT on HO-70's table -- found during re-measurement, sits inside .wyg-pub-factswrap, reads as body copy not a label. Reported and included rather than left small.) essay-body footnotes in-text markers ([1], [2]...) are bare with no class, inheriting the UA default 75% shrink off a 17px paragraph -- 12.75px. The note body itself is a bare
  • inside
      , 15px. Neither carries a class to hang HO-70's table entry off of -- reached here by structural selector instead. NOT reached by this rule, and why: the Collection page (taxonomy archive for publication_theme, e.g. /themes/language/) is on HO-70's table for both this section and the ss3 capture requirement, but it does not exist as a styled template yet -- it 200s with the default WordPress archive loop and a "page still in development" banner, no .wyg-essay-under__abstract or .wyg-plate-essay__themes anywhere on it. This rule's .wyg-essay-under__abstract selector will already cover it once that template is built; nothing further to do here now. */ @media (max-width: 767px) { .wyg-quote__cite.wyg-quote__cite.wyg-quote__cite.wyg-quote__cite, .wyg-essay-under__abstract.wyg-essay-under__abstract.wyg-essay-under__abstract.wyg-essay-under__abstract, .wyg-wk__where.wyg-wk__where.wyg-wk__where.wyg-wk__where, .wyg-wk__desc.wyg-wk__desc.wyg-wk__desc.wyg-wk__desc, .wyg-person-card__teaser.wyg-person-card__teaser.wyg-person-card__teaser.wyg-person-card__teaser, .wyg-about-fellows__intro.wyg-about-fellows__intro.wyg-about-fellows__intro.wyg-about-fellows__intro, .wyg-about-partners__intro.wyg-about-partners__intro.wyg-about-partners__intro.wyg-about-partners__intro, .wyg-media-card__desc.wyg-media-card__desc.wyg-media-card__desc.wyg-media-card__desc, .wyg-media-card__outlet.wyg-media-card__outlet.wyg-media-card__outlet.wyg-media-card__outlet, .wyg-card__body.wyg-card__body.wyg-card__body.wyg-card__body, .wyg-pub-authorwrap.wyg-pub-authorwrap.wyg-pub-authorwrap.wyg-pub-authorwrap, .wyg-pub-factswrap.wyg-pub-factswrap.wyg-pub-factswrap.wyg-pub-factswrap, .wyg-pub-facts__v.wyg-pub-facts__v.wyg-pub-facts__v.wyg-pub-facts__v { font-size: 17px; } /* Bare, unclassed footnote markup inside the essay body -- structural selector is the only way to reach it. Quadrupled on the one class that does exist (.wyg-essay-body) for the same load-order safety as above. */ .wyg-essay-body.wyg-essay-body.wyg-essay-body.wyg-essay-body sup, .wyg-essay-body.wyg-essay-body.wyg-essay-body.wyg-essay-body sup a, .wyg-essay-body.wyg-essay-body.wyg-essay-body.wyg-essay-body ol[role="doc-endnotes"] li { font-size: 17px; } } /* --------------------------------------------------------------------- * ShortPixel wrapper -- 31 August 2026 * * ShortPixel's WebP delivery wraps every in . That wrapper * becomes the image's containing block, so `block-size: 100%` on the img * resolves against an auto height and computes to auto -- leaving the oval * frames ~8px short and showing their own background under the photograph. * also inherits line-height, adding baseline descender space. * * display:contents removes the wrapper from layout so the img is the oval's * direct box child again and every existing rule works unchanged. * --------------------------------------------------------------------- */ .wyg-oval picture, .wyg-pub-author__oval picture { display: contents; }