/* Brandbook site. Colours only through brand.css tokens; translucency only through overlays (scale 5/10/15/20/50). */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); font-optical-sizing: auto; color: var(--gray-900); background: var(--white); }
body { margin: 0; font-size: var(--text-16); line-height: var(--text-16--line-height); letter-spacing: var(--text-16--letter-spacing); font-weight: 400; }
a { color: var(--blue-500); text-decoration: none; }
a:hover { color: var(--blue-600); }
:focus-visible { outline: 2px solid var(--overlay-focus); outline-offset: 2px; }

/* Header: logo, thin line, the site name in plain text (D: site title), sections, Files as the button. */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 14px 32px;
  background: var(--white); border-bottom: 1px solid var(--gray-200); }
.brand { display: flex; align-items: center; }
.brand img { height: 26px; width: auto; display: block; } /* word 20.6 px: full mark form (small form up to a 17 px word, mark 22 px) */
.brand-title { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--gray-200); font-size: var(--text-14);
  font-weight: 500; color: var(--gray-600); }
.sections { display: flex; gap: 18px; margin-left: auto; font-size: var(--text-14); }
.sections a { color: var(--gray-600); }
.sections a[aria-current="page"] { color: var(--gray-900); font-weight: 600; }
.files-link { margin-left: -6px; font-size: var(--text-14); font-weight: 600; color: var(--white); background: var(--blue-500);
  border-radius: 8px; padding: 6px 12px; white-space: nowrap; } /* -6px: 18 px from the last section, as between sections */
.files-link:hover { color: var(--white); background: var(--blue-600); }
.on-navy .top { background: var(--navy-800); border-bottom-color: var(--overlay-line-on-dark); }
.on-navy .brand-title { border-left-color: var(--overlay-line-on-dark); color: var(--navy-200); }
.on-navy .sections a { color: var(--navy-200); }


main { max-width: 1120px; margin: 0 auto; padding: 48px 32px 80px; }
h2 { font-size: var(--text-22); line-height: var(--text-22--line-height); letter-spacing: var(--text-22--letter-spacing);
  font-weight: var(--text-22--weight); margin: 40px 0 12px; }
.example { margin: 28px 0 32px; padding: 0; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; background: var(--white); }
.example.navy { background: linear-gradient(var(--navy-800), var(--navy-900)); border-color: var(--navy-800); }
.caption { font-size: var(--text-13); color: var(--gray-500); margin: 8px 0 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair .good, .pair .bad { border-radius: 12px; padding: 12px; }
.pair .good { border: 1px solid var(--green-200); }
.pair .bad { border: 1px solid var(--red-200); }
.files { margin-top: 40px; max-width: 720px; }
.files .zip { display: inline-block; font-size: var(--text-14); font-weight: 600; color: var(--blue-500); border: 1px solid var(--gray-300);
  border-radius: 8px; padding: 6px 12px; }
.files .zip:hover { color: var(--blue-600); background: var(--gray-25); }
table { border-collapse: collapse; font-size: var(--text-14); }
th { text-align: left; font-size: var(--text-12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray-500); }
th, td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
code { font-size: 0.9em; }
.pager { display: flex; justify-content: space-between; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--gray-100); }
.foot { padding: 32px; border-top: 1px solid var(--gray-100); color: var(--gray-500); font-size: var(--text-14); display: flex; justify-content: space-between; }
.foot .slogan { color: var(--gray-900); font-weight: 600; }

/* Section page (spec 2026-10-22): first screen, contents on the left, numbered parts, «Чего избегать», files. */
.section-view { overflow-x: clip; } /* the first screen runs to the window edges */
.section-view main { padding-top: 0; max-width: 1360px; } /* parts column about 1060 px: the width the stands were drawn for */
.sec-hero { margin: 0 calc(50% - 50vw); background: var(--gray-25); border-bottom: 1px solid var(--gray-100); }
.sec-hero-in { max-width: 1360px; margin: 0 auto; padding: 56px 32px 0; }
.sec-hero h1 { font-size: var(--text-40); line-height: var(--text-40--line-height); letter-spacing: var(--text-40--letter-spacing);
  font-weight: var(--text-40--weight); margin: 0; }
