/* 9. Become, at /become/. Matt's Cowork mock of 21 September, set in the
   site's own tokens: black on white, IBM Plex Mono, no inline style (the CSP
   forbids it), so his per drawing heights are the .hNN classes below.

   Every block is one row of a two column grid. Column one is the copy,
   column two is the drawing gutter, which is what holds every drawing on the
   same edge. Under 760px the gutter folds under the copy, as his mock has it.
   The page is wider than the site's 880px column because of that gutter. */

.page-become {
  --step: var(--copy);
  --rule: var(--ink);
  --pad: clamp(20px, 5vw, 84px);
  --gutter: clamp(150px, 20vw, 260px);
  --gap: clamp(18px, 3vw, 40px);
}

.become {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding: clamp(24px, 4vw, 54px) var(--pad) clamp(34px, 5vw, 74px);
  font-size: var(--step);
  line-height: 1.62;
}

.become img { max-width: 100%; display: block; }
.become p { margin: 0; }
.become p + p { margin-top: 1.1em; }
.become b, .become strong { font-weight: 600; }

.become .mark { width: clamp(200px, 34vw, 420px); height: auto; margin-bottom: clamp(14px, 2vw, 22px); }
.become .tag { font-weight: 600; }
.become .lead { font-weight: 600; }
.become .gap { margin-top: 1.35em; }

.become hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: clamp(26px, 3.4vw, 44px);
}

/* A heading is the body size in bold: one type size, as the site is set. */
.become h2 { font-size: 1em; font-weight: 600; margin: 0 0 0.9em; }

.become .row,
.become .block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gutter);
  gap: var(--gap);
}
.become .row { align-items: center; }
.become .block { align-items: start; }
.become .row + .row { margin-top: clamp(16px, 2vw, 26px); }
.become .row > .art,
.become .block > .art { grid-column: 2; justify-self: end; }
.become .block > .copy { grid-column: 1; }

.become .art-img { width: auto; height: auto; }
.become .h78 { max-height: 78px; }
.become .h95 { max-height: 95px; }
.become .h105 { max-height: 105px; }
.become .h110 { max-height: 110px; }
.become .h120 { max-height: 120px; }
.become .mid { align-self: center; }

/* The four questions: the number in its own column so the lines hang. */
.become .q {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 0.4em;
  margin-top: 1.5em;
}
.become .q .n { font-weight: 600; }

/* The two doors. A box, not a button: it inverts on hover and on focus. */
.become .door {
  display: block;
  border: 2px solid var(--ink);
  padding: 0.8em 1em;
  margin-top: 0.9em;
  max-width: 34em;
  text-decoration: none;
  color: var(--ink);
}
.become .door b { display: block; }
.become .door span { display: block; font-size: 0.86em; margin-top: 0.25em; }
a.door:hover, a.door:focus-visible { background: var(--ink); color: var(--bg); }
a.door:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Until a door has somewhere to go it is a box, not a link. */
.become div.door { cursor: default; }

.become .lnk { text-underline-offset: 3px; }
.become .who { font-size: 0.92em; }
.become .cr {
  font-weight: 300;
  font-size: 0.76em;
  color: var(--grey);
  letter-spacing: 0.06em;
  margin-top: 2.2em;
}

@media (max-width: 760px) {
  .become .row,
  .become .block { grid-template-columns: minmax(0, 1fr); }
  .become .row > .art,
  .become .block > .art { grid-column: 1; justify-self: end; margin-top: 0.7em; }
  .become .row + .row { margin-top: 1.4em; }
  .become .art-img { max-height: 66px; width: auto; }
}