/* ===========================================================================
   Research, layered on style.css.

   Long-form reading in the Night Stage: the site's one typeface, hairline
   dividers, and the study's own figure as the only picture. The measure is
   most of the design - about seventy characters, generous leading, text a
   step down from white - and colour appears only where a number is being
   asserted: teal for what can fail the test, the warning colour for what did.
   =========================================================================== */

.research {
  --measure: 690px;
  --wide: 780px; /* the figure and the number: a step wider than the text */
  --warn: #f07f96; /* the flagged cells; matches the what it does report */
  --cell: #1b2226; /* scanned */
  --cell-able: rgba(78, 201, 168, 0.42); /* can delete, charge or change access */
}

/* The section, above a page's heading: plain text, not an eyebrow. */
.r-kicker {
  margin: 0 0 22px;
  color: #a7afb3;
  font-size: 15px;
  line-height: 1.4;
}

.r-kicker a {
  color: inherit;
  text-decoration: none;
}

.r-kicker a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
}

/*
  A byline as a row of items with middots between them. Each item draws its own
  dot in front of it, hidden from screen readers; the row is pulled left by one
  dot's width and clipped there, so the dot in front of the first item on any
  line is cut off and no line starts or ends with one. An item (a date, a
  reading time) never breaks across a line.
*/
.research .r-byline,
.research .piece__meta {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.2em;
  clip-path: inset(-8px -8px -8px 1.2em);
}

.r-byline > *,
.piece__meta > * {
  white-space: nowrap;
}

.r-byline > *::before,
.piece__meta > *::before {
  content: "\00B7";
  content: "\00B7" / "";
  display: inline-block;
  width: 1.2em;
  text-align: center;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ index */

.r-index .r-head {
  max-width: 900px;
}

.r-index .lede {
  margin: 26px 0 0;
}

.pieces {
  margin-top: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--line);
}

/* One study per row: its text, and its own figure beside it. */
.piece {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  column-gap: clamp(48px, 6vw, 88px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--line);
}

.piece__text {
  max-width: 620px;
}

.piece__meta {
  margin: 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
}

.piece__title {
  margin: 18px 0 0;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.piece__title a {
  color: var(--ink);
  text-decoration: none;
}

/* The whole row is the link; the title carries its name. */
.piece__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.piece:hover .piece__title a {
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-decoration-thickness: 2px;
}

.piece__stand {
  margin: 20px 0 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}

.piece__go {
  display: inline-flex;
  gap: 6px;
  margin: 26px 0 0;
  color: #e6eaec;
  font-size: 15px;
  font-weight: 560;
}

.piece__go span {
  transition: transform 0.18s var(--ease);
}

.piece:hover .piece__go span {
  transform: translateX(3px);
}

.piece__fig {
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 18px;
  background: #0e1215;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 0.2s var(--ease);
}

.piece:hover .piece__fig {
  box-shadow: 0 0 0 1px var(--line-lit);
}

.piece__fig .hero__grid {
  gap: clamp(3px, 0.35vw, 5px);
}

/* ---------------------------------------------------------------- article */

.r-article {
  min-width: 0;
}

:where(.r-article) > * {
  max-width: var(--measure);
}

.r-article .r-head {
  max-width: 940px;
}

.r-article h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.036em;
}

.r-stand {
  max-width: 60ch;
  margin: 26px 0 0;
  color: var(--ink-2);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55;
}