.sec-stage { display: flex; justify-content: center; padding: 96px 32px; }
.sec-cap { display: flex; align-items: center; gap: 16px; padding-top: 0; padding-bottom: 20px; font-size: var(--text-14); color: var(--gray-600); }
.get { display: inline-flex; gap: 12px; margin-left: auto; }
.get a { font-size: var(--text-13); font-weight: 600; }
.get-row { display: flex; margin-top: 12px; }
.sec-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 56px; margin-top: 64px; }
.toc { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-14); }
.toc p { margin: 0 0 8px; font-size: var(--text-12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray-500); }
.toc a { color: var(--gray-600); padding: 4px 0; }
.part { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px 40px; padding: 40px 0; border-top: 1px solid var(--gray-200); scroll-margin-top: 72px; }
.sec-hero { scroll-margin-top: 72px; }
.layout-wide, .layout-text { grid-template-columns: minmax(0, 1fr); }
.layout-wide .part-text p, .layout-wide .part-text ul, .layout-text .part-text p { max-width: 640px; }
.part-n { font-size: var(--text-13); color: var(--blue-500); font-weight: 600; font-variant-numeric: tabular-nums; }
.part h2 { margin: 6px 0 8px; }
/* the one mark for what is not approved yet: quiet, for the founder (decisions.md «Тихая метка «Черновик»») */
.draft { margin-left: 6px; font-size: var(--text-12); font-weight: 400; letter-spacing: 0; color: var(--gray-400); vertical-align: middle; }
.part .rule, .part-text p, .part-text li { color: var(--gray-600); font-size: var(--text-14); line-height: var(--text-14--line-height); }
.part .rule { margin: 0 0 8px; }
.part-text ul { padding-left: 18px; }
.part .example, .sec-stage .example { margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.part .example { max-width: 100%; overflow-x: auto; } /* a mockup wider than the column scrolls inside it */
.part .avoid { grid-column: 1 / -1; }
.avoid h3 { font-size: var(--text-16); font-weight: 600; margin: 8px 0 16px; }
.avoid-grid { display: grid; grid-template-columns: 1.2fr repeat(var(--cols), 1fr); gap: 16px; margin-bottom: 16px; }
.avoid-grid .no { margin: 0; display: flex; flex-direction: column; }
.avoid-grid .ok { grid-row: span var(--rows); }
.avoid-grid .field { position: relative; height: 140px; display: flex; align-items: center; justify-content: center;
  padding: 16px 24px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--red-200); }
