/* ==========================================================================
   MULTICHEM DESIGN FOUNDATION

   A thin brand layer over Arch. Arch remains responsible for reset, layout,
   color-scheme switching, widget structure, and reveal behavior.
   ========================================================================== */

:root {
  /* Brand and neutral palette */
  --mc-color-red: #cc0100;
  --mc-color-red-hover: #a90000;
  --mc-color-red-inverse: #f06b69;
  --mc-color-red-inverse-hover: #ff8583;
  --mc-color-page: #f7f7f5;
  --mc-color-white: #ffffff;
  --mc-color-surface: #eff1f0;
  --mc-color-graphite: #191d20;
  --mc-color-text: #30363a;
  --mc-color-muted: #667077;
  --mc-color-border: #d9dddf;
  --mc-color-dark: #191d20;
  --mc-color-dark-deep: #111416;
  --mc-color-on-red: #ffffff;

  /* Typography */
  --mc-font-family: "Manrope", sans-serif;
  --mc-type-display: clamp(4.8rem, 3.47rem + 3.54vw, 8rem);
  --mc-type-h1: clamp(4rem, 3rem + 2.65vw, 6.4rem);
  --mc-type-h2: clamp(3.2rem, 2.37rem + 2.21vw, 5.2rem);
  --mc-type-h3: clamp(2.6rem, 2.4rem + 0.45vw, 3rem);
  --mc-type-h4: clamp(2rem, 1.9rem + 0.25vw, 2.2rem);
  --mc-type-lead: clamp(1.8rem, 1.7rem + 0.2vw, 2rem);
  --mc-type-body: clamp(1.6rem, 1.55rem + 0.1vw, 1.7rem);
  --mc-type-small: 1.4rem;
  --mc-type-label: 1.2rem;
  --mc-leading-heading: 1.1;
  --mc-leading-body: 1.6;

  /* Layout and spacing */
  --mc-container-width: 128rem;
  --mc-content-width: 80rem;
  --mc-section-space: clamp(5.6rem, 2.95rem + 7.07vw, 12rem);
  --mc-section-gutter: clamp(2rem, 1.45rem + 1.45vw, 3.2rem);

  /* Geometry */
  --mc-radius-sm: 0.4rem;
  --mc-radius-md: 0.8rem;
  --mc-border: 0.1rem solid var(--mc-color-border);

  /* Motion */
  --mc-duration-fast: 150ms;
  --mc-duration-normal: 300ms;
  --mc-duration-reveal: 600ms;
  --mc-stagger-step: 80ms;
  --mc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mc-interactive-red: var(--mc-color-red);
  --mc-interactive-red-hover: var(--mc-color-red-hover);
  --mc-focus-color: var(--mc-color-red);

  /* Arch integration */
  --container-max-width: var(--mc-container-width);
  --content-width-md: var(--mc-content-width);
  --section-padding-block: var(--mc-section-space);
  --section-padding-inline: var(--mc-section-gutter);
  --line-height-tight: var(--mc-leading-heading);
  --line-height-relaxed: var(--mc-leading-body);
  --transition-speed-fast: var(--mc-duration-fast);
  --transition-speed-normal: var(--mc-duration-normal);
  --transition-speed-slow: var(--mc-duration-reveal);
}

body {
  font-family: var(--typography-body_font-family, var(--mc-font-family));
  font-size: calc(var(--mc-type-body) * var(--body-scale));
  line-height: var(--mc-leading-body);
}

body.corner-slightly-rounded {
  --radius-sm: var(--mc-radius-sm);
  --radius-md: var(--mc-radius-md);
  --radius-lg: var(--mc-radius-md);
  --radius-button: var(--mc-radius-sm);
  --radius-marker: var(--mc-radius-md);
}

.color-scheme-highlight-primary,
.color-scheme-highlight-secondary {
  --mc-interactive-red: var(--mc-color-red-inverse);
  --mc-interactive-red-hover: var(--mc-color-red-inverse-hover);
  --mc-focus-color: var(--mc-color-red-inverse);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--typography-heading_font-family, var(--mc-font-family));
  letter-spacing: -0.025em;
}

h1 {
  font-size: calc(var(--mc-type-h1) * var(--heading-scale));
}

h2 {
  font-size: calc(var(--mc-type-h2) * var(--heading-scale));
}

h3 {
  font-size: calc(var(--mc-type-h3) * var(--heading-scale));
}

h4 {
  font-size: calc(var(--mc-type-h4) * var(--heading-scale));
}

