@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Sofia+Sans+Extra+Condensed:wght@900&family=Marck+Script&family=PT+Mono&display=swap');

/* Родина автоматизаций · Красное поле. Colors, fonts, spacing, angles and print values come from tokens.css;
   switch a block between the red field and paper with data-theme="pole" | "list" on it.
   Flat by rule: no radius, no shadows, no transitions. Lines are brush strokes drawn by RodinaRed.print(). */

/* Ink: the press of variants 9 and 14 on big type (each brand line its own grain), an uneven edge on the rest */
.ra-filters .ra-ink { filter: url(#ra-press1); }
.ra-filters .ra-l2.ra-ink { filter: url(#ra-press2); }
.ra-filters .ra-l3.ra-ink { filter: url(#ra-press3); }
.ra-filters .ra-ink-soft { filter: url(#ra-soft); }

/* Brand lines; their ra-fit-* sizes are at the end of the file so they win over component defaults.
   The .22em padding keeps Д's tail, Й's breve and the torn edge inside the filter region. */
.ra-l1, .ra-l2, .ra-l3 {
  display: block; margin: -0.22em 0; padding: 0.22em 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; line-height: 0.86; text-transform: uppercase;
}
.ra-l1 { color: var(--title); }
.ra-l2 { color: var(--ink); }
.ra-l3 { color: var(--slogan, var(--ink)); }

/* Note: a handwritten line over type, like «за пять дней!»; one color, no outline */
.ra-overprint { position: relative; display: inline-block; }
.ra-note {
  display: inline-block; white-space: nowrap; font-family: var(--font-script); font-weight: 400; line-height: 1;
  color: var(--note); transform: rotate(var(--tilt-note));
}
.ra-overprint > .ra-note { position: absolute; right: 0.17em; bottom: -0.42em; z-index: 1; }

/* Rule: a double brush stroke (4 px + 1.25 px) or one stroke; CSS lines only until the script draws it */
.ra-rule { display: block; box-sizing: border-box; height: 12px; color: var(--rule); border-top: 4px solid; border-bottom: 1.25px solid; }
.ra-rule--single { height: 6px; border-bottom: 0; }
.ra-printed .ra-rule { border: 0; }
/* the stroke is already a vector brush: a raster filter on top only adds stairs */
.ra-filters .ra-rule.ra-ink-soft, .ra-filters .ra-rule { filter: none; }
.ra-rule__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Contact line under a stroke */
.ra-contact {
  position: relative; display: inline-block; padding-top: 18px; border-top: 2px solid var(--rule);
  font-family: var(--font-text); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--contact);
}
.ra-printed .ra-contact { border-top-color: transparent; }
.ra-contact__rule { position: absolute; left: 0; top: -4px; width: 100%; height: 6px; overflow: visible; color: var(--rule); pointer-events: none; }
.ra-contact a { color: inherit; text-decoration: none; }
.ra-contact a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Telegram handle: as typed, lowercase and nearly unspaced, inside the uppercase contact line or button */
.ra-handle { text-transform: none; letter-spacing: 0.02em; }
.ra-btn .ra-handle { display: block; margin-top: 6px; }

/* Button: a soot plate with a soft edge, cream PT Mono; hover swaps the plate (with RodinaRed.live.roll — rolled in, see Live), press drops it 2 px */
.ra-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; min-height: 56px; padding: 14px 26px; border: 0; border-radius: var(--radius-0);
  background: var(--btn); color: var(--on-btn); cursor: pointer; text-decoration: none;
  font-family: var(--font-text); font-weight: 400; font-size: 17px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
.ra-btn:hover { background: var(--btn-hover); }
.ra-btn:active { transform: translateY(2px); }
.ra-btn:focus-visible, .ra-link:focus-visible, .ra-bar a:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.ra-filters .ra-btn:not(.ra-btn--line) { background: transparent; }
.ra-filters .ra-btn:not(.ra-btn--line)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn); filter: url(#ra-soft); }
.ra-filters .ra-btn:not(.ra-btn--line):hover::before { background: var(--btn-hover); }
/* .ra-edge (bundle.js print): the plate's soft edge is a vector mask, not the raster #ra-soft filter */
.ra-btn.ra-edge:not(.ra-btn--line) { background: transparent; }
.ra-btn.ra-edge:not(.ra-btn--line)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn); filter: none; }
.ra-btn.ra-edge:not(.ra-btn--line):hover::before { background: var(--btn-hover); }
.ra-edge::before { -webkit-mask: var(--ra-edge) 0 0 / 100% 100% no-repeat; mask: var(--ra-edge) 0 0 / 100% 100% no-repeat; }
.ra-btn--line { padding: 12px 24px; border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.ra-btn--line:hover { background: var(--ink); color: var(--ground); }
.ra-btn:disabled, .ra-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.ra-filters .ra-btn:disabled:hover::before, .ra-filters .ra-btn[aria-disabled="true"]:hover::before { background: var(--btn); }
.ra-btn--block { display: flex; width: 100%; }
.ra-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.ra-link:hover { text-decoration-thickness: 3px; }
/* the link underline thickens in step with the roller: on 140 ms ease-out, off 120 ms ease-in (no motion — at once) */
@media (prefers-reduced-motion: no-preference) {
  .ra-link { transition: text-decoration-thickness var(--dur-lift, 120ms) var(--ease-in, cubic-bezier(.5, 0, .75, 0)); }
  .ra-link:hover { transition-duration: var(--dur-roll, 140ms); transition-timing-function: var(--ease-out, cubic-bezier(.2, .7, .1, 1)); }
}

/* Site header bar: the menu is Oswald 700 (big type), PT Mono has no bold */
.ra-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-8);
  padding: var(--space-3) var(--space-16); background: var(--ground); color: var(--text);
}
.ra-bar__name { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; color: var(--title); }
.ra-bar__name span { color: var(--ink); }
.ra-bar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); }
.ra-bar__nav a {
  display: inline-block; padding-block: 12px; color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
}
.ra-bar__nav a:hover, .ra-bar__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Masthead: the key visual as a site's first screen; title and slogan always split by a rule */
.ra-mast { background: var(--ground); color: var(--text); padding: var(--space-32) var(--space-16); text-align: center; }
.ra-mast__in { container-type: inline-size; max-width: 1040px; margin: 0 auto; }
.ra-mast__kicker { margin: 0 0 0.12em; white-space: nowrap; font-family: var(--font-script); font-weight: 400; line-height: 1.15; color: var(--script); transform: rotate(var(--tilt-head)); }
.ra-mast__title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2cqi; font-weight: 700; }
.ra-mast__rule { margin: 21px 0 18px; }
.ra-mast__slogan { margin-top: 7cqi; }
.ra-mast__rule + .ra-mast__slogan { margin-top: 0; }
.ra-mast__slogan .ra-note { font-size: 13.5cqi; }
.ra-mast__lede { margin: 9cqi auto 0; max-width: 760px; font-family: var(--font-text); font-weight: 400; font-size: 24px; line-height: 1.4; color: var(--text); }
.ra-mast__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
/* Ч3 «Название чёрным» is the default since 2026-10-24 (roles title/script/note/slogan); --ch3 only pins it */
.ra-mast--ch3 .ra-mast__kicker, .ra-mast--ch3 .ra-l3 { color: var(--cream); }
.ra-mast--ch3 .ra-l1, .ra-mast--ch3 .ra-l2, .ra-mast--ch3 .ra-note, .ra-mast--ch3 .ra-mast__rule { color: var(--soot); }

/* Archive: the former «Красное поле» scheme (РОДИНА cream, kicker and ПЯТИЛЕТКУ soot, note cream). Red field only */
.ra-scheme-a { --title: var(--cream); --script: var(--soot); --note: var(--cream); --slogan: var(--soot); }

/* Torn sheet: the bottom of a kumach sheet torn by RodinaRed.print(), a light fringe under it. Its parent shows
   through the tear, so lay it on paper; the sheet spans its parent's width. */
.ra-torn { position: relative; z-index: 3; }
.ra-fringe { position: relative; z-index: 2; height: 0; pointer-events: none; }
.ra-fringe svg { position: absolute; top: -28px; display: block; overflow: visible; fill: var(--fringe); stroke: var(--fringe); }

/* Section, wrap, prose, grid */
.ra-section { background: var(--ground); color: var(--text); padding: var(--space-24) var(--space-16); }
.ra-wrap { max-width: calc(var(--container) - 2 * var(--space-16)); margin: 0 auto; }
.ra-section__kicker { margin: 0 0 var(--space-2); font-family: var(--font-script); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--script); }
.ra-section__title { margin: 0 0 var(--space-12); font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; text-transform: uppercase; color: var(--title); text-wrap: balance; }
.ra-prose { max-width: var(--measure); font-family: var(--font-text); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--text); }
.ra-prose p { margin: 0 0 1em; }
.ra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-6); }