.r-byline {
  margin: 24px 0 0;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Section headings: a hairline and the heading, as on every content page. */
.r-article h2 {
  margin: clamp(56px, 7vw, 88px) 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.024em;
  font-weight: 560;
}

.r-article h3 {
  margin: 36px 0 10px;
}

:where(.r-article) p,
:where(.r-article) li {
  font-size: 17.5px;
  line-height: 1.72;
}

:where(.r-article) p {
  margin: 0 0 22px;
}

.r-article em {
  font-style: italic;
}

/* The opening line: the reader is shown the code before the argument. */
.r-open {
  color: var(--ink);
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.55;
}

.r-code {
  margin: 6px 0 30px;
  padding: 22px 24px;
  font-size: 13.5px;
  line-height: 1.7;
}

.r-code code {
  white-space: pre;
}

/* A single sentence given its own air, where the argument turns. */
.r-beat {
  margin: 36px 0;
  color: var(--ink);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.012em;
}

.r-beat code {
  font-size: 0.8em;
}

/* The one claim the piece is built on, set as display type. */
.r-pull {
  margin: clamp(44px, 5vw, 60px) 0;
  padding-left: 24px;
  border-left: 2px solid var(--teal);
  color: var(--ink);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* The number, with the denominator it is measured over in the same breath. */
.r-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(28px, 3.4vw, 44px);
  align-items: start;
  max-width: var(--wide);
  margin: 40px 0 44px;
  padding: 30px 0;
  border-top: 1px solid var(--line-lit);
  border-bottom: 1px solid var(--line);
}

/* A section heading brings its own hairline; one rule is enough. */
.r-stat:has(+ h2) {
  padding-bottom: 0;
  border-bottom: 0;
}

.r-stat__big {
  margin: 0;
  color: var(--ink);
  font-size: clamp(60px, 6.4vw, 92px);
  font-weight: 560;
  line-height: 0.86;
  letter-spacing: -0.05em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.r-stat__big span {
  color: var(--ink-4);
  font-size: 0.42em;
  letter-spacing: -0.02em;
}

.r-stat__say {
  margin: 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.62;
}

.r-list {
  margin: 0 0 24px;
}

.r-list li {
  margin-bottom: 18px;
  padding-left: 24px;
}

.r-list li::before {
  top: 0.86em;
}

/* Offered where the reader is most likely to want it, and saying openly that
   the caveats follow rather than hoping the reader stops here. */
.r-inline-cta {
  margin: 36px 0 0;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}

.r-inline-cta code,
.r-cmd code {
  color: var(--ink);
}

.r-cmd {
  margin: 28px 0;
}

.r-cmd code {
  display: inline-block;
  padding: 14px 20px;
  border-radius: 12px;
  background: #0e1215;
  box-shadow: inset 0 0 0 1px var(--line-lit);
  font-size: 15px;
}

.r-ask {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 15.5px;
}

/* Corrections: each entry opens with its date, marked like a status. */
.r-article .r-beat.r-correction {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.r-article .r-beat.r-correction::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

/* For later pieces: tables and notes keep to the measure and the type. */
.r-article table {
  font-variant-numeric: tabular-nums;
}

.r-article .table-scroll {
  max-width: var(--measure);
}

.r-article sup {
  line-height: 0;
}

.r-article sup a {
  padding: 0 1px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.r-notes {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.r-notes li,
.r-notes p {
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ================================================================= the hero
   One cell per repository scanned, 323; the 147 that can delete, charge or
   change access are lit teal; the 21 of those with no visible check are in
   the warning colour. The picture is generated from the study's own counts,
   so it cannot drift away from the text.

   The cells settle into place once and stay there: the resting state is the
   answer, so anyone with reduced motion on, or who arrives after it has
   played, sees exactly the same thing.
   ========================================================================= */

.hero {
  max-width: var(--wide);
  margin: clamp(44px, 5vw, 64px) 0 clamp(52px, 6vw, 76px);
  padding: clamp(20px, 3vw, 40px);
  border-radius: 18px;
  background: #0e1215;
  box-shadow: 0 0 0 1px var(--line);
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: clamp(3px, 0.36vw, 5px);
}

.cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--cell);
}

.cell--able {
  background: var(--cell-able);
}

.cell--flag {
  background: var(--warn);
}

@media (prefers-reduced-motion: no-preference) {
  .cell {
    animation: cell-in 0.5s var(--ease) both;
    animation-delay: calc(var(--i) * 26ms);
  }
  @keyframes cell-in {
    from {
      opacity: 0;
      transform: scale(0.55);
    }
  }
}

.hero__key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.4;
}

/* Swatch and label travel together, so a wrap never strands a colour chip
   at the end of a line away from the thing it labels. */
.key {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.key b {
  margin-right: -4px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.k {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.k--base {
  background: #2a3237; /* a step lighter than the cell, to read at this size */
}

.k--able {
  background: var(--cell-able);
}

.k--flag {
  background: var(--warn);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .piece {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
  }
  .piece__fig {
    max-width: 540px;
  }
}

@media (max-width: 640px) {
  :where(.r-article) p,
  :where(.r-article) li {
    font-size: 16.5px;
    line-height: 1.68;
  }
  .hero__grid {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }
  .hero__key {
    flex-direction: column;
    gap: 8px;
  }
  .r-stat {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  .r-pull {
    padding-left: 18px;
  }
  .r-inline-cta {
    padding: 18px 20px;
  }
  .r-code {
    margin-right: calc(-1 * var(--gutter));
    border-right: 0;
    border-radius: 12px 0 0 12px;
  }
  .r-code:focus-visible {
    outline-offset: -3px;
  }
}

/* --------------------------------------------------------------- print */

@media print {
  .r-article > *,
  .r-article .r-head {
    max-width: none !important;
  }
  .r-kicker,
  .r-kicker a,
  .r-stand,
  .r-byline,
  :where(.r-article) p,
  .r-article li,
  .r-stat__say,
  .r-inline-cta,
  .r-ask,
  .hero__key {
    color: #222 !important;
  }
  .r-open,
  .r-beat,
  .r-pull,
  .r-stat__big,
  .key b {
    color: #000 !important;
  }
  .quiet,
  .r-stat__big span,
  .r-byline > *::before,
  .piece__meta > *::before {
    color: #666 !important;
  }
  .r-article h2 {
    border-top-color: #bbb;
    break-after: avoid;
  }
  .hero,
  .r-inline-cta,
  .r-cmd code {
    background: none;
    box-shadow: 0 0 0 1px #bbb;
  }
  .hero {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cell,
  .k--base {
    background: #e2e6e8;
  }
  .cell--able,
  .k--able {
    background: #7fcdb7;
  }
  .cell--flag,
  .k--flag {
    background: #e8607c;
  }
  .r-inline-cta code,
  .r-cmd code {
    color: #000 !important;
  }
  .r-stat,
  .hero__key {
    border-color: #bbb;
  }
  .r-pull {
    border-left-color: #000;
  }
  .r-code {
    white-space: pre-wrap;
  }
  .r-code code {
    white-space: pre-wrap;
  }
}