/* ===== Профстрой-07 — presentation framework (structure + logo component) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink, #1a1f26); background: var(--paper, #f4f6f8);
  font-family: var(--font-body, "Golos Text", system-ui, sans-serif);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- layout primitives ---------- */
.wrap { width: min(1120px, 92vw); margin: 0 auto; }
.section { padding: clamp(56px, 9vw, 128px) 0; }
.section--tight { padding: clamp(40px, 6vw, 80px) 0; }
.kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink, var(--accent, #5b6b7b)); margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
h1, h2, h3 { font-family: var(--font-head, var(--font-body)); line-height: 1.08; margin: 0; }
h2.title { font-size: clamp(28px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.01em; }
.lead { font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-soft, #4a5560); max-width: 62ch; margin: 20px 0 0; }
.grid { display: grid; gap: 22px; }
@media (min-width: 720px){ .cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} }

/* ---------- logo component ---------- */
.ps-logo { display: inline-flex; align-items: center; gap: .46em; color: var(--wm-color, currentColor); }
.ps-logo.layout-stacked { flex-direction: column; gap: .28em; }
.ps-mark { width: 1.32em; height: 1.32em; display: block; flex: none; }
.ps-wm { display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap;
  font-family: var(--wm-font, "Golos Text", sans-serif); font-weight: var(--wm-weight, 800);
  letter-spacing: var(--wm-tracking, -.01em); text-transform: uppercase; font-size: .84em; }
.ps-wm-num { color: var(--num-color, inherit); margin-left: .06em; }
.ps-logo.markonly .ps-wm { display: none; }
/* variant colour resolution (themes provide --c-m1 / --c-m2) */
.ps-logo.v-color { --m1: var(--c-m1); --m2: var(--c-m2); --wm-color: var(--c-wm, var(--c-m1)); --num-color: var(--c-m2); }
.ps-logo.v-mono  { --m1: var(--c-mono, #16191e); --m2: var(--c-mono, #16191e); --wm-color: var(--c-mono, #16191e); --num-color: inherit; }
.ps-logo.v-white { --m1: #fff; --m2: #fff; --wm-color: #fff; --num-color: inherit; }

/* ---------- cover ---------- */
.cover { min-height: 100svh; display: grid; align-content: center; position: relative;
  padding: 80px 0; overflow: hidden; }
.cover .wrap { position: relative; z-index: 2; }
.cover .ps-logo { font-size: clamp(30px, 6vw, 68px); }
.cover-tag { font-size: clamp(16px, 2vw, 22px); margin: 26px 0 0; max-width: 40ch; color: var(--cover-sub); }
.cover-meta { margin-top: 40px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.scrollhint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }

/* ---------- cards / swatches ---------- */
.card { border-radius: 14px; padding: 30px; border: 1px solid var(--line, #e2e7ec); background: var(--card, #fff); }
.adj { border-radius: 14px; padding: 26px; background: var(--card, #fff); border: 1px solid var(--line, #e2e7ec); }
.adj h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.adj p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.adj .n { font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  color: var(--accent-ink, var(--accent)); display: block; margin-bottom: 14px; }

/* logo variation swatches */
.swatch { border-radius: 14px; min-height: 150px; display: grid; place-items: center; padding: 26px;
  border: 1px solid transparent; }
.swatch .ps-logo { font-size: clamp(20px, 2.6vw, 30px); }
.swatch.on-light { background: #fff; border-color: var(--line, #e2e7ec); }
.swatch.on-paper { background: var(--paper-2, #eef1f4); }
.swatch.on-dark  { background: var(--dark, #10151b); }
.swatch.on-accent{ background: var(--accent, #12355b); }
.swatch small { position: absolute; }
.vlabel { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); margin: 10px 2px 0; }
.sizes { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.sizes .ps-logo.markonly { }
.s-64 { font-size: 64px; } .s-32 { font-size: 32px; } .s-20 { font-size: 20px; } .s-14 { font-size: 14px; }

/* palette */
.chips { display: grid; gap: 14px; grid-template-columns: repeat(2,1fr); }
@media(min-width:720px){ .chips{grid-template-columns:repeat(4,1fr)} }
.chip { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.chip .sw { height: 108px; }
.chip .meta { padding: 12px 14px; background: var(--card,#fff); }
.chip .nm { font-weight: 700; font-size: 14px; }
.chip .hx { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* typography specimen */
.spec { background: var(--card,#fff); border: 1px solid var(--line); border-radius: 14px; padding: 34px; }
.spec .fname { font-size: 14px; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; }
.spec .big { font-size: clamp(40px, 7vw, 92px); line-height: 1; margin: 10px 0 6px; font-family: var(--font-head); }
.spec .glyphs { font-size: clamp(20px,3vw,30px); letter-spacing: .02em; color: var(--ink-soft); }
.spec .row { padding: 16px 0; border-top: 1px solid var(--line); }
.spec .row:first-of-type { border-top: 0; }

/* application mockups */
.apps { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media(min-width:720px){ .apps{grid-template-columns:repeat(6,1fr)} }
.app { border-radius: 14px; overflow: hidden; background: var(--card,#fff); border: 1px solid var(--line);
  position: relative; }
.app .ph { aspect-ratio: 4/3; display: grid; place-items: center; text-align: center; padding: 22px;
  background: repeating-linear-gradient(135deg, var(--paper-2,#eef1f4) 0 14px, transparent 14px 28px), var(--card,#fff);
  color: var(--ink-soft); }
.app img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.app .cap { padding: 14px 16px; font-size: 14px; font-weight: 600; }
.app .cap span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
.app.wide { grid-column: span 2; } .app.tall{}
@media(min-width:720px){ .app{grid-column:span 2} .app.wide{grid-column:span 3} }

/* footer nav between concepts */
.pfoot { padding: clamp(40px,6vw,80px) 0; border-top: 1px solid var(--line); }
.nav-concepts { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 24px; }
@media(min-width:720px){ .nav-concepts{grid-template-columns:repeat(3,1fr)} }
.nav-card { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card,#fff); text-decoration: none; transition: .18s;
  font-weight: 600; }
.nav-card:hover { border-color: var(--accent, #12355b); transform: translateY(-2px); }
.nav-card[aria-current] { outline: 2px solid var(--accent); }
.nav-card .ps-logo { font-size: 18px; }

/* misc */
.note { font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
.section-head { max-width: 70ch; }
.dark-section { background: var(--dark,#10151b); color: #eef1f4; --ink-soft:#9aa7b4; --line:#26303b; --card:#161d25; }