.avoid-grid .ok .field { flex: 1; height: auto; min-height: 140px; box-shadow: inset 0 0 0 1px var(--green-200); }
/* one height for the mistakes: a caption on two lines must not shrink its picture (captions differ in length) */
.avoid-grid .field::before, .avoid-list li::before { content: "✕"; position: absolute; top: 10px; left: 10px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--red-500); color: var(--white); font-size: var(--text-12); line-height: 20px; text-align: center; font-weight: 700; }
.avoid-grid .ok .field::before { content: "✓"; background: var(--green-500); }
.avoid-grid figcaption { margin-top: 10px; font-size: var(--text-14); font-weight: 500; color: var(--gray-900); }
.avoid-list { list-style: none; padding: 0; margin: 0; }
.avoid-list li { position: relative; padding: 6px 0 6px 32px; font-size: var(--text-14); color: var(--gray-900); }
.avoid-list li::before { top: 6px; left: 0; }
.part .files { margin-top: 0; max-width: none; }
.files-table { width: 100%; margin-top: 12px; }
.files-table td:nth-child(2) { color: var(--gray-500); }
.files-table a { overflow-wrap: anywhere; } /* long font file names wrap on phones */
.files-table td:last-child { text-align: right; color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.logo-files table { width: 100%; }
.logo-files td:nth-child(2) { min-width: 240px; }
.logo-files td { padding: 6px 16px 6px 0; vertical-align: middle; }
.logo-files .sw { width: 120px; padding: 0; height: 52px; text-align: center; box-shadow: inset 0 0 0 1px var(--gray-100); }
.logo-files .sw img { height: 22px; max-width: 96px; vertical-align: middle; }
.logo-files td:nth-child(2) { padding-left: 20px; }
.logo-files .dl { text-align: right; white-space: nowrap; }
.logo-files .dl a, .logo-files .dl span { margin-left: 16px; font-weight: 600; }
.logo-files .icons { line-height: 2; }
.logo-files .icons a, .logo-files .icons b { margin-right: 12px; }

/* Home: the brand end card is the first screen (spec 2.2, hero A), contents by statements below. */
.home main { max-width: none; padding: 0; }
.hero { position: relative; height: calc(100vh - 57px); min-height: 520px; overflow: hidden;
  background: linear-gradient(var(--navy-800), var(--navy-900)); color: var(--white); }
.hero .rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .beats { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(32px, 5vw, var(--text-64)); font-weight: 600; letter-spacing: var(--text-64--letter-spacing); line-height: 1; }
.hero .w { display: inline-block; white-space: pre; opacity: 0; }
.hero .mk, .hero .ring { opacity: 0; }
.hero-foot { position: absolute; left: 32px; right: 32px; bottom: 24px; margin: 0; display: flex; justify-content: space-between;
  font-size: var(--text-13); color: var(--navy-400); }
.contents { max-width: 1120px; margin: 0 auto; padding: 64px 32px 96px; }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; }
.contents a { display: block; padding: 16px 0; border-bottom: 1px solid var(--gray-100); color: var(--gray-900); }
.contents b { display: block; font-size: var(--text-14); color: var(--gray-500); font-weight: 500; }
.contents span { font-size: var(--text-22); line-height: var(--text-22--line-height); letter-spacing: var(--text-22--letter-spacing); font-weight: 600; }
/* Narrow screens: Files stays in the first row next to the logo (spec 2.2: «Файлы» always on top),
   the other sections become a scrolling row under them. */
@media (max-width: 900px) {
  .sec-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; flex-direction: row; gap: 16px; overflow-x: auto; white-space: nowrap; }
  .toc p { display: none; }
  .part { grid-template-columns: minmax(0, 1fr); }
  .avoid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avoid-grid .ok { grid-row: auto; grid-column: 1 / -1; }
  .avoid-grid svg { max-width: 100%; height: auto; }
  .logo-files { overflow-x: auto; }
  .part .example { overflow-x: auto; max-width: 100%; } /* product mockups keep their layout and scroll sideways */
  .sec-stage { padding: 48px 16px; }
  .sec-stage .example { overflow-x: auto; max-width: 100%; }
  .logo-files tr { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
  .logo-files td { padding: 0; border: 0; }
  .logo-files .sw { width: 96px; height: 44px; }
  .logo-files td:nth-child(2) { min-width: 0; padding-left: 0; }
  .logo-files .dl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 6px; }
  .logo-files .dl a, .logo-files .dl span { margin: 0; white-space: nowrap; }
  .top { flex-wrap: wrap; }
  .files-link { margin-left: auto; }
  .sections { order: 3; width: 100%; margin-left: 0; overflow-x: auto; white-space: nowrap; }
  .contents ol, .pair { grid-template-columns: 1fr; }
}

/* Inter Tight only for canvas text in 3D stands (logo word on the card, plaque, merch); the site itself
   shows the logo word as curves. fonts.css (task 5 of plan 1) has no Inter Tight face. */
@font-face { font-family: 'Inter Tight'; src: url('/files/fonts/InterTight-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }