/*
Theme Name:     Fox Child — Ramgavar
Theme URI:      https://ramgavar.am/
Description:    Child theme for The Fox (parent version 7.1, the v6 line). Carries the Ramgavar newspaper's own customisations: the Armenian typography layer, bilingual layout corrections, and any template overrides. Editorial lockdown deliberately does NOT live here — it is in mu-plugins/, so that switching or updating the theme can never re-open the admin surface.
Author:         Ռամկավար Ազատական Կուսակցութիւն — ADL Central Board
Author URI:     https://ramgavar.am/
Template:       fox
Version:        1.0.0
Requires PHP:   7.4
License:        Themeforest Standard Licence (parent) / GPL-2.0-or-later (this child)
Text Domain:    ramgavar
Tags:           custom-menu, featured-images, theme-options, translation-ready, rtl-language-support
*/

/* ==========================================================================
   ARMENIAN TYPOGRAPHY LAYER
   ==========================================================================

   The problem this solves
   -----------------------
   Fox routes every font decision through three CSS custom properties that its
   Customizer writes into :root at wp_head priority 10 —

       --font-body     consumed by 12 selectors
       --font-heading  consumed by 19 selectors
       --font-nav      consumed by  1 selector

   Those properties hold Latin families (Inter, Playfair, whatever the editor
   picks). None of them cover U+0530–058F, so every Armenian headline, byline,
   category label and menu item would render as tofu boxes or fall through to
   an arbitrary system serif that does not match the paper at all.

   Why the fix looks like this
   ---------------------------
   The selector lists below are not hand-written. They were extracted from the
   parent's own compiled stylesheet by scanning for `font-family: var(--font-*)`
   so that coverage is exact rather than guessed. If Fox is updated, re-run that
   extraction and diff.

   Each rule uses --ram-font-*, NOT --font-*.

   That distinction is the whole fix, and it is not cosmetic. Fox's variables
   already END in a generic:

       --font-body: "Noto Sans", sans-serif;

   so appending Armenian in CSS would produce

       "Noto Sans", sans-serif, "Noto Sans Armenian", sans-serif
                    ^^^^^^^^^^ generic: always matches, never falls through

   and the Armenian face would be unreachable. Font matching walks the list per
   glyph and stops at the first family that can render it; a generic can always
   render it, by definition. Armenian text would silently pick up whatever the
   visitor's system sans happens to be — different on every machine, and close
   enough to right that nobody notices for months.

   So the composition happens once, in PHP (ramgavar_compose_font_stacks in
   functions.php), which inserts the Armenian face BEFORE the generic:

       --ram-font-body: "Noto Sans", "Noto Sans Armenian", sans-serif;

   Armenian still comes AFTER the Latin family, which is what CLAUDE.md
   requires — fallback resolves per glyph, so Latin is untouched.

   The var() fallback to --font-body below matters: if the PHP hook ever fails
   to run, the rule degrades to Fox's own stack (correct Latin, no Armenian)
   instead of becoming invalid and dropping font-family entirely.

   Belt and braces: fonts/armenian.css also constrains each @font-face with a
   unicode-range covering only the Armenian block, so even a mis-ordered stack
   could not let Noto Armenian claim a Latin glyph.
   ========================================================================== */

/* --- body copy ---------------------------------------------------------- */
body,
input[type=text],
input[type=search],
input[type=number],
input[type=email],
input[type=url],
input[type=date],
input[type=password],
textarea,
.fox-input,
.font-body,
#ez-toc-container {
	font-family: var(--ram-font-body, var(--font-body));
}

/* --- headings, buttons, meta -------------------------------------------- */
h1, h2, h3, h4, h5, h6,
input[type=submit],
button,
.btn56,
.meta56,
.meta56__category--fancy,
.titlebar56__label,
.terms56 a,
.font-heading,
.wp-block-cover-text,
.pagination56,
.review56__item__criterion,
.review56__item__score,
.review56__text {
	font-family: var(--ram-font-heading, var(--font-heading));
}

/* --- navigation --------------------------------------------------------- */
.font-nav {
	font-family: var(--ram-font-nav, var(--font-nav));
}

/* ==========================================================================
   BILINGUAL LAYOUT CORRECTIONS
   ==========================================================================
   Armenian sets longer than English for the same content and breaks
   differently — Eastern Armenian in particular has few natural break
   opportunities in compound words. Headlines that fit on two lines in English
   routinely need three in Armenian, so anything with a fixed height or a
   line-clamp has to be verified in BOTH trees (CLAUDE.md hard rule).
   ========================================================================== */

/* --------------------------------------------------------------------------
   UPPERCASE SUPPRESSION — and why it lives here rather than in the theme mods
   --------------------------------------------------------------------------
   The time5 design uppercases almost every piece of chrome: the tagline, post
   meta, category labels, section headings, widget titles, buttons, the archive
   titlebar, the article subtitle and standfirst rules, the footer nav.

   Armenian has a genuine bicameral alphabet, so text-transform: uppercase does
   NOT produce tofu — it produces something worse, which is legible but wrong.
   Armenian majuscules are wide, heavily vertical, and were never designed to
   be set as running small text; ԳԼԽԱՒՈՐ at 11px with 0.5px tracking reads as a
   solid grey bar rather than a word.

   The fix is HERE and not in tools/setup/02-theme.php because a theme_mod is
   one global value shared by both language trees. Setting `transform: none`
   there would strip the uppercase from /en/ too, and /en/ is entitled to the
   design the demo actually has. An html[lang^="hy"] rule is per-tree, so the
   two languages can each have the treatment that suits their script.

   Keep this list in step with 02-theme.php: every mod there that carries
   `'transform' => 'uppercase'` needs its selector here.
   -------------------------------------------------------------------------- */
html[lang^="hy"] .slogan,
html[lang^="hy"] .site-tagline,
html[lang^="hy"] .meta56,
html[lang^="hy"] .meta56__category--fancy,
html[lang^="hy"] .titlebar56__label,
html[lang^="hy"] .titlebar56__title,
html[lang^="hy"] .pagination56,
html[lang^="hy"] .heading56,
html[lang^="hy"] .widget-title,
html[lang^="hy"] .btn56,
html[lang^="hy"] .single56__subtitle,
html[lang^="hy"] .single56__heading,
html[lang^="hy"] .terms56 a,
html[lang^="hy"] .footer56__nav a,
html[lang^="hy"] .footer_bottom56 .menu a {
	text-transform: none;
	letter-spacing: 0;
}

/* The primary navigation deliberately KEEPS its uppercase in both trees. The
   nav is the one place the demo's rhythm depends on caps, the labels are short
   enough that the density does not hurt, and Armenian majuscules at 16px are
   comfortable. Only the tracking comes off — 0px is time5's value for Latin,
   but Armenian caps need the default fit, not a tightened one. */
html[lang^="hy"] .mainnav ul.menu > li > a {
	letter-spacing: 0;
}

/* Armenian word-joining: allow long compounds to break rather than overflow
   their container. Applies only to the Armenian tree. */
