/* ============================================================================
   Турборэнд — инженерное досье. Chaptered editorial theme over scrollcraft.css.
   ========================================================================== */

:root {
  --sc-canvas:      #F1EDE3;
  --sc-surface:     #E6E0D0;
  --sc-ink:         #18130E;
  --sc-ink-soft:    #5A5245;
  --sc-accent:      #E4272C;
  --sc-accent-ink:  #FBEDEA;
  /* Small red text (labels, tags, step numbers) needs a darker step than the
     brand red itself to clear 4.5:1 on paper — E4272C only reaches 3.88:1.
     Borders, dots and the progress bar stay on --sc-accent since those are
     UI marks (3:1 floor), not text. */
  --sc-accent-text: #B81C20;

  --sc-hairline:        rgba(24, 19, 14, 0.16);
  --sc-hairline-strong: rgba(24, 19, 14, 0.30);

  --sc-font-display: "Golos Text", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    "Golos Text", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --sc-shadow-color: 28 30% 8%;

  /* peak (dark) ground — same accent hue, lighter stop, per taste.md's
     two-stop exception for a page that hard-cuts light/dark */
  --peak-canvas:     #14100C;
  --peak-surface:    #1D1712;
  --peak-ink:        #F2EAE0;
  --peak-ink-soft:   #B4A796;
  --peak-accent:     #FF5B52;
  --peak-accent-ink: #14100C;
}

body { background: var(--sc-canvas); }

/* ------------------------------------------------------------ chapters -- */
.chapter { position: relative; background: var(--sc-canvas); color: var(--sc-ink); }
.chapter--surface { background: var(--sc-surface); }
.chapter--dark {
  background: var(--peak-canvas);
  color: var(--peak-ink);
  --sc-ink: var(--peak-ink);
  --sc-ink-soft: var(--peak-ink-soft);
  --sc-accent: var(--peak-accent);
  --sc-accent-ink: var(--peak-accent-ink);
  --sc-accent-text: var(--peak-accent);
  --sc-hairline: rgba(242, 234, 224, 0.14);
  --sc-hairline-strong: rgba(242, 234, 224, 0.26);
}
.chapter--dark .sc-body { color: var(--peak-ink-soft); }
.chapter--silent { min-height: 46vh; display: flex; align-items: center; justify-content: center; padding-block: 0; }

.chapter-inner { padding-block: var(--sc-section); }
.chapter-inner--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }

.kicker {
  display: flex; align-items: baseline; gap: var(--sc-3);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent-text);
  margin-bottom: var(--sc-4);
}
.kicker::before { content: attr(data-num); color: var(--sc-ink-soft); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--sc-hairline); align-self: center; }

.chapter-head { max-width: 46rem; }
.chapter-head h2 { margin-top: 0; }
.chapter-lede { margin-top: var(--sc-4); }

/* -------------------------------------------------------------- folio --- */
.folio {
  position: fixed; left: var(--sc-4); top: 50%; translate: 0 -50%;
  z-index: var(--sc-z-chrome);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  writing-mode: vertical-rl;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  display: flex; align-items: center; gap: var(--sc-3);
  pointer-events: none;
  mix-blend-mode: normal;
  transition: color var(--sc-d-slow) var(--sc-ease-out);
}
.folio strong { color: var(--sc-ink); font-weight: 500; }
.folio-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); flex-shrink: 0; }

