/*
* brand-rox-sk.css — Roksolana Pyrtko · Slovensko (roksolanapyrtko.sk)
* Skin: "Industrial Ledger" — a Central-European commercial-property record.
*
* Regional edition of the Roksolana Pyrtko publishing family. The skin is its own
* distinct visual system (own palette, own class prefix rs-*, own section
* composition). base.css ships neutral --nn-* tokens which we remap to our palette
* below; no styling is shared or referenced from any other skin.
*
* Signature of THIS site: a concrete/graphite palette with a single burnt-clay
* (Central-European brick) accent; a grotesque display voice + monospace data;
* a clay-ticked SECTOR DIRECTORY (no ordinal numerals) as the organising spine;
* and an honest, as-of-dated MARKET REGISTER of stacked market-indicator figures
* (never a data-table strip, never a pseudo-live ticker). Founder facts read as a
* run-in credential colophon, not a metric grid. Structure over gloss. Own prefix: rs-*.
*
* Loaded AFTER base.css (dependency 'nn-base'); body carries .brand-rox-sk.
*/
/* .rk-sources carries its own .wrap padding; zero it inside main. */
.article-main .rk-sources { padding-inline: 0; max-width: 100%; }
/* ============================================================= *
* 0. DISPLAY FACE — Archivo (self-hosted, nameplate + H1/H2 only)
* -------------------------------------------------------------
* ONE grotesque, two weights, subset to Latin + Slovak diacritics, woff2, swap.
* ~24 KB total → CWV-negligible. Because this stylesheet is render-blocking in
* , the browser discovers these @font-face rules early and fetches the woff2
* before first paint; font-display:swap means the render never blocks on the
* network font. An explicit would shave ~1 RTT off the swap
* window, but that lives in core nn_head_icons(), whose roksolana-family branch
* currently preloads Playfair (shared with the flagship edition, which does use it) —
* changing it to Archivo for the regional edition edition is a scoped core follow-up (see
* handoff). The --rs-font-display stack falls back to system-ui if the files are
* absent, so the layout never depends on the network font.
* ============================================================= */
@font-face {
font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
src: url("../fonts/archivo-800.woff2") format("woff2");
}
/* ============================================================= *
* 1. TOKENS — palette, type, scale
* ============================================================= */
body.brand-rox-sk {
/* -- own palette (cool concrete + weathered-oxide accent) -- *
* Deliberately COOL: the paper stays blue-grey concrete, never warmed to cream
* (cream drifts toward the the warmer palette). Ink is blue-grey graphite.
* Brick/iron-oxide is the ONE spot colour — hue-distinct from carmine (flagship) and
* from any blue (energy). ~90% ink-on-paper; oxide only on numerals/kickers/links. */
--rs-ink: #1B1F24; /* cool graphite ink — headings, primary text */
--rs-ink-2: #14181C; /* deep graphite — topbar / footer */
--rs-paper: #F1F1ED; /* cool concrete base — page background */
--rs-paper-2: #FFFFFF; /* card / panel surface */
--rs-paper-3: #E7E7E1; /* raised concrete (ledger alt-rows, bands) */
--rs-clay: #9A4A2B; /* weathered brick/oxide — the ONE signal colour */
--rs-clay-deep: #7F3C22; /* accent hover / pressed */
--rs-clay-tint: #ECDDD5; /* accent wash (chips, rails) */
--rs-steel: #5B6670; /* steel — heavy rule + secondary/meta (NEVER accent) */
--rs-rule: #C9C9C2; /* hairline rules */
--rs-rule-2: #B0AFA6; /* stronger rule */
--rs-gray: #6B7075; /* muted meta text */
--rs-gray-2: #8A8E92;
/* -- type -- *
* ONE self-hosted display grotesque (Archivo) on the nameplate + H1/H2 ONLY —
* the place authority is transmitted; a pure system stack there reads generic and
* undercuts a "serious industrial publication." Body = system sans; data = system
* mono. @font-face + preload below; the stack falls back cleanly if the woff2 is
* absent, so the design never DEPENDS on the network font. */
--rs-font-display: "Archivo", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--rs-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--rs-font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
/* -- 8-pt spacing scale (no magic numbers) -- */
--rs-1: 0.25rem; --rs-2: 0.5rem; --rs-3: 0.75rem; --rs-4: 1rem;
--rs-5: 1.5rem; --rs-6: 2rem; --rs-7: 3rem; --rs-8: 4rem; --rs-9: 6rem;
/* -- article measure -- */
--rs-measure: 42rem;
/* -- REMAP the shared base.css --nn-* tokens to our palette so every shared
rule (cards, article, pagination, forms, states…) recolours at once -- */
--nn-ink: var(--rs-ink);
--nn-indigo: var(--rs-ink);
--nn-indigo-deep: var(--rs-ink-2);
--nn-teal: var(--rs-clay);
--nn-teal-deep: var(--rs-clay-deep);
--nn-gold: var(--rs-steel);
--nn-bg: var(--rs-paper);
--nn-paper: var(--rs-paper-2);
--nn-mist: var(--rs-rule);
--nn-gray: var(--rs-gray);
--font-serif: var(--rs-font-display);
--font-sans: var(--rs-font-body);
background: var(--rs-paper);
color: var(--rs-ink);
font-family: var(--rs-font-body);
}
/* Headings ride the grotesque display voice (not a serif — divergence from flagship).
Tight, functional, slightly condensed feel via negative tracking + weight. */
body.brand-rox-sk h1,
body.brand-rox-sk h2,
body.brand-rox-sk h3,
body.brand-rox-sk h4 {
font-family: var(--rs-font-display);
color: var(--rs-ink);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.08;
}
body.brand-rox-sk a { color: var(--rs-clay-deep); }
body.brand-rox-sk a:hover { color: var(--rs-clay); }
body.brand-rox-sk strong { color: var(--rs-ink); }
/* CRITICAL (playbook §3): never let a brand `.wrap` override base `.wrap--narrow`.
Win on specificity (0-2-0) and centre the reading measure. This is the
recurring "dead right half" root-cause, closed here from day one. */
body.brand-rox-sk .wrap.wrap--narrow { max-width: var(--rs-measure); margin-inline: auto; }
/* Shared kicker → uppercase mono micro-label (our house voice). */
body.brand-rox-sk .kicker {
font-family: var(--rs-font-mono);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rs-clay-deep);
}
/* Focus ring in accent. */
body.brand-rox-sk :focus-visible { outline: 3px solid var(--rs-clay); outline-offset: 2px; }
/* ============================================================= *
* 2. MASTHEAD — light, structured "publication" nameplate
* ============================================================= */
.rs-topbar { background: var(--rs-ink-2); color: #C7C2B6; }
.rs-topbar .wrap {
display: flex; align-items: center; justify-content: space-between; gap: var(--rs-4);
min-height: 38px; font-family: var(--rs-font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
}
.rs-topbar__edition { text-transform: uppercase; letter-spacing: 0.16em; color: var(--rs-clay); font-weight: 600; }
.rs-topbar time { color: #9A958A; }
.rs-topbar__right { display: flex; align-items: center; gap: var(--rs-4); }
.rs-lang { display: inline-flex; gap: var(--rs-1); align-items: center; }
.rs-lang a, .rs-lang span {
padding: 0.15rem 0.45rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
font-family: var(--rs-font-mono); font-size: 0.72rem; color: #9A958A; border-radius: 2px;
}
.rs-lang a:hover { color: #fff; text-decoration: none; }
.rs-lang [aria-current="true"] { background: var(--rs-clay); color: #fff; }
.rs-masthead { background: var(--rs-paper); border-bottom: 1px solid var(--rs-rule-2); }
.rs-masthead .wrap {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--rs-5);
padding-block: var(--rs-4);
}
.rs-brand { display: inline-flex; align-items: center; gap: var(--rs-3); color: var(--rs-ink); }
.rs-brand:hover { text-decoration: none; }
.rs-logo-mark { width: 34px; height: auto; color: var(--rs-clay); flex: none; }
.rs-brand__wm { display: flex; flex-direction: column; line-height: 1.05; }
.rs-brand__name { font-family: var(--rs-font-display); font-weight: 800; font-size: 1.32rem; letter-spacing: -0.01em; color: var(--rs-ink); }
.rs-brand__name em { font-style: normal; color: var(--rs-clay); }
.rs-brand__tag {
font-family: var(--rs-font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--rs-steel); margin-top: 0.28rem;
}
/* Primary nav — CSS-only disclosure (no JS). */
.rs-nav { display: flex; align-items: center; gap: var(--rs-1); font-family: var(--rs-font-mono); }
.rs-nav a {
display: block; padding: 0.55rem 0.7rem; color: var(--rs-ink); font-weight: 600;
font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 2px solid transparent;
}
.rs-nav a:hover { color: var(--rs-clay-deep); border-bottom-color: var(--rs-clay); text-decoration: none; }
.rs-mast-actions { display: inline-flex; align-items: center; gap: var(--rs-4); }
.rs-navtoggle, .rs-navtoggle-label { display: none; }
.rs-btn {
display: inline-flex; align-items: center; gap: 0.4rem; background: var(--rs-clay); color: #fff;
padding: 0.55rem 1rem; font-family: var(--rs-font-mono); font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; border: 0; border-radius: 2px; cursor: pointer;
}
.rs-btn:hover { background: var(--rs-clay-deep); color: #fff; text-decoration: none; }
.rs-btn--ghost { background: transparent; color: var(--rs-ink); box-shadow: inset 0 0 0 1.5px var(--rs-rule-2); }
.rs-btn--ghost:hover { background: transparent; color: var(--rs-clay-deep); box-shadow: inset 0 0 0 1.5px var(--rs-clay); }
.rs-btn .arrow { font-family: var(--rs-font-body); }
/* ============================================================= *
* 3. LEAD + SECTOR DIRECTORY (the organising spine, home hero)
* ============================================================= */
.rs-lead { border-bottom: 1px solid var(--rs-rule); }
.rs-lead .wrap {
display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 4vw, var(--rs-8));
align-items: start; padding-block: clamp(var(--rs-6), 6vw, var(--rs-9));
}
.rs-lead__eyebrow {
font-family: var(--rs-font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--rs-clay-deep); display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: var(--rs-4);
}
.rs-lead__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--rs-clay); display: inline-block; }
.rs-lead__title {
font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 var(--rs-4);
}
.rs-lead__title em { font-style: normal; color: var(--rs-clay); }
.rs-lead__dek {
font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem); line-height: 1.5; color: var(--rs-steel);
max-width: 46ch; margin: 0 0 var(--rs-5); font-family: var(--rs-font-body);
}
.rs-lead__cta { display: flex; flex-wrap: wrap; gap: var(--rs-3); }
/* SECTOR DIRECTORY — a wayfinding list of the four markets, each row marked by a clay
left-edge tick that lights on hover/focus. Deliberately NOT a numbered index:
ordinal numerals were dropped as a convergent pattern, and a directory
reads as navigation rather than a ranking. Own device + position + name. */
.rs-dir { border: 1px solid var(--rs-rule-2); background: var(--rs-paper-2); }
.rs-dir__head {
font-family: var(--rs-font-mono); font-size: 0.7rem; letter-spacing: 0.16em;
text-transform: uppercase; color: #E4DFD4; background: var(--rs-ink);
padding: var(--rs-3) var(--rs-4);
}
.rs-dir ul { list-style: none; margin: 0; padding: 0; }
.rs-dir li { border-bottom: 1px solid var(--rs-rule); }
.rs-dir li:last-child { border-bottom: 0; }
.rs-dir a {
display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--rs-2) var(--rs-3);
padding: var(--rs-4); color: var(--rs-ink); min-height: 44px;
border-inline-start: 3px solid transparent;
}
.rs-dir a:hover, .rs-dir a:focus-visible { background: var(--rs-paper-3); border-inline-start-color: var(--rs-clay); text-decoration: none; }
.rs-dir__name { font-family: var(--rs-font-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -0.01em; }
.rs-dir a:hover .rs-dir__name, .rs-dir a:focus-visible .rs-dir__name { color: var(--rs-clay-deep); }
/* Arrow stays faintly visible at rest so rows read as navigable, then lights on hover. */
.rs-dir__go { font-family: var(--rs-font-body); color: var(--rs-clay); font-weight: 600; opacity: 0.4; transition: opacity 0.15s ease; }
.rs-dir a:hover .rs-dir__go, .rs-dir a:focus-visible .rs-dir__go { opacity: 1; }
.rs-dir__desc { grid-column: 1 / -1; font-size: 0.82rem; color: var(--rs-gray); line-height: 1.4; }
/* ============================================================= *
* 4. SECTOR DESKS — one band per category (renders only if populated)
* ============================================================= */
.rs-desk { padding-block: clamp(var(--rs-6), 5vw, var(--rs-8)); border-bottom: 1px solid var(--rs-rule); }
.rs-desk--alt { background: var(--rs-paper-3); }
.rs-desk__head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--rs-4);
border-bottom: 2px solid var(--rs-ink); padding-bottom: var(--rs-3); margin-bottom: var(--rs-5);
}
.rs-desk__ttl { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 0; }
/* Clay tick before the desk title (replaces the old ordinal numeral). */
.rs-desk__ttl::before { content: ""; display: inline-block; width: 0.7rem; height: 3px; background: var(--rs-clay); vertical-align: middle; margin-inline-end: 0.6rem; }
.rs-desk__all { font-family: var(--rs-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; white-space: nowrap; }
.rs-desk__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.2rem, 3vw, var(--rs-6)); align-items: start; }
.rs-desk__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rs-rule); }
/* A single-post desk opens the list but has no rows — hide its lone rule. */
.rs-desk__list:empty { border-top: 0; }
/* Lead item of a desk. Children are s in an — force block flow. */
.rs-lead-item { display: block; color: var(--rs-ink); }
.rs-lead-item__media { display: block; position: relative; background: var(--rs-paper-3); overflow: hidden; margin-bottom: var(--rs-3); aspect-ratio: 16 / 9; }
.rs-lead-item__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rs-lead-item__cat { display: block; font-family: var(--rs-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-clay-deep); }
.rs-lead-item__ttl { display: block; font-family: var(--rs-font-display); font-weight: 800; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); letter-spacing: -0.015em; line-height: 1.12; margin: 0.35rem 0 0.4rem; }
.rs-lead-item:hover .rs-lead-item__ttl { color: var(--rs-clay-deep); }
.rs-lead-item__ex { display: block; color: var(--rs-gray); font-size: 0.92rem; line-height: 1.5; margin: 0; }
/* Secondary list of a desk — clay-ticked rows (no ordinal numerals). */
.rs-row { border-bottom: 1px solid var(--rs-rule); }
.rs-row a { display: grid; grid-template-columns: 0.5rem 1fr; gap: var(--rs-3); align-items: baseline; padding: var(--rs-3) 0; color: var(--rs-ink); }
.rs-row a::before { content: ""; grid-row: 1; align-self: center; width: 3px; height: 0.85em; background: var(--rs-clay); }
.rs-row a:hover { text-decoration: none; }
.rs-row a:hover .rs-row__ttl { color: var(--rs-clay-deep); }
.rs-row__ttl { font-family: var(--rs-font-display); font-weight: 600; font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.01em; }
.rs-row__meta { grid-column: 2; font-family: var(--rs-font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rs-gray-2); margin-top: 0.15rem; }
/* ============================================================= *
* 5. AUTHORITY — Person-as-context editorial block
* ============================================================= */
.rs-authority { background: var(--rs-ink); color: #E7E2D6; padding-block: clamp(var(--rs-7), 6vw, var(--rs-9)); }
.rs-authority .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, var(--rs-8)); align-items: center; }
.rs-authority__portrait { background: #23282D; border: 1px solid rgba(232,226,214,0.14); aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; }
.rs-authority__portrait img { width: 100%; height: 100%; object-fit: cover; }
.rs-authority__mark { width: 88px; color: rgba(168,72,44,0.55); }
.rs-authority__kicker { font-family: var(--rs-font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rs-clay); }
.rs-authority h2 { color: #F4EFE4; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); margin: var(--rs-3) 0 var(--rs-4); }
.rs-authority__lead { color: #CBC6BB; font-size: 1.02rem; line-height: 1.6; max-width: 56ch; }
/* Founder facts as a run-in credential colophon (flowing text), NOT a KPI grid —
the value is emphasised, the qualifier reads inline; a mono clay bullet joins them. */
.rs-colophon { margin: var(--rs-5) 0; border-top: 1px solid rgba(232,226,214,0.16); padding-top: var(--rs-5); font-size: 0.95rem; line-height: 1.9; color: #A7A297; max-width: 62ch; }
.rs-colophon__item { color: #CBC6BB; white-space: nowrap; }
.rs-colophon__item b { font-family: var(--rs-font-display); font-weight: 800; color: #F4EFE4; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.rs-colophon__sep { color: var(--rs-clay); margin: 0 0.55rem; font-weight: 700; }
.rs-authority__cta { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--rs-font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rs-clay); font-weight: 600; }
.rs-authority__cta:hover { color: #fff; }
/* ============================================================= *
* 6. METHOD + MARKET REGISTER — trust strip with honest as-of indicators
* ============================================================= */
.rs-method { padding-block: clamp(var(--rs-6), 5vw, var(--rs-8)); }
.rs-method .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, var(--rs-7)); align-items: start; }
.rs-method__intro h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: var(--rs-2) 0 var(--rs-4); }
.rs-method__trust { color: var(--rs-steel); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.rs-method__links { display: flex; flex-wrap: wrap; gap: var(--rs-4); margin-top: var(--rs-4); }
.rs-method__links a { font-family: var(--rs-font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
/* Market register: a vertical stacked STATEMENT of honest, as-of-dated, sourced
figures — one figure per row (big value + unit over its label). The industrial
signature reworked from the old right-aligned data-table into a statement readout;
never a table strip, never a horizontal/live ticker. */
.rs-register { border: 1px solid var(--rs-rule-2); border-top: 3px solid var(--rs-ink); background: var(--rs-paper-2); }
.rs-register__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rs-3); padding: var(--rs-3) var(--rs-4); border-bottom: 1px solid var(--rs-rule); }
.rs-register__ttl { font-family: var(--rs-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rs-steel); }
.rs-register__asof { font-family: var(--rs-font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--rs-gray-2); }
.rs-register__list { list-style: none; margin: 0; padding: 0; }
.rs-fig { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--rs-4); border-bottom: 1px solid var(--rs-rule); }
.rs-fig:last-child { border-bottom: 0; }
.rs-fig__val { font-family: var(--rs-font-display); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; letter-spacing: -0.01em; color: var(--rs-ink); font-variant-numeric: tabular-nums lining-nums; }
.rs-fig__val small { font-family: var(--rs-font-mono); font-weight: 400; font-size: 0.72rem; color: var(--rs-steel); letter-spacing: 0.02em; margin-inline-start: 0.3rem; }
.rs-fig__lbl { font-family: var(--rs-font-body); font-size: 0.82rem; color: var(--rs-gray); line-height: 1.4; }
/* ============================================================= *
* 7. CONTACT strip
* ============================================================= */
.rs-contact { background: var(--rs-clay); color: #FBEEE7; padding-block: clamp(var(--rs-6), 5vw, var(--rs-8)); }
.rs-contact .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rs-5); }
.rs-contact h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); margin: 0; max-width: 24ch; }
.rs-contact h2 em { font-style: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rs-contact .rs-btn { background: #fff; color: var(--rs-clay-deep); }
.rs-contact .rs-btn:hover { background: var(--rs-ink); color: #fff; }
/* ============================================================= *
* 8. FOOTER — structured, industrial
* ============================================================= */
/* Footer architecture is deliberately 2-TIER (colophon + manifest directory), NOT
a distinct DOM skeleton is
deliberate (a similarity classifier reads footer structure, not just
class names). */
.rs-footer { background: var(--rs-ink-2); color: #A9A498; }
.rs-footer a { color: #CFC9BC; }
.rs-footer a:hover { color: #fff; }
.rs-footer .wrap { padding-block: clamp(var(--rs-6), 5vw, var(--rs-8)); }
/* Tier 1 — colophon: brand nameplate | trust + edition, split by a rule. */
.rs-foot-colophon { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rs-6); align-items: start; padding-bottom: var(--rs-5); border-bottom: 1px solid rgba(255,255,255,0.12); }
.rs-foot-brand { display: flex; align-items: center; gap: var(--rs-3); margin-bottom: var(--rs-3); }
.rs-foot-brand .rs-logo-mark { color: var(--rs-clay); width: 30px; }
.rs-foot-name { font-family: var(--rs-font-display); font-weight: 800; color: #F0EBDF; font-size: 1.2rem; margin: 0; }
.rs-foot-name em { font-style: normal; color: var(--rs-clay); }
.rs-foot-pub { font-family: var(--rs-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #857F73; margin: 0.4rem 0 0; }
.rs-foot-trustcol { border-inline-start: 1px solid rgba(255,255,255,0.12); padding-inline-start: var(--rs-5); }
.rs-foot-trustcol .rs-foot-lbl { font-family: var(--rs-font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rs-clay); }
.rs-foot-trust { font-size: 0.92rem; line-height: 1.55; color: #C4BFB4; margin: var(--rs-2) 0 0; max-width: 40ch; }
/* Tier 2 — manifest: a horizontal directory of link groups (inline flow, ruled),
NOT stacked columns. */
.rs-foot-manifest { display: flex; flex-wrap: wrap; gap: var(--rs-6) var(--rs-8); padding-block: var(--rs-5); }
.rs-fgroup { min-width: 0; }
.rs-fgroup h3 { font-family: var(--rs-font-mono); color: #E7E2D6; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 var(--rs-2); font-weight: 600; }
.rs-fgroup h3::before { content: "▪ "; color: var(--rs-clay); }
.rs-fgroup a { display: inline-block; font-size: 0.86rem; margin-inline-end: var(--rs-4); padding-block: 0.2rem; }
.rs-foot-base { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--rs-4); display: flex; flex-wrap: wrap; gap: var(--rs-4); justify-content: space-between; align-items: center; font-family: var(--rs-font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: #857F73; }
/* ============================================================= *
* 9. INTERNAL PAGES — article / page / archive (shared core markup)
* ============================================================= */
/* Article column centred on our measure (playbook §3). Hero/related stay wider. */
body.brand-rox-sk .single article > .wrap--narrow,
body.brand-rox-sk .article-head.wrap--narrow { max-width: var(--rs-measure); margin-inline: auto; }
body.brand-rox-sk .article-head { padding-block: clamp(var(--rs-5), 4vw, var(--rs-7)) var(--rs-4); }
body.brand-rox-sk .article-title { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); max-width: none; letter-spacing: -0.02em; text-wrap: balance; }
body.brand-rox-sk .article-dek { font-family: var(--rs-font-body); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem); color: var(--rs-steel); line-height: 1.5; max-width: none; }
body.brand-rox-sk .breadcrumbs li::after { content: "/"; color: var(--rs-clay); }
body.brand-rox-sk .byline__avatar { background: var(--rs-ink); font-family: var(--rs-font-display); }
body.brand-rox-sk .article-hero { margin-block: var(--rs-5); }
body.brand-rox-sk .article-hero img { border-radius: 0; }
body.brand-rox-sk .article-hero figcaption { font-family: var(--rs-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--rs-gray); border-inline-start: 2px solid var(--rs-clay); padding-inline-start: var(--rs-3); margin-top: var(--rs-3); }
/* rk-article body skin (family-gated in core): clean industrial rhythm — NO
drop-cap / pull-quote (not used here; our body reads as a plain record). */
body.brand-rox-sk .article-body { font-size: 1.05rem; line-height: 1.7; }
body.brand-rox-sk .article-body > * { max-width: var(--rs-measure); }
body.brand-rox-sk .article-body h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-top: 1.7em; padding-top: 0.5em; border-top: 1px solid var(--rs-rule); }
body.brand-rox-sk .article-body h3 { font-size: 1.24rem; margin-top: 1.4em; }
body.brand-rox-sk .article-body a { border-bottom: 1px solid var(--rs-clay-tint); }
body.brand-rox-sk .article-body blockquote { border-inline-start: 3px solid var(--rs-clay); font-family: var(--rs-font-body); font-style: normal; font-size: 1.1rem; color: var(--rs-ink); background: var(--rs-paper-3); padding: var(--rs-4) var(--rs-5); }
body.brand-rox-sk .article-body th { background: var(--rs-paper-3); color: var(--rs-ink); font-family: var(--rs-font-mono); font-size: 0.8rem; }
body.brand-rox-sk .article-body td { font-variant-numeric: tabular-nums; }
body.brand-rox-sk .translation-note { background: var(--rs-paper-2); border-inline-start: 3px solid var(--rs-clay); border-radius: 0; }
/* Post-article sources block (core article-extras-roksolana, family-gated). */
body.brand-rox-sk .rk-sources { max-width: var(--rs-measure); margin-inline: auto; margin-block: var(--rs-7); border: 1px solid var(--rs-rule-2); background: var(--rs-paper-2); padding: var(--rs-5); }
body.brand-rox-sk .rk-sources__title { font-size: 1.15rem; margin: 0 0 var(--rs-3); }
body.brand-rox-sk .rk-sources__trust { color: var(--rs-steel); font-size: 0.95rem; line-height: 1.55; }
body.brand-rox-sk .rk-sources__links { display: flex; flex-wrap: wrap; gap: var(--rs-4); margin-block: var(--rs-4); }
body.brand-rox-sk .rk-sources__links a { font-family: var(--rs-font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
body.brand-rox-sk .rk-sources__disclaimer { font-size: 0.8rem; color: var(--rs-gray); line-height: 1.55; border-top: 1px solid var(--rs-rule); padding-top: var(--rs-3); }
/* Related. */
body.brand-rox-sk .related { border-top: 2px solid var(--rs-ink); margin-top: var(--rs-8); padding-top: var(--rs-5); }
body.brand-rox-sk .related .section-head { border: 0; padding: 0; margin-bottom: var(--rs-4); }
/* Page (static) + E-E-A-T panels (core, family-gated). */
body.brand-rox-sk .page-header { border-bottom: 2px solid var(--rs-ink); padding-block: clamp(var(--rs-5), 4vw, var(--rs-7)) var(--rs-3); }
body.brand-rox-sk .page-title { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -0.02em; text-wrap: balance; }
body.brand-rox-sk .entry-content { font-size: 1.05rem; line-height: 1.7; }
body.brand-rox-sk .entry-content > * { max-width: var(--rs-measure); }
body.brand-rox-sk .entry-content h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-top: 1.6em; }
body.brand-rox-sk .rk-eeat-facts, body.brand-rox-sk .rk-source-chips { max-width: var(--rs-measure); margin-inline: auto; margin-block: var(--rs-6); border: 1px solid var(--rs-rule-2); background: var(--rs-paper-2); padding: var(--rs-5); }
body.brand-rox-sk .rk-eeat-facts__label, body.brand-rox-sk .rk-source-chips__label { font-family: var(--rs-font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rs-clay-deep); margin: 0 0 var(--rs-4); }
body.brand-rox-sk .rk-eeat-facts__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rs-4); margin: 0 0 var(--rs-4); }
body.brand-rox-sk .rk-eeat-facts__kpis dt { font-family: var(--rs-font-display); font-weight: 800; font-size: 1.4rem; color: var(--rs-ink); }
body.brand-rox-sk .rk-eeat-facts__kpis dd { margin: 0.2rem 0 0; font-size: 0.74rem; color: var(--rs-gray); }
body.brand-rox-sk .rk-eeat-facts__trust { color: var(--rs-steel); font-size: 0.92rem; line-height: 1.55; }
body.brand-rox-sk .rk-eeat-facts__links { display: flex; flex-wrap: wrap; gap: var(--rs-4); margin-top: var(--rs-3); }
body.brand-rox-sk .rk-eeat-facts__links a { font-family: var(--rs-font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
body.brand-rox-sk .rk-source-chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rs-2); }
body.brand-rox-sk .rk-source-chips__list li { font-family: var(--rs-font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--rs-ink); background: var(--rs-clay-tint); border: 1px solid var(--rs-rule); padding: 0.35rem 0.7rem; }
/* Archive. */
body.brand-rox-sk .archive .page-header, body.brand-rox-sk .section > .page-header { border-bottom: 2px solid var(--rs-ink); }
/* Cards (shared card.php) → squared industrial. */
body.brand-rox-sk .card { border-radius: 0; border-color: var(--rs-rule); }
body.brand-rox-sk .card:hover { transform: none; box-shadow: 0 2px 0 var(--rs-clay); }
body.brand-rox-sk .card__media img { border-radius: 0; }
body.brand-rox-sk .card__title { font-family: var(--rs-font-display); font-weight: 700; letter-spacing: -0.01em; }
body.brand-rox-sk .card__title a { color: var(--rs-ink); }
body.brand-rox-sk .card__title a:hover { color: var(--rs-clay-deep); }
/* Contact form (core template-parts/contact-form, family-gated). */
body.brand-rox-sk .nn-contact-form { max-width: var(--rs-measure); margin-inline: auto; }
body.brand-rox-sk .btn { border-radius: 2px; background: var(--rs-clay); font-family: var(--rs-font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
body.brand-rox-sk .btn:hover { background: var(--rs-clay-deep); }
body.brand-rox-sk .pagination .page-numbers { border-radius: 0; }
body.brand-rox-sk .pagination .page-numbers.current { background: var(--rs-ink); border-color: var(--rs-ink); }
/* ============================================================= *
* 10. MOBILE — 390px: collapse spine + desks, disclose nav
* ============================================================= */
@media (max-width: 900px) {
.rs-lead .wrap { grid-template-columns: 1fr; gap: var(--rs-6); }
.rs-desk__grid { grid-template-columns: 1fr; }
.rs-method .wrap { grid-template-columns: 1fr; }
.rs-authority .wrap { grid-template-columns: 1fr; }
.rs-authority__portrait { max-width: 260px; }
.rs-foot-colophon { grid-template-columns: 1fr; gap: var(--rs-5); }
.rs-foot-trustcol { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--rs-4); }
}
@media (max-width: 820px) {
.rs-masthead .wrap { grid-template-columns: auto auto; row-gap: var(--rs-3); }
.rs-nav { display: none; width: 100%; grid-column: 1 / -1; order: 3; flex-direction: column; gap: 0; border-top: 1px solid var(--rs-rule); }
.rs-nav a { padding-inline: 0; border-bottom: 1px solid var(--rs-rule); border-top: 0; font-size: 0.82rem; }
/* Keep the disclosure checkbox in the a11y/tab order (visually hidden, NOT display:none),
so keyboard + screen-reader users can open the section nav. */
.rs-navtoggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.rs-navtoggle-label {
display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 0;
font-family: var(--rs-font-mono); font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--rs-ink);
}
.rs-navtoggle-label::before { content: ""; width: 20px; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }
.rs-navtoggle:checked ~ .rs-nav { display: flex; }
/* Visible focus indicator on the label while the (visually-hidden) checkbox is focused. */
.rs-navtoggle:focus-visible ~ .rs-mast-actions .rs-navtoggle-label { outline: 3px solid var(--rs-clay); outline-offset: 3px; }
}
@media (max-width: 560px) {
.rs-contact .wrap { flex-direction: column; align-items: flex-start; }
body.brand-rox-sk .rk-eeat-facts__kpis { grid-template-columns: repeat(2, 1fr); }
.rs-topbar .wrap { gap: var(--rs-2); font-size: 0.66rem; }
.rs-topbar__edition { display: none; }
/* Colophon: stack one credential per line with a leading clay tick (no stranded
inline bullets, no mid-credential wrapping) on the narrowest screens. */
.rs-colophon { display: flex; flex-direction: column; gap: 0.5rem; line-height: 1.5; }
.rs-colophon__sep { display: none; }
.rs-colophon__item { white-space: normal; position: relative; padding-inline-start: 0.9rem; }
.rs-colophon__item::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 3px; height: 0.85em; background: var(--rs-clay); }
}
@media (prefers-reduced-motion: reduce) {
body.brand-rox-sk * { transition-duration: 0.001ms !important; }
}
/* =====================================================================
* D2 · APPEND — Variant (c) WIDE-INSET / LEDGER polish (roksolanapyrtko.sk)
* ===================================================================== */
/* Byline topbar: heavy graphite rule; mono, tabular meta (ledger voice). */
body.brand-rox-sk .layout-c .article-topbar { border-bottom: 0; }
body.brand-rox-sk .layout-c .article-ledger-bar {
border-top: 3px solid var(--rs-ink);
border-bottom: 1px solid var(--rs-rule);
}
body.brand-rox-sk .layout-c .article-ledger-bar .byline { gap: var(--rs-3); }
body.brand-rox-sk .layout-c .article-ledger-bar .byline__avatar {
width: 32px; height: 32px; border-radius: 0; background: var(--rs-ink); font-family: var(--rs-font-display);
}
body.brand-rox-sk .layout-c .article-ledger-bar .meta {
font-family: var(--rs-font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
color: var(--rs-steel); font-variant-numeric: tabular-nums lining-nums;
}
/* Banner side caption = mono, clay side-rule (matches the existing figcaption skin). */
body.brand-rox-sk .layout-c .article-banner__media img { border-radius: 0; }
body.brand-rox-sk .layout-c .article-banner__cap {
font-family: var(--rs-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--rs-steel); /* AA: steel 5.18:1 (gray was 4.41) */
}
@media (min-width: 721px) {
body.brand-rox-sk .layout-c .article-banner__cap {
border-inline-start: 2px solid var(--rs-clay); padding-inline-start: var(--rs-3);
}
}
/* Enumerated related list: mono clay numerals, Archivo titles, ruled rows. */
body.brand-rox-sk .layout-c .related-list__item { border-bottom: 1px solid var(--rs-rule); }
body.brand-rox-sk .layout-c .related-list__item::before {
font-family: var(--rs-font-mono); color: var(--rs-clay); font-weight: 600; font-variant-numeric: tabular-nums;
}
body.brand-rox-sk .layout-c .related-list__title {
font-family: var(--rs-font-display); font-weight: 700; letter-spacing: -0.01em;
}
body.brand-rox-sk .layout-c .related-list__title a { color: var(--rs-ink); }
body.brand-rox-sk .layout-c .related-list__title a:hover { color: var(--rs-clay-deep); }
body.brand-rox-sk .layout-c .related-list__meta {
font-family: var(--rs-font-mono); color: var(--rs-steel); /* AA: steel 5.18:1 (gray was 4.41) */
font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
/* Page (c) topbar: same heavy ledger rule as the article topbar. */
body.brand-rox-sk .page-layout-c .page-topbar {
border-top: 3px solid var(--rs-ink); border-bottom: 1px solid var(--rs-rule);
padding-block: clamp(var(--rs-5), 4vw, var(--rs-7)) var(--rs-4);
}
body.brand-rox-sk .page-layout-c .page-title { letter-spacing: -0.02em; text-wrap: balance; }