/* Styles for the one page of eskaydata.com.
   The colors come from the two logo files only (docs/INTENT.md). Change them here, in one place. */

:root {
  --green-900: #153A2C; /* dark green: headings, button, the dark band, the footer */
  --green-700: #346B53; /* links and step numbers; passes AA contrast on white and on the tint */
  --green-400: #73A78A; /* rules on the dark band; fails AA contrast as text on white */
  --green-200: #9EC9B1; /* small text on the dark band only */
  --rule: #C1D8CD;      /* hairline rules; from the pale logo file */
  --tint: #EEF5F1;      /* background of the pale bands; from the pale logo file */
  --white: #FFFFFF;
  --ink: #1A1A1A;

  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --page-width: 1100px;
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 2.5rem);
  --space-band: clamp(4rem, 2.5rem + 6vw, 8rem);
  --space-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);

  --text-small: 0.9375rem;
  --text-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --text-lead: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-title: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-heading: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --text-display: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --text-headline: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul,
address {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

address {
  font-style: normal;
}

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

a {
  color: var(--green-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--green-900);
}

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

h1,
h2,
h3 {
  color: var(--green-900);
  font-weight: 500;
  text-wrap: balance;
}

/* ----- Shared layout ----- */

.container {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A band is one full-width section of the page. */
.band {
  padding-block: var(--space-band);
}

.band--tint {
  background: var(--tint);
}

/* Two white bands in a row get a hairline between them, as wide as the content. */
.band--ruled {
  padding-top: 0;
}

.band--ruled > .container::before {
  content: "";
  display: block;
  border-top: 1px solid var(--rule);
  margin-bottom: var(--space-band);
}

.band h2 {
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-block);
}

/* Heading in the left column, content in the right column. */
@media (min-width: 56rem) {
  .split {
    display: grid;
    grid-template-columns: 4fr 7fr;
    column-gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }

  /* The hairline of a ruled band spans the two columns. */
  .band--ruled > .split::before {
    grid-column: 1 / -1;
  }

  .split > h2 {
    margin-bottom: 0;
  }
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.4;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 1;
  padding: 0.75rem 1rem;
  background: var(--green-900);
  color: var(--white);
}

.skip-link:focus {
  top: 0.5rem;
  color: var(--white);
}

/* ----- Header ----- */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--green-900);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1.125rem;
  border: 1px solid var(--green-900);
  color: var(--green-900);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
}

.site-header__link:hover {
  background: var(--green-900);
  color: var(--white);
}

/* ----- Opening ----- */

.opening__inner {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.opening h1 {
  max-width: 17em;
  font-size: var(--text-headline);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.opening__support {
  max-width: 34em;
  margin-top: var(--space-block);
  font-size: var(--text-lead);
  line-height: 1.45;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  margin-top: calc(var(--space-block) * 1.25);
  padding-inline: 2rem;
  background: var(--green-900);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}

.button:hover {
  background: var(--green-700);
  color: var(--white);
}

/* The large logo mark shows beside the text when there is room for it. */
.opening__mark {
  display: none;
}

@media (min-width: 56rem) {
  .opening__inner {
    grid-template-columns: 1fr clamp(15rem, 28vw, 21rem);
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }

  .opening__mark {
    display: block;
    width: 100%;
  }
}

/* ----- How it works ----- */

.steps {
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: clamp(3.25rem, 2.5rem + 3vw, 5rem) 1fr;
  padding-block: var(--space-block);
  border-top: 1px solid var(--rule);
}

.steps li:first-child {
  padding-top: 0;
  border-top: 0;
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li::before {
  content: "0" counter(step);
  grid-row: span 2;
  color: var(--green-700);
  font-size: var(--text-title);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  font-size: var(--text-title);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.steps p {
  max-width: 32em;
  margin-top: 0.5rem;
}

/* ----- Records that qualify ----- */

.records {
  margin-top: var(--space-block);
}

.records li {
  padding-block: clamp(0.875rem, 0.7rem + 0.8vw, 1.375rem);
  border-top: 1px solid var(--rule);
  color: var(--green-900);
  font-size: var(--text-display);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.records li:last-child {
  border-bottom: 1px solid var(--rule);
}

/* ----- How your data is protected ----- */

.band--dark {
  background: var(--green-900);
  color: var(--white);
}

.band--dark h2 {
  color: var(--white);
  margin-bottom: calc(var(--space-block) * 1.75);
}

.assurances {
  display: grid;
  gap: var(--space-block) clamp(2rem, 6vw, 5rem);
}

.assurances li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--green-400);
  font-size: var(--text-title);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

@media (min-width: 40rem) {
  .assurances {
    grid-template-columns: 1fr 1fr;
  }

  .assurances li {
    min-height: 6.5rem;
  }
}

/* ----- Who we are ----- */

.statement {
  color: var(--green-900);
  font-size: var(--text-title);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

/* ----- Contact ----- */

.contact__email {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--green-900);
  font-size: clamp(1.25rem, 0.9rem + 1.9vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.contact__email:hover {
  color: var(--green-700);
}

.contact p {
  margin-top: var(--space-block);
  font-size: var(--text-lead);
  line-height: 1.45;
}

/* ----- Footer ----- */

.site-footer {
  padding-block: 2rem;
  background: var(--green-900);
  color: var(--green-200);
  font-size: var(--text-small);
}