/* =========================================================================
   Свободный интернет — Editorial "Patrick Miller" style
   Flat color fields · oversized masthead type · Inkwell Blue as sole solid.
   ========================================================================= */

:root {
    /* Colors */
    --color-persimmon-wash: #fd9b65;
    --color-blush-linen: #e9d1c7;
    --color-candlelight: #f8f5d1;
    --color-sage-whisper: #9ac8ae;
    --color-inkwell-blue: #004b82;
    --color-slate-moss: #4c564b;
    --color-fossil: #a4b1b3;
    --color-obsidian: #000000;
    --color-paper: #ffffff;

    /* Typography */
    --font-mlrstandard: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-caption: 16px;
    --leading-caption: 1.3;
    --tracking-caption: 0.01em;
    --text-subheading: 32px;
    --leading-subheading: 1.2;

    /* Display is fluid: never below ~200px feel on desktop, but wraps gracefully */
    --leading-display: 0.8;
    --tracking-display: -0.02em;

    --font-weight-extralight: 200;
    --font-weight-regular: 400;
    --font-weight-medium: 500;

    /* Spacing */
    --spacing-16: 16px;
    --spacing-32: 32px;
    --spacing-48: 48px;
    --spacing-72: 72px;
    --gutter: 72px;

    --radius-buttons: 9999px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-paper);
    color: var(--color-obsidian);
    font-family: var(--font-mlrstandard);
    font-weight: var(--font-weight-regular);
    font-feature-settings: "ss01" on, "tnum" on;
    -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1; display: flex; flex-direction: column; }

a { color: inherit; text-decoration: none; }

/* -------------------------------------------------------------------------
   Full-bleed color fields — the atomic section building block
   ------------------------------------------------------------------------- */
.field {
    position: relative;
    width: 100%;
    padding: var(--spacing-72) var(--gutter);
    display: flex;
    flex-direction: column;
}
.field--tall { min-height: 100svh; justify-content: center; }
.field--persimmon { background: var(--color-persimmon-wash); }
.field--blush { background: var(--color-blush-linen); }
.field--candlelight { background: var(--color-candlelight); }
.field--sage { background: var(--color-sage-whisper); }
.field--fossil { background: var(--color-fossil); }
.field--paper { background: var(--color-paper); }

/* -------------------------------------------------------------------------
   Split-screen — two equal color plates, no gutter, no divider
   ------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.split > .field { min-height: 100svh; justify-content: center; }

/* -------------------------------------------------------------------------
   Type
   ------------------------------------------------------------------------- */
.masthead {
    font-weight: var(--font-weight-regular);
    font-size: clamp(56px, 15vw, 260px);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    margin: 0;
    text-transform: none;
}
.masthead--md { font-size: clamp(48px, 11vw, 180px); }
.masthead--sm { font-size: clamp(40px, 8vw, 120px); }

.subheading {
    font-size: clamp(22px, 3.2vw, var(--text-subheading));
    line-height: var(--leading-subheading);
    letter-spacing: 0;
    font-weight: var(--font-weight-regular);
    margin: 0;
    max-width: 42ch;
}

.label {
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-caption);
    font-weight: var(--font-weight-regular);
    margin: 0;
}
.label--right { text-align: right; }
.label--medium { font-weight: var(--font-weight-medium); }

.arrow-glyph {
    font-size: clamp(48px, 10vw, 160px);
    line-height: 0.8;
    display: block;
    margin-top: var(--spacing-16);
}

/* Section label flush-right at top of a plate */
.plate-label {
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-caption);
    text-align: right;
    display: block;
}

/* -------------------------------------------------------------------------
   Persistent chrome: brandmark + rotated contact badge
   ------------------------------------------------------------------------- */
.brandmark {
    position: fixed;
    top: var(--spacing-32);
    left: var(--gutter);
    z-index: 40;
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    line-height: var(--leading-caption);
    mix-blend-mode: normal;
}
.brandmark .mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.brandmark .brandmark-logo {
    width: 26px; height: 26px;
    display: block;
    flex: none;
}

.contact-badge {
    position: fixed;
    top: var(--spacing-32);
    right: var(--gutter);
    z-index: 40;
    width: 84px; height: 84px;
    background: var(--color-paper);
    color: var(--color-obsidian);
    border: 1px solid var(--color-obsidian);
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-caption);
    transform: rotate(-16deg);
    transition: transform .25s ease;
}
.contact-badge:hover { transform: rotate(0deg); }

/* -------------------------------------------------------------------------
   Controls — Inkwell Blue circle is the only solid interactive
   ------------------------------------------------------------------------- */