/* ---------------------------------------------------------- passport --- */
.passport {
  position: fixed; right: var(--sc-4); top: var(--sc-5);
  z-index: var(--sc-z-chrome);
  width: 15rem;
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e2);
  font-family: var(--sc-font-mono);
  font-size: 0.68rem;
  color: var(--sc-ink);
}
.passport__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-2);
  padding: var(--sc-3) var(--sc-3) var(--sc-2);
  border-bottom: 1px solid var(--sc-hairline);
  letter-spacing: var(--sc-track-snug); text-transform: uppercase;
  color: var(--sc-ink);
}
.passport__head span:first-child { white-space: nowrap; font-weight: 600; }
.passport__seal {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.9) rotate(-8deg);
  opacity: 0.55;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out), transform var(--sc-d-slow) var(--sc-ease-out);
}
.passport__seal img { width: 100%; height: 100%; object-fit: contain; }
.passport.is-complete .passport__seal { opacity: 1; transform: scale(1) rotate(-8deg); }
.passport__rows { list-style: none; margin: 0; padding: var(--sc-2) var(--sc-3) var(--sc-3); display: flex; flex-direction: column; gap: 2px; min-height: 1.4em; }
.passport__row {
  display: flex; justify-content: space-between; gap: var(--sc-2);
  padding-block: 3px;
  border-bottom: 1px dashed var(--sc-hairline);
  opacity: 0; transform: translate3d(0, 6px, 0) scale(0.98);
  transition: opacity 480ms var(--sc-ease-out), transform 480ms var(--sc-ease-out);
}
.passport__row.is-stamped { opacity: 1; transform: none; }
.passport__row:last-child { border-bottom: none; }
.passport__row span:first-child { color: var(--sc-ink-soft); }
.passport__row span:last-child { color: var(--sc-ink); font-weight: 600; text-align: right; }
@media (max-width: 860px) {
  .folio { display: none; }
  /* The passport is a desktop-only device. On a phone it either covers a third
     of the screen or shrinks to two scrollable rows nobody reads — both cost
     more than the fact it stamps is worth. */
  .passport { display: none; }
}

/* ---------------------------------------------------------------- title -- */
.titlepage {
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-block: var(--sc-8) var(--sc-6);
}
.titlepage > .titlepage__grid { align-self: center; }
.titlepage__grid {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sc-8);
  align-items: end; width: 100%;
}
.titlepage__mark { display: flex; align-items: center; gap: var(--sc-3); margin-bottom: var(--sc-7); }
.titlepage__mark img { height: 26px; width: auto; }
.titlepage__mark span { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.titlepage h1 {
  font-size: clamp(2.6rem, 2.1rem + 3.4vw, 5.4rem);
  max-width: 18ch;
}
.titlepage__sub { margin-top: var(--sc-5); max-width: 42ch; }
.titlepage__registry {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); text-align: right; line-height: 1.9;
  border-left: 1px solid var(--sc-hairline); padding-left: var(--sc-5);
}
.titlepage__registry b { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.titlepage__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sc-9); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
}

@media (max-width: 700px) {
  .titlepage__grid { grid-template-columns: 1fr; }
  .titlepage__registry { text-align: left; border-left: none; padding-left: 0; border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
}

/* --------------------------------------------------------------- plate -- */
.plate { position: relative; overflow: clip; background: var(--sc-surface); }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate figcaption {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); letter-spacing: var(--sc-track-wide);
  margin-top: var(--sc-3);
}

/* ----------------------------------------------------------- chapter I -- */
.competence-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sc-9); align-items: start; margin-top: var(--sc-8); }
.competence-grid .plate { aspect-ratio: 3360 / 1368; }
.competence-list { display: flex; flex-direction: column; gap: var(--sc-6); }
.competence-list article { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.competence-list h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); margin: 0 0 var(--sc-2); }
.competence-list p { margin: 0; }
@media (max-width: 860px) { .competence-grid { grid-template-columns: 1fr; gap: var(--sc-6); } }

/* ---------------------------------------------------------- chapter II -- */
.spec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--sc-hairline); border: 1px solid var(--sc-hairline);
  margin-top: var(--sc-8);
}
.spec-plate { background: var(--sc-canvas); padding: var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-3); }
.spec-plate__img { aspect-ratio: 3 / 2; background: #fff; display: flex; align-items: center; justify-content: center; overflow: clip; }
.spec-plate__img img { width: 88%; height: 88%; object-fit: contain; }
.spec-plate h3 { font-size: var(--sc-t-base); font-weight: 600; margin: 0; font-family: var(--sc-font-text); }
.spec-plate p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.spec-plate .spec-tag { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent-text); }
@media (max-width: 860px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } }

.brand-strip { margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; gap: var(--sc-6) var(--sc-8); align-items: center; }
.brand-strip img { height: 20px; width: auto; opacity: 0.72; filter: grayscale(1) contrast(1.1); }
.brand-strip img.mono-logo { filter: none; opacity: 0.8; }

/* --------------------------------------------------------- chapter III -- */
.roadmap { counter-reset: step; margin-top: var(--sc-8); border-top: 1px solid var(--sc-hairline); }
.roadmap li { list-style: none; counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--sc-5); padding-block: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); }
.roadmap li::before { content: counter(step, decimal-leading-zero); font-family: var(--sc-font-mono); color: var(--sc-accent-text); font-size: var(--sc-t-sm); padding-top: 0.15em; }
.roadmap p { margin: 0; max-width: 56ch; }

