/* www.arperotools.com: the page's look, chosen 27 September (card Q-014): version 2, centred, with version 3's pale coral headline accent. Buttons stay navy. The words are in content.json, not here. */

@font-face {
  font-family: "Basic";
  src: url("fonts/Basic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #23384a;
  --navy-deep: #152742;
  --coral: #f27c74;
  --coral-text: #b4554d;
  --blue-grey: #5f758e;
  --rule: #dde2e8;
  --ground: #f5f5f5;
  --paper: #ffffff;
  --on-navy: #f5f5f5;
  --on-navy-soft: #d3dbe4;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--navy);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

p { text-wrap: pretty; }
h1 { text-wrap: balance; }

a { color: var(--coral-text); text-underline-offset: 3px; }
a:hover { color: #8d423c; }
a:focus-visible, .button:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Header: the logo alone, then the headline and the purpose line */

.site-header {
  background: var(--navy);
  color: var(--on-navy);
  padding: 40px 0 60px;
}
.logo { display: block; width: 200px; height: auto; }
.accent {
  width: 56px;
  height: 3px;
  background: var(--coral);
  margin: 56px 0 22px;
}
h1 {
  margin: 0;
  font-family: Basic, Inter, sans-serif;
  font-weight: 400;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 900px;
}
.purpose {
  margin: 20px 0 0;
  max-width: 720px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--on-navy-soft);
}

/* The tiles: one per entry in content.json. A fourth or fifth wraps onto the next row. */

main { padding: 48px 0 64px; }

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}

.tile {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
}
/* Where the browser can, the six parts of every tile in a row line up with each other */
@supports (grid-template-rows: subgrid) {
  .tile {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.tile h2 {
  margin: 0;
  font-family: Basic, Inter, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
}
.descriptor {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--blue-grey);
}
.descriptor:empty { margin: 0; }
.why {
  margin: 22px 0 0;
  font-family: Basic, Inter, sans-serif;
  font-size: 22px;
  line-height: 1.3;
}
.what {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.status {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
}
.action { margin: 20px 0 0; }
@supports not (grid-template-rows: subgrid) {
  .status { margin-top: auto; }
  .what { margin-bottom: 26px; }
}

.button {
  display: inline-block;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 4px;
  background: var(--navy);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
}
.button:hover { background: var(--navy-deep); color: #ffffff; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 36px 0 48px;
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.independence {
  margin: 0;
  font-family: Basic, Inter, sans-serif;
  font-size: 22px;
  line-height: 1.3;
}
.data-line {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--blue-grey);
}
.contact p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.contact .copyright { margin-top: 14px; font-size: 13px; color: var(--blue-grey); }

/* Phone */

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .site-header { padding: 22px 0 40px; }
  .logo { width: 150px; }
  .accent { margin: 40px 0 18px; width: 48px; }
  h1 { font-size: 34px; line-height: 1.1; }
  .purpose { font-size: 17px; margin-top: 16px; }
  main { padding: 28px 0 40px; }
  .tiles { gap: 16px; }
  .tile { padding: 24px 22px 22px; }
  .tile h2 { font-size: 27px; }
  .why { font-size: 20px; margin-top: 18px; }
  .button { display: block; text-align: center; }
  .site-footer { padding: 28px 0 36px; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .independence { font-size: 20px; }
}

/* Version 2: everything centred, and every button the same size */

.site-header, main, .site-footer { text-align: center; }
/* The logo stays top left, above the centred text (Mariya, 23 September) */
.accent { margin-left: auto; margin-right: auto; }
h1, .purpose { margin-left: auto; margin-right: auto; }
.tile { text-align: center; }
.button { display: block; width: 260px; max-width: 100%; margin: 0 auto; text-align: center; }
.site-footer .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; }

/* From version 3, the headline only (Mariya, 27 September, card Q-014): "the coral in the heading", navy buttons */

.headline-accent { color: #f9ada0; display: inline-block; }

/* Tool names in full on one line (call 48, card Q-033): every name is sized to its tile, so the longest,
   "Finance Process Intelligence (FPI)", fits on one line wherever a tile is wide enough; on a narrow phone it wraps. */

.tile { container-type: inline-size; }
.tile h2 { font-size: clamp(20px, 6.6cqi, 30px); }
.wrap { max-width: 1340px; }
.why { font-size: 20px; }
@media (max-width: 640px) { .why { font-size: 18px; } }

/* The page behind a button, for a tool not open yet (words file, section 10; card Q-033) */

.simple main { padding: 44px 0 64px; }
.simple main .wrap { max-width: 760px; }
.simple .not-open { margin: 0; font-family: Basic, Inter, sans-serif; font-size: 24px; line-height: 1.3; }
.simple .page-contact { margin: 16px 0 0; font-size: 17px; }
.simple .back { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; }
.status:empty { margin: 0; padding: 0; border: 0; }