/* ==========================================================================
RielMedia — editorial stylesheet
Derived from the "RielMedia v2" design canvas (Claude Design project
935d018f-2c92-4a17-ad05-ff5407534d0f, file "RielMedia v2.dc.html").
The design canvas expressed everything as inline styles. This file is the
token-based translation of it: every colour, size and spacing value below
is lifted from that design, not invented.
Requirements traceability:
§9 Branding continuity — brand red/navy/amber + logo carried over as-is.
§9 Responsive design — single fluid grid, mobile-first breakpoints.
§9 Ad placement design — .rm-ad* live in the template flow, never
overlaying or interrupting body copy (see partials/ad-slot.hbs).
§3 Khmer planned for a later phase — Kantumruy Pro is already loaded and
.rm-km is ready, so adding a third locale is a content job, not a
typographic rebuild.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
:root {
/* ========================================================================
PALETTE — from RielMedia's own mockup (3 Sep 2026)
========================================================================
The mockup replaced the earlier direction wholesale: a WHITE page with
PALE BLUE editorial panels, headlines in heavy navy capitals, and colour
carried by two independent axes — the SECTION (nav underlines) and the
FORMAT (Interview / Opinion / Portrait / Reportage chips).
Three of the mockup's colours could not be used exactly as drawn, and the
numbers are why. Every ratio below is computed, not estimated.
------------------------------------------------------------------------ */
/* Structure */
/* NAVY, split in two (RielMedia's 5-tone palette, 8 Sep 2026): the same
token used to colour both headlines and every nav/UI accent (buttons,
links, kickers, borders). RielMedia's spec gives those two roles
distinct values, so headlines now take --rm-navy-title and everything
else keeps --rm-navy. Ratios recomputed below, nothing here dropped
below the old ones. */
--rm-navy: #10194F; /* nav labels, links, buttons, borders. 13.03:1
on the panel, 16.48:1 on white */
--rm-navy-title: #18245F; /* headlines only (.rm-display). 11.39:1 on the
panel, 14.42:1 on white */
--rm-navy-dk: #0E2242;
--rm-ink: #14171C; /* 17.96:1 on white */
/* Page background, at RielMedia's request (4 Sep 2026 -- selected the front
page's hero section and asked for a site-wide colour). Was pure white.
--rm-surface stays white deliberately: the masthead, cards and buttons
read as content sitting ON the page rather than as more of it, which is
what keeps them legible -- flattening every surface to the same blue
would remove that layering rather than just tinting the canvas.
Body text is unaffected (--rm-ink is 16.36:1 on this background, against
17.96:1 on the old white -- no accessibility change).
RielMedia's 5-tone palette (8 Sep 2026) replaced these five values and
added --rm-surface-alt, which had been referenced by four rules (ad
frames, the .rm-doc__mail-style callout box) without ever being defined
-- those rules were silently painting no background at all. All five
tones clear 7.9:1 against both navy tokens and --rm-ink, so no rule that
colours text with either navy or ink needs to change. */
--rm-page: #F1F6FA; /* fond global */
--rm-surface: #FFFFFF;
--rm-surface-alt: #9FC5E1; /* blocs bleus plus affirmés */
--rm-panel: #D6E7F4; /* cartes */
--rm-panel-2: #B5D4EA; /* grands blocs / hero */
--rm-panel-3: #E4EFF7; /* sections; large quiet areas */
/* Lines */
--rm-border: #D4E2EE;
--rm-rule: #B9CEDF;
--rm-border-dk: #33333A;
/* Text */
--rm-muted: #5A6572; /* 5.93:1 on white, 4.69:1 on the panel */
--rm-muted-2: #7C8794; /* LARGE / NON-ESSENTIAL ONLY */
--rm-muted-3: #A7B0BC;
--rm-hatch-ink: #4A5563;
/* On dark */
--rm-on-dark: #D6DCE4;
--rm-on-dark-2: #C6D0DE;
--rm-on-dark-3: #D5DDE8;
--rm-on-dark-4: #DCE3EC;
--rm-on-dark-mono: #A9B7CC;
--rm-on-dark-dim: #B9C4D2;
--rm-slate: #22303C;
/* ---------------------------------------------------------------- AXIS 1
SECTION COLOUR. Drawn in the mockup as a permanent coloured underline
beneath every item in the navigation — so the whole menu is a colour key
to the paper, not just a marker on the current page.
A 3px underline is a non-text indicator, so WCAG 1.4.11 asks 3:1 against
the white bar behind it. The mockup's bright amber #E8B33C is 1.92:1 and
FAILS that, so Economy is a deeper gold: #B8850F is 3.28:1 as a rule and
still takes ink text at 5.47:1 when used as a chip. Same hue family,
legible at 3px.
These are DEFAULTS. Each section's real colour is its Ghost tag's own
accent_color, which the Admin/Publisher sets in Ghost Admin → Tags → the
swatch beside the tag name (verified in Ghost 6.62: tags.accent_color is
in the schema and clean.tag does not strip it). */
--rm-sect: var(--rm-red);
/* SECTION COLOURS. Canonical values live in config/sections.yml -- these
must match, and tools/preflight.mjs fails the build if they drift.
These are the colours the Ghost tags carry, which is what the section
band, the cards and the list rows already used. The bar used a separate,
darker set, so six of the seven sections were one colour on the page and
another in the menu. Adopting the tag colours here rather than the other
way round was a legibility decision, not a preference: the old amber was
3.28:1, which is enough for an underline (a non-text indicator needs 3:1)
but FAILS the 4.5:1 a band needs under white text. Every value below
clears 4.5:1 against white, so it is legible as a background AND as text.
Ratios against white, computed not asserted. */
--rm-sect-news: #E22028; /* 4.70:1 */
--rm-sect-economy: #0F7A6C; /* 5.22:1 */
--rm-sect-society: #7B3F9D; /* 6.91:1 */
--rm-sect-culture: #A64712; /* 5.95:1 */
--rm-sect-travel: #136695; /* 6.25:1 */
--rm-sect-opinions: #16324F; /* 13.10:1 */
/* Video is green at RielMedia's request. #127F44 rather than a brighter
green because the brighter ones fail as CHIP text: white on #1FA85C is
3.08:1 and on #18924F 3.99:1, both under 4.5. #127F44 is 5.07:1 with
white and 5.07:1 as a rule against white, so it clears both uses.
Kept even though video is no longer a section, because it is still the
colour of the video RAIL and of anything tagged as a filmed format. */
--rm-sect-video: #127F44; /* 5.07:1 */
/* Same request, opposite surface: the video lightbox's title (playing "in
place", RielMedia asked for it in the section's own green) sits on that
lightbox's near-black scrim, where #127F44 is only 3.26:1 -- below the
4.5:1 body text needs. #1FA85C is the brighter green already ruled out
above for CHIP text (3.08:1 on white); on the dark scrim it is 5.36:1,
so it takes the one role #127F44 can't. */
--rm-sect-video-ondark: #1FA85C; /* 5.36:1 on the lightbox scrim */
--rm-sect-agenda: #A96700; /* 4.54:1 */
/* ---------------------------------------------------------------- AXIS 2
FORMAT COLOUR — the "banderoles" RielMedia asked about (CR-12): the
Interview / Opinion / Portrait / Reportage chips in the mockup. A format
is an internal tag on the post (#format-interview and so on), so this is
independent of which section the story sits in. That independence is the
point: an Interview can run in Economy or in Culture.
TEXT COLOUR IS NOT UNIFORM, and it cannot be. White on the mockup's amber
is 1.92:1 and on its orange 3.04:1 — both fail for chip text. Those two
chips take INK (9.36:1 and 5.90:1); the rest take white. See
.rm-chip--fmt-* below, where each chip sets its own foreground. */
--rm-fmt-reportage: #E8B33C; /* ink 9.36:1 */
--rm-fmt-interview: #0E8080; /* white 4.75:1 */
--rm-fmt-opinion: #8B1A2B; /* white 9.21:1 */
--rm-fmt-portrait: #F26B21; /* ink 5.90:1 */
--rm-fmt-analysis: #2E6FB7; /* white 5.15:1 */
--rm-fmt-lead: #E02027; /* white 4.77:1 — the "À LA UNE" chip */
/* Brand */
--rm-red: #E02027;
--rm-red-dk: #C4161C;
--rm-amber: #E8B33C;
/* Link/hover accent for hyperlinks and interactive controls. Went through
red (the original mockup), then two rounds of yellow/saffron getting
progressively more yellow, before RielMedia asked to try blue instead:
#1769AA. One token again -- the two-tier saffron/saffron-headline split
existed only because WCAG's 4.5:1 small-text floor forced a duller,
browner yellow than the hero headline's large-text 3:1 floor needed.
#1769AA clears 4.5:1 everywhere this token is ever read as text: white
5.77:1, --rm-page 5.31:1, --rm-panel-3 4.95:1, --rm-panel 4.56:1 (the
hero panels, the tightest case) -- so the split is no longer needed. */
--rm-link-hover: #1769AA;
/* ------------------------------------------------------------------ Type
The mockup sets headlines in heavy CONDENSED CAPITALS. That is a reversal
of the previous pass, which had moved them to sentence case — and it is
the client's call, so capitals are back.
Bebas Neue cannot do it: it ships ONE weight, and the mockup's headlines
are considerably heavier. Oswald is condensed, has real weights (200–700)
and is on Google Fonts.
The reason capitals are safe again is that the layout changed WITH them:
in the mockup the headline has its own column beside the photograph
instead of lying across it, and the JS auto-fit still caps it by length.
Capitals over a photograph, unbounded, is what produced "the text is too
big" — the typeface was only half of that fault. */
--rm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--rm-font-display: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
--rm-font-head: 'Oswald', 'Arial Narrow', sans-serif;
--rm-font-khmer: 'Kantumruy Pro', 'Noto Sans Khmer', var(--rm-font-body);
--rm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* ---------------------------------------------------------------- Layout
NEARLY FULL-BLEED, and that comes from the mockup rather than from taste.
RielMedia's drawing puts the hero panel 12px from each edge of a 1280px
canvas -- the content fills the page, it is not a centred column. Their
instruction with it was "the content needs to be in all the website page".
This supersedes the 1080px measure taken from courrierinternational.com
(1000px, measured on their live site). That was the right answer to
"une taille type Courrier International"; the mockup is a later and more
specific instruction from the same client, so it wins.
Still capped rather than truly 100%: past about 1600px a front page stops
reading as a page and starts reading as a spreadsheet, and the ad
inventory is sold at fixed pixel sizes. ARTICLE BODY COPY IS UNAFFECTED --
.rm-prose carries its own reading measure in ch, so widening the page
widens the furniture and never the sentences. */
--rm-max: 1560px;
--rm-gutter: 18px;
--rm-col-gap: 34px;
--rm-prose: 68ch;
/* Image framing. The ratio is the PICTURE'S own, clamped into the band on
its data-rm-frame attribute by frameImages() in rielmedia.js. These are
only the pre-load fallbacks. */
--rm-ratio-lead: 4 / 3;
--rm-ratio-card: 3 / 2;
/* Placeholders, tinted from the section rather than grey. */
--rm-hatch-a: repeating-linear-gradient(135deg, #CFDFEC 0 7px, #DEEAF3 7px 14px);
--rm-hatch-b: repeating-linear-gradient(135deg, #C3D6E6 0 7px, #D4E3EF 7px 14px);
--rm-hatch-c: repeating-linear-gradient(135deg, #C9DAE9 0 8px, #DAE7F1 8px 16px);
--rm-hatch-ad: repeating-linear-gradient(135deg, #E4EDF4 0 6px, #EFF5F9 6px 12px);
}
/* --------------------------------------------------------------------------
2. Reset / base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The browser's own [hidden] rule is `display: none` at UA specificity, so ANY
author rule that sets display beats it. `.rm-row { display: flex }` did
exactly that: the section filters set `hidden` on 12 of 14 rows and all 14
stayed on screen, so clicking a filter appeared to do nothing.
!important here is deliberate and correct -- `hidden` means hidden, and it
must outrank a component's own display value. */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--rm-page);
color: var(--rm-ink);
font-family: var(--rm-font-body);
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; }
a { color: var(--rm-ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--rm-link-hover); }
a:focus-visible { outline: 3px solid var(--rm-amber); outline-offset: 2px; color: var(--rm-ink); }
button { font-family: inherit; }
button:focus-visible,
[role="button"]:focus-visible { outline: 3px solid var(--rm-amber); outline-offset: 2px; }
/* Khmer copy — ready for the Phase 6 locale (§3, §5). */
.rm-km, [lang="km"] { font-family: var(--rm-font-khmer); letter-spacing: 0; }
.rm-visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rm-skip-link {
position: absolute; left: -9999px; z-index: 999;
background: var(--rm-ink); color: #fff; padding: 12px 18px;
font: 700 12px/1 var(--rm-font-body); letter-spacing: .14em; text-transform: uppercase;
}
.rm-skip-link:focus { left: 12px; top: 12px; color: #fff; }
/* --------------------------------------------------------------------------
3. Layout primitives
-------------------------------------------------------------------------- */
.rm-shell { max-width: var(--rm-max); margin: 0 auto; padding-inline: var(--rm-gutter); }
.rm-cols { display: flex; flex-wrap: wrap; gap: var(--rm-col-gap); }
.rm-cols__main { flex: 4 1 560px; min-width: 0; }
/* CAPPED, not proportional. As `flex: 1 1 290px` the sidebar grew with the
page: at a 1512px viewport it took 408px to hold 300px advertising units,
wasting ~100px on every screen and starving the story column. Every unit it
carries is 300px wide, so 340px is as wide as it ever needs to be. */
.rm-cols__aside { flex: 0 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
/* THE SIDEBAR TRAVELS WITH THE READER.
RielMedia: "the side bar include the ad up needs to move when i scroll down
in the page."
Two things had to be true before `position: sticky` meant anything here.
1. align-self. A flex item defaults to stretch, so this column was being
drawn the full height of the row -- 5123px on a section page, the same
as the story list beside it. A sticky box that is already as tall as
everything it could scroll past has nothing to stick to. (This is the
same stretch-beats-your-intention trap that made aspect-ratio a no-op
in the shorts rail.)
2. A top that accounts for the sidebar being TALLER than the screen. On a
section page the content is ~390px and fits under the 85px masthead with
room to spare. On an article page it is ~965px against ~815px of usable
height: pin that at the top and its last unit can never be reached.
So the offset is computed per page in initStickySidebar() --
near-the-top when the column fits, NEGATIVE when it does not, which lets
the column scroll up until its bottom meets the bottom of the window and
pin there. Either way it moves with the page and all of it is reachable.
The class is added by script, not assumed: it depends on a measurement, and
a sidebar that grows past the viewport must fall back rather than hide its
own contents. */
.rm-cols__aside.is-rm-sticky {
align-self: start;
position: sticky;
top: var(--rm-aside-top, 101px);
}
/* One sticky context, not two. With the whole column sticky, a unit inside it
sticking on its own would fight the parent for the same pixels. */
.rm-cols__aside.is-rm-sticky .rm-ad--sticky { position: static; }
.rm-rule-h { flex: 1; height: 1px; background: var(--rm-border); }
/* --------------------------------------------------------------------------
4. Type scale
-------------------------------------------------------------------------- */
/* HEADLINES — heavy condensed navy capitals, per RielMedia's mockup.
Read the --rm-font-display note in the tokens block for why this reverses
the previous pass, and why capitals are safe again now that the headline has
its own column instead of lying across the photograph. */
.rm-display {
font-family: var(--rm-font-head);
font-weight: 600;
color: var(--rm-navy-title);
letter-spacing: .005em;
text-transform: uppercase;
text-wrap: balance;
/* A WORD IS NEVER BROKEN. Reported from the artifact: "one word needs
always to be all together cannot one letter like that alone" -- and it was
right, "AUTOMOBILE" was setting as AUTOMOBIL / E.
break-word was doing that, and it was ALSO defeating the fix. It breaks a
word rather than letting it overflow, so the box is never exceeded, so the
headline fitter's width test never fired and the size was never reduced.
With normal wrapping a too-wide word overflows instead, the fitter sees it
and shrinks the type until the whole word fits on a line. The two changes
only work together: either alone leaves a defect.
hyphens stays manual: these are capitals, and hyphenated capitals read
worse than a smaller line. */
hyphens: manual;
overflow-wrap: normal;
word-break: normal;
margin: 0;
line-height: 1.02;
}
/* AUTO-RESIZE (CR-10, and the client's "the text is too big we need to have an
auto-resize"). Two layers, and BOTH are needed:
1. clamp() here, on the viewport. Always a sane size, with no JavaScript.
2. assets/js/rielmedia.js shrinks any [data-rm-fit] headline until it fits
its line budget. That is the part that reacts to LENGTH — CSS cannot
count characters.
Capitals make layer 2 more important, not less: caps are wider than
lowercase at the same size, so a long headline runs out of room sooner.
Measured after the change: the client's own 72-character headline lands on
three lines instead of five. */
/* LEADING HAS A FLOOR, AND IT IS SET BY THE ACCENTS, NOT BY TASTE.
RielMedia: "l'accent e du e sur les titres touchent la partie haut du titre
il faut ajouter un peu plus d'espace interligne".
These headlines are text-transform: uppercase, and French capitals carry
accents -- É, À, Ê. Measured on the live hero, Oswald 600 at 21.1px:
cap height (E) 17.1px 0.81 em
accented cap (É, À) 22.6px 1.07 em <- the accent adds 0.26 em
so the accent needs a leading of at least 1.07 em to clear the baseline
of the line above; the hero was set at 0.98 em, short by 5.9px.
A line-height BELOW 1 was guaranteed to collide: the accent of one line was
being drawn above the baseline of the previous one. Every step of the scale
was under the 1.071 floor, so every one of them could clip -- the hero worst,
being the tightest and the largest.
1.12 everywhere: clear of the floor with about 0.05 em of air, and still
tight enough to read as display type. The scale used to give the bigger
sizes the tighter leading, which is normal typographic practice -- but the
accent constraint is a RATIO, identical at every size, so it applies to all
of them equally and the differentiation had to go. */
.rm-display--hero { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.12; }
/* The size is held in a custom property as well as applied, because
.rm-article__title's measure has to be derived from the DESIGNED size rather
than the size the headline fitter may have shrunk it to. See there. */
.rm-display--article { --rm-article-size: clamp(30px, 3.9vw, 50px); font-size: var(--rm-article-size); line-height: 1.12; }
.rm-display--lead { font-size: clamp(22px, 2.3vw, 31px); line-height: 1.12; }
.rm-display--card { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.12; }
.rm-display--sm { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.12; }
.rm-display--page { font-size: clamp(32px, 4vw, 52px); line-height: 1.12; font-weight: 700; }
/* The oversized editorial ordinals ("01", "02", "03"). */
.rm-ordinal {
font: 400 clamp(52px, 5.4vw, 76px)/.8 var(--rm-font-display);
letter-spacing: .02em; color: var(--rm-sect);
}
.rm-ordinal--corner {
position: absolute; right: 16px; bottom: 2px;
font: 400 clamp(48px, 5vw, 68px)/.8 var(--rm-font-display);
color: #fff; letter-spacing: .02em;
}
.rm-ordinal--sm { font: 400 26px/.85 var(--rm-font-display); color: var(--rm-sect); letter-spacing: .02em; }
/* Section headers: "LATEST ACROSS SECTIONS", "MOST READ" … */
/* MODULE LABELS AS FILLED BARS. These used to be dark text with a 4px rule on
the left -- roughly 60 square pixels of colour each. Filled, each is a real
block of it, and because every module sets its own --rm-sect the front page
reads as a sequence of distinct sections rather than one continuous grey
list. That is what "un site plus dynamique" and "plus de couleur" were
asking for. White on every seeded section colour clears 4.5:1 -- computed
in the tokens block, not assumed. */
.rm-kicker {
margin: 0; display: inline-block;
background: var(--rm-sect); color: #fff;
font: 700 12px/1 var(--rm-font-body);
letter-spacing: .17em; text-transform: uppercase;
padding: 9px 13px 8px;
}
.rm-kicker--navy { background: var(--rm-navy); }
.rm-kicker--sm { font-size: 11px; padding: 8px 11px 7px; }
.rm-eyebrow {
font: 700 10px/1 var(--rm-font-body);
letter-spacing: .2em; text-transform: uppercase; color: var(--rm-sect);
}
.rm-meta { font: 400 12px/1.4 var(--rm-font-body); color: var(--rm-muted); }
.rm-mono { font: 400 10px/1 var(--rm-font-mono); letter-spacing: .1em; color: var(--rm-muted-2); }
.rm-mono--11 { font-size: 11px; }
.rm-vlabel {
writing-mode: vertical-rl; transform: rotate(180deg);
font: 700 11px/1 var(--rm-font-body);
letter-spacing: .28em; text-transform: uppercase; color: var(--rm-muted);
}
/* Category chip. Colour comes from a per-tag accent (see §5 of this file). */
.rm-chip {
display: inline-block;
background: var(--rm-sect); color: #fff;
font: 700 10px/1 var(--rm-font-body);
letter-spacing: .15em; text-transform: uppercase;
padding: 6px 9px;
}
/* FORMAT CHIPS — the mockup's banderoles. See src/components/format-chip.hbs.
EACH SETS ITS OWN FOREGROUND, and it has to: white on the mockup's amber is
1.92:1 and on its orange 3.04:1, both well under 4.5. Those two take ink
(9.36:1 and 5.90:1). Inheriting one colour for all five would have shipped
two unreadable chips. */
.rm-chip--fmt { letter-spacing: .16em; }
.rm-chip--fmt-reportage { background: var(--rm-fmt-reportage); color: var(--rm-ink); }
.rm-chip--fmt-interview { background: var(--rm-fmt-interview); color: #fff; }
.rm-chip--fmt-opinion { background: var(--rm-fmt-opinion); color: #fff; }
.rm-chip--fmt-portrait { background: var(--rm-fmt-portrait); color: var(--rm-ink); }
.rm-chip--fmt-analysis { background: var(--rm-fmt-analysis); color: #fff; }
.rm-chip--lg { font-size: 10px; letter-spacing: .2em; padding: 7px 10px; }
.rm-chip--navy { background: var(--rm-navy); }
.rm-chip--outline {
/* display is restated because this modifier is meaningless without it: as a
plain inline box, its padding and margins do not affect line flow at all,
and the heading below rode up into it. Restating makes the modifier safe
to use on its own. */
display: inline-block;
background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff;
padding: 6px 9px; letter-spacing: .2em; font-size: 10px;
}
/* --------------------------------------------------------------------------
5. Per-section accent colours
Sections alternate red / navy in the design. Ghost tags carry an
`accent` value through the theme's section map; this is the fallback.
-------------------------------------------------------------------------- */
.rm-accent-red { background: var(--rm-red); }
.rm-accent-navy { background: var(--rm-navy); }
.rm-accent-ink { background: var(--rm-ink); }
/* --------------------------------------------------------------------------
6. Image placeholders
Real posts render ![]()
; these classes only paint the space when a post
has no feature image, keeping layout stable (CLS) either way.
-------------------------------------------------------------------------- */
/* A story with no photograph. This used to be grey diagonal hatching, which
looks like a broken image rather than a design decision — and on a young
site most stories have no photograph, so the front page was mostly hatch.
It is now a flat tint of the story's own section colour with a solid rule
on top: quiet, clearly deliberate, and different per section. */
.rm-ph {
background: color-mix(in srgb, var(--rm-sect) 11%, var(--rm-surface-alt));
border-top: 4px solid var(--rm-sect);
display: flex; align-items: flex-end; padding: 8px;
}
.rm-ph__label { font: 700 9px/1 var(--rm-font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--rm-muted-2); }
.rm-ph--b { background: var(--rm-hatch-b); }
.rm-ph--c { background: var(--rm-hatch-c); }
.rm-ph--top { align-items: flex-start; }
.rm-ph__label { font: 400 10px/1 var(--rm-font-mono); color: var(--rm-hatch-ink); letter-spacing: .08em; }
.rm-ph__label--sm { font-size: 9px; }
.rm-ratio-16-10 { aspect-ratio: var(--rm-shot-ratio, 16 / 10); }
/* THE RATIO UTILITIES DEFER TO THE PICTURE. --rm-shot-ratio is set per
element by frameImages() in rielmedia.js from the image's own intrinsic
size, clamped into the band on its data-rm-frame attribute. An element with
no data-rm-frame never gets the variable, so it keeps exactly the fixed
ratio it always had -- the ad hatch blocks below among them. */
.rm-ratio-16-11 { aspect-ratio: var(--rm-shot-ratio, 16 / 11); }
.rm-ratio-16-9 { aspect-ratio: 16 / 9; }
.rm-ratio-3-2 { aspect-ratio: var(--rm-shot-ratio, 3 / 2); }
.rm-ratio-1-1 { aspect-ratio: 1 / 1; }
.rm-ratio-6-5 { aspect-ratio: 6 / 5; }
.rm-ratio-1-2 { aspect-ratio: 1 / 2; }
.rm-ratio-9-16 { aspect-ratio: 9 / 16; }
.rm-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --------------------------------------------------------------------------
7. Masthead + navigation + language switcher (§4 nav, §5/§9 switcher)
-------------------------------------------------------------------------- */
/* ==========================================================================
MASTHEAD + STICKY BAR — RielMedia's mockup, 3 Sep 2026
==========================================================================
One white row: logo, sections, actions. The previous pass had two bands with
a dark slate nav; the mockup is a single light bar, so this replaces it.
The whole bar sticks (CR-01). Because it carries the logo too, there is no
separate compact wordmark to reveal on scroll — the brand is always present.
========================================================================== */
/* THE STICKY GOES ON THE HEADER, NOT ON THE BAR INSIDE IT.
This was broken and shipped as working, so it is worth being exact about why.
position: sticky is confined to the element's PARENT BOX -- it can only
travel within its containing block. .rm-navbar sat inside