/* --------------------------------------------------------- chapter IV -- */
.industry-table { margin-top: var(--sc-8); border-top: 1px solid var(--sc-hairline-strong); display: grid; grid-template-columns: 1fr 1fr; }
.industry-row { border-bottom: 1px solid var(--sc-hairline); border-right: 1px solid var(--sc-hairline); padding: var(--sc-4) var(--sc-5) var(--sc-4) 0; }
.industry-row:nth-child(2n) { border-right: none; padding-left: var(--sc-5); padding-right: 0; }
.industry-row h3 { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-base); margin: 0 0 var(--sc-1); }
.industry-row .industry-role { font-size: var(--sc-t-sm); color: var(--sc-accent-text); margin: 0 0 var(--sc-2); }
.industry-row p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 700px) { .industry-table { grid-template-columns: 1fr; } .industry-row, .industry-row:nth-child(2n) { border-right: none; padding-inline: 0; } }

/* ---------------------------------------------------------- chapter V -- */
.compact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-9); margin-top: var(--sc-8); }
.compact-cols h3 { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 var(--sc-4); }
.compact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.compact-list li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--sc-2); padding-block: var(--sc-2); border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.compact-list li b { color: var(--sc-accent-text); font-family: var(--sc-font-mono); font-weight: 500; }
.compact-list li span { color: var(--sc-ink); }
@media (max-width: 700px) { .compact-cols { grid-template-columns: 1fr; gap: var(--sc-6); } }

/* --------------------------------------------------------- chapter VI -- */
.stat-row { display: flex; gap: var(--sc-9); margin-top: var(--sc-6); flex-wrap: wrap; }
.stat-row .stat { min-width: 8rem; }
.stat .sc-nums { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-3xl); line-height: 1; display: block; }
.stat span.stat-label { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-transform: uppercase; letter-spacing: var(--sc-track-wide); font-family: var(--sc-font-mono); }

.client-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--sc-hairline); border: 1px solid var(--sc-hairline); margin-top: var(--sc-8); }
.client-grid div { background: var(--sc-canvas); aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; padding: var(--sc-4); }
.client-grid img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 860px) { .client-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .client-grid { grid-template-columns: repeat(3, 1fr); } }

.timeline-list { list-style: none; margin: var(--sc-8) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.timeline-list li { display: grid; grid-template-columns: 5rem 5rem 1fr; gap: var(--sc-5); align-items: center; padding-block: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); }
.timeline-list li.no-photo { grid-template-columns: 5rem 1fr; }
.timeline-list time { font-family: var(--sc-font-mono); color: var(--sc-accent-text); font-size: var(--sc-t-sm); }
.timeline-list img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.timeline-list h3 { font-size: var(--sc-t-sm); font-weight: 600; margin: 0; font-family: var(--sc-font-text); }
@media (max-width: 700px) { .timeline-list li, .timeline-list li.no-photo { grid-template-columns: 3.6rem 1fr; } .timeline-list time { grid-row: 1; } .timeline-list img { display: none; } }

/* -------------------------------------------------------------- quote -- */
/* Speaker rail beside the quote, not a caption stranded under it. Centring the
   quote alone left a wide empty gutter on the left and pushed the attribution
   to the wrapper edge, so the name read as belonging to the page rather than to
   the words. Sharing one centred group ties them together and fills the gutter. */
.quote-inner {
  padding-block: clamp(6rem, 15vw, 15rem);
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 46rem);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  justify-content: center;
  align-items: start;
}
.quote-inner .kicker { grid-column: 1 / -1; grid-row: 1; }
.quote-plate { grid-column: 2; grid-row: 2; margin: 0; text-align: left; } /* blockquote UA margin would break column alignment */
.quote-attrib { grid-column: 1; grid-row: 2; }
.quote-plate .sc-lede { font-size: clamp(1.05rem, 0.94rem + 0.7vw, 1.45rem); line-height: 1.5; max-width: none; color: var(--peak-ink); font-family: var(--sc-font-display); font-weight: 400; letter-spacing: var(--sc-track-snug); }
.quote-plate .sc-lede + .sc-lede { margin-top: var(--sc-4); }
.quote-attrib {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-3);
  /* Optical align with the first line of the quote, not its box top. */
  padding-top: 0.3em;
  text-align: left;
}
.quote-attrib img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.quote-attrib b {
  display: block; font-weight: 600;
  font-size: var(--sc-t-sm); line-height: 1.3; color: var(--peak-ink);
}
.quote-attrib b::before {
  content: ""; display: block; width: 28px; height: 1px;
  background: var(--sc-accent); margin-bottom: var(--sc-2);
}
.quote-attrib span {
  display: block; margin-top: var(--sc-1);
  font-size: 0.72rem; line-height: 1.4; color: var(--peak-ink-soft);
}

