/* =========================================================
   PRAVA — Security Research
   Depends on css/styles.css for tokens, shell, buttons and grain.

    1. Research hero
    2. Tools: search + category rail
    3. Featured research
    4. Article grid
    5. Research signal strip
    6. Research updates (newsletter)
    7. Article: hero
    8. Article: layout + table of contents
    9. Article: typography
   10. Article: share
   11. Article: related + back
   12. Responsive
   13. Reduced motion
   ========================================================= */

/* ---------- 1. Research hero ---------- */
.rhero {
  position: relative;
  overflow: hidden;
  /* room for the plate: without it the hero is only as tall as its copy
     and cover throws most of the composition away */
  min-height: clamp(460px, 56vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + clamp(56px, 11vh, 132px)) var(--pad) clamp(38px, 6vh, 68px);
  border-bottom: 1px solid var(--line-soft);
}

/* a fine measuring grid, drifting slowly. No imagery, no glow. */
.rhero__grid {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 96px);
  mask-image: radial-gradient(115% 78% at 22% 0%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 78%);
  -webkit-mask-image: radial-gradient(115% 78% at 22% 0%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 78%);
  animation: rdrift 44s linear infinite;
}

@keyframes rdrift {
  to {
    background-position: 96px 96px, 96px 96px;
  }
}

/* two hairlines that read as an axis rather than decoration */
.rhero__axis {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent, var(--line) 30%, transparent),
    linear-gradient(to right, transparent, var(--line-soft) 40%, transparent);
  background-size: 1px 100%, 100% 1px;
  background-position: 22% 0, 0 78%;
  background-repeat: no-repeat;
  opacity: .9;
}

.rhero__inner {
  position: relative;
  z-index: 2;
  max-width: 72ch;
}

/* ---- the plate ----
   Composed with its subject on the right and the left clear, which is
   where the copy sits. It lives inside the hero rather than on the page
   background, so it scrolls away with the hero instead of following the
   reader down the listing -- the arrangement the company hero had to be
   corrected to. A scrim holds the left so the copy never depends on
   what is behind it. */
/* The layer is sized to the plate rather than to the hero, which is
   what lets its edges be faded. The render sits on a near-black ground
   rather than a pure one, so blending alone left a faintly lighter
   rectangle against the page; the mask dissolves the boundary whatever
   that ground turns out to be. */
.rhero__bg {
  position: absolute;
  top: 50%;
  right: var(--pad-r);
  transform: translateY(-50%);
  height: 78%;
  aspect-ratio: 737 / 880;
  pointer-events: none;
  background-image: url("../images/research-bg.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .9;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 66% 64% at 50% 50%,
      #000 40%, rgba(0, 0, 0, .6) 70%, transparent 94%);
  mask-image: radial-gradient(ellipse 66% 64% at 50% 50%,
      #000 40%, rgba(0, 0, 0, .6) 70%, transparent 94%);
}

/* The scrim sits on the hero, not on the plate. Inside .rhero__bg it
   was a child of a filtered element, so the light theme's invert()
   turned it inside out as well -- a near-white scrim became a near-black
   wash across the copy. A filter applies to an element's whole subtree,
   pseudo-elements included. */
.rhero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
      var(--bg) 0%,
      var(--bg) 40%,
      transparent 62%);
}

/* A purpose-made light render, so no filter is involved -- inverting the
   dark one never quite cleared its ground and the corrections for that
   were taking the drawing with them. Multiply is the counterpart of
   screen: the white ground drops out and the lines stay.

   It is a slightly taller crop than the dark one, hence its own ratio. */
:root[data-theme="light"] .rhero__bg {
  background-image: url("../images/research-bg-light.png");
  aspect-ratio: 731 / 913;
  opacity: 1;
  filter: none;
  mix-blend-mode: multiply;
}

/* the measuring grid steps back where the plate is doing the work */
.rhero__grid {
  opacity: .32;
}

@media (max-width: 900px) {
  /* stacked, the plate sits behind the copy rather than beside it, so
     it steps well back */
  .rhero__bg {
    opacity: .26;
    height: 56%;
    top: 34%;
  }

  :root[data-theme="light"] .rhero__bg {
    opacity: .2;
  }
}