/* Services: newspaper columns on paper, a red condensed title over PT Mono, brush rules between columns */
.ra-svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--ra-svc-cols, 3), minmax(0, 1fr)); }
.ra-svc > li { position: relative; padding: 0 18px 0 20px; font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--soot); }
.ra-svc:not(.ra-svc--lead) > li:first-child { padding-left: 0; }
.ra-svc b { display: block; margin-bottom: 2px; font-family: var(--font-cond); font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--kumach); }
.ra-vrule { position: absolute; left: -2px; width: 5px; color: var(--rule); pointer-events: none; }
.ra-vrule svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Card: a sheet of paper; its colors stay paper-and-soot on either ground. No shadow: it lies flat */
.ra-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--sheet); color: var(--soot); }
.ra-card--tilt { transform: rotate(var(--tilt-sheet)); }
.ra-card__kicker { margin: 0; font-family: var(--font-script); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--soot); }
.ra-card__title { margin: 0; font-family: var(--font-cond); font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--kumach); }
.ra-card__text { margin: 0; font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--soot); }
.ra-card__more { margin-top: auto; padding-top: var(--space-2); font-family: var(--font-text); font-weight: 400; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soot); }

/* Form on a sheet: fields stay soot on cream; field borders are control edges, the one place for a CSS line */
.ra-form { display: flex; flex-direction: column; gap: var(--space-6); max-width: 560px; padding: var(--space-8); background: var(--sheet); color: var(--soot); }
.ra-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ra-field__label { font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soot); }
.ra-input {
  box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 var(--space-4); border: 2px solid var(--soot); border-radius: var(--radius-0);
  background: var(--cream); color: var(--soot); font-family: var(--font-text); font-weight: 400; font-size: 16px; line-height: 1.5;
}
textarea.ra-input { min-height: 132px; padding-block: var(--space-3); resize: vertical; }
.ra-input::placeholder { color: var(--soot-muted); }
.ra-input:focus-visible { outline: 3px solid var(--soot); outline-offset: 2px; }
.ra-field__hint { font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--soot-muted); }
.ra-field__error { font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--error); }
.ra-field--error .ra-input { border-color: var(--error); }
.ra-form .ra-btn { align-self: flex-start; }

