:root {
--zsm-rm-content: 1280px;
--zsm-rm-reading: 760px;
--zsm-rm-shell: 1540px;
--zsm-rm-edge: clamp(14px, 2.2vw, 30px);
--zsm-rm-gap: clamp(14px, 1.7vw, 24px);
--zsm-rm-hit: 44px;
--zsm-rm-micro: 11px;
--zsm-rm-radius-sm: 10px;
--zsm-rm-radius: 16px;
--zsm-rm-radius-lg: 24px;
--zsm-rm-radius-xl: 30px;
--zsm-rm-accent: #0d8390;
--zsm-rm-accent-strong: #075f69;
--zsm-rm-red: #ef3340;
--zsm-rm-text: #17252b;
--zsm-rm-muted: #56656d;
--zsm-rm-line: rgba(18, 45, 52, .13);
--zsm-rm-soft: #eef3f3;
--zsm-rm-surface: #fffdf9;
--zsm-rm-surface-soft: #f4f7f6;
--zsm-rm-paper-line: rgba(25, 52, 58, .12);
--zsm-rm-canvas: #075862;
--zsm-rm-canvas-mid: #087a86;
--zsm-rm-canvas-dark: #043f48;
--zsm-rm-shadow-sm: 0 10px 26px rgba(3, 27, 33, .085);
--zsm-rm-shadow: 0 20px 52px rgba(3, 27, 33, .13);
--zsm-rm-shadow-lg: 0 34px 84px rgba(3, 27, 33, .19);
--zsm-rm-shadow-float: 0 28px 76px rgba(2, 28, 36, .20);
--zsm-rm-safe-bottom: env(safe-area-inset-bottom, 0px);
--zsm-rm-header-height: 84px;
--zsm-rm-font: Inter, Lato, "Open Sans", Roboto, "DejaVu Sans", sans-serif;
--zsm-rm-serif: "Noto Serif", "DejaVu Serif", serif;
--zsm-rm-fast: 140ms;
--zsm-rm-ui: 200ms;
--zsm-rm-expressive: 320ms;
}
html { background: var(--zsm-rm-canvas-dark); }
body.zsm-rm {
min-height: 100vh;
overflow-x: clip;
background:
radial-gradient(circle at 14% -8%, rgba(104, 219, 224, .14), transparent 32rem),
linear-gradient(180deg, var(--zsm-rm-canvas-mid) 0, var(--zsm-rm-canvas) 30rem, var(--zsm-rm-canvas-dark) 100%);
color: var(--zsm-rm-text);
-webkit-text-size-adjust: 100%;
}
.rm-route,
.rm-home-shell,
.rm-single-shell,
.rm-archive-shell,
.rm-page-shell,
.rm-events-shell,
.rm-page-legacy,
.zsm-local-page,
.rm-city,
.rm-local-single {
width: 100%;
max-width: none;
box-sizing: border-box;
min-height: calc(100vh - var(--zsm-rm-header-height));
margin: 0;
font-family: var(--zsm-rm-font);
color: var(--zsm-rm-text);
}
.rm-route *, .rm-route *::before, .rm-route *::after,
.rm-home-shell *, .rm-home-shell *::before, .rm-home-shell *::after,
.rm-single-shell *, .rm-single-shell *::before, .rm-single-shell *::after,
.rm-archive-shell *, .rm-archive-shell *::before, .rm-archive-shell *::after,
.rm-page-shell *, .rm-page-shell *::before, .rm-page-shell *::after,
.rm-events-shell *, .rm-events-shell *::before, .rm-events-shell *::after,
.rm-page-legacy *, .rm-page-legacy *::before, .rm-page-legacy *::after,
.zsm-local-page *, .zsm-local-page *::before, .zsm-local-page *::after,
.rm-city *, .rm-city *::before, .rm-city *::after,
.rm-local-single *, .rm-local-single *::before, .rm-local-single *::after { box-sizing: border-box; }
body.zsm-rm ::selection { background: #bfecef; color: #10272d; }
body.zsm-rm :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid #7edce2;
outline-offset: 3px;
}
.rm-surface {
background: var(--zsm-rm-surface);
border: 1px solid rgba(255,255,255,.6);
border-radius: var(--zsm-rm-radius-lg);
box-shadow: var(--zsm-rm-shadow);
}
.rm-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
color: var(--zsm-rm-red);
font-size: 11.5px;
font-weight: 850;
line-height: 1.2;
letter-spacing: .085em;
text-transform: uppercase;
}
.rm-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 99px; background: currentColor; }
.rm-section-title {
margin: 0;
color: inherit;
font-size: clamp(1.55rem, 2.5vw, 2.15rem);
font-weight: 820;
line-height: 1.06;
letter-spacing: -.035em;
}
.rm-pagination { margin-top: 36px; }
.rm-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-pagination .page-numbers {
display: grid;
place-items: center;
min-width: 42px;
min-height: 42px;
padding-inline: 12px;
border: 1px solid rgba(255,255,255,.3);
border-radius: 999px;
background: rgba(255,255,255,.95);
color: var(--zsm-rm-text);
font-weight: 760;
text-decoration: none;
box-shadow: var(--zsm-rm-shadow-sm);
}
.rm-pagination .page-numbers.current { border-color: #7edce2; color: var(--zsm-rm-accent-strong); }
.rm-empty {
margin: 0;
padding: 20px;
border: 1px dashed rgba(255,255,255,.34);
border-radius: var(--zsm-rm-radius);
color: rgba(255,255,255,.86);
background: rgba(3,54,62,.28);
}
@media (max-width: 1199px) {
:root { --zsm-rm-header-height: 72px; }
}
@media (max-width: 720px) {
:root {
--zsm-rm-edge: 8px;
--zsm-rm-gap: 12px;
--zsm-rm-header-height: 66px;
}
body.zsm-rm { padding-bottom: calc(76px + var(--zsm-rm-safe-bottom)); background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
html, body.zsm-rm { scroll-behavior: auto; }
}