/* Rolling Fun — partners page. Uses tokens and components from site.css.
   Three dossiers, each with a printed plate of the real portrait, the true
   photo under a scan line. Then GP Networks as a paper chapter, then the direct lines. */

/* ---------- Page head ---------- */

.pt-head { min-height: 100vh; min-height: 100svh; display: grid; align-content: end; }
.pt-head__grid { row-gap: clamp(28px, 3vw, 44px); align-items: start; }
.pt-head__title {
  grid-column: 1 / -1;
  font-size: clamp(48px, 7.6vw, 128px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.pt-head__lede { --d: 0.32s; grid-column: 1 / span 5; margin-top: 0 !important; }
.pt-roster { grid-column: 8 / span 5; }
.pt-roster ol { border-top: 1px solid var(--line); }
.pt-roster li { position: relative; }
.pt-roster li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}
.pt-roster a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  min-height: 68px;
}
.pt-roster__thumb {
  position: relative;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--paper);
}
.pt-roster__thumb canvas { position: absolute; inset: 0; margin: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.motion .pt-roster__thumb canvas { animation: pt-fade 0.8s ease both; }
@keyframes pt-fade { from { opacity: 0; } }
/* Contact sheet at desktop: faces large enough to read at one dot per pixel. */
@media (min-width: 1024px) {
  .pt-roster a { grid-template-columns: 72px minmax(0, 1fr) auto 22px; gap: 20px; min-height: 96px; }
  .pt-roster__thumb { width: 72px; height: 72px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .pt-roster { grid-column: 7 / span 6; }
  .pt-head__lede { grid-column: 1 / span 5; }
}
.pt-roster__name { white-space: nowrap; }
.pt-roster__mail { white-space: nowrap; }
.pt-roster__name {
  font-size: clamp(18px, 1.5vw, 21px);
  letter-spacing: -0.015em;
  transition: transform 0.6s var(--ease);
}
.pt-roster__mail { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-roster__go {
  font-size: 15px;
  color: var(--muted);
  text-align: right;
  transition: transform 0.6s var(--ease), color 0.3s ease;
}
@media (hover: hover) {
  .pt-roster a:hover .pt-roster__name { transform: translate3d(6px, 0, 0); }
  .pt-roster a:hover .pt-roster__go { color: var(--signal); transform: translate3d(0, 3px, 0); }
}
.pt-roster a:focus-visible .pt-roster__go { color: var(--signal); }

/* ---------- Dossiers ---------- */

.pt-dossier { scroll-margin-top: 12px; }
.pt-dossier:focus { outline: none; }
.pt-dossier__grid { row-gap: clamp(36px, 4vw, 56px); align-items: start; }

/* A: plate left, file right */
.pt-dossier--a .pt-plate { grid-column: 1 / span 5; }
.pt-dossier--a .pt-file { grid-column: 7 / span 6; }
/* B: file left, plate right */
.pt-dossier--b .pt-plate { grid-column: 8 / span 5; grid-row: 1; }
.pt-dossier--b .pt-file { grid-column: 1 / span 6; grid-row: 1; }
/* C: wide file, small plate up top right, the audience ledger across */
.pt-dossier--c .pt-plate { grid-column: 9 / span 4; grid-row: 1; }
.pt-dossier--c .pt-file { grid-column: 1 / span 7; grid-row: 1; }
.pt-dossier--c .pt-ledger { grid-column: 1 / -1; grid-row: 2; }

@media (min-width: 761px) {
  .pt-dossier--a .pt-plate,
  .pt-dossier--b .pt-plate {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
  }
}

/* The plate: a paper print inside the dark page. */
.pt-plate { position: relative; }
.pt-plate__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--paper);
  color: var(--paper-ink);
  cursor: crosshair;
}
.pt-dossier--c .pt-plate__frame { aspect-ratio: 15 / 16; }
.pt-plate__frame canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pt-plate__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper);
  isolation: isolate;
}
.pt-plate__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5%;
  mix-blend-mode: multiply; /* their white backgrounds become paper */
}
/* Once the 1-bit print is drawn, the photo waits under a wipe. */
.pt-plate.is-dithered .pt-plate__photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--ease-wipe);
}
.pt-plate__scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-bottom: 1px solid var(--signal);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.85s var(--ease-wipe), opacity 0.2s ease 0.65s;
}
.pt-plate.is-dithered.is-on .pt-plate__photo { clip-path: inset(0 0 0 0); }
.pt-plate.is-dithered.is-on .pt-plate__scan { opacity: 1; transform: none; transition: transform 0.85s var(--ease-wipe), opacity 0.1s ease; }
.pt-plate.is-dithered.is-on .pt-plate__scan { animation: pt-scan-out 0.3s ease 0.85s forwards; }
@keyframes pt-scan-out { to { opacity: 0; } }
@media (hover: hover) {
  .pt-plate.is-final .pt-plate__frame:hover .pt-plate__photo { clip-path: inset(0 0 0 0); }
  .pt-plate.is-final .pt-plate__frame:hover .pt-plate__scan { opacity: 1; transform: none; transition: transform 0.85s var(--ease-wipe), opacity 0.1s ease; animation: pt-scan-out 0.3s ease 0.85s forwards; }
}
/* The photo retracts under the same line it arrived with. */
.pt-plate.is-leaving .pt-plate__scan { animation: pt-scan-up 0.85s var(--ease-wipe) both, pt-scan-out 0.25s ease 0.85s forwards; }
@keyframes pt-scan-up {
  from { opacity: 1; transform: none; }
  to { opacity: 1; transform: translate3d(0, -100%, 0); }
}