/* Telegram cards: post 1080×1080, 1080×1350, 1280×720; story 1080×1920; avatar 640×640; link preview 1200×630 */
.ra-tg {
  container-type: inline-size; position: relative; box-sizing: border-box; width: 1080px; height: 1080px; padding: var(--card-pad); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--ground); color: var(--text);
}
.ra-tg--portrait { height: 1350px; }
.ra-tg--wide { width: 1280px; height: 720px; }
.ra-tg--story { height: 1920px; padding-top: var(--story-safe-top); padding-bottom: var(--story-safe-bottom); }
.ra-tg__body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; width: 100%; }
.ra-tg__kicker { margin: 0; white-space: nowrap; font-family: var(--font-script); font-weight: 400; font-size: 60px; line-height: 1.1; color: var(--script); }
.ra-tg__kicker + .ra-tg__title { margin-top: -32px; }
.ra-tg__slogan { margin-top: 4cqi; margin-bottom: 7cqi; }
.ra-tg__slogan .ra-note { font-size: 13.5cqi; }
.ra-tg__title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2cqi; font-family: var(--font-display); font-weight: 700; font-size: 120px; line-height: 0.9; text-transform: uppercase; color: var(--title); }
.ra-tg__text { margin: 0; max-width: 860px; font-family: var(--font-text); font-weight: 400; font-size: 40px; line-height: 1.35; color: var(--text); }
.ra-tg .ra-contact { font-size: 28px; padding-top: 22px; border-top-width: 3px; }
.ra-tg--wide .ra-tg__body { gap: 32px; }
.ra-tg--wide .ra-tg__kicker { font-size: 48px; }
.ra-tg--wide .ra-tg__kicker + .ra-tg__title { margin-top: -8px; }
.ra-tg--wide .ra-tg__text { font-size: 36px; }