.rhero__title {
  margin: 20px 0 clamp(22px, 3vh, 34px);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.rhero__lede {
  max-width: 58ch;
  color: var(--text-mid);
  font-size: clamp(1.02rem, .55vw + .92rem, 1.2rem);
  line-height: 1.62;
}

/* ---------- 2. Tools: search + category rail ----------
   The rail scrolls away with the rest of the page. It used to stay
   pinned under the navbar, which meant a second bar following the
   reader down every article summary; the frosted backing went with it,
   since that was only there to keep the text legible over whatever was
   passing underneath. */
.rtools {
  position: relative;
  z-index: 12;
  padding: clamp(14px, 2vh, 22px) var(--pad);
  border-bottom: 1px solid var(--line-soft);
}

.rtools__in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.rcats {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rcats::-webkit-scrollbar {
  display: none;
}

.rcat {
  position: relative;
  flex: none;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s var(--ease);
}

.rcat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease-out);
}

.rcat:hover,
.rcat:focus-visible {
  color: var(--text);
}

.rcat.is-on {
  color: var(--text);
}

.rcat.is-on::after {
  transform: scaleX(1);
}

.rsearch {
  position: relative;
  flex: 0 0 auto;
  width: clamp(11rem, 18vw, 15rem);
  display: flex;
  align-items: center;
}

.rsearch__icon {
  position: absolute;
  left: 0;
  color: var(--text-dim);
  pointer-events: none;
}

.rsearch__input {
  width: 100%;
  font: inherit;
  font-size: .86rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 22px 8px 24px;
  transition: border-color .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.rsearch__input::placeholder {
  color: var(--text-dim);
}

.rsearch__input:hover {
  border-bottom-color: var(--line-strong);
}

.rsearch__input:focus {
  outline: none;
  border-bottom-color: var(--text);
}

.rsearch__input::-webkit-search-cancel-button {
  display: none;
}

.rsearch__clear[hidden] {
  display: none;
}

.rsearch__clear {
  position: absolute;
  right: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .3s var(--ease);
}

.rsearch__clear:hover {
  color: var(--text);
}

/* ---------- 3. Featured research ---------- */
.rfeat {
  position: relative;
  padding: clamp(48px, 8vh, 96px) var(--pad) clamp(44px, 7vh, 84px);
  border-bottom: 1px solid var(--line-soft);
}

.rfeat__label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.rfeat__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-top: clamp(24px, 3.4vh, 40px);
}

.rfeat__title {
  font-size: clamp(1.85rem, 4.2vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -.042em;
  transition: transform .5s var(--ease-out);
}

.rfeat__link:hover .rfeat__title {
  transform: translateX(6px);
}

.rfeat__excerpt {
  margin-top: clamp(18px, 2.4vh, 26px);
  max-width: 62ch;
  color: var(--text-mid);
  font-size: clamp(.96rem, .4vw + .88rem, 1.08rem);
  line-height: 1.68;
}

.rfeat__side {
  display: grid;
  gap: 14px;
  padding-bottom: 6px;
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(20px, 2.6vw, 34px);
}

.rfeat__meta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.rfeat__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
}

.rfeat__go svg {
  transition: transform .45s var(--ease-out);
}

.rfeat__link:hover .rfeat__go svg {
  transform: translateX(5px);
}

/* ---------- 4. Article grid ---------- */
.rlist {
  position: relative;
  padding: clamp(48px, 8vh, 96px) var(--pad) clamp(56px, 9vh, 104px);
}

.rlist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: clamp(20px, 3vh, 30px);
  border-bottom: 1px solid var(--line);
}

.rlist__title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -.035em;
}

.rlist__note {
  margin-top: 10px;
  max-width: 46ch;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.rlist__count {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.rgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 64px);
  transition: opacity .16s var(--ease);
}

.rgrid.is-swapping {
  opacity: 0;
}

/* a card is a ruled entry, not a box */
.rcard {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vh, 38px) 0 clamp(30px, 3.6vh, 44px);
  border-top: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(18px);
}

.rcard.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out) var(--d, 0ms),
    transform .7s var(--ease-out) var(--d, 0ms);
}

.rcard:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 6px;
}

.rcard__cat {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-mid);
  transition: color .35s var(--ease);
}

.rcard__title {
  margin: 16px 0 14px;
  font-size: clamp(1.12rem, 1.3vw, 1.34rem);
  line-height: 1.24;
  letter-spacing: -.028em;
  transition: transform .45s var(--ease-out);
}

