/* Typography tweaks for improved readability across device sizes. */

:root {
  --font-size-body: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  --font-size-small: clamp(0.875rem, 0.2vw + 0.85rem, 1rem);

  --font-size-h1: clamp(1.75rem, 2vw + 1.25rem, 2.5rem);
  --font-size-h2: clamp(1.375rem, 1.2vw + 1.1rem, 1.875rem);
  --font-size-h3: clamp(1.125rem, 0.8vw + 1rem, 1.5rem);
}

html {
  font-size: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--font-size-body);
  line-height: 1.6;
}

#main {
  font-size: var(--font-size-body);
  line-height: 1.6;
}

#main .post,
#main .posts {
  font-size: inherit;
}

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

#main h1,
#main .title,
#main .posttitle {
  font-size: var(--font-size-h1);
  line-height: 1.2;
}

#main h2 {
  font-size: var(--font-size-h2);
  line-height: 1.3;
}

#main h3 {
  font-size: var(--font-size-h3);
  line-height: 1.35;
}

#main small,
#main time,
#main .byline {
  font-size: var(--font-size-small);
}

#main pre,
#main code,
#main kbd,
#main samp {
  font-size: 0.95em;
}