/*

* RADIOMINOR.RU
* Manifesto
*
* Pure CSS
* No JavaScript
* No external dependencies
  */

/* =========================================================
VARIABLES
========================================================= */

:root {
--black: #0c0c0c;
--dark: #171717;
--text: #202020;
--muted: #686868;
--gray: #999;
--light: #d2d2d0;
--lighter: #e5e5e2;
--paper: #f3f3f1;
--white: #fafaf8;


--max-width: 1440px;

--font-sans:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

--font-display:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    "Arial Narrow",
    sans-serif;


}

/* =========================================================
RESET
========================================================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;


background: var(--paper);
color: var(--text);

font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;


}

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

img,
svg {
max-width: 100%;
}

::selection {
background: var(--black);
color: var(--white);
}

/* =========================================================
HEADER
========================================================= */

.site-header {
background: var(--black);
color: var(--white);


border-bottom: 1px solid #333;


}

.header-inner {
width: min(100% - 48px, var(--max-width));
min-height: 82px;


margin: 0 auto;

display: flex;
align-items: center;
justify-content: space-between;


}

.brand {
display: flex;
align-items: center;
gap: 22px;
}

.brand-name {
font-family: var(--font-display);
font-size: 25px;
letter-spacing: .025em;
line-height: 1;
}

.brand-separator {
width: 1px;
height: 36px;
background: #555;
}

.brand-description {
color: #9b9b9b;


font-size: 10px;
line-height: 1.35;
text-transform: uppercase;
letter-spacing: .12em;


}

.header-number {
color: #777;


font-size: 10px;
font-weight: 600;
letter-spacing: .15em;


}

/* =========================================================
HERO
========================================================= */

.hero {
background: var(--paper);
border-bottom: 1px solid var(--light);
}

.hero-inner {
width: min(100% - 48px, var(--max-width));


min-height: 650px;

margin: 0 auto;
padding: 80px 0 90px;

position: relative;

display: flex;
flex-direction: column;
justify-content: space-between;


}

.hero-meta {
display: flex;
justify-content: space-between;


color: var(--muted);

font-size: 10px;
font-weight: 700;

letter-spacing: .16em;
text-transform: uppercase;


}

.hero h1 {
margin: 0;


font-family: var(--font-display);

font-size: clamp(110px, 18vw, 280px);
font-weight: 900;

line-height: .76;
letter-spacing: -.035em;
text-transform: uppercase;

color: var(--black);


}

.hero-subtitle {
position: absolute;


right: 0;
bottom: 88px;

color: #a0a0a0;

font-family: var(--font-display);

font-size: clamp(26px, 3vw, 48px);
line-height: .95;

text-align: right;
text-transform: uppercase;


}

.hero-statement {
margin-top: 65px;


padding-top: 22px;

border-top: 2px solid var(--black);

max-width: 580px;

font-size: clamp(19px, 2vw, 27px);
font-weight: 700;
line-height: 1.25;

text-transform: uppercase;


}

/* =========================================================
MANIFESTO
========================================================= */

.manifesto {
width: min(100% - 48px, var(--max-width));
margin: 0 auto;
}

.manifesto-section {
display: grid;
grid-template-columns: 120px minmax(0, 780px);


column-gap: 60px;

padding: 110px 0;

border-bottom: 1px solid var(--light);


}

.section-index {
color: #a5a5a3;


font-size: 12px;
font-weight: 700;

letter-spacing: .15em;


}

.section-content {
max-width: 780px;
}

.section-label {
margin: 0 0 24px;


color: var(--muted);

font-size: 10px;
font-weight: 800;

letter-spacing: .16em;
line-height: 1.2;

text-transform: uppercase;


}

.section-content h2,
.authors h2,
.final h2 {
margin: 0 0 38px;


color: var(--black);

font-family: var(--font-display);

font-size: clamp(42px, 5vw, 74px);
font-weight: 900;

line-height: .95;
letter-spacing: -.025em;

text-transform: uppercase;


}

.section-content p {
max-width: 680px;


margin: 0 0 22px;

font-size: 17px;
line-height: 1.7;


}

.section-content strong {
font-weight: 800;
}

.emphasis {
margin-top: 35px !important;


font-size: 19px !important;
font-weight: 700;

line-height: 1.5 !important;


}

/* =========================================================
QUESTIONS
========================================================= */

.questions {
margin: 38px 0;


border-top: 1px solid var(--light);
border-bottom: 1px solid var(--light);


}

.questions span {
display: block;


padding: 13px 0;

border-bottom: 1px solid var(--lighter);

font-size: 17px;
font-weight: 700;


}

.questions span:last-child {
border-bottom: none;
}

.questions span::before {
content: "—";


display: inline-block;

margin-right: 14px;

color: #999;


}

/* =========================================================
SOUND PRINCIPLES
========================================================= */

.principles {
margin: 40px 0;


border-left: 3px solid var(--black);


}

.principles span {
display: block;


padding: 8px 20px;

font-size: 18px;
font-weight: 700;

line-height: 1.45;


}

/* =========================================================
AUTHORS
========================================================= */

.authors {
background: var(--dark);
color: var(--white);
}

.authors-inner {
width: min(100% - 48px, var(--max-width));


margin: 0 auto;
padding: 120px 0;

display: grid;
grid-template-columns: 120px minmax(0, 780px);

column-gap: 60px;


}

.authors .section-index {
color: #666;
}

.authors .section-label {
color: #888;
}

.authors h2 {
color: var(--white);
}

.authors p {
max-width: 680px;


margin: 0 0 22px;

color: #c3c3c3;

font-size: 17px;
line-height: 1.7;


}

