/* ========================================================================== СКАРЫНА · long-form reading layer (Lane 4 · #4236) Ported from work/comps/css/article.css (comp panel p12 «СЛОЙ ЧТЕНИЯ»). SCOPING CONTRACT (CONTRACT.md §5 / LANE0-PROGRESS B2 open hazard) ------------------------------------------------------------------ EVERY rule below is prefixed with `.skaryna-single`, the class carried by the
element of templates/single.html and by nothing else on the site. Bundled globally this sheet therefore cannot reach another page. The one exception is the @font-face block, which cannot be scoped by language — it is additive and introduces a family name (“Skaryna Display Numerals”) that nothing outside this file references. BINDING CONTRACT ------------------------------------------------------------------ The comp's own class names (.article__title, .fn-ref, .footnotes …) do NOT exist in WordPress output. Selectors bind to the classes WordPress 7.0.3 ACTUALLY emits — measured on wp-skaryna-2d3f, see REPORT.md §G — with the comp names kept only where templates/single.html itself writes them. ========================================================================== */ /* -------------------------------------------------------------------------- 0. DISPLAY NUMERALS — measured fix, not a preference -------------------------------------------------------------------------- Carina AI Antiqua carries 50 codepoints: 35 Cyrillic capitals + 15 marks. No digits, no Latin, no lowercase. The frozen fallback (Fedorovsk CS) is a real antiqua, but measured from its outlines: Fedorovsk digits are OLDSTYLE — 0:395 1:409 9:-204..403 (cap = 700) Fedorovsk Cyrillic caps sit — Н: -161..655 (161/1000 em BELOW the baseline), Latin caps: -2..647 so «…ПЕРВОПЕЧАТКИ 1491 ГОДА» sets its digits at ~58 % of the cap height with a descending 9. Fedorovsk has no `lnum` feature, so there is no OpenType route out of it (features present: ccmp kern mark mkmk salt ss01 ss02 ss10). Evidence: evidence/fontproof.png, band A. Source Serif 4 — already self-hosted for body text — has LINING figures (0,1,4,9 all 655-660, tabular 500) sitting on the baseline. Claim only the codepoints Carina lacks, and scale 660 -> 726 to meet Carina Bold's cap. -------------------------------------------------------------------------- */ @font-face{ font-family:"Skaryna Display Numerals"; src:url("../fonts/source-serif-4-400-700.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0030-0039, U+0041-005A, U+0061-007A, U+00B7, U+2116, U+2013-2014; size-adjust:110%; } /* -------------------------------------------------------------------------- 1. SCOPE ROOT + local tokens -------------------------------------------------------------------------- */ .skaryna-single{ /* --- font roles -------------------------------------------------------- */ /* theme.json `display` is Carina -> Fedorovsk. The numerals face is spliced in between. RECOMMENDED for promotion into theme.json — see REPORT.md §C. */ --sk-lf-display:"Carina AI Antiqua","Skaryna Display Numerals","Fedorovsk CS", "Old Standard TT",Georgia,serif; --sk-lf-prose:var(--wp--preset--font-family--prose); /* Fedorovsk CS — headings */ --sk-lf-body:var(--wp--preset--font-family--ui); /* Source Serif 4 — prose */ --sk-lf-meta:var(--wp--preset--font-family--ui); /* Source Serif 4 — meta */ /* --- SVG colour aliases: REMOVED AT MERGE (Phase A) --------------------- L4 shipped three scoped --slovo-* definitions here; L1 shipped a chrome-tokens-fallback.css; L2's assets/css/skaryna.css defines the full 92-token --slovo-* layer on :root with the same preset bindings. Three copies of a palette is how a palette drifts, so the merge keeps exactly one: L2's. These three lines are deleted, NOT re-pointed. The engravings inherit --slovo-gold / --slovo-oxblood / --slovo-ivory from :root. TO REVERT: restore the three declarations below this comment. */ /* --- reading size (wired control, persisted in localStorage) ----------- */ --sk-lf-scale:1; } :root[data-sk-reading="l"] .skaryna-single{ --sk-lf-scale:1.125; } :root[data-sk-reading="xl"] .skaryna-single{ --sk-lf-scale:1.28; } /* -------------------------------------------------------------------------- 2. THREE-COLUMN READING GRID [ rail | measure | vignette ] -------------------------------------------------------------------------- */ main.skaryna-single{ display:grid; grid-template-columns:minmax(200px,244px) minmax(0,1fr) minmax(232px,300px); gap:clamp(1.5rem,3.6vw,3rem); align-items:start; max-width:1240px; margin:var(--wp--preset--spacing--5) auto var(--wp--preset--spacing--8); padding-inline:var(--wp--preset--spacing--6); } /* the grid's own children must not be re-clamped by the global layout rules */ .skaryna-single > *{ max-width:none; } /* -------------------------------------------------------------------------- 3. CONTENTS RAIL (left, sticky) -------------------------------------------------------------------------- */ .skaryna-single .toc{ position:sticky; top:var(--wp--preset--spacing--5); font-family:var(--sk-lf-meta); } .skaryna-single .toc__summary{ list-style:none; cursor:default; font-size:var(--wp--preset--font-size--caption); letter-spacing:.16em; text-transform:uppercase; color:var(--wp--preset--color--ink); font-weight:700; padding-bottom:var(--wp--preset--spacing--2); border-bottom:2px solid var(--wp--preset--color--gold-line); display:flex; align-items:center; justify-content:space-between; } .skaryna-single .toc__summary::-webkit-details-marker{ display:none; } .skaryna-single .toc__summary::marker{ content:""; } .skaryna-single .toc__summary .toc__chevron{ display:none; } .skaryna-single .toc__list{ list-style:none; margin:var(--wp--preset--spacing--4) 0 0; padding:0; } .skaryna-single .toc__list li{ margin:0; } .skaryna-single .toc__list a{ display:block; padding:.28rem 0 .28rem .7rem; border-left:2px solid transparent; margin-left:-2px; font-size:.84rem; letter-spacing:.01em; text-transform:none; color:var(--wp--preset--color--ink-2); text-decoration:none; line-height:1.35; transition:color 180ms ease; } .skaryna-single .toc__list a:hover{ color:var(--wp--preset--color--accent); } .skaryna-single .toc__list a[aria-current="true"]{ color:var(--wp--preset--color--accent); font-style:italic; border-left-color:var(--wp--preset--color--accent); } .skaryna-single .toc__list--l3{ padding-left:.9rem; } .skaryna-single .toc__dotrule{ border:0; height:0; margin:var(--wp--preset--spacing--4) 0; border-top:1.5px dotted var(--wp--preset--color--border); } .skaryna-single .toc__label{ font-size:var(--wp--preset--font-size--meta); letter-spacing:.16em; text-transform:uppercase; color:var(--wp--preset--color--subtle); margin:0 0 var(--wp--preset--spacing--3); } .skaryna-single .toc__share{ display:flex; gap:.5rem; align-items:center; } /* rail without a contents list: the share label becomes the rail's own head */ .skaryna-single .toc--nocontents{ position:sticky; top:var(--wp--preset--spacing--5); font-family:var(--sk-lf-meta); } .skaryna-single .toc--nocontents .toc__label:first-child{ padding-bottom:var(--wp--preset--spacing--2); border-bottom:2px solid var(--wp--preset--color--gold-line); color:var(--wp--preset--color--ink); font-weight:700; font-size:var(--wp--preset--font-size--caption); letter-spacing:.16em; margin-bottom:var(--wp--preset--spacing--4); } /* cite box */ .skaryna-single .toc__cite{ margin-top:var(--wp--preset--spacing--5); background:var(--wp--preset--color--surface-2); border:1px solid var(--wp--preset--color--border); padding:var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); } .skaryna-single .toc__cite p{ margin:0; max-width:none; font-family:var(--sk-lf-body); font-style:italic; font-size:.82rem; line-height:1.45; color:var(--wp--preset--color--ink-2); } .skaryna-single .toc__doi{ display:block; margin-top:.4rem; font-style:normal; font-size:.72rem; color:var(--wp--preset--color--ink-3); } .skaryna-single .toc__fleuron{ display:block; margin:var(--wp--preset--spacing--5) auto 0; width:26px; color:var(--wp--preset--color--gold); } /* -------------------------------------------------------------------------- 4. ICON BUTTONS — only controls that DO something reach this sheet -------------------------------------------------------------------------- */ .skaryna-single .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; cursor:pointer; border:1px solid var(--wp--preset--color--border); color:var(--wp--preset--color--ink); background:var(--wp--preset--color--surface); transition:background 180ms ease,color 180ms ease,border-color 180ms ease; } .skaryna-single .icon-btn:hover{ background:var(--wp--preset--color--ink); color:var(--wp--preset--color--surface); border-color:var(--wp--preset--color--ink); } .skaryna-single .icon-btn:focus-visible{ outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; } .skaryna-single .icon-btn svg{ width:18px; height:18px; } /* live-region confirmation for the share control (no alert(), no dead click) */ .skaryna-single .sk-lf-said{ font-family:var(--sk-lf-meta); font-size:.72rem; line-height:1.3; color:var(--wp--preset--color--ink-3); margin:.45rem 0 0; min-height:1.3em; } .skaryna-single .sk-lf-said code{ font-family:var(--wp--preset--font-family--mono); font-size:.68rem; overflow-wrap:anywhere; } /* -------------------------------------------------------------------------- 5. CENTRE — meta bar, title, byline -------------------------------------------------------------------------- */ .skaryna-single .article{ min-width:0; } .skaryna-single .article__metabar{ display:flex; align-items:center; justify-content:space-between; gap:var(--wp--preset--spacing--4); flex-wrap:wrap; padding-bottom:var(--wp--preset--spacing--3); } .skaryna-single .article__status, .skaryna-single .article__status .wp-block-post-terms, .skaryna-single .article__status .wp-block-post-terms a{ font-family:var(--sk-lf-meta); font-size:var(--wp--preset--font-size--meta); letter-spacing:.16em; text-transform:uppercase; color:var(--wp--preset--color--subtle); margin:0; max-width:none; text-decoration:none; } .skaryna-single .article__status{ display:flex; gap:.55rem; align-items:baseline; flex-wrap:wrap; } .skaryna-single .article__status > * + *::before{ content:"· "; } .skaryna-single .article__tools{ display:flex; gap:.4rem; align-items:center; } .skaryna-single .article__tools .icon-btn{ width:34px; height:34px; border-color:transparent; background:transparent; } .skaryna-single .article__tools .icon-btn:hover{ background:var(--wp--preset--color--surface-2); color:var(--wp--preset--color--accent); } /* NOTE the face: this control's label is «Аа» — one capital, one LOWERCASE. Carina has no lowercase, so binding it to --sk-lf-display would set «А» in Carina and «а» in Fedorovsk: two faces inside a 2-glyph button. Bound to the prose face so both glyphs come from one font. */ .skaryna-single .article__tools .icon-btn--type{ font-family:var(--sk-lf-prose); font-weight:700; letter-spacing:-.02em; } .skaryna-single .article__tools .icon-btn--type b{ font-size:1rem; } .skaryna-single .article__tools .icon-btn--type span{ font-size:.7rem; } /* the title is core/post-title */ .skaryna-single .wp-block-post-title{ font-family:var(--sk-lf-display); font-weight:700; font-size:clamp(1.95rem,3.5vw,2.75rem); line-height:1.08; letter-spacing:.004em; color:var(--wp--preset--color--ink); text-transform:uppercase; /* The comp clamps the title to 15ch, a value tuned to ITS 34-character headline. The four real posts run 53-68 characters (median 64, 1.9x), and 15ch stacks those into SIX lines that swamp the meta bar. 20ch keeps the narrow monumental silhouette and lands real titles on four lines. Measured deviation, not fidelity drift — see REPORT.md §F. */ margin:var(--wp--preset--spacing--2) 0 0; max-width:min(100%,20ch); text-wrap:balance; } .skaryna-single .article__byline{ display:flex; gap:.55rem; align-items:baseline; flex-wrap:wrap; font-family:var(--sk-lf-meta); font-size:var(--wp--preset--font-size--caption); letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--ink-2); margin:var(--wp--preset--spacing--4) 0 0; max-width:none; } .skaryna-single .article__byline > * + *::before{ content:"· "; } .skaryna-single .article__byline .wp-block-post-author-name{ color:var(--wp--preset--color--ink); font-weight:700; } .skaryna-single .article__byline > div{ display:inline; } .skaryna-single .article__rule{ border:0; height:0; width:100%; margin:var(--wp--preset--spacing--4) 0 var(--wp--preset--spacing--5); border-top:2px solid var(--wp--preset--color--gold-line); } /* -------------------------------------------------------------------------- 6. BODY PROSE (core/post-content) -------------------------------------------------------------------------- */ .skaryna-single .wp-block-post-content{ font-family:var(--sk-lf-body); font-size:calc(var(--wp--preset--font-size--body) * var(--sk-lf-scale)); line-height:1.62; color:var(--wp--preset--color--ink); font-feature-settings:"kern" 1,"liga" 1,"onum" 1,"pnum" 1; } .skaryna-single .wp-block-post-content > p{ max-width:68ch; margin:0; } .skaryna-single .wp-block-post-content > p + p{ margin-top:var(--wp--preset--spacing--4); } .skaryna-single .wp-block-post-content h2, .skaryna-single .wp-block-post-content .wp-block-heading{ font-family:var(--sk-lf-prose); color:var(--wp--preset--color--ink); scroll-margin-top:var(--wp--preset--spacing--6); } .skaryna-single .wp-block-post-content h2{ font-size:var(--wp--preset--font-size--h2); line-height:1.2; margin:var(--wp--preset--spacing--7) 0 var(--wp--preset--spacing--4); } .skaryna-single .wp-block-post-content > h2:first-child{ margin-top:0; } .skaryna-single .wp-block-post-content h3{ font-size:var(--wp--preset--font-size--h3); line-height:1.25; margin:var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--3); } .skaryna-single .wp-block-post-content a{ color:var(--wp--preset--color--link); text-underline-offset:.14em; text-decoration-thickness:from-font; } /* -------------------------------------------------------------------------- 7. DROP-CAP — emitted by inc/ as The comp's own class names are kept VERBATIM here (dropcap__deco, orn-divider, toc__chevron, toc__fleuron, reading-aside__fleuron) because those strings live INSIDE the transported SVG bytes. Renaming them to a tidier `sk-` prefix would edit the bytes and break G9. They are safe un-prefixed only because every selector is scoped to .skaryna-single. -------------------------------------------------------------------------- */ .skaryna-single .dropcap{ float:left; margin:.12em .7rem .1rem 0; width:3.15em; height:3.15em; position:relative; background:var(--wp--preset--color--ink); color:var(--wp--preset--color--surface); display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(251,247,238,.16), inset 0 0 0 4px var(--wp--preset--color--ink), inset 0 0 0 5px rgba(251,247,238,.55); } .skaryna-single .dropcap__glyph{ font-family:var(--sk-lf-display); font-weight:700; font-size:2.35em; line-height:1; color:var(--wp--preset--color--surface); position:relative; z-index:2; transform:translateY(-.02em); } .skaryna-single .dropcap__deco{ position:absolute; inset:0; z-index:1; pointer-events:none; color:var(--wp--preset--color--gold); } /* No-PHP degradation: if inc/skaryna-longform.php is not loaded, the same paragraph still gets a (flat, un-engraved) drop-cap from ::first-letter. The class below is added by the template, removed by the PHP when it has done the real split — so the two can never both apply. */ .skaryna-single .wp-block-post-content.dropcap-css > p:first-of-type::first-letter{ float:left; font-family:var(--sk-lf-display); font-weight:700; font-size:3.2em; line-height:.86; margin:.02em .5rem 0 0; padding:.12em .16em; background:var(--wp--preset--color--ink); color:var(--wp--preset--color--surface); } @media (max-width:480px){ .skaryna-single .dropcap{ width:2.8em; height:2.8em; } .skaryna-single .dropcap__glyph{ font-size:2em; } } /* -------------------------------------------------------------------------- 8. QUOTES — core/pullquote and core/quote, real emitted classes -------------------------------------------------------------------------- */ .skaryna-single .wp-block-pullquote{ margin:var(--wp--preset--spacing--6) 0; padding:0 var(--wp--preset--spacing--5); border:0; border-left:3px solid var(--wp--preset--color--accent); background:none; text-align:left; max-width:40ch; } .skaryna-single .wp-block-pullquote blockquote{ margin:0; padding:0; border:0; font-family:var(--sk-lf-prose); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.55rem); line-height:1.34; color:var(--wp--preset--color--accent); } .skaryna-single .wp-block-pullquote p{ margin:0; font-size:inherit; } .skaryna-single .wp-block-pullquote cite{ display:block; margin-top:var(--wp--preset--spacing--3); font-family:var(--sk-lf-meta); font-style:normal; text-transform:uppercase; font-size:var(--wp--preset--font-size--caption); letter-spacing:.1em; color:var(--wp--preset--color--ink-3); } .skaryna-single .wp-block-quote{ max-width:62ch; border-left:3px solid var(--wp--preset--color--gold-line); padding-left:var(--wp--preset--spacing--5); margin:var(--wp--preset--spacing--6) 0; font-style:italic; color:var(--wp--preset--color--ink-2); } .skaryna-single .wp-block-quote cite{ display:block; margin-top:var(--wp--preset--spacing--3); font-family:var(--sk-lf-meta); font-style:normal; font-size:var(--wp--preset--font-size--caption); letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); } /* -------------------------------------------------------------------------- 9. ORNAMENTS — emitted by the skaryna/ornament block -------------------------------------------------------------------------- */ .skaryna-single .orn-divider{ display:block; width:100%; height:auto; margin:var(--wp--preset--spacing--6) auto; color:var(--wp--preset--color--ink); } .skaryna-single .orn-divider--tight{ margin:var(--wp--preset--spacing--5) auto; max-width:420px; } .skaryna-single .figure-engraving{ margin:var(--wp--preset--spacing--6) 0; background:var(--wp--preset--color--surface); border:2px solid var(--wp--preset--color--ink); padding:var(--wp--preset--spacing--3); position:relative; } .skaryna-single .figure-engraving::before{ content:""; position:absolute; inset:5px; border:.75px solid var(--wp--preset--color--ink); opacity:.5; pointer-events:none; } .skaryna-single .figure-engraving > svg{ width:100%; height:auto; display:block; color:var(--wp--preset--color--ink); } .skaryna-single .figure-engraving figcaption{ margin-top:var(--wp--preset--spacing--3); text-align:center; font-family:var(--sk-lf-meta); font-style:italic; font-size:var(--wp--preset--font-size--caption); color:var(--wp--preset--color--ink-3); } /* -------------------------------------------------------------------------- 10. FOOTNOTES + BIBLIOGRAPHY — core/footnotes real markup refs: 1 list:
  1. … ↩︎
-------------------------------------------------------------------------- */ .skaryna-single .wp-block-post-content sup.fn{ font-size:.7em; line-height:0; vertical-align:super; } .skaryna-single .wp-block-post-content sup.fn a{ color:var(--wp--preset--color--accent); text-decoration:none; padding:0 .1em; } .skaryna-single .wp-block-post-content sup.fn a:hover{ text-decoration:underline; } .skaryna-single .wp-block-footnotes{ margin:var(--wp--preset--spacing--7) 0 0; padding-left:1.4rem; border-top:1px solid var(--wp--preset--color--border); padding-top:var(--wp--preset--spacing--5); } .skaryna-single .wp-block-footnotes li{ font-family:var(--sk-lf-body); font-size:.84rem; line-height:1.5; color:var(--wp--preset--color--ink-2); margin-bottom:var(--wp--preset--spacing--3); max-width:66ch; scroll-margin-top:var(--wp--preset--spacing--6); } .skaryna-single .wp-block-footnotes li:target{ background:var(--wp--preset--color--surface-2); } /* the back-link glyph ↩︎ (U+21A9 U+FE0E) is in NONE of the five theme faces — keep it a text arrow rather than let a colour-emoji font claim it. */ .skaryna-single .wp-block-footnotes a[href$="-link"]{ color:var(--wp--preset--color--accent); text-decoration:none; font-family:ui-sans-serif,system-ui,sans-serif; font-variant-emoji:text; } .skaryna-single .wp-block-post-content .biblio{ list-style:none; margin:0; padding:0; } .skaryna-single .wp-block-post-content .biblio li{ padding-left:1.4rem; text-indent:-1.4rem; font-size:.88rem; line-height:1.5; color:var(--wp--preset--color--ink-2); margin-bottom:var(--wp--preset--spacing--3); max-width:66ch; } .skaryna-single .wp-block-post-content .biblio li em{ color:var(--wp--preset--color--ink); } /* -------------------------------------------------------------------------- 11. RIGHT ASIDE — engraved vignette -------------------------------------------------------------------------- */ .skaryna-single .reading-aside{ position:sticky; top:var(--wp--preset--spacing--5); } .skaryna-single .vignette{ margin:0; background:var(--wp--preset--color--surface); border:2px solid var(--wp--preset--color--ink); padding:var(--wp--preset--spacing--4); position:relative; } .skaryna-single .vignette::before{ content:""; position:absolute; inset:6px; border:.75px solid var(--wp--preset--color--ink); opacity:.5; pointer-events:none; } .skaryna-single .vignette > svg{ width:100%; height:auto; display:block; color:var(--wp--preset--color--ink); } .skaryna-single .vignette figcaption{ margin-top:var(--wp--preset--spacing--3); text-align:center; font-family:var(--sk-lf-meta); font-style:italic; font-size:var(--wp--preset--font-size--caption); color:var(--wp--preset--color--ink-3); } .skaryna-single .reading-aside__fleuron{ display:block; margin:var(--wp--preset--spacing--4) auto 0; width:26px; color:var(--wp--preset--color--gold); } /* -------------------------------------------------------------------------- 12. RESPONSIVE (identical breakpoints to the comp) -------------------------------------------------------------------------- */ @media (max-width:1080px){ main.skaryna-single{ grid-template-columns:minmax(190px,224px) minmax(0,1fr); } .skaryna-single .reading-aside{ grid-column:1 / -1; position:static; max-width:480px; margin-inline:auto; } } @media (max-width:760px){ main.skaryna-single{ grid-template-columns:1fr; gap:var(--wp--preset--spacing--5); } .skaryna-single .toc{ position:static; border:1px solid var(--wp--preset--color--border); padding:var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); } .skaryna-single .toc__summary{ cursor:pointer; border-bottom:0; padding-bottom:0; } .skaryna-single .toc__summary .toc__chevron{ display:inline-block; transition:transform 180ms ease; } .skaryna-single .toc[open] .toc__summary .toc__chevron{ transform:rotate(90deg); } .skaryna-single .toc[open] .toc__summary{ padding-bottom:var(--wp--preset--spacing--3); border-bottom:2px solid var(--wp--preset--color--gold-line); } .skaryna-single .wp-block-post-title{ max-width:none; } } @media (min-width:761px){ .skaryna-single .toc__body{ display:block !important; } .skaryna-single .toc__summary{ pointer-events:none; } } @media (prefers-reduced-motion:reduce){ .skaryna-single *{ transition:none !important; } } /* -------------------------------------------------------------------------- 13. PRINT -------------------------------------------------------------------------- */ @media print{ main.skaryna-single{ display:block; max-width:none; padding-inline:0; } .skaryna-single .toc, .skaryna-single .reading-aside, .skaryna-single .article__tools{ display:none; } .skaryna-single .wp-block-post-title{ color:#000; } .skaryna-single .dropcap{ background:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact; } }