/* Pegboard landing page. Tokens and fonts live in base.css.
   Frame: the product page of a tool suite. The first screen is one split: the left half is a
   panel where the clue goes in, the right half is the page itself, where the run of five tools
   comes out. The seam between them runs from the top of the window down to a row of section
   chips, and that row sticks to the top once the split has scrolled away. Below it: the eight
   tools as a board of cards, the case file as one card, the questions as tabs next to an answer
   panel, and a closing card with a lime outline. Cards are radius 8 with a 1px border; a lime
   peg always means "picked" or "done". Flat colour only. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--sans); word-spacing: .07em; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--go); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--bg); font-weight: 600; }
.skip:focus { left: 12px; }
:root { --pad: max(clamp(24px, 4.45vw, 64px), calc((100vw - 1312px) / 2)); --bar: 72px; }

/* ---------- small pieces ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--go); color: var(--bg); font: 650 16px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: #E7FF8A; }
.btn:active { transform: scale(.98); }
.btn svg { flex: none; width: 17px; height: 17px; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
/* The top bar's button stays quiet: on the first screen the lime belongs to the two offers below it. */
.btn--quiet { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.btn--quiet:hover { border-color: var(--line-2); background: var(--panel-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.note { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.logo img { border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }

/* ---------- top bar: it lies over the split, so the seam starts at the top of the window ---------- */

.bar { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: var(--bar); padding: 0 var(--pad); }

/* ---------- first screen: the clue on the left panel, the run on the page ---------- */

/* As tall as the window less the chip row, so the chips close the first screen. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(660px, calc(100vh - 66px), 880px); min-height: clamp(660px, calc(100svh - 66px), 880px); }
.pitch { display: grid; align-content: center; padding: calc(var(--bar) + 8px) 64px 48px var(--pad); border-right: 1px solid var(--line); background: var(--panel); }
.stage { display: grid; align-content: center; padding: calc(var(--bar) + 8px) var(--pad) 48px 56px; }

h1 { font-size: clamp(46px, 6.2vw, 92px); line-height: .98; letter-spacing: -.04em; word-spacing: .03em; font-weight: 600; }
.lede { max-width: 27em; margin-top: 26px; font-size: clamp(17px, 1.35vw, 20px); color: var(--text-2); text-wrap: pretty; }
.label { margin-top: 40px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.clues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.clues button { position: relative; display: grid; align-content: center; justify-items: start; gap: 3px; min-height: 66px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.clues button::after { content: ''; position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--hole); transition: background-color .15s ease-out; }
.clues b { font-size: 15px; line-height: 1.3; font-weight: 650; }
.clues span { font: 500 13px/1.3 var(--mono); color: var(--text-2); }
.clues button:hover { border-color: var(--line-2); color: var(--text); }
.clues button[aria-pressed="true"] { border-color: rgba(255, 255, 255, .6); background: var(--panel-2); color: var(--text); }
.clues button[aria-pressed="true"]::after { background: var(--go); }
.pitch .actions { margin-top: 32px; }
.pitch .note { flex: 1 1 200px; text-wrap: balance; }

.run { display: grid; gap: 12px; }
.run__head { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.run__clue { display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 16px var(--mono); }
.run__clue svg { flex: none; width: 18px; height: 18px; color: var(--text-3); }
.run__clue span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run__pegs { display: flex; gap: 5px; margin-left: auto; }
.run__pegs i { width: 8px; height: 8px; border-radius: 50%; background: var(--hole); transition: background-color .2s ease-out; }
.run__pegs .is-on { background: var(--go); }
.run__time { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.run__time span { min-width: 52px; text-align: right; }
.run__time b { font: 500 15px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }

/* Each tool hangs from a peg on the rail; a finished peg passes its finding down the rail. */
.jobs { display: grid; gap: 8px; }
.jobs li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: center; }
.jobs li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: calc(50% + 17px); width: 2px; height: calc(100% - 26px); border-radius: 1px; background: var(--hole); transition: background-color .2s ease-out; }
.jobs .is-done:not(:last-child)::after { background: var(--go); }
.job__dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hole); }
.job__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 16px; align-items: center; min-height: 66px; padding: 10px 16px 11px 18px; border: 1px solid var(--line); border-radius: 8px; transition: background-color .2s ease-out, border-color .2s ease-out; }
.job__name { font-size: 16px; font-weight: 650; color: var(--text-2); }
.job__took { font: 500 13px var(--mono); word-spacing: -.25em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.job__out { grid-column: 1 / -1; font-size: 15px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs .is-running .job__dot { border-color: var(--go); border-top-color: transparent; animation: spin .7s linear infinite; }
.jobs .is-running .job__card { border-color: var(--line-2); background: var(--panel); }
.jobs .is-running .job__name, .jobs .is-done .job__name { color: var(--text); }
.jobs .is-running .job__out, .jobs .is-running .job__took, .jobs .is-done .job__took { color: var(--text-2); }
.jobs .is-done .job__dot { border-color: var(--go); background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.3l3 3 6-6.6' fill='none' stroke='%2317181A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.jobs .is-done .job__card { background: var(--panel); }
.jobs .is-done .job__out { color: var(--text); }
.jobs .is-locked .job__dot, .jobs .is-locked .job__card { border-style: dashed; }
.jobs .is-locked .job__took { padding: 3px 8px; border-radius: 6px; background: var(--panel-2); font-size: 12px; color: var(--text-2); }
@keyframes spin { to { rotate: 360deg; } }

/* The foot keeps one height: a quiet line while tools run, the offer when the run stops. */
.run__foot { display: grid; }
.run__foot > * { grid-area: 1 / 1; }
.wait { align-self: start; padding: 4px 0 0 38px; font-size: 13px; color: var(--text-3); }
.sheet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 20px 16px; border-radius: 8px; background: var(--panel-2); visibility: hidden; }
.sheet__say { flex: 1 1 220px; }
.sheet h2 { font-size: 19px; line-height: 1.2; letter-spacing: -.015em; word-spacing: .07em; font-weight: 650; text-wrap: balance; }
.sheet p { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--text-2); text-wrap: balance; }
.sheet__go { display: grid; justify-items: center; gap: 4px; }
.again { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: 500 14px var(--sans); cursor: pointer; transition: color .15s ease-out; }
.again svg { width: 15px; height: 15px; }
.again:hover { color: var(--text); }
.run.is-paused .wait { visibility: hidden; }
.run.is-paused .sheet { visibility: visible; animation: rise .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }

/* ---------- section chips: under the split, then stuck to the top ---------- */

.subnav { position: sticky; top: 0; z-index: 40; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.subnav__in { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 var(--pad); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.chip i { font: 500 12px var(--mono); color: var(--text-3); }
.chip:hover { border-color: var(--line-2); color: var(--text); }
.chip[aria-current] { border-color: var(--panel-2); background: var(--panel-2); color: var(--text); }
.chip[aria-current] i { color: var(--text-2); }
.subnav .btn { margin-left: auto; transition: opacity .2s ease-out, visibility .2s, background-color .15s ease-out, transform .15s ease-out; }
.js .subnav:not(.is-stuck) .btn { opacity: 0; visibility: hidden; }

/* ---------- the board: eight tools, four by two ---------- */

.sec { padding: 128px var(--pad) 0; }
h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -.035em; word-spacing: .03em; font-weight: 600; text-wrap: balance; }
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; align-items: end; }
.sec__head p { padding-bottom: 4px; font-size: 18px; color: var(--text-2); text-wrap: pretty; }

.pegs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.pegs li { display: flex; flex-direction: column; min-height: 204px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); transition: background-color .25s ease-out, border-color .25s ease-out; }
.pegs li:nth-child(4n + 2) { --c: 1; }
.pegs li:nth-child(4n + 3) { --c: 2; }
.pegs li:nth-child(4n + 4) { --c: 3; }
.pegs li:nth-child(n + 5) { --r: 1; }
.peg__top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.peg__top em { display: none; font-style: normal; font-size: 13px; font-weight: 600; color: var(--go); }
/* The tool's own place on the four-by-two board. */
.peg__map { position: relative; width: 38px; height: 16px; }
.peg__map::before { content: ''; position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--hole); box-shadow: 11px 0 var(--hole), 22px 0 var(--hole), 33px 0 var(--hole), 0 11px var(--hole), 11px 11px var(--hole), 22px 11px var(--hole), 33px 11px var(--hole); }
.peg__map::after { content: ''; position: absolute; left: calc(var(--c, 0) * 11px - 2px); top: calc(var(--r, 0) * 11px - 2px); width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); box-shadow: 0 0 0 2px var(--panel); transition: background-color .25s ease-out, box-shadow .25s ease-out; }
.pegs h3 { margin-top: 26px; font-size: 22px; line-height: 1.15; font-weight: 650; letter-spacing: -.02em; }
.pegs h3 + p { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.takes, .takes span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.takes { margin-top: auto; padding-top: 22px; font-size: 13px; color: var(--text-2); }
.takes i { padding: 3px 8px; border-radius: 6px; background: var(--bg); font: 500 12px var(--mono); color: var(--text-2); }
.pegs .is-on { border-color: var(--line-2); background: var(--panel-2); }
.pegs .is-on em { display: block; }
.pegs .is-on .peg__map::after { background: var(--go); box-shadow: 0 0 0 2px var(--panel-2); }

/* ---------- the case file: one card, the file on the left, the words on the right ---------- */

.file { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.file__text { grid-column: 2; grid-row: 1; align-self: center; padding: 48px 56px; }
.file__text p { margin-top: 18px; font-size: 18px; color: var(--text-2); text-wrap: pretty; }
.doc { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line); background: var(--bg); }
.doc__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px 0 28px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.doc__pdf { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-weight: 500; }
.doc__pdf svg { width: 14px; height: 14px; }
.doc__body { padding: 28px 28px 24px; }
.doc h3 { font: 500 28px/1.2 var(--mono); letter-spacing: -.02em; }
.doc dl { display: grid; gap: 8px; margin-top: 20px; }
.doc dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 14px 16px 15px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.doc dt { font-size: 15px; font-weight: 650; }
.doc dd { font-size: 15px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.doc .src { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/22px var(--mono); }
.doc .src svg { width: 11px; height: 11px; }
.doc .is-cut { border-style: dashed; background: none; }
.doc .is-cut dt { color: var(--text-3); }
.doc .is-cut i { display: block; height: 8px; margin: 7px 0 9px; border-radius: 3px; background: var(--panel-2); }
.doc .is-cut i:last-child { width: 62%; margin-bottom: 5px; }
.doc__src { margin-top: 16px; font-size: 13px; color: var(--text-3); }

/* ---------- questions: tabs on the left, one answer panel on the right ---------- */

.qa { display: grid; gap: 8px; margin-top: 40px; }
/* Without the script every question is an open card: the question on top, its answer joined below. */
.qa__q { padding: 20px 24px 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--panel); font-size: 18px; line-height: 1.3; font-weight: 650; }
.qa__a { margin-top: -8px; padding: 8px 24px 22px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: var(--panel); }
.qa .qa__a[hidden] { display: none; }
.qa__a p { max-width: 60ch; color: var(--text-2); text-wrap: pretty; }
.qa__n { display: none; }
/* With the script each question is a button and one answer is open. On a phone the answer opens under its question. */
.is-tabs .qa__q { padding: 0; border: 0; background: none; }
.qa__q button { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 66px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--text-2); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.qa__q button::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hole); transition: background-color .15s ease-out; }
.qa__q button:hover { border-color: var(--line-2); color: var(--text); }
.qa__q.is-open button { border-color: var(--line-2); border-bottom-color: transparent; border-radius: 8px 8px 0 0; background: var(--panel); color: var(--text); }
.qa__q.is-open button::before { background: var(--go); }
.is-tabs .qa__a { margin-top: -9px; padding: 0 20px 22px 44px; border-color: var(--line-2); }