@media (max-width: 900px) {
  /* One column: the quote leads, the speaker signs off under it, horizontally. */
  .quote-inner { grid-template-columns: minmax(0, 46rem); justify-content: start; }
  .quote-plate { grid-column: 1; }
  .quote-attrib {
    grid-column: 1; grid-row: 3;
    flex-direction: row; align-items: center; gap: var(--sc-4);
    margin-top: var(--sc-7); padding-top: 0;
  }
  .quote-attrib img { width: 56px; height: 56px; }
  .quote-attrib b::before { display: none; }
}

/* ---------------------------------------------------------- colophon -- */
.colophon-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sc-9); margin-top: var(--sc-8); align-items: start; }
.colophon-ask { font-size: var(--sc-t-lg); max-width: 34ch; }
.colophon-cta {
  display: inline-flex; align-items: baseline; gap: var(--sc-2);
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
  text-decoration: none;
  border-bottom: 2px solid var(--sc-accent); padding-bottom: 2px;
  margin-top: var(--sc-5);
}
.colophon-cta:hover { color: var(--sc-accent); }
.field-list { display: flex; flex-direction: column; gap: var(--sc-4); }
.field-list label { display: block; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); margin-bottom: var(--sc-1); }
.field-list input, .field-list textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--sc-hairline-strong);
  padding: var(--sc-2) 0; font-size: var(--sc-t-base); color: var(--sc-ink); resize: vertical;
}
.field-list input:focus-visible, .field-list textarea:focus-visible { border-bottom-color: var(--sc-accent); }
.field-list button {
  align-self: flex-start; margin-top: var(--sc-2); background: none; border: none; padding: 0;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); border-bottom: 2px solid var(--sc-accent);
  cursor: pointer; transition: transform 160ms var(--sc-ease-out);
}
.field-list button:active { transform: scale(0.97); }
.field-list button[disabled] { opacity: 0.5; cursor: default; transform: none; }
/* Off-screen rather than display:none — a bot reading the DOM fills a hidden
   input just as happily, but many skip one that is not in the layout at all. */
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note {
  margin: 0; min-height: 1.2em;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); line-height: 1.5;
  color: var(--sc-ink-soft);
}
.form-note.is-ok { color: var(--sc-ink); font-weight: 500; }
.form-note.is-error { color: var(--sc-accent); }

.registry-plate { margin-top: var(--sc-9); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sc-5); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.registry-plate p { margin: 0; line-height: 1.8; }
.registry-plate .copy-details { background: none; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); padding: var(--sc-2) var(--sc-3); cursor: pointer; }
.registry-plate .copy-details:hover { border-color: var(--sc-accent); color: var(--sc-accent-text); }

@media (max-width: 860px) { .colophon-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- modal -- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--sc-5); visibility: hidden; opacity: 0; transition: opacity var(--sc-d-base) var(--sc-ease-out), visibility var(--sc-d-base); }
.modal[aria-hidden="false"] { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: color-mix(in oklab, var(--sc-ink) 60%, transparent); }
.modal-dialog { position: relative; max-width: 34rem; width: 100%; background: var(--sc-canvas); color: var(--sc-ink); padding: var(--sc-6); box-shadow: var(--sc-e3); max-height: 84vh; overflow-y: auto; }
.modal-image { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: var(--sc-4); background: var(--sc-surface); }
.modal-close { position: absolute; top: var(--sc-4); right: var(--sc-4); background: none; border: none; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); cursor: pointer; }
.modal-close:hover { color: var(--sc-accent-text); }

/* --------------------------------------------------------------- misc -- */
.eq-motif { position: absolute; inset: 0; z-index: 0; opacity: 0.14; overflow: clip; pointer-events: none; }
.eq-motif img { width: 130%; height: 130%; object-fit: cover; }
.titlepage, .colophon-section { position: relative; z-index: 1; }