.rcard__excerpt {
  font-size: .88rem;
  line-height: 1.66;
  color: var(--text-mid);
  max-width: 40ch;
}

.rcard__meta {
  margin-top: clamp(16px, 2vh, 22px);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.rcard__dot {
  padding: 0 8px;
}

.rcard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: clamp(18px, 2.4vh, 26px);
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .35s var(--ease);
}

.rcard__go--soon {
  color: var(--text-dim);
}

.rcard__arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .4s var(--ease), transform .45s var(--ease-out);
}

/* the whole hover state: title nudges, arrow arrives, rule brightens */
a.rcard:hover,
a.rcard:focus-visible {
  border-top-color: var(--line-strong);
}

a.rcard:hover .rcard__title,
a.rcard:focus-visible .rcard__title {
  transform: translateX(5px);
}

a.rcard:hover .rcard__cat,
a.rcard:focus-visible .rcard__cat {
  color: var(--text);
}

a.rcard:hover .rcard__go,
a.rcard:focus-visible .rcard__go {
  color: var(--text);
}

a.rcard:hover .rcard__arrow,
a.rcard:focus-visible .rcard__arrow {
  opacity: 1;
  transform: none;
}

.rcard--soon .rcard__title {
  color: var(--text-mid);
}

.rlist__empty {
  padding: clamp(40px, 7vh, 80px) 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.rlist__foot {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
  padding-top: clamp(30px, 4.5vh, 52px);
  border-top: 1px solid var(--line);
}

/* ---------- 5. Research signal strip ---------- */
.rsignal {
  position: relative;
  padding: clamp(56px, 9vh, 108px) var(--pad);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
}

.rsignal__head,
.rsignal__list {
  position: relative;
  z-index: 1;
}

.rsignal__head {
  max-width: 52ch;
}

.rsignal__title {
  margin-top: 18px;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: -.042em;
}

.rsignal__lede {
  margin-top: 18px;
  color: var(--text-mid);
  max-width: 44ch;
}

.rsignal__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(38px, 6vh, 72px);
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.rmetric {
  background: var(--bg-elev);
  padding: clamp(24px, 3vw, 40px) clamp(18px, 2.2vw, 32px) clamp(28px, 3.6vw, 46px);
  transition: background-color .5s var(--ease);
}

.rmetric:hover {
  background: var(--surface);
}

.rmetric__val {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: -.035em;
}

.rmetric__key {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* ---------- 6. Research updates ---------- */
.rnews {
  position: relative;
  padding: clamp(56px, 9vh, 104px) var(--pad);
  border-top: 1px solid var(--line-soft);
}

.rnews__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(28px, 5vw, 88px);
  align-items: end;
}

.rnews__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -.04em;
  max-width: 30ch;
}

.rnews__lede {
  margin-top: 16px;
  color: var(--text-mid);
  max-width: 46ch;
  font-size: .95rem;
}

.rnews__form {
  display: grid;
  gap: 14px;
}

.rnews__row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.rnews__field {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.rnews__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.rnews__input {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  transition: border-color .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.rnews__input::placeholder {
  color: var(--text-dim);
}

.rnews__input:hover {
  border-bottom-color: var(--line-strong);
}

.rnews__input:focus {
  outline: none;
  border-bottom-color: var(--text);
}

/* forms.js adds is-checked on submit, so nothing shouts before then */
.rnews__form.is-checked .rnews__input:invalid {
  border-bottom-color: color-mix(in srgb, var(--text) 55%, transparent);
}

.rnews__note {
  font-size: .82rem;
  color: var(--text-mid);
}

/* ---------- 7. Article: hero ---------- */
.apage {
  --acol: 74rem;
  --atoc: 15rem;
  --agap: clamp(34px, 5vw, 86px);
  position: relative;
  padding: calc(var(--nav-h) + clamp(44px, 8vh, 96px)) var(--pad) 0;
}

/* the hero spans hero+contents so its left edge lands on the body's */
.ahero {
  position: relative;
  z-index: 1;
  max-width: var(--acol);
  margin-inline: 0;
}

.ahero>* {
  max-width: var(--acol);
}

.ahero__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mid);
  transition: color .3s var(--ease);
}

.ahero__back:hover {
  color: var(--text);
}

.ahero__back svg {
  transition: transform .4s var(--ease-out);
}

.ahero__back:hover svg {
  transform: translateX(-4px);
}