/* ---------- closing: a dark card with a lime outline ---------- */

.final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px 64px; align-items: end; padding: 64px; border: 1px solid var(--go); border-radius: 8px; background: var(--deep); }
.final h2 { font-size: clamp(46px, 7vw, 104px); line-height: .96; letter-spacing: -.045em; }
.final .actions { margin-top: 40px; }
.tries { display: grid; gap: 8px; }
.tries p { margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.tries a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 15px; font-weight: 600; transition: border-color .15s ease-out; }
.tries b { margin-left: auto; font: 500 14px var(--mono); color: var(--text-2); }
.tries svg { flex: none; width: 14px; height: 14px; color: var(--text-3); transition: color .15s ease-out, translate .15s ease-out; }
.tries a:hover { border-color: var(--line-2); }
.tries a:hover svg { color: var(--text); translate: 2px 0; }

.foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 48px; align-items: center; margin-top: 96px; padding: 24px var(--pad) 44px; border-top: 1px solid var(--line); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 28px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.foot__links a { display: inline-flex; align-items: center; min-width: 40px; min-height: 40px; }
.foot__links a:hover { color: var(--text); }
.foot p { grid-column: 1 / -1; max-width: 76ch; font-size: 13px; color: var(--text-3); }

.js [data-reveal] { opacity: 0; translate: 0 20px; transition: opacity .7s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (min-width: 901px) {
  .qa.is-tabs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 12px; }
  .is-tabs .qa__q { grid-column: 1; }
  .is-tabs .qa__q.is-open button { border-bottom-color: var(--line-2); border-radius: 8px; }
  .is-tabs .qa__a { grid-column: 2; grid-row: 1 / span var(--rows, 4); display: flex; flex-direction: column; min-height: 300px; margin-top: 0; padding: 40px 44px 34px; border: 1px solid var(--line); border-radius: 8px; }
  .is-tabs .qa__a p { max-width: 25em; font-size: 24px; line-height: 1.35; letter-spacing: -.01em; font-weight: 500; color: var(--text); }
  .is-tabs .qa__a .qa__n { display: flex; align-items: center; gap: 6px; max-width: none; margin-top: auto; padding-top: 32px; font: 500 13px var(--mono); letter-spacing: 0; color: var(--text-2); }
  .qa__n i { width: 8px; height: 8px; border-radius: 50%; background: var(--hole); }
  .qa__n .is-on { background: var(--go); }
  .qa__n span { margin-left: 8px; }
}
@media (max-width: 1180px) {
  .pitch { padding-right: 40px; }
  .stage { padding-left: 40px; }
  .clues button { justify-items: center; min-height: 48px; padding: 10px 6px; }
  .clues b { font-size: 14.5px; white-space: nowrap; }
  .clues button::after { display: none; }
  .clues span { display: none; }
  .pegs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file__text { padding: 40px; }
  .doc dl div { grid-template-columns: minmax(0, 1fr) auto; }
  .doc dl dd:not(.src) { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  :root { --bar: 64px; }
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pitch { padding: calc(var(--bar) + 20px) var(--pad) 36px; border-right: 0; }
  .stage { padding: 28px var(--pad) 36px; }
  .label { margin-top: 28px; }
  h1 { font-size: clamp(46px, 9vw, 72px); }
  .pitch .actions { margin-top: 24px; }
  .run__pegs { display: none; }
  .run__time { margin-left: auto; }
  .sec { padding-top: 88px; }
  .sec__head, .file, .final { grid-template-columns: minmax(0, 1fr); }
  .sec__head br { display: none; }
  .pegs { margin-top: 32px; }
  .file__text, .doc { grid-column: 1; grid-row: auto; }
  .file__text { padding: 32px 24px; }
  .doc { border-right: 0; border-top: 1px solid var(--line); }
  .doc__bar { padding-left: 20px; }
  .doc__body { padding: 20px 16px; }
  .qa { margin-top: 28px; }
  .final { padding: 36px 24px 28px; }
  .final .actions { margin-top: 28px; }
  .foot { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
  .foot__links { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .chip { padding: 0 12px; }
  .subnav .btn { display: none; }
  .pegs { gap: 8px; }
  .pegs li { min-height: 0; padding: 16px; }
  .pegs h3 { margin-top: 20px; font-size: 19px; }
  .pegs h3 + p { font-size: 14px; }
  .takes { display: grid; justify-items: start; gap: 6px; }
  .takes span { display: flex; flex-wrap: wrap; gap: 6px; }
  .pitch .btn, .final .btn { width: 100%; }
  .sheet__go { flex: 1 1 100%; justify-items: stretch; }
  .again { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .js [data-reveal] { opacity: 1; translate: 0 0; }
  .jobs .is-running .job__dot, .run.is-paused .sheet { animation: none; }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1600px) { :root { --pad: max(64px, calc((100vw - min(1312px + (100vw - 1600px) * 1.071, 1902px)) / 2)); } }
@media (min-width: 1600px) {
  h1 { font-size: clamp(92px, 36.8px + 3.45vw, 115px); }
  h2 { font-size: clamp(46px, 25.3px + 1.294vw, 55.2px); }
  .lede { font-size: clamp(20px, 14px + 0.375vw, 23px); }
}
/* ---------- end every screen size ---------- */