/* ===========================================================================
   Research
   ---------------------------------------------------------------------------
   Long-form reading on top of style.css, which already supplies the shell,
   masthead, colophon and colour tokens. Nothing here restyles those.

   The measure is the whole design: 68 characters, generous leading, and one
   colour used only where a number is being asserted. A study earns attention
   by being readable, not by being decorated.
   ========================================================================= */

/*
  --warn lives on .wid-band in landing.css, which these pages do not load, so
  the flagged cells rendered as dark squares with a pink ring: the box-shadow
  used a literal rgba and survived, the background referenced an undefined
  token and did not. Declared here, matching the value on the landing page.
*/
.research {
  --warn: #f07f96;
  --warn-dim: rgba(240, 127, 150, 0.13);
}

.research main {
  padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 96px);
}

.r-eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tint);
}

.r-eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 201, 168, 0.35);
}

.r-eyebrow a:hover {
  border-bottom-color: var(--tint);
}

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

.r-lede {
  max-width: 62ch;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.r-lede h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.r-lede p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--dim);
}

.pieces {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
  overflow: hidden;
}

.piece {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--ground);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease;
}

.piece:hover {
  background: #0b1016;
}

.piece__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--hush);
}

.piece__dot {
  padding: 0 8px;
}

.piece__title {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.piece__stand {
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--dim);
}

.piece__go {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tint);
}

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

.r-article {
  max-width: 68ch;
  margin: 0 auto;
}

.r-article h1 {
  margin: 0 0 20px;
  font-size: clamp(29px, 4.6vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.r-stand {
  margin: 0 0 22px;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.6;
  color: var(--dim);
}

.r-byline {
  margin: 0 0 clamp(34px, 4.5vw, 48px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--hush);
}

.r-article h2 {
  margin: clamp(44px, 5.5vw, 60px) 0 18px;
  font-size: clamp(21px, 2.8vw, 27px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.r-article p {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--dim);
}

.r-article strong {
  font-weight: 600;
  color: var(--ink);
}

.r-article a {
  color: var(--tint);
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 201, 168, 0.3);
}

.r-article a:hover {
  border-bottom-color: var(--tint);
}

.r-article code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tint-lit);
}

.r-open {
  font-size: 18px !important;
  color: var(--ink) !important;
}

/* A single sentence given its own air, where the argument turns. */
.r-beat {
  margin: 30px 0 !important;
  font-size: 19px !important;
  font-weight: 600;
  color: var(--ink) !important;
}

.r-pull {
  margin: clamp(32px, 4vw, 44px) 0 !important;
  padding: 22px 26px;
  border-left: 2px solid var(--tint);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(78, 201, 168, 0.08), transparent 70%);
  font-size: 18.5px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}

.r-code {
  margin: 0 0 24px;
  padding: 20px 22px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #070b10;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--dim);
}

.r-code:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
}

.r-code code {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  white-space: pre;
}

.r-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.r-list li {
  position: relative;
  margin-bottom: 18px;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--dim);
}

.r-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--tint);
}

/* The number, given the weight of the thing it is asserting. */
.r-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
  margin: clamp(32px, 4vw, 44px) 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line-lit);
  border-radius: 12px;
  background: #0a0f14;
}

.r-stat__big {
  margin: 0 !important;
  font-family: var(--mono);
  font-size: clamp(40px, 7vw, 62px) !important;
  font-weight: 600;
  line-height: 1 !important;
  letter-spacing: -0.04em;
  color: var(--ink) !important;
}

.r-stat__big span {
  font-size: 0.45em;
  color: var(--hush);
}

.r-stat__say {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.r-cmd {
  margin: 26px 0 !important;
}

.r-cmd code {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid rgba(78, 201, 168, 0.3);
  border-radius: 8px;
  background: rgba(78, 201, 168, 0.07);
  font-size: 15px;
}

.r-ask {
  margin-top: clamp(32px, 4vw, 44px) !important;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px !important;
  color: var(--hush) !important;
}

/* ================================================================= the hero
   292 cells, one per repository scanned. 141 lit to show they can delete,
   charge or change access; 32 in warning colour for the ones with no visible
   check. The picture is generated from the study's own counts, so it cannot
   drift away from the text.

   The animation resolves TO the finding and stays there — the resting state
   is the answer, so anyone with reduced motion on, or scripting off, or who
   arrives after it has played, sees exactly the same thing.
   ========================================================================= */

.hero {
  margin: 0 0 clamp(34px, 4.5vw, 48px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line-lit);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(78, 201, 168, 0.1), transparent 60%),
    #080d12;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: clamp(3px, 0.6vw, 6px);
}

.cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: #182029;
  animation: cell-in 0.5s var(--ease, ease) both;
  animation-delay: calc(var(--i) * 26ms);
}

.cell--able {
  background: rgba(78, 201, 168, 0.42);
}

.cell--flag {
  background: var(--warn);
  box-shadow: 0 0 0 1px rgba(240, 127, 150, 0.35);
  animation:
    cell-in 0.5s var(--ease, ease) both,
    flag-pulse 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 26ms), calc(900ms + var(--i) * 26ms);
}

@keyframes cell-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes flag-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240, 127, 150, 0.35); }
  50% { box-shadow: 0 0 0 3px rgba(240, 127, 150, 0.18); }
}

.hero__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--hush);
}

/* 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: 8px;
}

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

.k--base { background: #182029; }
.k--able { background: rgba(78, 201, 168, 0.42); }
.k--flag { background: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  .cell,
  .cell--flag {
    animation: none;
  }
}

@media (max-width: 40rem) {
  .hero__grid {
    grid-template-columns: repeat(16, 1fr);
  }
  .r-stat {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}