.ahero__cat {
  margin-top: clamp(30px, 5vh, 54px);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ahero__title {
  margin: 20px 0 clamp(20px, 2.8vh, 30px);
  font-size: clamp(2.05rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.ahero__sub {
  color: var(--text-mid);
  font-size: clamp(1.02rem, .5vw + .92rem, 1.18rem);
  line-height: 1.62;
  max-width: 72ch;
}

.ahero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 4vh, 42px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.ahero__draft {
  color: var(--text);
}

.ahero__meta strong {
  color: var(--text);
  font-weight: 400;
}

/* ---------- 8. Article: layout + table of contents ---------- */
/* Two tracks: the reading column sits against the left gutter -- aligned
   with the hero and the rest of the site's left-aligned content, not
   centred -- and the contents list hangs in the flexible right margin. */
.awrap {
  position: relative;
  z-index: 1;
  display: grid;
  /* the reading column takes the room; the contents keep their own width */
  grid-template-columns: minmax(0, var(--acol)) minmax(var(--atoc), 1fr);
  gap: var(--agap);
  padding: clamp(38px, 6vh, 72px) 0 clamp(56px, 9vh, 104px);
}

.toc {
  grid-column: 2;
  justify-self: end;
  max-width: var(--atoc);
  position: sticky;
  top: calc(var(--nav-h) + 34px);
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - 70px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.toc__sum {
  display: none;
}

.toc__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-mid);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.toc__list {
  counter-reset: toc;
  margin-top: 14px;
  display: grid;
  gap: 2px;
}

.toc__list li {
  counter-increment: toc;
}

.toc__list a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 4px;
  padding: 7px 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-mid);
  transition: color .3s var(--ease);
}

.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  padding-top: .25em;
  transition: color .3s var(--ease);
}

.toc__list a:hover {
  color: var(--text);
}

.toc__list a.is-current {
  color: var(--text);
}

.toc__list a.is-current::before {
  color: var(--text);
}

/* ---------- 9. Article: typography ---------- */
.abody {
  grid-column: 1;
  min-width: 0;
  font-size: clamp(1rem, .35vw + .95rem, 1.09rem);
  line-height: 1.6;
  color: var(--text-mid);
}

.abody> :first-child {
  margin-top: 0;
}

.abody>h2:first-child {
  margin-top: 0;
}

.abody p {
  margin: 0 0 .85em;
  max-width: none;
}

.abody .alead {
  font-size: clamp(1.08rem, .5vw + 1rem, 1.24rem);
  line-height: 1.66;
  color: var(--text);
}

.abody h2 {
  margin: clamp(48px, 7vh, 84px) 0 clamp(18px, 2.4vh, 26px);
  font-size: clamp(1.42rem, 2.2vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -.035em;
  color: var(--text);
  scroll-margin-top: calc(var(--nav-h) + 28px);
}

.abody h3 {
  margin: clamp(32px, 4.5vh, 52px) 0 14px;
  font-size: clamp(1.08rem, 1.3vw, 1.28rem);
  letter-spacing: -.02em;
  color: var(--text);
}

.abody strong {
  color: var(--text);
  font-weight: 600;
}

.abody a:not(.btn) {
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: opacity .3s var(--ease);
}

.abody a:not(.btn):hover {
  opacity: .62;
}

.abody ul,
.abody ol {
  margin: 0 0 .85em;
  padding: 0;
  list-style: none;
  max-width: none;
  display: grid;
  gap: 2px;
}

.abody li {
  position: relative;
  padding-left: 1.7rem;
}

.abody ul li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .8em;
  width: 12px;
  height: 1px;
  background: var(--line-strong);
}

.abody ol {
  counter-reset: astep;
}

.abody ol li {
  counter-increment: astep;
}

/* the number sits inline in the li's hanging indent, so it shares the
   text's baseline instead of floating above it */
.abody ol li::before {
  content: counter(astep, decimal-leading-zero);
  display: inline-block;
  width: 1.7rem;
  margin-left: -1.7rem;
  vertical-align: baseline;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--text-dim);
}

.abody code {
  font-family: var(--mono);
  font-size: .86em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: .12em .38em;
}

.abody hr {
  height: 0;
  margin: clamp(44px, 7vh, 78px) 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  max-width: none;
}