/* Entrance: the paper is pulled down under the scan line while the dots sharpen,
   so the print develops rather than loads. The coarse first pass stays hidden. */
.motion .pt-plate__frame { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease-wipe); }
.motion .pt-plate.is-in .pt-plate__frame { clip-path: inset(0 0 0 0); }
.motion .pt-plate.is-printing .pt-plate__scan { animation: pt-scan-print 1.15s var(--ease-wipe) both, pt-scan-out 0.35s ease 1.15s forwards; }
@keyframes pt-scan-print {
  from { opacity: 1; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; }
}
.motion .pt-plate__cap { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.7s ease 0.75s, transform 1s var(--ease) 0.75s; }
.motion .pt-plate.is-in .pt-plate__cap { opacity: 1; transform: none; }

/* Viewfinder corners, printed on the plate. */
.pt-plate__marks {
  position: absolute;
  inset: 12px;
  z-index: 4;
  pointer-events: none;
  --c: rgba(12, 12, 11, 0.42);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 14px no-repeat;
}

.pt-plate__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}
.pt-plate__who { white-space: nowrap; }
.pt-plate__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.25s ease;
}
.pt-plate__act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.pt-plate__act::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.pt-plate__btn[aria-pressed="true"] .pt-plate__act::before { background: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
@media (hover: hover) {
  .pt-plate__btn:hover .pt-plate__act::before { box-shadow: inset 0 0 0 1px var(--ink); }
}
.pt-plate:not(.is-dithered) .pt-plate__btn { display: none; }

/* The file: name, address, lead, numbered lines. */
.pt-file__name {
  font-size: clamp(44px, 5vw, 80px);
  font-weight: var(--w-display);
  line-height: 0.95;
  letter-spacing: -0.047em;
}
.pt-file__mail { margin-top: clamp(14px, 1.4vw, 20px); font-size: 15px; }
.pt-file__mail a { display: inline-block; color: var(--muted); padding: 13px 0; margin: -13px 0; }
.motion .pt-file__mail { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.7s ease 0.3s, transform 1s var(--ease) 0.3s; }
.motion .pt-file__name.is-in + .pt-file__mail { opacity: 1; transform: none; }
@media (hover: hover) { .pt-file__mail a:hover { color: var(--ink); } }
.pt-file__lead {
  --d: 0.18s;
  max-width: 24em;
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(21px, 1.85vw, 29px);
  font-weight: var(--w-display);
  line-height: 1.28;
  letter-spacing: -0.022em;
  color: var(--muted);
  text-wrap: pretty;
}
.pt-echo > span:nth-child(1) { color: var(--ink); }
.pt-echo > span:nth-child(2) { color: rgba(237, 235, 228, 0.86); }
.pt-echo > span:nth-child(3) { color: rgba(237, 235, 228, 0.72); }
.pt-echo > span:nth-child(4) { color: var(--muted); }
.motion .pt-echo > span { display: inline-block; opacity: 0; transform: translate3d(0, 0.45em, 0); transition: opacity 0.6s ease, transform 0.9s var(--ease); }
.motion .pt-file__lead.is-in .pt-echo > span { opacity: 1; transform: none; }
.motion .pt-echo > span:nth-child(2) { transition-delay: 0.14s; }
.motion .pt-echo > span:nth-child(3) { transition-delay: 0.28s; }
.motion .pt-echo > span:nth-child(4) { transition-delay: 0.42s; }

.pt-creds {
  position: relative;
  margin-top: clamp(36px, 4vw, 56px);
  counter-reset: none;
}
.pt-creds::before,
.pt-creds li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}
.pt-creds::before { top: 0; }
.pt-creds li::after { bottom: 0; }
.pt-creds li {
  position: relative;
  display: grid;
  padding: 13px 0 14px;
  font-size: 16.5px;
  line-height: 1.45;
  letter-spacing: -0.006em;
}
@media (min-width: 1024px) {
  .pt-creds--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .pt-creds--two::before { display: none; }
  .pt-creds--two li:nth-child(-n + 2)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--line);
    transform-origin: 0 50%;
  }
}
/* Lines are ruled one after another, then each entry sets on its rule. */
.motion .pt-creds[data-reveal] { opacity: 1; transform: none; }
.motion .pt-creds li > * { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.6s ease, transform 0.9s var(--ease); transition-delay: calc(var(--n, 0) * 70ms + 160ms); }
.motion .pt-creds::before,
.motion .pt-creds li::before,
.motion .pt-creds li::after { transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--n, 0) * 70ms); }
.motion .pt-creds.is-in li > * { opacity: 1; transform: none; }
.motion .pt-creds.is-in::before,
.motion .pt-creds.is-in li::before,
.motion .pt-creds.is-in li::after { transform: none; }