html[lang^="hy"] h1,
html[lang^="hy"] h2,
html[lang^="hy"] h3 {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* RUNNING TEXT IS JUSTIFIED on both papers (2026-10-02, relayed by Jack). Body
   paragraphs and list items in an article or page — not headlines, captions,
   quotes, tables, the contact/subscribe forms, or anything the editor aligned
   on purpose (the block editor's has-text-align-* and an inline text-align). */
.entry-content :is(p, li):not(
	[class*="has-text-align"], [style*="text-align"], .wp-caption-text, .wp-block-button,
	.rg-contact *, .ram-sub *, figure *, blockquote *, table *
) {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}

/* The homepage photo strip runs five overlay cards across a 1230px container,
   so each headline gets roughly 240px inside a 320px-tall card. Armenian sets
   15-20% longer than English for the same content, which pushes those titles
   to four and five lines and overruns the card.

   Stepping the type down here rather than dropping to four columns keeps the
   column count — which is a theme_mod, and therefore global — at time5's five
   for both trees. */
html[lang^="hy"] .post56--ontop .title56 {
	font-size: 1.05em;
	line-height: 1.25;
}

/* ==========================================================================
   PROJECT CSS
   ==========================================================================
   Newspaper-specific styling goes below this line. Internal-document house
   style (Fraunces / Spline Sans / ivory) does NOT apply here — that canon is
   for docs/ only. The reader-facing paper follows its own design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header utilities: language badge + dark-mode switcher
   --------------------------------------------------------------------------
   These two sit side by side top-right and must read as ONE pair of controls.
   Fox's own switcher is the reference — .lamp56__part, measured against the
   time5 demo: 24px tall, 0 10px padding, 40px radius, 11px label, 18px icon.
   The language badge copies those numbers exactly rather than inheriting them,
   because .lamp56 span hardcodes `font-family: Arial, Helvetica, sans-serif`
   (fox/css56/style.css:4542) and Arial carries no Armenian — ՀԱՅ would fall
   through to whatever the reader's OS has, or to tofu.

   Fox already lays the right column out (flex, flex-end, 8px between
   siblings, :3767-3783), so there is no layout CSS here beyond the pills.
   -------------------------------------------------------------------------- */

/* ---- 1. Fox's own switcher: give its label a font that covers Armenian ---- */
.lamp56 span {
	font-family: var(--font-nav, inherit);
}

/* ---- 2. Label the DESTINATION, not the current mode ----------------------
   Fox shows the sun and the word "Light" while the site IS light, but gives
   that same element aria-label "switch to dark". So the theme announces the
   destination to a screen reader and the current state to everyone else — two
   different things on one control.

   Inverting which half is visible makes the visible word the destination, and
   the announcement then agrees with it. It also matches the language badge,
   which shows ENG on the Armenian tree. One rule for both: the label is what
   you get if you click.

   The paired aria strings are corrected in inc/theme-strings-hy.php — see the
   note there explaining why `switch_to_light` now reads "switch to dark".
   ------------------------------------------------------------------------- */
.lamp56__dark  { display: flex; }
.lamp56__light { display: none; }

.darkmode .lamp56__dark  { display: none; }
.darkmode .lamp56__light { display: flex; }

/* Fox tints the two halves differently (a light ground for one, a light-on-dark
   ground for the other). Now that they are swapped, swap the grounds back so
   the pill still reads correctly against the header in each mode. */
.lamp56__dark            { background: rgba(0, 0, 0, 0.1); }
.darkmode .lamp56__light { background: rgba(255, 255, 255, 0.2); }

/* ---- 3. The language badge, matched to .lamp56__part --------------------- */
.ram-lang {
	display: flex;
	align-items: center;
}

.ram-lang__part {
	height: 24px;                 /* .lamp56__part via darkmode_switcher_size */
	padding: 0 10px;
	border-radius: 40px;
	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, 0.1);
	color: inherit;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ram-lang__part:hover,
.ram-lang__part:focus-visible {
	background: rgba(0, 0, 0, 0.2);
	color: inherit;
}

.ram-lang__abbr {
	/* .lamp56 span's metrics — 11px / uppercase / 0.2px / 400 — but with the
	   project stack so Armenian resolves to Noto instead of falling out of
	   Arial. */
	font-family: var(--font-nav, inherit);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.darkmode .ram-lang__part { background: rgba(255, 255, 255, 0.2); }
.darkmode .ram-lang__part:hover,
.darkmode .ram-lang__part:focus-visible { background: rgba(255, 255, 255, 0.32); }

/* Visible label is a three-letter abbreviation and is aria-hidden; the full
   autonym rides alongside for assistive technology. Not display:none, which
   would remove it from the accessibility tree as well. */
.ram-lang__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   DROP CAP — Latin only
   --------------------------------------------------------------------------
   time5 opens every article with a 120px drop cap, and `dropcap_typography` in
   02-theme.php carries its exact values. That mod alone renders NOTHING for
   us, and it is worth knowing why before someone spends an afternoon on it:

   Fox 7's own drop-cap selector is

       .wi-dropcap,
       .enable-dropcap .dropcap-content > p:first-of-type:first-letter,
       p.has-drop-cap:not(:focus):first-letter

   and in the v6/v7 render path NOTHING adds `.enable-dropcap` — the only code
   that ever set it lives in the legacy v55/ tree, which this theme no longer
   routes through. So the live hook is Gutenberg's `p.has-drop-cap`, which is a
   per-block editor toggle. All 4,808 imported posts are classic HTML, so not
   one of them can match. The mod is set anyway, because it is the right value
   the day someone does toggle the block option.

   This rule is the one that actually fires. It is scoped to html[lang="en"] on
   purpose, and that is not a stylistic preference: a drop cap works by setting
   one letter at five or six times the body size against the following lines.
   Armenian majuscules are not built for it — they are wide, they carry
   descenders (ց ղ ջ փ ք) that collide with the second and third lines, and no
   Armenian typographic tradition uses the form. At 120px an Armenian initial
   reads as a rendering fault, not a flourish.
   -------------------------------------------------------------------------- */
html[lang="en"] .single56__post_content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--ram-font-heading, var(--font-heading));
	font-weight: 400;
	font-size: 120px;
	line-height: 0.8;
	text-transform: uppercase;
	margin: 0.05em 0.08em 0 0;
}

@media (max-width: 600px) {

	html[lang="en"] .single56__post_content > p:first-of-type::first-letter {
		font-size: 50px;
	}
}

/* --------------------------------------------------------------------------
   Card headline clamping
   --------------------------------------------------------------------------
   Measured against the demo, our lead-section cards ran to 6 lines where the
   demo's run to 2-3. That is not a font-size problem — the size is already
   20.8px in both — it is a HEADLINE LENGTH problem, and it is structural
   rather than editorial: this paper's headlines are genuinely long
   ("Հաղորդագրութիւն՝ Ռամկավար Ազատական Կուսակցութեան հերթական Լ. (30-րդ)
   Ընդհանուր Պատգամաւորական ժողով"), and Armenian runs 15-20% longer than the
   English equivalent on top of that.

   Unclamped, one long headline stretches its card, unbalances the row, and
   leaves the neighbouring column with a block of dead white space. Clamping is
   what makes a news grid look composed rather than accidental.

   Clamped, not truncated in PHP: the full headline stays in the DOM for search
   engines, screen readers and the browser's find-in-page. Only the visual box
   is bounded.
   -------------------------------------------------------------------------- */

.blog56 .post56--grid .title56,
.blog56 .post56--list .title56 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* The lead story carries the section and is allowed more room. */
.blog56 .post56--big .title56,
.blog56 .col-3-4 .post56--grid .title56 {
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* Overlay cards sit on the image and have the least room of all. */
.post56--ontop .title56 {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* --------------------------------------------------------------------------
   Uniform card image ratios
   --------------------------------------------------------------------------
   A news grid only reads as designed when every card in a row is the same
   shape. Ours were not: measured against the demo, three stacked cards in the
   lead column came out 211x107, 211x159 and 211x140 where the demo's are a
   uniform 221x147.

   This CANNOT be fixed by choosing a hard-crop image size, and that is the
   part worth recording. WordPress will not upscale, so a source smaller than
   the crop simply has no such file and silently falls back to whatever exists:

       nikolelogo      769x366  -> thumbnail-large (720x480) generated  ✓
       105-site-log    322x243  -> only medium/thumbnail/tiny exist     ✗

   A 4,808-article archive migrated from a decade of Drupal is full of small
   scans, emblems and logos like the second one. So the ratio has to be
   enforced at render time, on whatever file the fallback produced.

   object-fit: cover crops to fill rather than distorting; object-position
   keeps the top of the frame, which is where faces and headlines sit in press
   photography. Images smaller than the box are scaled up by the browser — very
   slightly soft on the worst sources, which is a fair trade for a grid that
   lines up.
   -------------------------------------------------------------------------- */

.blog56 .post56--grid:not(.post56--ontop) .thumbnail56 img,
.blog56 .post56--grid:not(.post56--ontop) > a > img,
.blog56 .post56--grid:not(.post56--ontop) img.attachment-thumbnail-large,
.blog56 .post56--grid:not(.post56--ontop) img.attachment-medium,
.blog56 .post56--grid:not(.post56--ontop) img.attachment-thumbnail-medium {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center top;
}

/* The lead photograph keeps the demo's own 3:2 and is already large enough
   in every case, but pinning it stops one short image collapsing the row. */
.blog56 .col-3-4 .post56--grid img,
.blog56 .post56--big img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Square rail thumbnails stay square. */
.post56--list--thumb-left img,
.post56--list--thumb-right img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Headlines must break, not clip
   --------------------------------------------------------------------------
   The 5-across overlay strip gives each card roughly 215px. Words longer than
   that had nowhere to go: `overflow: hidden` from the line clamp cut them
   mid-word ("Announceme", "Ambassador"), which looks like a rendering fault
   rather than a design.

   Both languages need this, for different reasons. Armenian forms long
   compounds (Յայտարարութիւններ, Հաղորդագրութիւն). English here carries
   institutional vocabulary that is nearly as long — "Announcements",
   "Ambassador", "Commemorating". The existing overflow-wrap rule in this file
   was scoped to html[lang^="hy"] h1-h3 and never reached card titles in either
   tree.

   overflow-wrap rather than word-break: it breaks a word ONLY when it cannot
   fit on a line of its own, instead of breaking every line at the box edge.
   -------------------------------------------------------------------------- */

.post56 .title56,
.post56 .title56 a,
.blog56 .title56,
.heading56__text {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* Overlay cards are the tightest box on the page — give the type a little
   less to do so two clamped lines actually hold a headline. */
.post56--ontop .title56 {
	font-size: 1.05em;
	line-height: 1.2;
}

html[lang^="hy"] .post56--ontop .title56 {
	/* Armenian runs 15-20% longer than the English equivalent for the same
	   headline, and these cards have no room to grow. */
	font-size: 0.95em;
}

/* --------------------------------------------------------------------------
   Sidebar list items must fit their sidebar
   --------------------------------------------------------------------------
   The lead rail is 220px wide (sidebar_width), but its post rows measured
   271px and spilled 51px past the container, clipping every headline at the
   page edge.

   This is the flexbox min-width default, not a Fox bug. A flex item's
   `min-width` is `auto`, which resolves to its CONTENT width — so a text
   column beside a fixed-width thumbnail will not shrink below its longest
   unbreakable run, and instead pushes the row wider than its parent. It only
   became visible once the real `sidebar_width` reached the page, because
   before that the rail was wide enough to hide it.

   `min-width: 0` restores the ability to shrink; `max-width: 100%` stops the
   row itself exceeding the column even if a child still misbehaves.
   -------------------------------------------------------------------------- */

.post56--widget,
.main-section-sidebar .post56,
.widget56 .post56--list {
	max-width: 100%;
}

.post56--widget .post56__text,
.main-section-sidebar .post56__text,
.widget56 .post56--list .post56__text {
	min-width: 0;
	flex: 1 1 auto;
}

/* The thumbnail keeps its declared size and stops competing for the row. */
.post56--widget .thumbnail56,
.main-section-sidebar .thumbnail56 {
	flex: 0 0 auto;
}

/* The rail's list is a CSS grid, and its track was sizing to content: a 220px
   sidebar held a 271px track, so every row overflowed and headlines were cut
   at the page edge. Capping the ITEM does nothing here, because 100% resolves
   to the oversized track — the track itself has to be allowed to shrink.
   minmax(0, 1fr) overrides the implicit `auto` minimum that grid (like flex)
   applies to its children. */
.blog56--list.blog56--widget,
.main-section-sidebar .blog56--list,
.secondary56 .blog56--list {
	grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   Article standfirst
   --------------------------------------------------------------------------
   The demo's subtitle is a written standfirst of two or three lines. Ours is
   `subtitle_display: excerpt`, because the migrated corpus has no subtitle
   field at all — so without it that line of the design would simply never
   appear. The cost is length: an auto-excerpt ran to ten lines of grey type
   between the headline and the photograph, which buries the image and reads as
   an accident.

   Clamped to three lines, matching the demo's proportion. The full excerpt
   stays in the DOM.

   The real fix is editorial — a written standfirst per article — and this is
   what makes the layout right until there is one.
   -------------------------------------------------------------------------- */

.single56__subtitle,
.post-subtitle {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Webstart weight mapping for the Armenian tree
   --------------------------------------------------------------------------
   Webstart ships four static weights — 300 / 400 / 700 / 900. The theme's
   typography mods carry time5's numbers, chosen against variable Latin faces
   that have every intermediate weight, so a few of them land between
   Webstart's cuts.

   CSS weight matching does not round to nearest. For a requested weight in
   400-500 it searches DOWNWARD first, so `logo_typography.weight: 500` — Zilla
   Slab has a 500 — resolves the Armenian masthead to Webstart 400 and the
   paper's name renders thin. Above 500 it searches upward, so 600 correctly
   reaches 700 and needs nothing.

   Scoped to html[lang^="hy"]: the Latin tree keeps Zilla Slab 500 exactly as
   the demo has it. Changing the theme_mod instead would have cost /en/ the
   weight it is supposed to have.
   -------------------------------------------------------------------------- */

html[lang^="hy"] .text-logo {
	font-weight: 900;
}

/* Section headings and the archive titlebar sit on --font-custom-1 (Oswald →
   Webstart). Oswald reads as a condensed display sans at 400; Webstart at 400
   is lighter than that beside it, so lift the Armenian to 700 to match the
   optical weight rather than the numeric one. */
html[lang^="hy"] .heading56__text,
html[lang^="hy"] .titlebar56__title {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Armenian rail items stack; Latin ones stay side by side
   --------------------------------------------------------------------------
   The lead rail is 220px, and Fox's list item puts a 100px thumbnail beside the
   headline — leaving 120px of text column. Measured against the real corpus,
   the longest single Armenian word in that rail is Պատգամաւորական at 178px.
   It is 48% wider than the space it has.

   No type choice fixes that. Reducing the size enough to fit (≈13px) makes a
   rail headline unreadable, and shrinking the thumbnail only buys ~30px. The
   word simply needs more width than a side-by-side row can give it, so on the
   Armenian tree the item stacks and the headline gets the full 220px.

   Latin is left exactly as the demo has it: the longest English equivalent
   ("Congratulatory") is ~110px and fits the 120px column with room. This is
   the same rule the rest of this file follows — the theme_mod stays the demo's,
   and the script that cannot live with it is adapted in its own tree.
   -------------------------------------------------------------------------- */

html[lang^="hy"] .post56--widget.post56--list,
html[lang^="hy"] .secondary56 .post56--list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

html[lang^="hy"] .post56--widget.post56--list .thumbnail56,
html[lang^="hy"] .secondary56 .post56--list .thumbnail56 {
	width: 100% !important;   /* Fox sets a pixel width inline from the widget */
	max-width: 100%;
}

html[lang^="hy"] .post56--widget.post56--list .thumbnail56 img,
html[lang^="hy"] .secondary56 .post56--list .thumbnail56 img {
	width: 100%;
	aspect-ratio: 16 / 9;     /* shallower than the 1:1 row thumb, so the taller
	                             stacked item does not run away vertically */
	object-fit: cover;
}

html[lang^="hy"] .post56--widget.post56--list .post56__text,
html[lang^="hy"] .secondary56 .post56--list .post56__text {
	width: 100% !important;
}


/* --------------------------------------------------------------------------
   Overlay cards: the photograph IS the card
   --------------------------------------------------------------------------
   In an `ontop` card Fox absolutely-positions .thumbnail56 to fill the card and
   floats the text over it. That was already correct — what broke it was the
   rule above. `.post56--ontop` is also a `.post56--grid`, so the 3:2
   aspect-ratio added to stop the LEAD column's thumbnails coming out ragged
   also pinned these images to 163px inside a 391px card, leaving the card's
   own grey background showing underneath. Hence the :not() there, and this
   block here.

   ON LANDSCAPE PHOTOGRAPHS IN A PORTRAIT CARD — the thing to get right.
   These cards are ~244x391, i.e. portrait, and almost every press photograph
   in the archive is landscape. `object-fit: cover` scales the image until it
   fills the box and crops the overflow, so a 3:2 photo loses its left and
   right edges rather than being letterboxed or squashed. That is the correct
   trade: a distorted face is always worse than a tighter crop.

   `object-position: center 35%` is the part that matters editorially. Centring
   vertically would cut heads off, because in news photography the subject sits
   in the upper third — people at a lectern, delegations behind a table. Biasing
   the visible window slightly above centre keeps faces in frame while still
   leaving room for the caption gradient at the bottom.
   -------------------------------------------------------------------------- */

.post56--ontop .thumbnail56,
.post56--ontop .thumbnail56 a {
	display: block;
	width: 100%;
	height: 100%;
}

.post56--ontop .thumbnail56 img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;          /* undo the grid rule for this card shape */
	object-fit: cover;
	object-position: center 35%;
}

/* STACKING ORDER, and it has to be explicit.
   .thumbnail56 and .post56__text are BOTH absolutely positioned children of
   the card. Without a declared order the thumbnail wins simply by coming later
   in the source, and the headline vanishes behind the photograph — which is
   exactly what happened on the first attempt at this.

   0 image · 1 gradient · 2 text. The gradient hangs off the thumbnail rather
   than the text so it covers the full card width regardless of how tall the
   headline runs, and it darkens only the lower half — a flat scrim over the
   whole photograph would flatten the picture. */

.post56--ontop .thumbnail56 { z-index: 0; }

.post56--ontop .thumbnail56::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
		rgba(0,0,0,.80) 0%,
		rgba(0,0,0,.55) 26%,
		rgba(0,0,0,.12) 55%,
		rgba(0,0,0,0)   80%);
	pointer-events: none;
}

.post56--ontop .post56__text {
	position: absolute;
	z-index: 2;
}

.post56--ontop .title56,
.post56--ontop .title56 a,
.post56--ontop .meta56,
.post56--ontop .meta56 a,
.post56--ontop .meta56 time {
	color: #fff;
}

/* The category label keeps the brand blue, but needs lifting off a dark
   photograph — the ink blue chosen for white grounds is too dark here. */
.post56--ontop .meta56__category--fancy,
.post56--ontop .meta56__category--fancy a {
	color: #4FC3F0;
}

/* Hover on the overlay cards.
   The resting overlay is #00000030 (a light dark wash set on the widget). On
   hover it becomes #fffcfc14 — a near-white at 8% — so the card LIFTS rather
   than dimming further, which reads as "this is clickable" without hiding the
   photograph. Transitioned on both directions so the pointer moving across a
   five-card row does not strobe. */

.post56--ontop .post56__overlay {
	transition: background-color 0.22s ease;
}

.post56--ontop:hover .post56__overlay,
.post56--ontop:focus-within .post56__overlay {
	background: #fffcfc14;
}

/* ---------------------------------------------------------------------------
   Document downloads (core/file block)

   Five announcements carry the signed PDF alongside their text — the Central
   Board's letterhead original, folded into the article by
   tools/merge-pdf-companions.php. Core ships the button as #32373c, a grey
   that belongs to no part of this design.

   #027EAD, not the #02A0DB of the masthead: this is a ground under white text,
   and pure brand blue gives 2.98:1 against white — below the 4.5:1 AA floor.
   Same hue, darkened until it clears. The rule is set out at length in
   tools/setup/02-theme.php.

   The filename link keeps the body link colour it inherits; only the button is
   restyled, so the block still reads as "a document, and a way to take it".

   Separated by a rule ABOVE, not a bar down the left side. That is the grammar
   the rest of the paper already uses — Fox's band headings are
   `heading56--border-top` — and it is what print does to set an attachment or
   an editor's note apart from the body copy it follows. A left accent bar
   would be a web-app convention imported into a newspaper.
   --------------------------------------------------------------------------- */

.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.1rem;
	margin: 2.25rem 0;
	padding: 1.1rem 0 0;
	border-top: 2px solid #02A0DB;
}

.wp-block-file > :not(.wp-block-file__button) {
	flex: 1 1 16rem;
	min-width: 0;
	font-weight: 600;
}

.wp-block-file .wp-block-file__button {
	flex: 0 0 auto;
	background: #027EAD;
	color: #fff;
	border-radius: 4px;
	padding: 0.55em 1.4em;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-color 0.18s ease;
}

.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus-visible {
	background: #01678d;
	color: #fff;
	opacity: 1; /* core fades to .85 on hover; a solid state reads as a control */
}

/* --------------------------------------------------------------------------
   guard2 — the Armenian primary nav fits on one line
   --------------------------------------------------------------------------
   The demo's nav is PT Serif 20px with 20px side padding in a 4/5 column
   (980px at 1280). Measured 2026-09-11: the seven Armenian labels of the
   Board's menu come to 1,067px at those values and «Տեսանիւթ» wrapped out of
   sight; the seven English labels fit (921px). Same rule as Mamoul's nav:
   the theme_mod stays the demo's for /en/, the Armenian tree takes a smaller
   size and tighter padding — 18px / 14px measured to 906px. Scoped to the
   guard2 skin (body.skin-guard2), so Mamoul never sees it.
   -------------------------------------------------------------------------- */
html[lang^="hy"] body.skin-guard2 .mainnav ul.menu > li > a {
	font-size: 18px;
	padding-left: 14px;
	padding-right: 14px;
}
/* the sample's dropdown: stone ground, charcoal items, vermilion on hover */
body.skin-guard2 .mainnav ul.sub-menu a { color: #1F1D1A; }
body.skin-guard2 .mainnav ul.sub-menu a:hover { color: #D9412B; }
body.skin-guard2.darkmode .mainnav ul.sub-menu a { color: #F2F0EB; }
body.skin-guard2.darkmode .mainnav ul.sub-menu a:hover { color: #F0634A; }

/* --------------------------------------------------------------------------
   guard2 — the WARM GREY rules a theme_mod cannot carry (2026-09-13)
   --------------------------------------------------------------------------
   1. Fox's dark mode repaints type and grounds but leaves the header BANDS
      on their mod colours, so dark mode showed white type on stone. The bands
      take the sample's dark stone; the footer, the same.
   2. Karla on the pill and the footer column labels, as the sample; Fox has
      no mod for a button face.
   3. The newsletter form ships Mamoul's INK blue in its own stylesheet
      (--rg-ink); on this skin the button is the vermilion.
   Scoped to body.skin-guard2 — Mamoul never sees any of it.
   -------------------------------------------------------------------------- */
body.skin-guard2 .header56__btn__1,
/* ONE FACE IN THE FOOTER (Jack, 2026-09-22, "it should only be one"): the
   column titles were Karla, the About paragraph the body's Newsreader, the
   links Source Sans 3 — three faces in one band. Everything in the footer
   sets in Source Sans 3 now; Noto Sans Armenian only where a glyph is. */
body.skin-guard2 .footer_sidebar56 .widget-title,
body.skin-guard2 .footer_sidebar56 .widget56__title,
body.skin-guard2 .footer_sidebar56 h3.widget-title {
	font-family: "Source Sans 3", "Noto Sans Armenian", sans-serif;
	font-weight: 700;
}
body.skin-guard2 .footer_sidebar56 p,
body.skin-guard2 .footer_sidebar56 .textwidget,
body.skin-guard2 .footer_sidebar56 .widget_text,
body.skin-guard2 .footer_sidebar56 .imagetext-description {
	font-family: "Source Sans 3", "Noto Sans Armenian", sans-serif;
	font-size: 14px;
	line-height: 1.6;
}
body.skin-guard2 .footer_sidebar56 .widget-title,
body.skin-guard2 .footer_sidebar56 .widget56__title {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.skin-guard2 .ram-sub {
	--rg-ink: #D9412B;
	--rg-ink-hover: #C2361F;
}
/* THE FORM SETS LIKE THE FOOTER AROUND IT (Jack, 2026-09-22, "make it the
   same"). The subscribe widget inherited the BODY face — Newsreader in its
   fields, legend and consent line, Karla on its button — beside footer
   columns whose links and Support button are Source Sans 3 at 14px and whose
   titles are Karla 12px capitals. So: fields, language choice and consent in
   the footer's Source Sans 3 at 14px; the button like the Support button
   (Source Sans 3, 600); the language question like a widget title. */
body.skin-guard2 .footer_sidebar56 .ram-sub,
body.skin-guard2 .footer_sidebar56 .ram-sub input,
body.skin-guard2 .footer_sidebar56 .ram-sub .ram-sub__pref-opt,
body.skin-guard2 .footer_sidebar56 .ram-sub .ram-sub__pref-opt span,
body.skin-guard2 .footer_sidebar56 .ram-sub .ram-sub__consent {
	font-family: "Source Sans 3", "Noto Sans Armenian", sans-serif;
	font-size: 14px;
}
body.skin-guard2 .footer_sidebar56 .ram-sub__submit {
	font-family: "Source Sans 3", "Noto Sans Armenian", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
}
body.skin-guard2 .footer_sidebar56 .ram-sub__pref-legend {
	font-family: "Source Sans 3", "Noto Sans Armenian", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body.skin-guard2 .ram-sub__submit { font-family: "Karla", "Noto Sans Armenian", sans-serif; }
body.skin-guard2.darkmode .topbar56 { background-color: #1F1D1A !important; }
body.skin-guard2.darkmode .main_header56,
body.skin-guard2.darkmode .header_bottom56,
body.skin-guard2.darkmode .header_mobile56 { background-color: #262320 !important; }
body.skin-guard2.darkmode .header_bottom56,
body.skin-guard2.darkmode .header_bottom56__container { border-color: #F0634A !important; }
body.skin-guard2.darkmode .mainnav ul.menu > li > a:hover,
body.skin-guard2.darkmode .mainnav ul.menu > li.current-menu-item > a,
body.skin-guard2.darkmode .mainnav ul.menu > li.current-menu-ancestor > a { background: #1F1D1A !important; color: #F2F0EB !important; }
body.skin-guard2.darkmode .mainnav ul.menu > li > a:after { background: #F0634A !important; }
body.skin-guard2.darkmode .mainnav ul.sub-menu { background: #262320 !important; }
body.skin-guard2.darkmode .header56__social a,
body.skin-guard2.darkmode .footer56__social a { color: #F2F0EB !important; background: #F2F0EB1F !important; }
body.skin-guard2.darkmode .footer_sidebar56 { background-color: #262320 !important; }
body.skin-guard2.darkmode .footer_bottom56 { background-color: #1F1D1A !important; }
body.skin-guard2.darkmode .footer56__col__sep { border-color: #F2F0EB24 !important; }
body.skin-guard2.darkmode .ram-sub { --rg-ink: #F0634A; --rg-ink-hover: #D9412B; }
body.skin-guard2.darkmode .ram-sub__field input { background: #1F1D1A; color: #F2F0EB; border-color: #F2F0EB33; }
/* DM Serif Display ships ONE weight (400). Any heavier request is synthesised
   by the browser and reads as smeared — Jack saw it on the section headings
   and titles (2026-09-13). Every title-role element on this skin sits at 400,
   exactly as the approved sample did. */
body.skin-guard2 .heading56__text,
body.skin-guard2 .title56,
body.skin-guard2 .title56 a,
body.skin-guard2 .single56__title,
body.skin-guard2 .entry-content h2,
body.skin-guard2 .entry-content h3,
body.skin-guard2 .entry-content h4,
body.skin-guard2 .entry-content blockquote { font-weight: 400; }
/* …except in Armenian, since 2026-09-22, when Jack put the whole Armenian tree
   on Noto Sans Armenian (no Webstart, no Noto Serif Armenian; the companion
   is chosen in functions.php's stack composer). The 400 above exists because
   DM Serif Display has no bold and a synthesised one smears; Noto Sans
   Armenian ships real weights, and at 400 a sans headline is thin beside the
   serif English. 600 is the weight that carries a headline without going
   black; the masthead stays 700 and the menu 500 (below). */
html[lang^="hy"] body.skin-guard2 .heading56__text,
html[lang^="hy"] body.skin-guard2 .title56,
html[lang^="hy"] body.skin-guard2 .title56 a,
html[lang^="hy"] body.skin-guard2 .single56__title,
html[lang^="hy"] body.skin-guard2 .entry-content h2,
html[lang^="hy"] body.skin-guard2 .entry-content h3,
html[lang^="hy"] body.skin-guard2 .entry-content h4 { font-weight: 600; }
/* At 1120px and below the section label leaves its side column and sits above the
   body, as the Guardian's does (Jack, 2026-09-13). Fox's builder columns
   carry ONE size and only stack at 840px; the label column stacked too late
   and squeezed the two-column body. Builder rows only — the header's fifth
   columns are not touched. */
@media only screen and (max-width: 1120px) {
	/* Jack: 1120px, not Fox's 1024 */
	/* the builder row renders as a plain `.row` (flex, wrap), its columns as
	   `.col.col-1-5` / `.col.col-4-5` at 20% / 80% */
	body.skin-guard2 .builder56__section .row > .col.col-1-5,
	body.skin-guard2 .builder56__section .row > .col.col-4-5 { width: 100% !important; flex: 0 0 100%; max-width: 100%; }
	/* the label column also carries the demo's empty html widget and the row's
	   20px column spacing; stacked, that read as a hole under the label */
	body.skin-guard2 .builder56__section .row > .col.col-1-5 { margin-bottom: 0 !important; padding-bottom: 0 !important; }
	body.skin-guard2 .builder56__section .row > .col.col-1-5 > .widget56:not(.heading56) { display: none; }
	body.skin-guard2 .builder56__section .row > .col.col-1-5 .heading56 { margin: 0 0 12px !important; padding-bottom: 0 !important; }
	/* …and the column that follows the label starts right under it (Jack,
	   2026-09-24, the white space after every section title on a phone): the
	   stacked body column kept its side-by-side spacing — a 28px top margin
	   and 20px top padding — on top of the heading's own 12px and its
	   wrapper's 14px, 74px between a title and its first story. */
	body.skin-guard2 .builder56__section .row > .col.col-1-5 + .col { margin-top: 0 !important; padding-top: 0 !important; }
	body.skin-guard2 .builder56__section .row > .col.col-1-5 .heading56__wrapper { margin-bottom: 0 !important; }
}
/* THE HOME PAGE ENDS AT ITS LAST STORY (Jack, 2026-09-24, the white gap
   above the footer strip on a phone): the builder list carries a 60px
   bottom padding meant for a desktop page, and the last section's own
   bottom spacing sits inside it — 130px between "All +" and the footer ad.
   On a phone the list ends at its content; the footer strip's own margin is
   the only air left. */
@media only screen and (max-width: 840px) {
	body.skin-guard2 .builder56.sectionlist { padding-bottom: 0 !important; }
	body.skin-guard2 .builder56.sectionlist > .builder56__section:last-child,
	body.skin-guard2 .builder56.sectionlist > .builder56__section:last-child > .container--main { padding-bottom: 0 !important; margin-bottom: 0 !important; }
	/* a desktop-only side column with nothing in it stacks under the stories
	   as 48px of margin and padding — an empty column is not on a phone */
	body.skin-guard2 .builder56__section .row > .col:not(:has(*)) { display: none !important; }
}
/* AN UNSOLD AD BAND IS NOT ON THE PAGE (Jack, 2026-09-24, "hide band until
   ad is booked"). With nothing eligible the spot widget prints nothing, and
   the builder section around it still drew its rule and padding. A section
   whose only content is an empty sidebar is removed; the band returns by
   itself when an ad is booked, since the widget then prints. */
body.skin-guard2 .builder56__section:has(.main-section-sidebar):not(:has(.section-sidebar-inner > *)) { display: none; }

/* --------------------------------------------------------------------------
   guard2 — ARSHALOUYS: the mark beside the masthead, and the Armenian
   masthead and menu in Noto SANS Armenian
   --------------------------------------------------------------------------
   The Board named the paper Արշալոյս / Arshalouys and kept the name. From
   2026-09-14 the mark was design A of docs/design/arshalouys-mark/ (a
   vermilion half-sun over a charcoal rule); on 2026-09-22 the Central Board
   chose a new mark — a quarter-sunrise tile, eight rays fanning up and left
   from a hub at the tile's bottom-right corner, a dawn gradient from yellow
   at the hub to orange at the tips — rebuilt as geometry in
   ref/sun-logo-uniform.py (SVG: assets/brand/arshalouys-sunrise.svg). Fox's
   header is either a text logo or an image logo; the masthead stays TEXT
   (blogname, the fonts Jack approved, dark mode for free) and the mark is
   drawn in front of it as a ::before carrying the SVG inline, so no image
   request and no theme mod. The gradient is the mark's own and is kept in
   dark mode: yellow-to-orange reads on charcoal as it does on stone.

   SIZE AND PLACE. The tile is 0.78em of the masthead — on the reference
   lockup the tile stands a little taller than the capitals and its hub
   corner sits on the baseline against the first letter, which is what the
   masthead does: bottom edge ON the baseline (the baseline is 0.1em above
   the line box for DM Serif Display at line-height .9, hhea 1036/335, and
   0.062em for Noto Sans Armenian, typo 1068/292, computed from the font
   files), hub corner toward the name, 0.22em of air between them. The
   mobile masthead scales it with the type.

   Jack, 2026-09-14: the Armenian masthead and the menu set in Noto SANS
   Armenian for now (the stack composer would give them Noto SERIF Armenian
   as DM Serif Display's companion). A sans masthead needs weight to hold at
   68px beside nothing, so 700; the menu 500. Scoped to the guard2 skin and
   the Armenian tree; Mamoul and /en/ are untouched.
   -------------------------------------------------------------------------- */
body.skin-guard2 .text-logo {
	display: inline-block;   /* Fox renders it block and shrink-wrapped */
	position: relative;      /* the mark hangs off it, outside the centring (Jack, 2026-09-14) */
	white-space: nowrap;
}
body.skin-guard2 .text-logo::before {
	content: "";
	/* Jack, 2026-09-14: the NAME is centred on the page (with the tagline
	 * under it) and the mark sits to its left, outside the centring — so the
	 * mark is absolutely positioned off the name's left edge and adds no
	 * width. */
	position: absolute;
	right: 100%;
	margin-right: 0.22em;
	bottom: 0.1em;
	width: 0.78em;
	height: 0.78em;
	background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 1000%22 role=%22img%22 aria-label=%22Arshalouys sunrise%22%3E%3Cdefs%3E%3CradialGradient id=%22dawn%22 gradientUnits=%22userSpaceOnUse%22 cx=%221000%22 cy=%221000%22 r=%221414.214%22%3E%3Cstop offset=%220%22 stop-color=%22%23fcd82d%22/%3E%3Cstop offset=%22.2%22 stop-color=%22%23fabf30%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23f69435%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f16e31%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill=%22url(%23dawn)%22 fill-rule=%22evenodd%22 d=%22M440 0H1000V1000H0V440A440 440 0 0 1 440 0ZM832.081 973.479L0 842.063L0 795.184L833.457 965.889A3.857 3.857 0 0 1 832.081 973.479ZM840.818 940.326L0 625.12L0 572.432L843.689 933.166A3.857 3.857 0 0 1 840.818 940.326ZM856.029 909.599L4.811 375.114A440 440 0 0 1 17.041 318.732L860.278 903.162A3.857 3.857 0 0 1 856.029 909.599ZM877.096 882.55L109.746 149.255A440 440 0 0 1 149.255 109.746L882.55 877.096A3.857 3.857 0 0 1 877.096 882.55ZM903.162 860.278L318.732 17.041A440 440 0 0 1 375.114 4.811L909.599 856.029A3.857 3.857 0 0 1 903.162 860.278ZM933.166 843.689L572.432 0L625.12 0L940.326 840.818A3.857 3.857 0 0 1 933.166 843.689ZM965.889 833.457L795.184 0L842.063 0L973.479 832.081A3.857 3.857 0 0 1 965.889 833.457Z%22/%3E%3C/svg%3E") no-repeat center / contain;
}
html[lang^="hy"] body.skin-guard2 .text-logo {
	font-family: "Noto Sans Armenian", sans-serif;
	font-weight: 700;
}
html[lang^="hy"] body.skin-guard2 .text-logo::before { bottom: 0.062em; }
/* the Armenian tagline needs a little more air under the name's descenders */
html[lang^="hy"] body.skin-guard2 .site-tagline {
	margin-top: 16px !important;   /* Jack: 16, not 10 */
	/* Jack, 2026-09-22: the Armenian tagline in capitals, «ՀԱՅԿԱԿԱՆ ՕՐԱԹԵՐԹ»,
	   as the English one is. The suppression rule above stands for every
	   other piece of chrome — this is one line of 14px under a 76px name,
	   with room to breathe, not running small text — and only on guard2:
	   Mamoul's tagline names the Board and keeps its case. */
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
html[lang^="hy"] body.skin-guard2 .mainnav ul.menu a,
html[lang^="hy"] body.skin-guard2 .offcanvas56 .menu a {
	font-family: "Noto Sans Armenian", sans-serif;
	font-weight: 500;
}

/* the section page's "loading the next page" mark (assets/archive-more.js) */
body.skin-guard2 .ram-more { height: 48px; }
body.skin-guard2 .ram-more--busy::after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 12px auto;
	border: 2px solid #D9412B;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ram-more-spin .8s linear infinite;
}
body.skin-guard2.darkmode .ram-more--busy::after { border-color: #F0634A; border-right-color: transparent; }
@keyframes ram-more-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.skin-guard2 .ram-more--busy::after { animation: none; } }

/* --------------------------------------------------------------------------
   guard2 — the article TAIL (inc/article-tail.php; Jack, 2026-09-14, after
   Zartonk's article page): the article-end ad centred, then a six-card grid
   beside a 345px rail. Stacks under 900px.
   -------------------------------------------------------------------------- */
body.skin-guard2 .ram-tail { padding: 8px 0 48px; }
body.skin-guard2 .ram-tail__ad { margin: 0 0 32px; }
body.skin-guard2 .ram-tail__cols { display: grid; grid-template-columns: minmax(0, 1fr) 345px; gap: 40px; align-items: start; }
/* Jack, 2026-09-14: the grid's rule and the rail's vermilion rule sit on ONE line — each column draws its own, at the same y */
body.skin-guard2 .ram-tail__main { border-top: 1px solid #D9D5CC; padding-top: 28px; }
body.skin-guard2 .ram-tail__rail > .widget:first-child .widget-title { border-top-color: #D9412B; padding-top: 28px; margin-top: 0; }
body.skin-guard2 .ram-tail__main .widget_latest_posts .blog56 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; }
body.skin-guard2 .ram-tail__main .widget_latest_posts .blog56 > .post56 { width: auto; }
body.skin-guard2 .ram-tail__main .widget_latest_posts .widget-title { display: none; }
body.skin-guard2 .ram-tail__rail .widget { margin-bottom: 32px; }
body.skin-guard2 .ram-tail__rail .widget_latest_posts .title56 { font-size: 1.05em; }
body.skin-guard2.darkmode .ram-tail__cols { border-color: #F2F0EB24; }
@media only screen and (max-width: 900px) {
	body.skin-guard2 .ram-tail__cols { grid-template-columns: minmax(0, 1fr); }
	body.skin-guard2 .ram-tail__main .widget_latest_posts .blog56 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 560px) {
	body.skin-guard2 .ram-tail__main .widget_latest_posts .blog56 { grid-template-columns: minmax(0, 1fr); }
}
/* the "Catch up on the latest news" list under an article: small pictures, the headline carries it (Zartonk) */
body.skin-guard2 .single56__related .post56--list--thumb-pixel .thumbnail56 { width: 120px !important; }
body.skin-guard2 .single56__related .post56--list--thumb-pixel .thumbnail56 + .post56__text { width: calc(100% - 120px) !important; }
body.skin-guard2 .single56__related .title56 { font-size: 1.1em; }

/* Jack, 2026-09-14 (second pass on the article): the reading column is FLUID
   like Zartonk's — two thirds of the container, capped at the narrow mod
   (760) — the lead photograph is 1000px at most, and the share row lives at
   the top of the tail. */
@media only screen and (min-width: 841px) {
	body.skin-guard2 .single56--narrow .single56__header,
	body.skin-guard2 .single56--narrow .single56__body { width: min(var(--narrow-width), 66%); }
}
body.skin-guard2 .single56--thumbnail-stretch-container .single56__thumbnail { max-width: 1000px; margin-left: auto; margin-right: auto; }
body.skin-guard2 .ram-tail__share { margin: 0 0 28px; }
body.skin-guard2 .ram-tail__share .single56__share { margin: 0; }

/* the tail's share row sits on the reading column's left edge (Jack); the
   header share row reads as Zartonk's — label, then the icons */
@media only screen and (min-width: 841px) {
	body.skin-guard2 .ram-tail__share { width: min(var(--narrow-width), 66%); margin-left: auto; margin-right: auto; }
}
body.skin-guard2 .single56__header .share56 { margin-top: 18px; padding-top: 14px; border-top: 1px solid #D9D5CC; }
body.skin-guard2 .single56__header .share56__label { font-family: "Karla", "Noto Sans Armenian", sans-serif; font-weight: 600; font-size: 14px; margin-right: 14px; }
body.skin-guard2.darkmode .single56__header .share56 { border-color: #F2F0EB24; }
/* the tail's share row: icons on the column's edge — no label there, no lead-in margin */
body.skin-guard2 .ram-tail__share .share56__label { display: none; }
body.skin-guard2 .ram-tail__share .share56 ul { margin-left: 0; }
/* Fox lays the header share row to the RIGHT of the date line; Zartonk's sits
   UNDER it, on its own line, label first, icons left */
body.skin-guard2 .single56__header .meta-share { display: block; }
body.skin-guard2 .single56__header .meta-share .share56 { justify-content: flex-start; width: 100%; }
/* a VIDEO article's lead player matches the photograph's 1000px (Jack,
   2026-09-14): the player is the first block of the body (video-embeds.php),
   so it is pulled out of the reading column and centred on the page; on
   narrower screens the column is the full width anyway */
@media only screen and (min-width: 841px) {
	body.skin-guard2 .single56__content > .ram-video:first-child {
		width: min(1000px, calc(100vw - 50px));
		max-width: none;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 32px;
	}
	/* lite-youtube caps itself at 720px; the lead is the wrapper's width */
	body.skin-guard2 .single56__content > .ram-video:first-child lite-youtube { max-width: none; }
}

/* --------------------------------------------------------------------------
   A gallery in an article is a carousel (inc/gallery-carousel.php; Jack,
   2026-09-14, the Guardian's frame). Keyed on .ram-carousel, which the
   script adds, so a gallery without JavaScript stays core's grid. Flickity's
   structural rules are restated here because Fox bundles its stylesheet
   only when a builder carousel is on the page.
   -------------------------------------------------------------------------- */
.wp-block-gallery.ram-carousel { display: block !important; position: relative; padding-bottom: 52px; margin: 0 0 32px; }   /* core's is-layout-flex rule is what turned the cells into 0×0 flex items */
.ram-carousel .flickity-viewport { position: relative; overflow: hidden; height: 100%; }
.ram-carousel .flickity-slider { position: absolute; width: 100%; height: 100%; }
.ram-carousel.is-draggable { -webkit-tap-highlight-color: transparent; user-select: none; }
.ram-carousel.is-draggable .flickity-viewport { cursor: grab; }
.ram-carousel.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; }
/* descendant, not child: Flickity moves the cells into its own .flickity-slider */
.wp-block-gallery.ram-carousel .wp-block-image { width: 100% !important; margin: 0 !important; position: relative; display: block; }
.wp-block-gallery.ram-carousel .wp-block-image > a,
.wp-block-gallery.ram-carousel .wp-block-image > div { display: block !important; width: 100% !important; flex: 0 0 100% !important; }
.wp-block-gallery.ram-carousel .wp-block-image img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; object-fit: initial; }
.ram-carousel .wp-block-image figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 12px;
	background: rgba(31, 29, 26, 0.84); color: #F2F0EB;
	font-family: "Source Sans 3", "Noto Sans Armenian", sans-serif; font-size: 14px; line-height: 1.35; text-align: left;
}
.ram-carousel .flickity-page-dots {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 0; list-style: none;
	display: flex; gap: 8px; line-height: 1;   /* centred under the picture (Jack), and no wider than the dots —
	   stretched edge to edge it lay over the lower half of both buttons and ate their hover */
}
.ram-carousel .flickity-prev-next-button { z-index: 2; }
/* Flickity makes the gallery focusable for the arrow keys; the browser's
   focus ring drew a box round the whole thing on every click (Jack) */
.ram-carousel:focus, .ram-carousel:focus-visible, .ram-carousel .flickity-viewport:focus { outline: none; }
.ram-carousel .flickity-page-dots .dot:focus-visible { outline: 2px solid #D9412B; outline-offset: 2px; }
/* a gallery that OPENS the article is its lead: as wide as a lead photograph */
@media only screen and (min-width: 841px) {
	body.skin-guard2 .single56__content > .wp-block-gallery.ram-carousel:first-child {
		width: min(1000px, calc(100vw - 50px));
		max-width: none;
		left: 50%;
		transform: translateX(-50%);
	}
}
.ram-carousel .flickity-page-dots .dot {
	width: 8px; height: 8px; border-radius: 50%; background: #C9C4BA; cursor: pointer; opacity: 1;
}
.ram-carousel .flickity-page-dots .dot.is-selected { background: #D9412B; }
.ram-carousel .flickity-prev-next-button {
	position: absolute; top: auto; bottom: 0; transform: none; width: 40px; height: 40px;
	border: 1px solid #1F1D1A; border-radius: 50%; background: transparent; color: #1F1D1A; cursor: pointer; padding: 0;
}
.ram-carousel .flickity-prev-next-button.previous { left: auto; right: 50px; }
.ram-carousel .flickity-prev-next-button.next { right: 0; }
.ram-carousel .flickity-prev-next-button:hover { background: #1F1D1A; color: #F2F0EB; }
.ram-carousel .flickity-prev-next-button:focus-visible { outline: 2px solid #D9412B; outline-offset: 2px; }
.ram-carousel .flickity-prev-next-button svg { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }
.ram-carousel .flickity-prev-next-button .flickity-button-icon { fill: currentColor; }
.ram-carousel .flickity-button:disabled { opacity: .3; cursor: auto; }
body.darkmode .ram-carousel .flickity-prev-next-button { border-color: #F2F0EB; color: #F2F0EB; }
body.darkmode .ram-carousel .flickity-prev-next-button:hover { background: #F2F0EB; color: #151412; }
body.darkmode .ram-carousel .flickity-page-dots .dot { background: #5A5650; }
body.darkmode .ram-carousel .flickity-page-dots .dot.is-selected { background: #F0634A; }
@media (prefers-reduced-motion: reduce) { .ram-carousel .flickity-slider { transition: none !important; } }
/* Fox's widget grid is one column and draws a separator line over every card
   but the first; laid out three across, that put a line over cards 2 and 3
   of the first row and none over card 1 (Jack's "missing line"). The first
   ROW carries none; the rows below keep theirs. */
body.skin-guard2 .ram-tail__main .blog56 > .blog56__sep { display: none; }
body.skin-guard2 .ram-tail__main .blog56 > .post56:nth-child(-n+3) .post56__sep__line { display: none; }
@media only screen and (max-width: 900px) {
	body.skin-guard2 .ram-tail__main .blog56 > .post56:nth-child(3) .post56__sep__line { display: block; }
}
@media only screen and (max-width: 560px) {
	body.skin-guard2 .ram-tail__main .blog56 > .post56:nth-child(2) .post56__sep__line { display: block; }
}

/* "Go to top" in dark mode: the charcoal square would vanish on the charcoal page */
body.skin-guard2.darkmode .scrollup56--noimage { background: #F2F0EB !important; color: #1F1D1A !important; }
body.skin-guard2.darkmode .scrollup56--noimage:hover { background: #F0634A !important; color: #151412 !important; }

/* --------------------------------------------------------------------------
   The contact form (inc/contact-form.php, Jack 2026-09-28, after
   zartonkmedia.com/contact): name, email, subject, message, send — one
   centred column and nothing else. Rendered only on a paper whose paper.json
   declares contact.form, so these rules never meet Mamoul's page. Colours are
   the Warm Grey & Vermilion palette as tokens; faces are the skin's own
   (--font-custom-1 carries Noto Sans Armenian on the hy tree), the button
   is Karla like every other guard2 button.
   -------------------------------------------------------------------------- */
.rg-contact {
	--rgc-ink: #1F1D1A;
	--rgc-muted: #6B665F;
	--rgc-field: #FFFFFF;
	--rgc-line: #CFCAC0;
	--rgc-accent: #D9412B;
	--rgc-accent-ink: #B8321E;
	--rgc-ok: #2E6B3F;
	max-width: 560px;
	margin: 8px auto 48px;
	font-family: var(--font-custom-1, "Source Sans 3", "Noto Sans Armenian", sans-serif);
	color: var(--rgc-ink);
}
.darkmode .rg-contact {
	--rgc-ink: #F2F0EB;
	--rgc-muted: #B5AFA5;
	--rgc-field: #262320;
	--rgc-line: #4A4540;
	--rgc-accent-ink: #F0634A;
	--rgc-ok: #8FC79E;
}
.darkmode .rg-contact__send { color: #1F1D1A; }
.darkmode .rg-contact__send:hover { background: #F2F0EB; }
.rg-contact__form { margin: 0; }
.rg-contact__row { margin: 0 0 22px; }
.rg-contact__row label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--rgc-ink);
}
.rg-contact__row input,
.rg-contact__row textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font: inherit;
	font-size: 17px;
	line-height: 1.45;
	color: var(--rgc-ink);
	background: var(--rgc-field);
	border: 1px solid var(--rgc-line);
	border-radius: 0;
	box-shadow: none;
	transition: border-color .15s ease-out;
}
.rg-contact__row textarea { min-height: 200px; resize: vertical; }
.rg-contact__row input:hover,
.rg-contact__row textarea:hover { border-color: var(--rgc-muted); }
.rg-contact__row input:focus-visible,
.rg-contact__row textarea:focus-visible {
	outline: 2px solid var(--rgc-accent);
	outline-offset: 1px;
	border-color: var(--rgc-accent);
}
.rg-contact__row [aria-invalid="true"] { border-color: var(--rgc-accent-ink); }
.rg-contact__err {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--rgc-accent-ink);
}
.rg-contact__err[hidden] { display: none; }
.rg-contact__row--send { margin-top: 30px; text-align: center; }
.rg-contact__send {
	font-family: "Karla", "Noto Sans Armenian", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	min-width: 180px;
	padding: 13px 34px;
	color: #FFFFFF;
	background: var(--rgc-accent-ink);   /* the darker vermilion: white on #D9412B is 4.0:1, under AA at 15px */
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .15s ease-out;
}
.rg-contact__send:hover { background: #9C2917; }
.rg-contact__send:focus-visible { outline: 2px solid var(--rgc-ink); outline-offset: 3px; }
.rg-contact__send[disabled] { opacity: .7; cursor: progress; }
html[lang^="hy"] .rg-contact__send { text-transform: none; letter-spacing: .02em; }
.rg-contact__status { margin: 0; font-size: 17px; line-height: 1.5; text-align: center; }
.rg-contact__status:empty { display: none; }
.rg-contact__status:focus { outline: none; }
.rg-contact__status.is-ok { padding: 28px 0; font-size: 20px; color: var(--rgc-ok); }
.rg-contact__status.is-err { margin-bottom: 22px; color: var(--rgc-accent-ink); }
.rg-contact__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* the page's one sentence stands in the form's column, not the page's */
.entry-content p:has(+ .rg-contact) { max-width: 560px; margin-left: auto; margin-right: auto; }