/* a question the piece turns on, set apart without a decorative quote mark */
.abody blockquote {
  margin: clamp(30px, 4.5vh, 48px) 0;
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 1px solid var(--line-strong);
  max-width: 80ch;
}

.abody blockquote p {
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.38rem);
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--text);
}

/* a short pipeline, set inline rather than drawn */
.aflow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: clamp(26px, 4vh, 42px) 0 1.35em;
  max-width: none;
}

.aflow span {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.aflow .aflow__sep {
  border: 0;
  padding: 0;
  color: var(--text-dim);
}

/* the layered-architecture stack, set as a rail rather than a graphic */
.astack {
  display: grid;
  gap: 1px;
  margin: clamp(28px, 4vh, 44px) 0 1.35em;
  max-width: 34rem;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.astack div {
  background: var(--surface);
  padding: 14px clamp(16px, 2vw, 22px);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}

/* ---------- 10. Article: share ---------- */
.share {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
  margin-top: clamp(44px, 7vh, 76px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--line-soft);
}

.share__label {
  font-family: var(--mono);
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* the label and the three actions sit on one baseline: the article's
   paragraph margin and link underline are taken off here so neither
   pushes one item out of line */
.abody .share .share__label {
  margin: 0;
  max-width: none;
}

.share__btn,
.abody .share a.share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 1;
  transition: color .3s var(--ease);
}

.share__btn:hover,
.share__btn:focus-visible,
.abody .share a.share__btn:hover,
.abody .share a.share__btn:focus-visible {
  color: var(--text);
}

.share__btn.is-done {
  color: var(--text);
}

/* ---------- 11. Article: related + back ---------- */
.arel {
  position: relative;
  padding: clamp(52px, 8vh, 96px) var(--pad);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
}

.arel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: clamp(18px, 2.6vh, 26px);
  border-bottom: 1px solid var(--line);
}

.arel__title {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  letter-spacing: -.035em;
}

.arel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 64px);
}

.rcard--slim .rcard__excerpt {
  display: none;
}

.arel__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(30px, 4.5vh, 52px);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .3s var(--ease);
}

.arel__back:hover {
  color: var(--text);
}

.arel__back svg {
  transition: transform .4s var(--ease-out);
}

.arel__back:hover svg {
  transform: translateX(-4px);
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 1080px) {
  .rfeat__link {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .rfeat__side {
    border-left: 0;
    padding-left: 0;
    padding-top: clamp(18px, 2.6vh, 26px);
    border-top: 1px solid var(--line-soft);
  }

  .rgrid,
  .arel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rsignal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rnews__in {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* the contents list folds away above the article on narrow screens */
  .awrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .abody,
  .toc {
    grid-column: 1;
  }

  .ahero,
  .ahero>* {
    max-width: none;
  }

  .toc {
    position: static;
    max-height: none;
    overflow: visible;
    order: -1;
    padding-bottom: clamp(22px, 3.4vh, 32px);
    border-bottom: 1px solid var(--line-soft);
  }

  .toc__sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .toc__sum::-webkit-details-marker {
    display: none;
  }

  .toc__sum svg {
    transition: transform .4s var(--ease-out);
  }

  .toc[open] .toc__sum svg {
    transform: rotate(180deg);
  }

  .toc__label {
    display: none;
  }

  .toc__list {
    margin-top: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px clamp(18px, 3vw, 34px);
  }
}

@media (max-width: 720px) {

  .rtools__in {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  .rsearch {
    width: 100%;
  }

  .rcats {
    mask-image: linear-gradient(to right, #000 0 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0 86%, transparent 100%);
  }

  .rgrid,
  .arel__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rcard {
    padding-top: clamp(22px, 3vh, 30px);
    padding-bottom: clamp(26px, 3.4vh, 36px);
  }

  .rcard__excerpt {
    max-width: none;
  }

  .rsignal__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .rnews__row {
    flex-direction: column;
    align-items: stretch;
  }

  .rnews__row .btn {
    justify-content: center;
  }

  .toc__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .abody blockquote {
    padding-left: 18px;
  }
}

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

  .rhero__grid {
    animation: none;
  }

  .rcard {
    opacity: 1;
    transform: none;
  }

  .rcard__arrow {
    opacity: 1;
    transform: none;
  }

  .rgrid {
    transition: none;
  }

  a.rcard:hover .rcard__title,
  .rfeat__link:hover .rfeat__title {
    transform: none;
  }
}