.circle {
    width: 56px; height: 56px;
    background: var(--color-inkwell-blue);
    color: var(--color-paper);
    border: none;
    border-radius: var(--radius-buttons);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex: none;
    transition: transform .2s ease;
    font-family: inherit;
}
.circle:hover { transform: scale(1.06); }
.circle--lg { width: 72px; height: 72px; font-size: 28px; }

/* Inline action: label + circle together */
.action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-16);
    cursor: pointer;
}
.action .action-text {
    font-size: var(--text-subheading);
    line-height: var(--leading-subheading);
    letter-spacing: 0;
}
.action--light .action-text { font-weight: var(--font-weight-extralight); }

/* Hairline outline control (secondary / back) */
.hairline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    background: none;
    border: none;
    color: var(--color-obsidian);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.hairline .glyph { font-size: 20px; line-height: 1; }

/* Pill link (used sparingly, outlined, flat) */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: var(--radius-buttons);
    border: 1px solid var(--color-obsidian);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    background: none;
    color: var(--color-obsidian);
    cursor: pointer;
    font-family: inherit;
    transition: background .2s ease, color .2s ease;
}
.pill:hover { background: var(--color-obsidian); color: var(--color-paper); }
.pill--solid { background: var(--color-inkwell-blue); border-color: var(--color-inkwell-blue); color: var(--color-paper); }
.pill--solid:hover { background: var(--color-obsidian); border-color: var(--color-obsidian); }

/* -------------------------------------------------------------------------
   Pagination strip — bottom of a plate
   ------------------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    padding-top: var(--spacing-48);
}
.pager .counter { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); }

/* -------------------------------------------------------------------------
   Utility layout blocks used inside color fields (still flat, no cards)
   ------------------------------------------------------------------------- */
.stack-16 > * + * { margin-top: var(--spacing-16); }
.stack-32 > * + * { margin-top: var(--spacing-32); }
.push-top { margin-top: auto; }
/* Reserve the top-right corner for the persistent rotated badge */
.top-label { display: flex; justify-content: flex-end; padding-right: 104px; min-height: 40px; }
.field-body { display: flex; flex-direction: column; flex: 1; }
.field-body--center { justify-content: center; }

/* Definition rows (order meta) — hairline separated, no card */
.deflist { width: 100%; max-width: 640px; }
.defrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-16);
    padding: var(--spacing-16) 0;
    border-top: 1px solid var(--color-obsidian);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
}
.defrow:last-child { border-bottom: 1px solid var(--color-obsidian); }
.defrow strong { font-weight: var(--font-weight-medium); }

/* Tariff plate composition */
.tariff-plate .price {
    font-size: clamp(56px, 12vw, 200px);
    line-height: 0.85;
    letter-spacing: var(--tracking-display);
    margin: 0;
}
.tariff-plate .price .cur { font-size: 0.3em; letter-spacing: 0; vertical-align: super; }
.tariff-plate .free-word { font-size: clamp(40px, 9vw, 150px); line-height: 0.85; letter-spacing: var(--tracking-display); margin: 0; }
.tariff-features { list-style: none; padding: 0; margin: 0; }
.tariff-features li {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    padding: 10px 0;
    border-top: 1px solid var(--color-obsidian);
}

/* Form fields — flat, hairline underline, no box */
.field-input {
    width: 100%;
    max-width: 520px;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--color-obsidian);
    background: transparent;
    color: var(--color-obsidian);
    font-family: inherit;
    font-size: var(--text-subheading);
    letter-spacing: 0;
}
.field-input::placeholder { color: var(--color-obsidian); opacity: 0.4; }
.field-input:focus { outline: none; border-bottom-width: 2px; }
.field-label { display: block; font-size: var(--text-caption); letter-spacing: var(--tracking-caption); margin-bottom: 8px; }
.field-hint { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); margin: 12px 0 0; max-width: 46ch; }

.pay-chips { display: flex; gap: var(--spacing-16); flex-wrap: wrap; }
.pay-chip {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    padding: 8px 18px;
    border: 1px solid var(--color-obsidian);
    border-radius: var(--radius-buttons);
}

/* Key output — monospace on a flat inverse field, no shadow */
.key-text {
    width: 100%;
    background: var(--color-obsidian);
    color: var(--color-candlelight);
    padding: var(--spacing-32);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
}

/* Alerts — flat inverse bar */
.alert {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
    padding: var(--spacing-16) var(--gutter);
    background: var(--color-inkwell-blue);
    color: var(--color-paper);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :root { --gutter: 24px; }
    .split { grid-template-columns: 1fr; }
    .split > .field { min-height: 60svh; }
    .brandmark { top: 20px; left: 24px; }
    .contact-badge { top: 20px; right: 24px; width: 68px; height: 68px; font-size: 13px; }
    .field { padding: 88px var(--gutter) var(--spacing-48); }
    .field--tall { min-height: 100svh; }
    .top-label { padding-right: 84px; }
}