/* Base reset, typography, browser surfaces */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--ib-border-strong) transparent;
}

body {
  margin: 0;
  font-family: var(--ib-font-body);
  font-size: var(--ib-text-base);
  line-height: var(--ib-leading-normal);
  color: var(--ib-ink);
  background: var(--ib-bg);
  caret-color: var(--ib-primary);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Pages that still pass the old grain class get the plain porcelain ground. */
body.grain { background: var(--ib-bg); }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a {
  color: var(--ib-primary);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--ib-duration-fast) var(--ib-ease);
}
a:hover { color: var(--ib-primary-hover); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ib-font-display);
  font-weight: 700;
  line-height: var(--ib-leading-snug);
  letter-spacing: var(--ib-tracking-tight);
  color: var(--ib-ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1, h2 { line-height: var(--ib-leading-tight); letter-spacing: var(--ib-tracking-display); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button { cursor: pointer; border: none; background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
:focus-visible {
  outline: 2px solid var(--ib-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection {
  background: var(--ib-marigold);
  color: var(--ib-ink);
}
::placeholder { color: var(--ib-subtle); opacity: 1; }

/* Scrollbars carry the palette */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ib-border-strong);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ib-subtle); }

/* Numbers that get compared line up */
.tabular, .stat-card__value, .badge, .progress-label { font-variant-numeric: tabular-nums; }
code, kbd, samp, pre { font-family: var(--ib-font-mono); }

/* Utilities */
.container {
  width: 100%;
  max-width: var(--ib-container);
  margin-inline: auto;
  padding-inline: var(--ib-space-6);
}
.container--narrow { max-width: var(--ib-container-narrow); }
.container--wide { max-width: var(--ib-container-wide); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-display { font-family: var(--ib-font-display); }
/* The highlighted word in a headline: a marigold marker stroke under the personal part. */
.text-accent,
.text-mark {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  background-image: linear-gradient(transparent 62%, var(--ib-marigold) 62%, var(--ib-marigold) 90%, transparent 90%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.06em;
}
.text-muted { color: var(--ib-muted); }
.text-sm { font-size: var(--ib-text-sm); }
.text-xs { font-size: var(--ib-text-xs); }
.text-lg { font-size: var(--ib-text-lg); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.reg-text-accent { color: var(--ib-primary); }

/* Labels above headings are retired. Any markup still carrying the class renders as a plain meta line. */
.eyebrow {
  display: block;
  font-family: var(--ib-font-body);
  font-size: var(--ib-text-sm);
  font-weight: 500;
  color: var(--ib-muted);
  margin-bottom: var(--ib-space-2);
}

.grid-texture { background-image: none; }

.section {
  padding-block: var(--ib-space-24);
  position: relative;
}
.section--tight { padding-block: var(--ib-space-12); }
.section--ink {
  background: var(--ib-midnight);
  color: var(--ib-on-midnight);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: #FFFFFF; }
.section--ink .text-muted { color: var(--ib-on-midnight-muted); }
.section--primary {
  background: var(--ib-midnight);
  color: var(--ib-on-midnight);
}
.section--primary h1,
.section--primary h2,
.section--primary h3 { color: #FFFFFF; }
.section--primary .text-muted { color: var(--ib-on-midnight-muted); }
.section--surface { background: var(--ib-surface); }
.section--mesh { background: var(--ib-bg); }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--ib-space-2); }
.stack-3 { gap: var(--ib-space-3); }
.stack-4 { gap: var(--ib-space-4); }
.stack-6 { gap: var(--ib-space-6); }
.stack-8 { gap: var(--ib-space-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ib-space-3);
}
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

.grid {
  display: grid;
  gap: var(--ib-space-6);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1200px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section { padding-block: var(--ib-space-16); }
  .container { padding-inline: var(--ib-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}