/* Fluid type roles for future MC widgets and compatible Arch content. */
.mc-display {
  font-family: var(--typography-heading_font-family, var(--mc-font-family));
  font-size: calc(var(--mc-type-display) * var(--heading-scale));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.mc-h1 {
  font-size: calc(var(--mc-type-h1) * var(--heading-scale));
}

.mc-h2,
.w-headline:not([class*="t-"]) {
  font-size: calc(var(--mc-type-h2) * var(--heading-scale));
}

.mc-h3 {
  font-size: calc(var(--mc-type-h3) * var(--heading-scale));
}

.mc-h4 {
  font-size: calc(var(--mc-type-h4) * var(--heading-scale));
  font-weight: 600;
}

.mc-lead {
  max-width: var(--mc-content-width);
  font-size: calc(var(--mc-type-lead) * var(--body-scale));
  line-height: 1.55;
}

/* Editorial labels */
.w-eyebrow,
.mc-technical-label {
  font-size: calc(var(--mc-type-label) * var(--body-scale));
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.w-eyebrow {
  color: var(--mc-color-red);
}

.mc-technical-label {
  color: var(--text-muted);
}

.mc-section-number {
  display: block;
  font-family: var(--typography-heading_font-family, var(--mc-font-family));
  font-size: calc(clamp(5.6rem, 4.7rem + 2.4vw, 8rem) * var(--heading-scale));
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: var(--text-muted);
}

.mc-rule {
  width: 100%;
  border: 0;
  border-block-start: var(--border-width-thin) solid var(--border-color);
}

/* Arch button primitives, branded for Multichem. */
.widget-button {
  min-height: 5.4rem;
  padding: 0 2.6rem;
  gap: 1rem;
  font-size: calc(var(--font-size-base) * var(--body-scale));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border-width: var(--border-width-thin);
  border-radius: var(--mc-radius-sm);
  transition:
    color var(--mc-duration-normal) var(--mc-ease-standard),
    background-color var(--mc-duration-normal) var(--mc-ease-standard),
    border-color var(--mc-duration-normal) var(--mc-ease-standard),
    transform var(--mc-duration-fast) var(--mc-ease-standard);
}

.widget-button-primary {
  color: var(--mc-color-on-red);
  background-color: var(--mc-color-red);
  border-color: var(--mc-color-red);
}

.widget-button-primary:hover {
  color: var(--mc-color-on-red);
  background-color: var(--mc-color-red-hover);
  border-color: var(--mc-color-red-hover);
}

.widget-button-secondary {
  color: var(--text-heading);
  background-color: transparent;
  border-color: var(--border-color);
}

.widget-button-secondary:hover {
  color: var(--text-heading);
  background-color: var(--bg-secondary);
  border-color: var(--text-muted);
}

.widget-button:focus-visible,
.mc-text-link:focus-visible {
  outline: 0.2rem solid var(--mc-focus-color);
  outline-offset: 0.3rem;
}

.widget-button:active {
  transform: translateY(0.1rem);
}

.widget-button:hover .widget-button-icon {
  transform: translateX(0.4rem);
}

.widget-button-icon {
  transition: transform var(--mc-duration-normal) var(--mc-ease-out);
}

/* Editorial text CTA. Keep the arrow in its own .mc-text-link-arrow span. */
.mc-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.4;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition:
    color var(--mc-duration-normal) var(--mc-ease-standard),
    text-decoration-color var(--mc-duration-normal) var(--mc-ease-standard);
}

.mc-text-link:hover {
  color: var(--mc-interactive-red-hover);
  text-decoration-color: currentColor;
}

.mc-text-link-arrow {
  display: inline-block;
  transition: transform var(--mc-duration-normal) var(--mc-ease-out);
}

.mc-text-link:hover .mc-text-link-arrow {
  transform: translateX(0.4rem);
}

/* Reuse Arch reveal classes with the Multichem motion specification. */
.reveal {
  transition:
    opacity var(--mc-duration-reveal) var(--mc-ease-out),
    transform var(--mc-duration-reveal) var(--mc-ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * var(--mc-stagger-step));
}

.reveal-up {
  transform: translateY(2rem);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .widget-button,
  .widget-button-icon,
  .mc-text-link,
  .mc-text-link-arrow {
    transition-duration: 0.01ms;
  }

  .widget-button:active,
  .widget-button:hover .widget-button-icon,
  .mc-text-link:hover .mc-text-link-arrow {
    transform: none;
  }
}

/* ==========================================================================
   MULTICHEM EDITORIAL PRIMITIVES

   Additive helpers shared by the editorial widget family (MC Hero Split,
   MC Solutions Index, MC Editorial Index, MC Statement Editorial,
   MC Partner Rail, MC Image Feature, MC Closing Statement).

   These rules introduce new class names and two additional spacing steps
   only. No existing selector is modified, so any page that does not use
   these classes renders exactly as before.
   ========================================================================== */

:root {
  /* Two extra section steps so section rhythm can vary instead of every gap
     being the same --mc-section-space. */
  --mc-section-space-tight: clamp(5.6rem, 3.4rem + 5.4vw, 10rem);
  --mc-section-space-loose: clamp(7.2rem, 4rem + 8vw, 14rem);
}

/* Section marker: a small tabular index, a hairline and the eyebrow.
   The page's repeating editorial signature. Used on structured sections
   only - the loud sections deliberately carry no marker. */
.mc-section-marker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
}

