/* ==============================================================================
   Design tokens, the reset, and the pieces used on every section.

   This is the first stylesheet a page loads, so it is the place for anything
   more than one section needs: the palette, the page measure, the type stacks,
   and the three small components (.eyebrow, .section-title, .arrow-link) that
   appear all the way down the page.

   The rules below are the site's original CSS, unchanged and in its original
   order. See "Worth knowing" in the README for why the order matters.
   ============================================================================== */

:root {
  --purple: #522d82;
  --purple-dark: #321849;
  --purple-black: #1d1026;
  --lavender: #eee8f3;
  --lavender-soft: #f7f4f9;
  --ink: #111111;
  --muted: #5d5a60;
  --line: #d9d5db;
  --white: #ffffff;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }

.shell {
  width: min(calc(100% - 64px), var(--max));
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--purple);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: .91rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.section-title {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(2.45rem, 4.5vw, 5.35rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 5px;
  border-bottom: 2px solid currentColor;
  color: var(--purple);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.arrow-link::after { content: "→"; font-family: Arial, sans-serif; transition: transform .18s ease; }
.arrow-link:hover::after { transform: translateX(5px); }


/* The wrapper CloudCannon's visual editor needs around a list of repeated
   items. display:contents takes it out of the box tree entirely, so the items
   inside it sit in their parent's grid exactly as they did before, and every
   :nth-child rule counts what it counted before. Without a wrapper the editor
   draws a red "Failed to render array item" box in place of the list. */
.edit-list { display: contents; }

/* The skip link: the first thing a keyboard reaches, off screen until it is
   focused, so nothing about the page changes for anybody else. */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:.7rem 1.2rem; background:#1f2b3a; color:#fff;
  font-family:"DM Sans",Arial,sans-serif; font-size:14px; font-weight:700;
}
.skip-link:focus { left:0; outline:3px solid #fff; outline-offset:-3px; }
/* main takes the focus from the skip link; the ring a browser would draw
   around the whole page then is not useful, so it is left off. */
main:focus { outline:none; }