.ra-og {
  position: relative; box-sizing: border-box; width: 1200px; height: 630px; padding: var(--card-pad); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; text-align: center; background: var(--ground);
}
.ra-og__in { container-type: inline-size; width: 820px; display: flex; flex-direction: column; align-items: center; gap: 1.2cqi; }
.ra-og .ra-contact { font-size: 26px; }

.ra-avatar { position: relative; box-sizing: border-box; width: 640px; height: 640px; display: grid; place-items: center; overflow: hidden; background: var(--ground); }
.ra-avatar__in { container-type: inline-size; width: 440px; display: flex; flex-direction: column; align-items: center; gap: 1.6cqi; }

/* Print: paper or kumach texture under the content, picked by theme. No multiply over kumach: it stays #C62D1F.
   Last among the backgrounds so it wins over a component's own `background`. */
:root, [data-theme="pole"] { --ra-tex: var(--ra-tex-kumach, none); }
[data-theme="list"] { --ra-tex: var(--ra-tex-paper, none); }
.ra-print { background-image: var(--ra-tex); background-size: var(--tex-tile, 512px) var(--tex-tile, 512px); }
.ra-print--folds { position: relative; isolation: isolate; }
.ra-print--folds::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255, 255, 255, 0.4) calc(50% - 1px), rgba(255, 255, 255, 0.4) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255, 255, 255, 0.32) calc(50% - 1px), rgba(255, 255, 255, 0.32) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Brand lines that fill their container's width (Oswald 700). The container is .ra-mast__in, .ra-tg, .ra-og__in, .ra-avatar__in or .ra-fit-box */
.ra-fit-box { container-type: inline-size; }
.ra-fit-head { font-size: 7cqi; }
.ra-fit-rodina { font-size: 27.5cqi; }
.ra-fit-avto { font-size: 13.5cqi; }
.ra-fit-pyat { font-size: 20.3cqi; }
/* РОДИНА → АВТОМАТИЗАЦИЙ: 0.16 of the upper size + 0.2 of the lower, so Д's tail never meets Й's breve (the 1.2cqi is the column gap) */
.ra-fit-rodina:has(+ .ra-fit-avto) { margin-bottom: calc(0.16em - 0.22em); }
.ra-fit-rodina + .ra-fit-avto { margin-top: calc(0.2em - 1.2cqi - 0.22em); }

@media (max-width: 720px) {
  .ra-bar { padding: var(--space-2) var(--space-4); }
  .ra-mast { padding: var(--space-16) var(--space-4); }
  .ra-section { padding: var(--space-16) var(--space-4); }
  .ra-section__title { font-size: 34px; margin-bottom: var(--space-8); }
  .ra-section__kicker { font-size: 30px; }
  .ra-form, .ra-card { padding: var(--space-6); }
  .ra-btn { font-size: 14px; letter-spacing: 0.03em; }
  .ra-svc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ra-svc > li, .ra-svc--lead > li:first-child { padding: 0; }
  .ra-vrule { display: none; }
}

/* Drip: a drop of paint under a handwritten line (a run down from a stroke is archived), drawn by RodinaRed.print(); takes the line color and filter */
.ra-drip { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }

