/** * wyg-css-publication * * WHAT: The footnote apparatus and the print stylesheet for the essay page. * Loaded only on a publication single -- the snippet's own condition is * post_type = publication, which is Fluent Snippets' equivalent of wrapping the * whole file in is_singular('publication'). * * TWO ID SCHEMES, BOTH MATCHED -- 16 August 2026 (HO-21): * * current [1] *
  1. ... arrow
* * legacy [1] *
  1. ... arrow
* * The current scheme comes from wyg-publication-notes-extract, which moves the * notes into the ACF field notes_english so ATE never translates them, and * rewrites the anchors to be post-independent -- one stored string is rendered * on the English, Hebrew and Arabic posts alike, so it cannot carry the English * post's ID. Endnotes use en- / enref- rather than sharing fn-, because Word * numbers footnotes and endnotes in independent sequences. The legacy scheme is * kept so an essay imported before the change, or imported and not yet * re-saved, still looks right. * * A NOTE ON THE SELECTOR THAT WAS REPORTED BROKEN. The pilot report and * architecture.md section 8 both quote this file as using * * .publication-content li[id*="note-"] > p > a[href*="note-ref-"] * * It never did. The shipped rule was already .single-publication li[...] * a[href*="note-ref-"] with no > p > and no .publication-content -- the DOCS * were wrong, not the CSS. What was genuinely at risk was different: Gutenberg * strips the

inside

  • , so the li > p rule below matches nothing on a * block-editor import. It is harmless and kept for legacy Classic-editor posts. * * FOUR THINGS THAT ARE DELIBERATE, NOT ACCIDENTAL: * * 1. Legacy selectors match note- and never footnote-. Endnotes use the same * shape with endnote in the ID and Mammoth merges both into ONE list with * one shared counter. Matching footnote- would silently skip endnotes. * 2. Nothing keys off the ARIA roles. wyg-footnote-aria adds doc-noteref, * doc-endnote and doc-backlink at display time, but this file has to stand * on its own so that switching that snippet off changes the accessibility * tree and never the layout. * 3. Everything is scoped, and the scope is body.single-publication rather than * a wrapper class on the template. WordPress puts that class on the body of * every publication single regardless of which Theme Builder template is * rendering, so it cannot be forgotten when the template is built the way a * hand-added .publication-content class can. Unscoped, li[id^="fn-"] would * be harmless but a bare ol would style every list on the site. * 4. Logical properties throughout. The markup carries no dir and no lang -- * WPML sets direction on -- so padding-inline-start rather than * padding-left is the only reason the list marker, the indent and the * backlink mirror in Hebrew and Arabic. * * ABSENT, NOT EMPTY: about half the corpus has no notes at all, and nothing is * rendered rather than an empty list. Nothing here needs an :empty guard, and * the page has to look right with the entire block missing. * * THE NOTES HEADING IS NOT HERE ANY MORE (2026-08-11). wyg-footnote-aria emits * a real heading element with the class wyg-notes-heading, translation-wrapped * and registered with WPML String Translation. This file styles that heading; * it no longer supplies the text. * * DEGRADES BOTH WAYS: the list keeps its own hairline and top spacing, so * switching wyg-footnote-aria off leaves the apparatus looking correct with no * heading. When the heading IS present, the adjacent-sibling rule in section 2 * moves the hairline onto the heading instead, so it never draws twice. */ /* -------------------------------------------------------------------------- 1. The marker in the body text. The visible [n] stays as the importer wrote it. The ::after is an invisible hit area of 25 by 30 CSS pixels -- over the 24px WCAG 2.5.8 floor -- added as a pseudo-element precisely so enlarging the target does not disturb the line height of the paragraph it sits in. scroll-margin-top clears the sticky header when a backlink jumps here. -------------------------------------------------------------------------- */ .single-publication sup > a[href^="#fn-"], .single-publication sup > a[href^="#en-"], .single-publication sup > a[href*="note-"][id*="note-ref-"] { position: relative; color: #925038; font-weight: 600; text-decoration: none; padding-inline: 0.1em; scroll-margin-top: calc( var( --wyg-chrome-bottom, 170px ) + 1.5rem ); /* HO-46: was a flat 9rem, under-cleared the header once the review-gate bar (or an admin bar) was present. See wyg-css-global section 6. */ } .single-publication sup > a[href^="#fn-"]:hover, .single-publication sup > a[href^="#fn-"]:focus-visible, .single-publication sup > a[href^="#en-"]:hover, .single-publication sup > a[href^="#en-"]:focus-visible, .single-publication sup > a[href*="note-"][id*="note-ref-"]:hover, .single-publication sup > a[href*="note-"][id*="note-ref-"]:focus-visible { text-decoration: underline; } .single-publication sup > a[href^="#fn-"]::after, .single-publication sup > a[href^="#en-"]::after, .single-publication sup > a[href*="note-"][id*="note-ref-"]::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); inline-size: 25px; block-size: 30px; } /* -------------------------------------------------------------------------- 2. The notes list. Set as apparatus, not as body copy: muted ink, one step down, under its own hairline. :has() is used only for the container's decoration, so a browser without it loses the rule and the heading and keeps every individual note styled correctly. -------------------------------------------------------------------------- */ .single-publication ol:has(> li[id^="fn-"]), .single-publication ol:has(> li[id^="en-"]), .single-publication ol:has(> li[id*="note-"]) { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid #DCD5C8; padding-inline-start: 1.5rem; } /* The real heading emitted by wyg-footnote-aria, given the same mono treatment the generated label had. It carries the hairline and the space above it, and the rule immediately below stops the list drawing a second one. */ .single-publication .wyg-notes-heading { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid #DCD5C8; margin-block-end: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #4C5A61; } .single-publication .wyg-notes-heading + ol { margin-block-start: 0; padding-block-start: 0; border-block-start: none; } .single-publication li[id^="fn-"], .single-publication li[id^="en-"], .single-publication li[id*="note-"] { scroll-margin-top: calc( var( --wyg-chrome-bottom, 170px ) + 1.5rem ); /* HO-46: was a flat 9rem, under-cleared the header once the review-gate bar (or an admin bar) was present. See wyg-css-global section 6. */ margin-block-end: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: #4C5A61; } /* Legacy only. The block editor strips the

    inside

  • , so this matches nothing on a current import. Kept for Classic-editor posts 65-67. */ .single-publication li[id*="note-"] > p { margin-block: 0; } /* The note that was just jumped to. */ .single-publication li[id^="fn-"]:target, .single-publication li[id^="en-"]:target, .single-publication li[id*="note-"]:target { background-color: #F4F1EC; box-shadow: 0 0 0 0.5rem #F4F1EC; border-radius: 2px; } /* -------------------------------------------------------------------------- 3. The backlink at the end of each note. Same invisible-hit-area technique, 30 by 37. -------------------------------------------------------------------------- */ .single-publication li[id^="fn-"] a[href^="#fnref-"], .single-publication li[id^="en-"] a[href^="#enref-"], .single-publication li[id*="note-"] a[href*="note-ref-"] { position: relative; display: inline-block; margin-inline-start: 0.35rem; color: #925038; text-decoration: none; } .single-publication li[id^="fn-"] a[href^="#fnref-"]::after, .single-publication li[id^="en-"] a[href^="#enref-"]::after, .single-publication li[id*="note-"] a[href*="note-ref-"]::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); inline-size: 30px; block-size: 37px; } /* -------------------------------------------------------------------------- 1b. Anchor jumps. Turn Elementor's smooth scrolling OFF on this template. Elementor core ships this in uploads/elementor/css/custom-frontend.min.css: @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} With it in force, EVERY in-page anchor jump on this site is dead. Measured 19 August 2026 (HO-42) on posts 418 and 286 with real mouse input: clicking a footnote marker updates the URL, :target matches the right note and the highlight paints, and the page never moves -- scrollY sampled twelve times over 4.8 seconds, unchanged. Setting scroll-behavior:auto and clicking the same marker scrolled immediately, 0 to 4,756px, the note landing clear of the sticky header. That one declaration is the whole difference. NOT AN ELEMENTOR SETTING. The e_smooth_scroll experiment options are all unset; this is Elementor's own default stylesheet, so there is no UI control to turn off and the native-before-custom rule has nothing to offer here. WHY :root AND NOT html. Identical element, but :root scores 0,1,0 against html's 0,0,1, so this wins on specificity rather than on which stylesheet the browser happens to load second. Load order between a Fluent Snippets cached file and Elementor's frontend CSS is not something to build on. SCOPE IS THIS TEMPLATE ONLY -- Todd's call, 19 August. The snippet's own condition is post_type = publication, so this file is not served anywhere else and the rest of the site keeps Elementor's smooth scrolling. The essay page is where the decision is forced: its footnote apparatus is built on fragment links and is unusable without them. NOT A REDUCED-MOTION RULE. wyg-css-global section 3 already sets scroll-behavior:auto !important inside prefers-reduced-motion:reduce -- the OPPOSITE media query to Elementor's, which is why it never counteracted it. This rule is unconditional on purpose and the two do not overlap. -------------------------------------------------------------------------- */ :root { scroll-behavior: auto; } /* -------------------------------------------------------------------------- 2b. Prose lists in the essay body. A Word list arrives from Mammoth as a bare