.authors .emphasis {
color: var(--white);
}

/* =========================================================
FINAL
========================================================= */

.final {
background: var(--lighter);


border-bottom: 1px solid #c5c5c3;


}

.final-inner {
width: min(100% - 48px, var(--max-width));


margin: 0 auto;
padding: 130px 0 140px;


}

.final h2 {
max-width: 900px;


margin-bottom: 50px;

font-size: clamp(55px, 7vw, 105px);


}

.final-lead {
margin: 0;


font-size: clamp(25px, 3vw, 42px);
font-weight: 700;
line-height: 1.25;


}

.final-principles {
margin-top: 75px;


display: flex;
flex-wrap: wrap;
gap: 10px;


}

.final-principles span {
padding: 10px 15px;


border: 1px solid #aaa;

color: #444;

font-size: 11px;
font-weight: 700;

letter-spacing: .08em;
text-transform: uppercase;


}

/* =========================================================
SIGNATURE
========================================================= */

.signature {
background: var(--black);
color: var(--white);
}

.signature-inner {
width: min(100% - 48px, var(--max-width));


min-height: 260px;

margin: 0 auto;

display: flex;
align-items: center;
justify-content: space-between;

gap: 50px;


}

.signature-logo {
font-family: var(--font-display);


font-size: clamp(38px, 5vw, 72px);
line-height: 1;

letter-spacing: -.02em;


}

.signature-logo span {
color: #666;
}

.signature-motto {
padding-left: 35px;


border-left: 1px solid #444;

color: #aaa;

font-size: 13px;
font-weight: 700;

line-height: 1.7;

letter-spacing: .15em;


}

/* =========================================================
FOOTER
========================================================= */

.site-footer {
width: min(100% - 48px, var(--max-width));


min-height: 70px;

margin: 0 auto;

display: flex;
align-items: center;
justify-content: space-between;

color: #777;

font-size: 10px;
font-weight: 600;

letter-spacing: .1em;
text-transform: uppercase;


}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 900px) {


.header-inner,
.hero-inner,
.manifesto,
.authors-inner,
.final-inner,
.signature-inner,
.site-footer {
    width: min(100% - 40px, var(--max-width));
}

.hero-inner {
    min-height: 540px;
    padding: 60px 0 65px;
}

.hero h1 {
    font-size: clamp(80px, 18vw, 160px);
}

.hero-subtitle {
    position: static;
    margin-top: 45px;
    text-align: left;
}

.hero-statement {
    margin-top: 45px;
}

.manifesto-section,
.authors-inner {
    grid-template-columns: 70px minmax(0, 1fr);
    column-gap: 35px;

    padding: 80px 0;
}

.section-content h2,
.authors h2 {
    font-size: clamp(38px, 7vw, 58px);
}

.signature-inner {
    min-height: 210px;
}


}

@media (max-width: 600px) {


body {
    font-size: 15px;
}

.header-inner,
.hero-inner,
.manifesto,
.authors-inner,
.final-inner,
.signature-inner,
.site-footer {
    width: calc(100% - 32px);
}


/* HEADER */

.header-inner {
    min-height: 68px;
}

.brand-description,
.brand-separator,
.header-number {
    display: none;
}

.brand-name {
    font-size: 21px;
}


/* HERO */

.hero-inner {
    min-height: auto;
    padding: 45px 0 55px;
}

.hero-meta {
    font-size: 9px;
}

.hero h1 {
    margin: 80px 0 55px;

    font-size: clamp(65px, 20vw, 105px);

    letter-spacing: -.04em;
}

.hero-subtitle {
    margin-top: 0;

    font-size: 30px;
}

.hero-statement {
    margin-top: 45px;

    font-size: 18px;
}


/* SECTIONS */

.manifesto-section,
.authors-inner {
    display: block;

    padding: 65px 0;
}

.section-index {
    margin-bottom: 25px;
}

.section-content h2,
.authors h2 {
    margin-bottom: 28px;

    font-size: clamp(38px, 12vw, 55px);
}

.section-content p,
.authors p {
    font-size: 16px;
    line-height: 1.65;
}

.emphasis {
    font-size: 18px !important;
}

.questions span {
    font-size: 16px;
}

.principles span {
    font-size: 16px;
}


/* FINAL */

.final-inner {
    padding: 80px 0 90px;
}

.final h2 {
    font-size: clamp(45px, 14vw, 68px);
}

.final-lead {
    font-size: 23px;
}

.final-principles {
    margin-top: 50px;
    display: block;
}

.final-principles span {
    display: inline-block;
    margin: 0 5px 8px 0;
}


/* SIGNATURE */

.signature-inner {
    min-height: auto;

    padding: 55px 0;

    display: block;
}

.signature-logo {
    margin-bottom: 35px;
}

.signature-motto {
    padding-left: 20px;
}


/* FOOTER */

.site-footer {
    min-height: auto;

    padding: 25px 0;

    display: block;
}

.site-footer div {
    margin-bottom: 7px;
}

.site-footer div:last-child {
    margin-bottom: 0;
}


}

/* =========================================================
PRINT
========================================================= */

@media print {


body {
    background: white;
    color: black;
}

.site-header {
    background: white;
    color: black;

    border-bottom: 1px solid black;
}

.brand-description {
    color: #555;
}

.hero,
.final,
.authors,
.signature {
    background: white;
    color: black;
}

.authors h2,
.signature-logo,
.final h2,
.hero h1 {
    color: black;
}

.authors p,
.signature-motto {
    color: #333;
}

.manifesto-section {
    break-inside: avoid;
}

.site-footer {
    border-top: 1px solid #aaa;
}


}