/* Tchistiakov Plant Performance - engineering-report design system.
   Zero external requests. IBM Plex Sans self-hosted, variable 500-600. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans.woff2") format("woff2");
}

:root {
  /* color - 4 + neutrals */
  --navy-900: #0f1419;   /* signature dark: header, footer, CTA, figure frames */
  --navy-700: #1c232e;   /* raised dark surface */
  --teal-400: #35c9b8;   /* accent on dark, borders and marks only, never text on white */
  --teal-700: #0c6e63;   /* text-safe accent on white: links, stat values, active nav */
  --amber-400: #ffab40;  /* reserved: cost and overtime semantics, max one use per page */

  /* neutrals */
  --paper: #ffffff;
  --paper-2: #e9edf1;
  --ink: #1a2332;
  --ink-soft: #4a5568;
  --line: #d9dee4;
  --ink-inverse: #e6edf3;
  --ink-inverse-soft: #bcc7d3;

  /* type */
  --font-display: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* spacing - 8px base */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;

  --accent-bar: 3px;
  --radius: 2px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* short pages still close on the signature dark */
.site-footer {
  margin-top: auto;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }

/* the section marker: a short teal rule under the title, the masthead keyline
   at chapter scale. Left accent bars belong to data and action atoms only. */
h2 {
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}

h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--teal-400);
  margin-top: 0.75rem;
}

/* section kickers: numbered wayfinding above each chapter heading */

.kicker {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.wrap > .kicker {
  margin-bottom: 0.5rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--teal-700);
}

a:focus-visible {
  outline: 2px solid var(--teal-700);
  outline-offset: 2px;
}

.site-header a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--teal-400);
}

/* Skip link: hidden until keyboard focus */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 10;
  background: var(--navy-900);
  color: var(--ink-inverse);
  padding: 0.6rem 1rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  width: 100%;
}

h1, h2, h3 {
  text-wrap: balance;
}

/* reading measure: prose never exceeds ~75 characters per line.
   The measured column centers inside the wrap so wide atoms (stats, cards,
   tables, exhibits) extend symmetrically around it on large screens. */

.wrap > h2,
.wrap > p,
.wrap ol.steps,
.wrap > ul {
  max-width: 46rem;
  margin-inline: auto;
}

/* Header: navy masthead with teal keyline */

.site-header {
  background: var(--navy-900);
  border-bottom: var(--accent-bar) solid var(--teal-400);
}

.site-header .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

.site-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-inverse);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.site-nav a {
  color: var(--ink-inverse-soft);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.6rem 0.25rem;
  display: inline-block;
}

.site-nav a:hover {
  color: var(--teal-400);
}

.site-nav a[aria-current="page"] {
  color: var(--ink-inverse);
  font-weight: 600;
  border-bottom: 2px solid var(--teal-400);
  padding-bottom: calc(0.6rem - 2px);
}

/* Sections */

section {
  padding: var(--s4) 0;
}

section.alt {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero {
  padding: var(--s4) 0;
}

.hero p.lede {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 36rem;
}

/* Centered hero variant: tight reading measure */

.hero-center {
  text-align: center;
}

.hero-center h1 {
  margin-left: auto;
  margin-right: auto;
  max-width: 44rem;
}

.hero-center p.lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
}

/* the answer band: the case's governing thought, stated before the story */

.hero .answer {
  max-width: 46rem;
  margin: 0 auto;
  text-align: left;
  border-left: var(--accent-bar) solid var(--teal-400);
  padding-left: var(--s2);
  color: var(--ink);
}

.hero-center .kicker {
  text-align: left;
  margin-top: var(--s3);
}

/* the home hero opens with an eyebrow kicker instead of closing with one */

.hero-center .wrap > .kicker:first-child {
  text-align: center;
  margin-top: 0;
}

/* About: background text with portrait */

.about-grid {
  display: grid;
  gap: var(--s4);
}

.portrait {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 100%;
  max-width: 16rem;
  height: auto;
  order: -1;
}