/* The closing line: the one signal thing in each file. */
.pt-fact {
  display: grid;
  gap: 14px;
  margin-top: clamp(40px, 4.4vw, 64px);
}
.pt-fact__k { display: inline-flex; align-items: center; gap: 10px; }
.pt-fact__dot { width: 8px; height: 8px; background: var(--signal); }
.motion .pt-fact__dot { transform: scale(0); transition: transform 0.7s var(--ease) 0.35s; }
.motion .pt-fact.is-in .pt-fact__dot { transform: none; }
.pt-fact__t {
  max-width: 21em;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: var(--w-display);
  line-height: 1.18;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.pt-listen {
  display: grid;
  gap: 6px;
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
  color: var(--muted);
}

/* Eric's audience, as a ledger of real figures. */
.pt-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 40px;
  margin-top: clamp(24px, 4vw, 64px);
}
.pt-ledger li { position: relative; min-width: 0; padding-top: 18px; }
.pt-ledger li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-2);
  transform-origin: 0 50%;
}
.pt-ledger p { display: flex; flex-direction: column; }
/* The ledger arrives as one block: rules draw left to right, then each figure sets. */
.motion .pt-ledger[data-reveal] { opacity: 1; transform: none; }
.motion .pt-ledger li::before { transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--n, 0) * 70ms); }
.motion .pt-ledger li > p { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.7s ease, transform 1s var(--ease); transition-delay: calc(var(--n, 0) * 70ms + 160ms); }
.motion .pt-ledger.is-in li::before,
.motion .pt-ledger.is-in li > p { opacity: 1; transform: none; }
.pt-ledger__pre,
.pt-ledger__post { font-size: 15.5px; line-height: 1.4; color: var(--muted); }
.pt-ledger__pre { min-height: 1.4em; }
.pt-ledger__post { max-width: 15em; margin-top: 14px; }
.pt-ledger__fig {
  display: flex;
  align-items: baseline;
  max-width: 100%;
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.pt-ledger__unit { color: var(--muted); }
.pt-ledger__unit--word {
  margin-left: 0.22em;
  font-family: var(--sans);
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* ---------- GP Networks (paper) ---------- */

.pt-net__grid { row-gap: 48px; align-items: start; }
.pt-net__head { grid-column: 1 / span 4; }
.pt-net__list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.pt-net__list li { position: relative; }
.pt-net__list li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}
.motion .pt-net__list[data-reveal] { opacity: 1; transform: none; }
.motion .pt-net__list li > p { opacity: 0; transform: translate3d(0, 0.5em, 0); transition: opacity 0.7s ease, transform 1.1s var(--ease); transition-delay: calc(var(--n, 0) * 70ms + 140ms); }
.motion .pt-net__list li::after { transform: scaleX(0); transition: transform 1.2s var(--ease); transition-delay: calc(var(--n, 0) * 70ms); }
.motion .pt-net__list.is-in li > p,
.motion .pt-net__list.is-in li::after { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .pt-net__head { position: sticky; top: calc(var(--nav-h) + 28px); }
}
.pt-net__list li {
  display: grid;
  padding: clamp(20px, 2.2vw, 30px) 0;
}
.pt-net__list p {
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: var(--w-display);
  line-height: 1.18;
  letter-spacing: -0.026em;
  color: var(--muted);
  text-wrap: pretty;
  transition: color 0.3s ease;
}
.pt-net__list strong { font-weight: inherit; color: var(--ink); }
.pt-net__list p,
.pt-creds li,
.pt-file__name { overflow-wrap: break-word; }
@media (hover: hover) {
  .pt-net__list li:hover p { color: var(--ink); }
}

.pt-seals { margin-top: clamp(40px, 5vw, 72px); max-width: 420px; }
.pt-seals__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pt-seal {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pt-seal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 17%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.85;
  transition: opacity 0.4s ease, filter 0.4s ease, clip-path 1s var(--ease-wipe);
}
@media (hover: hover) {
  .pt-seal:hover img { filter: none; opacity: 1; }
}
.motion .pt-seals[data-reveal] { opacity: 1; transform: none; }
.motion .pt-seals:not(.is-in) .pt-seal img { clip-path: inset(0 100% 0 0); }
.pt-seal:nth-child(2) img { transition-delay: 0s, 0s, 0.08s; }
.pt-seal:nth-child(3) img { transition-delay: 0s, 0s, 0.16s; }

/* ---------- Contact ---------- */

.pt-cta__grid { row-gap: 48px; align-items: start; }
.pt-cta__lead { grid-column: 1 / span 7; }
.pt-cta__title { margin-top: 20px; font-size: clamp(30px, 3.3vw, 54px); max-width: 15em; }
.pt-cta__note { margin-top: 16px; font-size: 14px; color: var(--muted); }
/* The actions follow the sentence they answer. */
.motion .pt-cta__title ~ .cta__actions,
.motion .pt-cta__title ~ .pt-cta__note { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.8s ease, transform 1.1s var(--ease); }
.motion .pt-cta__title.is-in ~ .cta__actions { opacity: 1; transform: none; transition-delay: 0.45s; }
.motion .pt-cta__title.is-in ~ .pt-cta__note { opacity: 1; transform: none; transition-delay: 0.6s; }
.pt-keys { grid-column: 9 / span 4; }
.pt-keys__head { padding-bottom: 12px; }
.pt-keys ul { border-top: 1px solid var(--line-2); }
.pt-keys li { border-bottom: 1px solid var(--line); }
.pt-keys a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 0 15px;
}
.pt-keys__name { font-size: 17px; letter-spacing: -0.01em; transition: color 0.25s ease; }
.pt-keys__mail { font-size: 14px; color: var(--muted); transition: color 0.25s ease; }
@media (hover: hover) {
  .pt-keys a:hover .pt-keys__mail { color: var(--signal); }
}
.pt-keys a:focus-visible .pt-keys__mail { color: var(--signal); }

