/* ==========================================================================
   Base — reset, elements, typography
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
.cryo-reduced-motion html,
html.cryo-reduced-motion { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--cryo-bg);
  color: var(--cryo-text);
  font-family: var(--cryo-font-sans);
  font-size: var(--cryo-fs-base);
  line-height: var(--cryo-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--cryo-font-display);
  color: var(--cryo-navy);
  margin: 0 0 var(--cryo-s2);
  text-wrap: balance;
}
h1 { font-size: var(--cryo-fs-h1); font-weight: 300; line-height: var(--cryo-lh-tight); letter-spacing: .01em; }
h2 { font-size: var(--cryo-fs-h2); font-weight: 300; line-height: var(--cryo-lh-snug); }
h3 { font-size: var(--cryo-fs-h3); font-weight: 500; line-height: var(--cryo-lh-snug); }
h4 { font-size: var(--cryo-fs-lg); font-weight: 600; }

p, ul, ol, dl, blockquote, figure, table { margin: 0 0 var(--cryo-s3); }
p { text-wrap: pretty; }

a { color: var(--cryo-link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--cryo-link-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--cryo-focus);
  outline-offset: var(--cryo-focus-offset);
  border-radius: 3px;
}
/* Only remove the default ring where we have replaced it — never blanket. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

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

hr {
  border: 0;
  border-top: 1px solid var(--cryo-line);
  margin: var(--cryo-s4) 0;
}

blockquote {
  margin-inline: 0;
  padding-left: var(--cryo-s3);
  border-left: 3px solid var(--cryo-teal-light);
  color: var(--cryo-navy-mid);
  font-size: var(--cryo-fs-lg);
}

code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
pre { overflow-x: auto; padding: var(--cryo-s2); background: var(--cryo-bg-tint); border-radius: var(--cryo-radius); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--cryo-line); }
th { font-weight: 600; color: var(--cryo-navy); background: var(--cryo-bg-tint); }

/* Wide tables must scroll inside themselves, not push the page sideways. */
.cryo-prose > table { display: block; overflow-x: auto; }

::selection { background: var(--cryo-teal-light); color: var(--cryo-navy); }

/* Accessible hiding — visible again on focus, so skip links work. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus,
.cryo-skip-link:focus {
  position: fixed !important;
  top: var(--cryo-s2); left: var(--cryo-s2);
  z-index: 100;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: .7rem 1.1rem;
  background: var(--cryo-navy);
  color: var(--cryo-white);
  border-radius: var(--cryo-radius);
  box-shadow: var(--cryo-shadow-md);
  text-decoration: none;
}