.mc-section-marker__index {
  flex: none;
  font-family: var(--typography-heading_font-family, var(--mc-font-family));
  font-size: calc(var(--mc-type-label) * var(--body-scale));
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.mc-section-marker__rule {
  flex: none;
  width: clamp(1.6rem, 2vw, 3.2rem);
  height: var(--border-width-thin);
  background-color: var(--border-color);
}

.mc-section-marker .w-eyebrow {
  margin: 0;
}

/* Structural hairline. Inherits the local border colour, so it works on
   light, soft and graphite surfaces without variants. */
.mc-hairline {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-block-start: var(--border-width-thin) solid var(--border-color);
}

/* Tabular numerals for technical labels and indices. */
.mc-numeral {
  font-variant-numeric: tabular-nums;
}

/* Photographic plate crop marks: four thin corner "L"s, drawn entirely with
   background gradients so they cost no extra markup. Purely decorative.
   Place inside a positioned figure/media element. */
.mc-crop-marks {
  position: absolute;
  inset: clamp(1.6rem, 1.8vw, 2.8rem);
  z-index: 1;
  pointer-events: none;
  --mc-crop-length: clamp(1.6rem, 1.8vw, 2.6rem);
  --mc-crop-weight: var(--border-width-thin);
  --mc-crop-color: rgba(255, 255, 255, 0.6);
  background-image:
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color)),
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color)),
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color)),
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color)),
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color)),
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color)),
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color)),
    linear-gradient(var(--mc-crop-color), var(--mc-crop-color));
  background-repeat: no-repeat;
  background-size:
    var(--mc-crop-length) var(--mc-crop-weight),
    var(--mc-crop-weight) var(--mc-crop-length),
    var(--mc-crop-length) var(--mc-crop-weight),
    var(--mc-crop-weight) var(--mc-crop-length),
    var(--mc-crop-length) var(--mc-crop-weight),
    var(--mc-crop-weight) var(--mc-crop-length),
    var(--mc-crop-length) var(--mc-crop-weight),
    var(--mc-crop-weight) var(--mc-crop-length);
  background-position:
    left top,
    left top,
    right top,
    right top,
    left bottom,
    left bottom,
    right bottom,
    right bottom;
}

/* Small red punctuation square. One per section, maximum. */
.mc-marker-square {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--mc-color-red);
}

/* --------------------------------------------------------------------------
   MC Split Rail — the canonical credibility / information rail.

   One component, three surface variants (`light`, `dark`, `image`). The
   structure and geometry are identical in every variant: a container-width
   hairline, two to four equal columns, an uppercase label over a short
   supporting line, hairline separators between columns. Four / two / one
   columns at desktop / tablet / mobile.

   The host owns the surface (page, graphite band or photography) and the
   alignment chrome; the rail only paints its type and rules through the
   tokens below, so it reads the same embedded in a hero or standing alone.

   Hosts: MC Hero Stage (image), MC Hero Split (light), MC Split Rail.
   -------------------------------------------------------------------------- */

.mc-split-rail {
  --mc-rail-cols: 4;
  --mc-rail-gutter: clamp(1.6rem, 2vw, 3.2rem);
  --mc-rail-space: clamp(2.2rem, 2.4vw, 3.2rem);
  --mc-rail-label: var(--text-muted);
  --mc-rail-support: var(--text-content);
  --mc-rail-border: var(--border-color);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--mc-rail-cols)), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: var(--border-width-thin) solid var(--mc-rail-border);
}

.mc-split-rail--dark,
.mc-split-rail--image {
  --mc-rail-label: rgba(255, 255, 255, 0.55);
  --mc-rail-support: rgba(255, 255, 255, 0.9);
  --mc-rail-border: rgba(255, 255, 255, 0.22);
}

.mc-split-rail__item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding-block: var(--mc-rail-space);
  padding-inline-end: var(--mc-rail-gutter);
}

.mc-split-rail__item + .mc-split-rail__item {
  padding-inline-start: var(--mc-rail-gutter);
  border-inline-start: var(--border-width-thin) solid var(--mc-rail-border);
}

.mc-split-rail__label {
  margin: 0;
  color: var(--mc-rail-label);
}

.mc-split-rail__support {
  display: block;
  margin: 0;
  color: var(--mc-rail-support);
  font-size: calc(var(--mc-type-small) * var(--body-scale));
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: break-word;
}

/* Tablet: two columns, the second row ruled across. */
@media (max-width: 989px) {
  .mc-split-rail {
    --mc-rail-cols: 2;
  }

  .mc-split-rail__item + .mc-split-rail__item {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .mc-split-rail__item:nth-child(even) {
    padding-inline-start: var(--mc-rail-gutter);
    border-inline-start: var(--border-width-thin) solid var(--mc-rail-border);
  }

  .mc-split-rail__item:nth-child(n + 3) {
    border-block-start: var(--border-width-thin) solid var(--mc-rail-border);
  }
}

/* Mobile: single column, every entry ruled across. */
@media (max-width: 749px) {
  .mc-split-rail {
    --mc-rail-cols: 1;
  }

  .mc-split-rail__item:nth-child(even) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .mc-split-rail__item + .mc-split-rail__item {
    border-block-start: var(--border-width-thin) solid var(--mc-rail-border);
  }
}