/* ==========================================================================
   Editorial Ledger: about.css (D1, About)
   The halftone portrait (M6) in the page head, the facts (D2), questions and
   answers (D3), datelines (D4), credentials (D5) and the closing jump.
   Shared parts (tokens, section head, letters, plate, reveal states) live in
   base.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

:root {
  --portrait-max: 26rem; /* 416px: the photograph is 400px wide (DESIGN.md 2.8) */
}


/* --------------------------------------------------------------------------
   Sections: the portrait (D1, M6)
   -------------------------------------------------------------------------- */

.portrait {
  display: grid;
  gap: var(--space-2xs);
  width: min(100%, var(--portrait-max));
  margin-top: var(--space-m);
}

.portrait__print {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
}

/* Without JavaScript: the photograph as a grayscale print under a dot screen. */
.portrait__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
}

.portrait__print::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--halftone);
  opacity: .35;
  pointer-events: none;
}

/* With JavaScript: about.js arms the portrait and prints the halftone in a
   canvas. The image stays in the page for its alt text. */
.portrait.is-armed .portrait__photo { opacity: 0; }
.portrait.is-armed .portrait__print::after { visibility: hidden; }

.portrait__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The roller: a thin red line that travels down the print (about.js). */
.portrait__roller {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

.portrait__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-s);
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-muted);
}

.portrait__hint { display: none; }
.portrait.has-loupe .portrait__hint { display: inline; }


/* --------------------------------------------------------------------------
   Sections: the facts (D2)
   -------------------------------------------------------------------------- */

.glance__list {
  display: grid;
  column-gap: calc(var(--gutter) * 2);
  border-top: 1px solid var(--ink);
}

.glance__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}

/* The label column has one width, so every leader ends on the same line. */
.glance__row dt {
  flex: 0 0 clamp(8.5rem, 40%, 15rem);
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.glance__row dd {
  flex: 1 1 0;
  font-size: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
}


/* --------------------------------------------------------------------------
   Sections: questions and answers (D3)
   -------------------------------------------------------------------------- */

.qa { row-gap: var(--space-xl); }

.qa > * { grid-column: 1 / -1; }

.qa__item {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-xs);
  max-width: 62ch;
}

.qa__q {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.qa__q .qa__mark {
  margin-right: .25em;
  color: var(--ink-muted);
}

.qa__a .qa__mark {
  margin-right: .15em;
  font-weight: 680;
  color: var(--accent);
}

.qa__jump { font-size: var(--fs-body); }

/* The margin letter: set off by an ink rule, beside the second answer. */
.qa__aside {
  max-width: 28rem;
  padding: var(--space-s) 0 0 var(--space-s);
  border-top: 3px solid var(--ink);
}


/* --------------------------------------------------------------------------
   Sections: the plate (self quote) uses base.css; About sets its measure.
   -------------------------------------------------------------------------- */

.plate__body .plate__quote { max-width: 20ch; }


/* --------------------------------------------------------------------------
   Sections: datelines (D4)
   -------------------------------------------------------------------------- */

.datelines__list {
  display: grid;
  gap: var(--space-l) var(--gutter);
}

.dispatch {
  position: relative;
  font-size: var(--fs-hed-s);
  line-height: 1.25;
  letter-spacing: -.005em;
}

.dispatch + .dispatch {
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline);
}

.dispatch .col-rule { display: none; }

.dispatch__place {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}


/* --------------------------------------------------------------------------
   Sections: credentials (D5)
   -------------------------------------------------------------------------- */

.record__grid { row-gap: var(--space-l); }

.record__grid > * { grid-column: 1 / -1; }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--paper-bright);
  border: 1px solid var(--ink);
}

.card__platform,
.record__more-head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.card__platform { color: var(--accent); }
.card__platform .icon { width: 1.125rem; height: 1.125rem; color: var(--ink); }

.card__status {
  font-size: var(--fs-hed-s);
  font-weight: 600;
  line-height: 1.15;
}

.card__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-block: var(--space-2xs);
  padding-block: var(--space-s);
  border-block: 1px solid var(--hairline);
}

.card__figure {
  display: flex;
  flex-direction: column-reverse;
  gap: .25rem;
}

.card__figure dt {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.card__figure dd {
  font-size: clamp(2.5rem, 2.1rem + 1.7vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.card__figure .i-star {
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-left: .04em;
  vertical-align: .04em;
  fill: var(--accent);
}

.card__link {
  margin-top: auto;
  font-size: var(--fs-small);
}

.card__link a {
  display: inline-block;
  padding-block: .625rem;
}

.record__more-head {
  padding-bottom: var(--space-2xs);
  border-bottom: 3px solid var(--ink);
}

.record__links a {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  min-height: 2.75rem;
  padding-block: .625rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.1875rem;
  font-weight: 600;
  text-decoration: none;
}

.record__links .icon { align-self: center; }
.record__links .icon--brand { width: 1.125rem; height: 1.125rem; }


/* --------------------------------------------------------------------------
   Animations: with motion the frame starts empty and the halftone prints into
   it. If about.js never arms the portrait, the photograph shows after 4 s.
   -------------------------------------------------------------------------- */

.motion .portrait:not(.is-armed):not(.is-fallback) .portrait__photo,
.motion .portrait:not(.is-armed):not(.is-fallback) .portrait__print::after {
  visibility: hidden;
  animation: portrait-failsafe 1ms 4s forwards;
}

@keyframes portrait-failsafe {
  to { visibility: visible; }
}


/* --------------------------------------------------------------------------
   Media Queries
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  /* Page head: the portrait sits beside the deck. */
  .page-head__deck { grid-column: 1 / span 3; }

  .portrait {
    grid-column: 4 / span 3;
    grid-row: 4;
    justify-self: end;
    margin-top: var(--space-s);
  }

  /* Two columns of four facts, read down each column. */
  .glance__list {
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .datelines__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dispatch + .dispatch { padding-top: 0; border-top: 0; }
  .dispatch .col-rule { display: block; }

  .record__grid > .card { grid-column: span 3; }
  .record__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}

@media (min-width: 64rem) {
  /* Page head: h1 and deck in 7 columns, the portrait down the right 5.
     The last row takes the slack, so the text stays set from the top. */
  .page-head__inner { grid-template-rows: auto auto auto 1fr; }
  .page-head__inner > .kicker,
  .page-head__deck { grid-column: 1 / span 7; }

  .portrait {
    grid-column: 8 / span 5;
    grid-row: 2 / span 3;
    margin-top: 0;
  }

  /* Questions: one 62ch column from the third grid line, the letter in the margin. */
  .qa__item { grid-column: 3 / span 7; }
  .qa__item--second { grid-row: 2; }

  .qa__aside {
    grid-column: 10 / span 3;
    grid-row: 2;
    align-self: start;
  }

  .record__grid > .card { grid-column: span 4; }
  .record__more { grid-column: span 4; }
  .record__links { display: block; }
}

@media (forced-colors: active) {
  .portrait__roller { background: Highlight; }
}