/*! Typebase.less v0.1.0 | MIT License */
/* Typography aligned to fewandfar.co.uk scale */

:root {
  --type-font-body: "Inter", sans-serif;
  --type-font-heading: "Inter", sans-serif;
  --type-body-size: 1rem; /* 16px */
  --type-body-line: 1.6;
  --type-space-1: 0.75rem;
  --type-space-2: 1rem;
  --type-space-3: 1.5rem;
}

/* Setup */
html {
  font-family: var(--type-font-body);
  font-size: 100%;
  line-height: var(--type-body-line);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--type-body-size);
  line-height: inherit;
  letter-spacing: 0;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Copy & Lists */
p {
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: var(--type-space-2);
}

ul,
ol {
  margin-top: 0;
  margin-bottom: var(--type-space-2);
  padding-left: 1.25rem;
}

ul li,
ol li {
  line-height: 1.6;
}

li + li {
  margin-top: 0.35rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

blockquote {
  line-height: 1.6;
  margin-top: var(--type-space-2);
  margin-bottom: var(--type-space-2);
  padding-left: 1rem;
  border-left: 3px solid rgba(13, 14, 29, 0.2);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--type-font-heading);
  font-weight: 500;
  margin-top: 0;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: -0.01em;
}

/* fewandfar h1 */
h1 {
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 0.75em;
}

/* fewandfar h2 */
h2 {
  font-size: 20px;
  line-height: 1.1;
  margin-bottom: 1em;
}

/* fewandfar h3 */
h3 {
  font-size: 16px;
  line-height: 1.455;
  margin-bottom: 1em;
}

/* extrapolated from h1-h3 rhythm */
h4 {
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 1em;
}

h5 {
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 1em;
}

h6 {
  font-size: 10px;
  line-height: 1.4;
  margin-bottom: 1em;
}

@media (min-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }
  h6 { font-size: 14px; }
}

@media (min-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 36px; }
  h3 { font-size: 26px; }
  h4 { font-size: 22px; }
  h5 { font-size: 18px; }
  h6 { font-size: 16px; }
}

/* Tables */
table {
  margin-top: var(--type-space-2);
  margin-bottom: var(--type-space-2);
  border-spacing: 0;
  border-collapse: collapse;
}

table td,
table th {
  padding: 0;
  line-height: 1.45;
}

/* Code blocks */
code,
pre,
kbd,
samp {
  vertical-align: bottom;
  line-height: 1.45;
}

/* Leading paragraph text */
.lead {
  font-size: 18px;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .lead {
    font-size: 20px;
  }
}

/* Hug the block above you */
.hug {
  margin-top: 0 !important;
}
