/* asquared · Grid Typography: the About page (about/index.html).
   This page's own layout, after style.css and pages.css (PAGES.md). Use the
   tokens and the module from style.css; never restyle the shell (header,
   footer) or the shared components here.

   Four sheets: head (who), apps (the three titles, one active mint row at a
   time), before (the web years and the case studies), reach (the desks).
   Every edge sits on a page column or a whole unit (--g, inside .wrap). The
   shared components (.copy, .facts, .b-lead, .b-copy, .b-time, .c-list, .go,
   .badge, .sq) are placed here by their grid areas, never restyled. */

/* ---------- section titles: a modular word, as the homepage's titles ---------- */

.ab-h {
  grid-column: 1 / -1;
  margin: 0 0 calc(var(--g) * 2);
  font-size: inherit;
  line-height: 1;
}

/* ---------- head: the statement, the copy, the facts ---------- */

.ab-head .p-grid {
  grid-template-areas:
    "t t t t t t t t"
    "copy copy copy copy copy . facts facts";
}
.ab-head .copy { padding-right: var(--g); }
.ab-head .facts { margin-top: calc(var(--g) * 0.5); }

/* ---------- apps: one row per title, icon on the first column ---------- */

.ab-apps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border-top: 1px solid var(--ink);
}
.ab-app {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
  align-items: start;
  padding-block: var(--g) calc(var(--g) * 1.5);
  border-bottom: 1px solid var(--hair);
}
/* one active field at a time: the shared rule in pages.css */

.ab-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: clamp(52px, calc(var(--g) * 4), 96px);
  height: auto;
  aspect-ratio: 1;
  margin-left: var(--g);
  border-radius: 22.37%;
  outline: 1px solid rgba(17, 17, 17, 0.14);
  outline-offset: -1px;
}
.ab-name {
  grid-column: 2 / span 4;
  grid-row: 1;
  font-weight: 600;
  font-size: clamp(22px, 1rem + 1vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.ab-what {
  grid-column: 2 / span 4;
  grid-row: 2;
  max-width: 34em;
  margin-top: 0.55em;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* status and links share the last three columns: the status on the name's
   line, the badge and links on the description's */
.ab-status {
  grid-column: 6 / span 3;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 0.45em;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.ab-status .sq { flex: none; transform: translateY(-1px); }
.ab-links {
  grid-column: 6 / span 3;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-top: 14px;
}

/* ---------- before: the web years, then the case studies ---------- */

.ab-before .p-grid {
  grid-template-areas:
    "t t t t t t t t"
    "lead lead lead lead lead lead . ."
    "bc bc bc bc tl tl tl tl"
    "wh wh wh wh wh wh wh wh"
    "wk wk wk wk wk wk wk wk"
    "mo mo mo mo mo mo mo mo";
}
.ab-work-h {
  grid-area: wh;
  margin: calc(var(--g) * 5) 0 calc(var(--g) * 1.5);
  font-weight: 600;
  font-size: clamp(24px, 1rem + 1.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.ab-work {
  grid-area: wk;
  display: grid;
  grid-template-columns: subgrid;
  border-top: 1px solid var(--ink);
}
.ab-job {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
  align-items: start;
  padding-block: var(--g);
  border-bottom: 1px solid var(--hair);
}
.ab-yr {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0.55em;
  font-size: 14px;
  line-height: 1.3;
}
.ab-client {
  grid-column: 2 / span 4;
  grid-row: 1;
  margin: 0;
  font-weight: 600;
  font-size: clamp(22px, 1rem + 1vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.024em;
}
.ab-did {
  grid-column: 2 / span 4;
  grid-row: 2;
  max-width: 30em;
  margin-top: 0.55em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.ab-shot {
  grid-column: 7 / span 2;
  grid-row: 1 / span 2;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ab-more { grid-area: mo; margin-top: calc(var(--g) * 2); }

/* ---------- reach: the homepage's contact rows ---------- */

.ab-reach .p-grid {
  grid-template-areas:
    "t t t t t t t t"
    "cl cl cl cl cl cl cl cl"
    "mo mo mo mo mo mo mo mo";
}

/* ---------- tablet ---------- */

@media (min-width: 640px) and (max-width: 1023px) {
  .ab-head .p-grid {
    grid-template-areas:
      "t t t t t t t t"
      "copy copy copy copy copy copy copy ."
      "facts facts facts facts . . . .";
  }
  .ab-head .facts { margin-top: calc(var(--g) * 3); }

  .ab-app { grid-template-rows: auto auto auto; }
  .ab-icon { grid-row: 1 / span 3; }
  .ab-name, .ab-what { grid-column: 2 / -1; }
  .ab-status { grid-column: 2 / span 3; grid-row: 3; padding-top: calc(var(--g) * 2); }
  .ab-links { grid-column: 5 / -1; grid-row: 3; padding-top: calc(var(--g) * 2); }

  .ab-before .p-grid {
    grid-template-areas:
      "t t t t t t t t"
      "lead lead lead lead lead lead lead lead"
      "bc bc bc bc bc bc bc bc"
      "tl tl tl tl tl tl tl tl"
      "wh wh wh wh wh wh wh wh"
      "wk wk wk wk wk wk wk wk"
      "mo mo mo mo mo mo mo mo";
  }
  .ab-shot { grid-column: 6 / -1; }
}

/* ---------- phone: four columns ---------- */

@media (max-width: 639px) {
  .ab-h { margin-bottom: 20px; }

  .ab-head .p-grid {
    grid-template-areas:
      "t t t t"
      "copy copy copy copy"
      "facts facts facts facts";
  }
  .ab-head .copy { padding-right: 0; }
  .ab-head .facts { margin-top: 28px; }

  .ab-app {
    grid-template-rows: auto auto auto auto;
    padding-block: 16px 20px;
  }
  .ab-icon { grid-row: 1 / span 2; width: calc(var(--g) * 11); margin-left: calc(var(--g) * 2); }
  .ab-name, .ab-what, .ab-status, .ab-links { grid-column: 2 / -1; }
  .ab-status { grid-row: 3; padding-top: 14px; }
  .ab-links { grid-row: 4; padding-top: 14px; }

  .ab-before .p-grid {
    grid-template-areas:
      "t t t t"
      "lead lead lead lead"
      "bc bc bc bc"
      "tl tl tl tl"
      "wh wh wh wh"
      "wk wk wk wk"
      "mo mo mo mo";
  }
  .ab-work-h { margin-top: 48px; margin-bottom: 16px; }
  .ab-job { grid-template-rows: auto auto auto; padding-block: 16px; }
  .ab-yr { padding-top: 0.35em; font-size: 13px; }
  .ab-client, .ab-did { grid-column: 2 / -1; }
  .ab-shot { grid-column: 2 / -1; grid-row: 3; margin-top: 14px; }
  .ab-more { margin-top: 24px; }

  .ab-reach .p-grid {
    grid-template-areas:
      "t t t t"
      "cl cl cl cl"
      "mo mo mo mo";
  }
}