/* Styles for eskaydata.com.
   The colors come from the two logo files and the owner's brief (docs/INTENT.md).
   Change them here, in one place. This file holds no words, so a page in a second
   language can use it as it is. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
}

: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; /* secondary 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;
  --ink-soft: #555555;  /* secondary text */

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

  --page-width: 1100px;
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 2.5rem);
  --space-band: clamp(4.5rem, 2.5rem + 7vw, 9.5rem);
  --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.75rem, 1.3rem + 2.2vw, 3rem);
  --text-headline: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
}

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

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

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

::selection {
  background: var(--green-900);
  color: var(--white);
}

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;
}

/* Large headings are set light and tight. Small headings are semibold. */
h1,
h2 {
  color: var(--green-900);
  font-weight: var(--regular);
  text-wrap: balance;
}

h3 {
  color: var(--green-900);
  font-weight: var(--semibold);
}

/* ----- 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);
}

/* The heading of a section is small and quiet. The content below it carries the size. */
.band h2 {
  margin-bottom: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem);
  color: var(--green-700);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: var(--semibold);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* The title of a page that is not the main page. */
.page-title {
  margin-bottom: var(--space-block);
  font-size: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* A sentence set large, in the heading color. */
.statement {
  max-width: 21em;
  color: var(--green-900);
  font-size: var(--text-display);
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* On a wide screen: the large item on the left, the details on the right, on one base line. */
@media (min-width: 56rem) {
  .pair {
    display: grid;
    grid-template-columns: 7fr 4fr;
    column-gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }

  /* The small text starts a little lower, level with the top of the large letters. */
  .pair > :not(:first-child) {
    margin-top: 0.625rem;
  }
}

.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: var(--semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  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: var(--semibold);
  text-decoration: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.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: 11em;
  font-size: var(--text-headline);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.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: var(--semibold);
  text-decoration: none;
  transition: background-color 0.15s ease-out;
}

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

/* The logo mark, large, at the right edge of the opening. The band cuts it off.
   It shows only when there is room beside the text. */
.opening {
  position: relative;
  overflow: hidden;
}

.opening__mark {
  display: none;
}

@media (min-width: 72rem) {
  .opening {
    padding-block: calc(var(--space-band) * 1.35);
  }

  .opening__inner {
    position: relative;
  }

  /* The text keeps to its own column, so it never runs behind the mark. */
  .opening__text {
    max-width: 41rem;
  }

  .opening__mark {
    display: block;
    position: absolute;
    top: 50%;
    left: 45rem;
    width: clamp(30rem, 44vw, 40rem);
    max-width: none;
    transform: translateY(-38%);
  }
}

/* ----- What we do: four stages on one line ----- */

.pipeline {
  counter-reset: stage;
  border-left: 1px solid var(--green-900);
}

.pipeline li {
  counter-increment: stage;
  position: relative;
  padding: 0 0 var(--space-block) 1.75rem;
  color: var(--green-900);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

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

.pipeline strong {
  font-weight: var(--semibold);
}

/* The mark of a stage: a small square on its corner, as in the logo. */
.pipeline li::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: -0.3125rem;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--green-900);
  transform: rotate(45deg);
}

.pipeline li::before {
  content: "0" counter(stage);
  display: block;
  margin-bottom: 0.5rem;
  color: var(--green-700);
  font-size: var(--text-small);
  font-weight: var(--semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* On a wide screen the line runs across the page, with the four stages below it. */
@media (min-width: 56rem) {
  .pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 0;
    border-top: 1px solid var(--green-900);
  }

  .pipeline li {
    padding: 2.5rem 2.5rem 0 0;
  }

  .pipeline li::after {
    top: -0.3125rem;
    left: 0.125rem;
  }
}

/* ----- Records that can qualify: a small drawn sheet for each type ----- */

.record-types {
  display: grid;
  gap: 1.5rem;
}

.record-types li {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--green-900);
  font-size: var(--text-lead);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.doc {
  flex: none;
  width: 4rem;
  height: auto;
}

/* The parts of a drawn sheet: outline, dark bar, mid bar, pale line. */
.doc .o {
  fill: var(--white);
  stroke: var(--green-900);
}

.doc .d {
  fill: var(--green-900);
}

.doc .m {
  fill: var(--green-400);
}

.doc .l {
  fill: var(--rule);
}

@media (min-width: 40rem) {
  .record-types {
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .record-types li {
    display: block;
  }

  .doc {
    width: 100%;
    max-width: 11rem;
    margin-bottom: 1.5rem;
  }
}

/* ----- Our principles ----- */

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

.band--dark h2 {
  color: var(--green-200);
}

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

.band--dark :focus-visible {
  outline-color: var(--white);
}

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

.principles li {
  position: relative;
  max-width: 19em;
  padding-left: 2rem;
  font-size: var(--text-title);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* On a wide screen: two columns, filled from the top of each column. */
@media (min-width: 56rem) {
  .principles {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}

/* The same small square as on the process line. */
.principles li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0.125rem;
  width: 0.5625rem;
  height: 0.5625rem;
  background: var(--green-400);
  transform: rotate(45deg);
}

/* ----- About ----- */

.people {
  display: grid;
  gap: 1.25rem;
  margin-top: calc(var(--space-block) * 1.5);
  color: var(--ink-soft);
  font-size: var(--text-lead);
  line-height: 1.4;
}

.people strong {
  display: block;
  color: var(--green-900);
  font-weight: var(--semibold);
}

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

.contact__email {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--green-900);
  font-size: clamp(1.375rem, 0.9rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.contact__email {
  justify-self: start;
}

@media (min-width: 56rem) {
  .contact__email {
    grid-row: 1 / span 2;
    align-self: start;
  }

  .contact__address,
  .contact__note {
    grid-column: 2;
  }

  .pair > .contact__note {
    margin-top: 1.25rem;
  }
}

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

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

.contact__note {
  margin-top: var(--space-block);
  color: var(--ink-soft);
}

/* ----- Privacy page ----- */

.plain-rows li {
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
}

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

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

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

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

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--white);
}

.site-footer a:hover {
  color: var(--green-200);
}

.site-footer :focus-visible {
  outline-color: var(--white);
}