/* Live (RodinaRed.live): letters breathe as separate boxes, a word never breaks; splashes by a line; smooth folds */
.bw { white-space: nowrap; }
.bl { display: inline-block; }
.ra-spl { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.ra-fold__in { display: flow-root; }
/* Roller (RodinaRed.live.roll): hover rolls the plate in from the left in 140 ms and lifts it in 120 ms.
   .ra-roll__alt is a copy of the content on the plate, seen through a clip — contrast holds in every frame */
.ra-roll { isolation: isolate; }
.ra-btn--line { --roll-bg: var(--ink); --roll-fg: var(--ground); }
.ra-roll__alt {
  position: absolute; inset: 0; z-index: 1; display: inherit; align-items: inherit; justify-content: inherit; gap: inherit;
  box-sizing: border-box; padding: inherit; text-align: inherit; text-decoration: none; pointer-events: none;
  background: var(--roll-bg, var(--btn-hover)); color: var(--roll-fg, var(--on-btn));
  clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-lift, 120ms) var(--ease-in, cubic-bezier(.5, 0, .75, 0));
}
.ra-btn--line > .ra-roll__alt { inset: -2px; border: 2px solid var(--roll-bg); }
.ra-edge > .ra-roll__alt { -webkit-mask: var(--ra-edge-alt) 0 0 / 100% 100% no-repeat; mask: var(--ra-edge-alt) 0 0 / 100% 100% no-repeat; }
@media (hover: hover) and (pointer: fine) {
  .ra-roll:hover > .ra-roll__alt { clip-path: inset(0); transition-duration: var(--dur-roll, 140ms); transition-timing-function: var(--ease-out, cubic-bezier(.2, .7, .1, 1)); }
}
@media (prefers-reduced-motion: reduce) { .ra-roll__alt { transition: none; } }
/* the plate itself stays; the hover colour comes with the roller */
.ra-btn.ra-roll:hover { background: var(--btn); }
.ra-btn--line.ra-roll:hover { background: transparent; color: var(--ink); }
.ra-filters .ra-btn.ra-roll:hover::before, .ra-btn.ra-edge.ra-roll:hover::before { background: var(--btn); }

/* Relics (RodinaRed.live.relics): rare print traces on paper, at the edge of visible. A layer under the sheet's content */
.ra-has-relics { position: relative; isolation: isolate; }
.ra-relics { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ra-relic { position: absolute; overflow: visible; color: var(--soot, #1B1A17); pointer-events: none; }
.ra-relic--thumb { opacity: .085; }
.ra-relic--fox { color: color-mix(in srgb, var(--kumach, #C62D1F) 50%, var(--soot, #1B1A17)); opacity: .22; }
/* set-off: a mirrored print of a heading from the neighbouring sheet */
.ra-relic--off {
  font-weight: 700; line-height: 1; font-family: var(--font-display, Oswald, sans-serif); text-transform: uppercase; white-space: nowrap;
  opacity: .028; transform: scaleX(-1) rotate(var(--or, 0deg)); filter: blur(.7px);
}
.ra-filters .ra-relic--off { filter: url(#ra-soft) blur(.7px); }
/* pin hole: in the middle of the sheet's top margin (40px; 26px on a phone) */
.ra-relic--pin { z-index: 1; top: 6px; }
@media (max-width: 720px) { .ra-relic--pin { top: -1px; } }
.ra-relic__hole { fill: color-mix(in srgb, var(--cream, #EFE6D2) 62%, var(--soot, #1B1A17)); stroke: var(--soot, #1B1A17); stroke-opacity: .3; stroke-width: .6; }
/* marashka: a pale block of a raised space between two words */
.ra-mar { position: relative; display: inline-block; width: 0; height: 0; }
.ra-mar::before {
  content: ""; position: absolute; left: .14em; bottom: -.04em; width: var(--mw); height: var(--mh);
  background: currentColor; opacity: var(--mo); clip-path: var(--mc); transform: rotate(var(--mr));
}
.ra-filters .ra-mar::before { filter: url(#ra-soft); }
.ra-mar--off::before { content: none; }