/* Home founder strip: the About portrait at chip scale beside the text */

.founder-grid {
  display: grid;
  gap: var(--s3);
  max-width: 60rem;
}

.founder-grid .portrait {
  width: 10rem;
  height: 10rem;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  justify-self: center;
  order: -1;
}

/* CTA carries the same accent-bar anatomy */

.cta {
  display: inline-block;
  background: var(--navy-900);
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border-left: var(--accent-bar) solid var(--teal-400);
  margin-top: var(--s1);
}

.cta:hover {
  background: var(--navy-700);
}

/* secondary CTA: same anatomy, outline weight, one primary per page */

.cta-secondary {
  background: transparent;
  color: var(--teal-700);
  border: 1px solid var(--line);
  border-left: var(--accent-bar) solid var(--teal-400);
}

.cta-secondary:hover {
  background: var(--paper-2);
}

/* proof stats breathe before the action that follows them */

.stats + .cta {
  margin-top: var(--s3);
}

/* CTAs align with the centered reading column's left edge */

.wrap > .cta {
  margin-left: calc(max(0rem, (100% - 46rem) / 2));
}

.hero-center .cta {
  margin-left: 0;
}

/* Results band: on-dark stat anatomy on the signature surface */

.results-band {
  background: var(--navy-900);
  color: var(--ink-inverse);
}

.results-band h2 {
  color: var(--ink-inverse);
}

.results-band .lead-in {
  color: var(--ink-inverse-soft);
  font-size: 0.9375rem;
}

.results-band .stat .value {
  color: var(--teal-400);
}

.results-band .stat .label {
  color: var(--ink-inverse);
}

/* Cards: the stat anatomy at neutral intensity */

.grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
  margin: var(--s3) 0 0;
  align-items: stretch;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: var(--accent-bar) solid var(--teal-400);
  border-radius: var(--radius);
  padding: var(--s3);
}

/* the flagship card points at its proof */

.card-tag {
  margin: var(--s1) 0 0;
  font-size: 0.875rem;
}

.card h3 {
  margin-bottom: 0.25em;
}

.card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}

/* Stat blocks: the atom */

.stats {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
  margin: var(--s3) auto 0;
  max-width: 64rem;
}

.stat {
  border-left: var(--accent-bar) solid var(--teal-400);
  padding: 0.25rem 0 0.25rem var(--s2);
}

/* a lone stat aligns with the centered reading column instead of spanning the wrap */