@media (min-width: 1024px) and (max-width: 1279px) {
  .pt-dossier--c .pt-plate { grid-column: 8 / span 5; }
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
  .pt-head__title { grid-column: 1 / -1; }
  .pt-head__lede { grid-column: 1 / span 7; }
  .pt-roster { grid-column: 1 / -1; }
  .pt-dossier--a .pt-plate { grid-column: 1 / span 5; }
  .pt-dossier--a .pt-file { grid-column: 6 / span 7; }
  .pt-dossier--b .pt-plate { grid-column: 8 / span 5; }
  .pt-dossier--b .pt-file { grid-column: 1 / span 7; }
  .pt-dossier--c .pt-plate { grid-column: 8 / span 5; }
  .pt-dossier--c .pt-file { grid-column: 1 / span 7; }
  .pt-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-net__head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: end; }
  .pt-seals { margin-top: 0; }
  .pt-net__list { grid-column: 1 / -1; }
  .pt-cta__lead { grid-column: 1 / -1; }
  .pt-keys { grid-column: 1 / -1; }
}

/* ---------- Phone ---------- */

@media (max-width: 760px) {
  .pt-head__lede { grid-column: 1 / -1; }
  .pt-roster a { grid-template-columns: 40px minmax(0, 1fr) auto 18px; gap: 14px; }
  .pt-roster__thumb { width: 40px; height: 40px; }
  .pt-dossier .pt-plate,
  .pt-dossier .pt-file,
  .pt-dossier--c .pt-ledger { grid-column: 1 / -1; grid-row: auto; }
  .pt-dossier .pt-plate { max-width: 440px; }
  .pt-dossier--c .pt-plate { max-width: 340px; }
  .pt-net__head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pt-seals { max-width: 320px; }
  .pt-creds li { font-size: 16px; }
}
@media (max-width: 760px) {
  .pt-sm-hide { display: none; }
}
@media (max-width: 420px) {
  .pt-xs-hide { display: none; }
  .pt-keys a { grid-template-columns: minmax(0, 1fr); }
  .pt-keys__mail { justify-self: start; }
}
main .index > span:first-child { white-space: nowrap; }
@media (max-width: 420px) {
  .pt-roster__mail { display: none; }
  .pt-roster a { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 14px; }
  .pt-roster__thumb { width: 40px; height: 40px; }
  .pt-ledger { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pt-ledger__pre:empty { display: none; }
}

/* ---------- Reduced motion: no wipe, just the swap ---------- */

@media (prefers-reduced-motion: reduce) {
  .pt-plate__scan { display: none; }
}

/* The page head already gives the first dossier its air. */
.pt-head + .pt-dossier { padding-top: clamp(56px, 6vw, 96px); }

/* Roster rows set one after another, each on a ruled line. */
.motion .pt-roster[data-reveal] { opacity: 1; transform: none; }
.motion .pt-roster li > a { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.7s ease, transform 1s var(--ease); }
.motion .pt-roster li::after { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.motion .pt-roster li:nth-child(1)::after { transition-delay: 0.42s; }
.motion .pt-roster li:nth-child(2)::after { transition-delay: 0.5s; }
.motion .pt-roster li:nth-child(3)::after { transition-delay: 0.58s; }
.motion .pt-roster li:nth-child(1) > a { transition-delay: 0.52s; }
.motion .pt-roster li:nth-child(2) > a { transition-delay: 0.6s; }
.motion .pt-roster li:nth-child(3) > a { transition-delay: 0.68s; }
.motion .pt-roster.is-in li > a,
.motion .pt-roster.is-in li::after { opacity: 1; transform: none; }

/* Direct lines follow the sentence they answer: the head, then each line, 70ms apart. */
.motion .pt-keys[data-reveal] { opacity: 1; transform: none; }
.motion .pt-keys__head,
.motion .pt-keys li { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.7s ease, transform 1s var(--ease); transition-delay: calc(var(--n, 0) * 70ms + 0.5s); }
.motion .pt-keys.is-in .pt-keys__head,
.motion .pt-keys.is-in li { opacity: 1; transform: none; }

/* Flicked past: arrive complete, no half-built screens. */
.motion .pt-now, .motion .pt-now *, .motion .pt-now::before, .motion .pt-now::after,
.motion .pt-now *::before, .motion .pt-now *::after { transition: none !important; }