/* ==========================================================================
   Collabrum Advisory — Reset, base typography, layout primitives
   ========================================================================== */

/* ---------- Reset --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; }

/* ---------- Focus --------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1000;
  padding: 12px 24px;
  background: var(--color-deep);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-input) var(--radius-input);
  transform: translate(-50%, -110%);
  transition: transform var(--dur-base) var(--ease);
}

.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- Headings ------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--text-3xl); line-height: var(--lh-tight); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--fw-regular); }
h6 { font-size: var(--text-xs); }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

strong, b { font-weight: var(--fw-semibold); color: var(--color-ink); }

/* ---------- Layout primitives --------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-pad); }
.section--sm    { padding-block: var(--section-pad-sm); }
.section--md    { padding-block: var(--section-pad-md); }
.section--top   { padding-block: var(--section-pad) 0; }

.section--deep {
  background: var(--color-deep);
  color: var(--on-deep-muted);
}


.section--deep :is(h1, h2, h3, h4, h5, h6) { color: var(--color-white); }

/* Grid — the reference uses a flat 20px gutter everywhere. */
.grid {
  display: grid;
  gap: var(--gap);
}

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

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}


/* ---------- Utilities ------------------------------------------------------ */

.text-center { text-align: center; }
.mx-auto     { margin-inline: auto; }
.measure-sm  { max-width: 46ch; }

.hairline {
  border: 0;
  border-top: var(--hairline);
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--3-2  { aspect-ratio: 3 / 2; }