/* Font */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
body {
  font-family: "Roboto", Helvetica, sans-serif;
}

/* Reset & defaults */
:root {
  --sf: 1.25; /* sf = scaling factor */
  --rems-xs: calc(var(--rems-s) / var(--sf));
  --rems-s: calc(var(--rems-m) / var(--sf));
  --rems-m: 1rem;
  --rems-l: calc(var(--rems-m) * var(--sf));
  --rems-xl: calc(var(--rems-l) * var(--sf));
  --rems-2xl: calc(var(--rems-xl) * var(--sf));
  --rems-3xl: calc(var(--rems-2xl) * var(--sf));
  --rems-4xl: calc(var(--rems-3xl) * var(--sf));
  --rems-7xl: calc(var(--rems-4xl) * var(--sf) * var(--sf) * var(--sf));

  font-size: clamp(16px, calc(16px + (100vw - 640px) / 100), 20px);
  font-weight: var(--f-w\:n);
}
* {
  box-sizing: border-box;
}
body,
figure,
h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

/* Reset & defaults > Buttons */
button {
  align-items: center;
  align-self: baseline; /* else full w in flex container */
  border: 1px solid #999;
  border-radius: 5px;
  display: inline-flex;
  font-weight: var(--f-w\:sb);
  justify-content: center;
  line-height: calc(1rem * var(--sf));
  padding-block: 0.5rem;
  padding-inline: 1rem;
}
button:hover {
  cursor: pointer;
}
button.btn-primary {
  background-color: oklch(0.27 0.01 286);
  border: none;
  color: white;
}

/* Reset & defaults > Links */
a {
  color: inherit;
  text-decoration: none;
}

/* Reset & defaults > Typography */
:root {
  --f-w\:l: 100;
  --f-w\:n: 200;
  --f-w\:sb: 400;
  --f-w\:b: 700;
}
figcaption {
  font-size: var(--rems-s);
  font-style: italic;
  font-weight: var(--f-w\:l);
  text-align: center;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--f-w\:sb);
}
h1 {
  font-size: var(--rems-4xl);
}
h2 {
  font-size: var(--rems-3xl);
}
h3 {
  font-size: var(--rems-2xl);
}
h4 {
  font-size: var(--rems-xl);
}
h5 {
  font-size: var(--rems-l);
}
mark {
  --mark-color: #ffe798;
  --mark-skew: 0.25em;
  --mark-height: 1em;
  --mark-overlap: 0.3em;

  margin-inline: calc(var(--mark-overlap) * -1);
  padding-inline: var(--mark-overlap);

  background-color: transparent;
  background-image: linear-gradient(
      to bottom right,
      transparent 50%,
      var(--mark-color) 50%
    ),
    linear-gradient(var(--mark-color), var(--mark-color)),
    linear-gradient(to top left, transparent 50%, var(--mark-color) 50%);
  background-size: var(--mark-skew) var(--mark-height),
    calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
    var(--mark-skew) var(--mark-height);
  background-position: left center, center, right center;
  background-repeat: no-repeat;
  color: inherit;
}
.f-si\:xs {
  font-size: var(--rems-xs);
}
.f-si\:s {
  font-size: var(--rems-s);
}
.f-st\:i {
  font-style: italic;
}
.f-w\:l {
  font-weight: var(--f-w\:l);
}
.f-w\:sb {
  font-weight: var(--f-w\:sb);
}
.f-w\:b {
  font-weight: var(--f-w\:b);
}
.t-d\:u {
  text-decoration: underline;
}

/* Layout > Grid */
:root {
  --grid-gutter: 20px;
}
.grid-3col {
  column-gap: var(--grid-gutter);
  display: grid;
  grid-template-columns:
    1fr
    min(72ch, calc(100% - 2 * (var(--grid-gutter))))
    1fr;
}
.grid-3col > * {
  grid-column: 2;
}

/* Layout > Column & Row */
.column,
.row {
  display: flex;
  gap: var(--rems-m);
}
.gap-s {
  gap: var(--rems-s);
}
.gap-l {
  gap: var(--rems-l);
}
.gap-xl {
  gap: var(--rems-xl);
}
.gap-2xl {
  gap: var(--rems-2xl);
}
.gap-3xl {
  gap: var(--rems-3xl);
}
.j-c\:c {
  justify-content: center;
}
/* Layout > Column & Row > Column */
.column {
  flex-direction: column;
}
/* Layout > Column & Row > Row */
.row {
  align-items: center;
  flex-direction: row;
}
@media (width < 640px) {
  .row.squish {
    flex-direction: column;
  }
}

/* Spacing > Padding */
.p-b-xs {
  padding-block: var(--rems-xs);
}
.p-b-m {
  padding-block: var(--rems-m);
}
.p-b-l {
  padding-block: var(--rems-l);
}
.p-b-xl {
  padding-block: var(--rems-xl);
}
.p-b-2xl {
  padding-block: var(--rems-2xl);
}
.p-b-3xl {
  padding-block: var(--rems-3xl);
}
.p-b-7xl {
  padding-block: var(--rems-7xl);
}
.p-b-e-7xl {
  padding-block-end: var(--rems-7xl);
}

/* Common sections */
footer {
  background-color: wheat;
  font-size: var(--rems-s);
}