/*
 * File: assets/css/base.css, the reset, type and layout frame of the landing theme.
 * Purpose: sets the box model, the document type scale, links, the focus ring, the container,
 * the 4 section fills, the section heading block and the skip link.
 * Defines: element rules and the container, section, band, head, kicker, lede, mono and skip classes
 * Doc: docs/notes/plexcms.com/assets/themes/plexcms-landing/assets/css/base.css.md
 */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The column layout holds the footer at the viewport bottom on a short page. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--lh-head);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h4 {
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
}

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

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

strong {
  font-weight: 600;
}

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

::selection {
  background: var(--mark);
  color: var(--text);
}

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

.section {
  padding-block: var(--s-9);
}

.band {
  background: var(--bg-alt);
}

.band-white {
  background: var(--panel);
}

/* Each dark or colored fill redefines the focus ring color for the controls on it. */
.band-ink {
  --focus: var(--on-ink);
  background: var(--ink);
  color: var(--on-ink);
}

.band-accent {
  --focus: var(--on-accent);
  background: var(--accent);
  color: var(--on-accent);
}

.head {
  display: grid;
  gap: var(--s-4);
  max-width: 720px;
  margin-bottom: var(--s-8);
}

.head p {
  max-width: 60ch;
  color: var(--text-2);
  font-size: var(--fs-5);
  line-height: 1.5;
}

.band-ink .head p {
  color: var(--on-ink-2);
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.lede {
  color: var(--text-2);
  font-size: var(--fs-5);
  line-height: 1.5;
  max-width: 34em;
}

.skip {
  position: absolute;
  left: var(--s-3);
  top: -100px;
  z-index: 40;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: var(--s-3);
}

@media (max-width: 880px) {
  .section {
    padding-block: var(--s-8);
  }

  .head {
    margin-bottom: var(--s-7);
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
    --fs-h1: clamp(38px, 11vw, 48px);
    --fs-h2: clamp(30px, 8.4vw, 36px);
  }

  .section {
    padding-block: var(--s-7);
  }

  .head p,
  .lede {
    font-size: var(--fs-4);
  }
}