.stats .stat:only-child {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.stat .value {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}

.stat .label {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* Lists */

main ul {
  padding-left: 1.25rem;
  list-style: square;
}

main ul li::marker {
  color: var(--teal-700);
}

main ul li {
  margin-bottom: 0.4rem;
}

ol.steps {
  padding-left: 1.25rem;
}

ol.steps li {
  margin-bottom: 0.75rem;
}

ol.steps li::marker {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--teal-700);
}

/* Exported case study figures: navy frames are the signature surface */

/* Exhibit frame: one class, one width. Every figure renders in a centered
   64rem navy frame, never full-bleed. On narrow screens the frame spans the
   content width. The page has exactly two widths: the 46rem reading measure
   for prose and this frame for exhibits. */

figure.chart {
  margin: var(--s3) 0;
  width: min(calc(100vw - 2.5rem), 64rem);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* the two maps are the page's panoramas and keep the full exhibit width */

figure.chart.fig-map-current,
figure.chart.fig-map-recovered {
  width: min(calc(100vw - 2.5rem), 80rem);
}

.stats + figure.chart {
  margin-top: var(--s4);
}

figure.chart .frame {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
  background: var(--navy-900);
  overflow-x: auto;
}

/* rebuilt charts inherit the navy frame panel like every exhibit; override
   here if the chart panel surface ever diverges from the maps */

/* Content floor: below it the image pans inside the fixed frame instead of
   shrinking its text illegibly. The two VSM maps override to natural scale
   and always pan at exhibit width. */

figure.chart img {
  display: block;
  width: 100%;
  min-width: 57rem;
}

/* rebuilt charts render inline so they set type in the site face */

figure.chart .frame svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 57rem;
}

figure.chart .frame svg text {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* VSM render-scale lock: one SVG unit = one pixel at every width.
   950px equals the exhibit frame interior at a 1024px viewport; below that
   the frame pans, it never downscales the map. */

figure.chart.fig-map-current .frame svg,
figure.chart.fig-map-recovered .frame svg {
  width: 1200px;
  min-width: 1200px;
  margin-inline: auto;
}

/* the compact shift maps lock 1:1 inside the standard chart frame */

figure.chart.fig-map-shift1 .frame svg,
figure.chart.fig-map-shift2 .frame svg {
  width: 980px;
  min-width: 980px;
  margin-inline: auto;
}

figure.chart figcaption {
  margin-top: var(--s1);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

figure.chart figcaption a {
  display: inline-block;
  margin-left: var(--s1);
}

/* Rate ramp table: the report table, hairline rules and tabular numerals */

.table-lead {
  margin: var(--s3) 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* table framing text aligns with the full-width table, not the reading column */

.wrap > .table-lead,
.wrap > .table-note {
  max-width: 64rem;
  margin-inline: auto;
}

.table-scroll {
  overflow-x: auto;
  margin: var(--s3) auto 0;
  max-width: 64rem;
}

.table-lead + .table-scroll {
  margin-top: var(--s1);
}

table.ramp {
  border-collapse: collapse;
  width: 100%;
  min-width: 38rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.ramp th,
.ramp td {
  border: 1px solid var(--line);
  padding: var(--s1) var(--s2);
  text-align: left;
  vertical-align: top;
}

.ramp thead th {
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--paper-2);
  border-bottom: var(--accent-bar) solid var(--teal-400);
}

.ramp tbody th {
  font-weight: 600;
}

.table-note {
  margin-top: var(--s1);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* Credentials: the stat atom without the large value */

ul.credentials {
  list-style: none;
  padding: 0;
  margin: var(--s3) 0 0;
}

ul.credentials li {
  border-left: var(--accent-bar) solid var(--teal-400);
  padding: 0.25rem 0 0.25rem var(--s2);
  margin-bottom: var(--s2);
}

/* Contact: the links adopt the credentials anatomy */

.contact-links {
  list-style: none;
  padding: 0;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.contact-links li {
  border-left: var(--accent-bar) solid var(--teal-400);
  padding: 0.25rem 0 0.25rem var(--s2);
  margin-bottom: var(--s2);
}

.hero-center .contact-links {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Footer: closes on the signature dark */

.site-footer {
  background: var(--navy-900);
  color: var(--ink-inverse-soft);
  padding: var(--s3) 0 var(--s4);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.site-footer a {
  color: var(--teal-400);
}

.footer-nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--navy-700);
  margin-bottom: var(--s1);
}

/* Wider screens */

@media (min-width: 40em) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.125rem; }

  section { padding: var(--s5) 0; }
  .hero { padding: var(--s5) 0; }
  .hero p.lede { font-size: 1.125rem; }

  .about-grid {
    grid-template-columns: 1fr 16rem;
    align-items: start;
  }

  .portrait {
    order: 0;
  }

  .founder-grid {
    grid-template-columns: 1fr 10rem;
    align-items: center;
  }

  .founder-grid .portrait {
    order: 0;
  }

  .site-header .wrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 2rem;
  }

  .grid.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }

  /* align price lines across cards whose titles wrap to two lines */
  .card h3 {
    min-height: 2.4em;
  }

  .grid-2 .card h3 {
    min-height: 0;
  }

  .stats {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  /* four-stat groups pair 2x2 here rather than orphaning a fourth stat */
  .stats.stats-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat .value { font-size: 2rem; }

  .site-footer .wrap {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    justify-content: space-between;
  }
}

/* Three-up service cards only from 52em, avoiding an orphaned third card
   in the 40-52em band where auto-fit would give two columns */

@media (min-width: 52em) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .stats.stats-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}