/* PaperFlow · the reading library: the readings, the library index, the
   topics and the editorial standards. Same paper as the home: each part is a
   sheet laid over the one before, torn across the top; loose notes are
   .piece, torn on all four sides; covers are cut-outs set straight on the
   paper. The build links this file on every page of the site, so every rule
   here is scoped under .ed-page, the body class of these pages only.
   Tilts use the `rotate` property, so the arrival animation in styles.css
   (which animates `transform`) never straightens them. Pieces that hold
   paragraphs stay level: tilted text renders soft and its lines slope. */

.ed-page {
  /* the title column's share of the hero, and the title's largest size */
  --ed-col: 0.567;
  --ed-title-max: 64px;
  --ed-pad-top: clamp(36px, 3.4vw, 56px);
  --ed-pad-bottom: calc(var(--section) + 12px);
  --ed-block: clamp(48px, 4.4vw, 72px);
}
.ed-page .editorial-main:focus {
  outline: none;
}
.ed-page .ed-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.reveal-ready .ed-page [data-reveal]:not(.entering) {
  opacity: 0;
}
.ed-page .ed-small {
  font-size: var(--step-small);
  line-height: 1.55;
}
/* a link that wraps keeps its arrow at the end of its words */
.ed-page .text-link {
  display: inline;
}

/* ---------- breadcrumbs ---------- */

.ed-page .ed-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-small);
}
.ed-page .ed-crumbs li + li::before {
  content: "/" / "";
  margin-right: 10px;
  color: var(--ink-soft);
}

/* ---------- the opening: title and dek beside the cut-out ---------- */

.ed-page .ed-hero {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* crumbs, room, title, dek, byline, link, extra, room */
  grid-template-rows: auto 1fr auto auto auto auto auto 1fr;
  column-gap: var(--gap);
  padding: 4px var(--inline) clamp(64px, 5.4vw, 80px);
}
/* the opening is a sheet of its own, laid on the desk just under the header */
.ed-page .ed-hero.sheet {
  --sheet: var(--paper);
  --edge-x: 15%;
  margin-top: 46px;
  padding-top: clamp(16px, 1.8vw, 28px);
}
.ed-page .ed-hero > * {
  grid-column: 1 / span 7;
}
.ed-page .ed-hero > .ed-crumbs {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.ed-page .ed-title {
  /* two lines whatever the length: the column's width over the characters
     (--len counts the title plus its longest word, set by the templates).
     It never goes under 21px: on a 390px phone 21 of the 400 titles cannot
     hold two lines at that size and take three. */
  grid-row: 3;
  font-size: clamp(21px, 100cqi * var(--ed-col) * 4.4 / var(--len, 48), var(--ed-title-max));
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.ed-page .ed-dek,
.ed-page .ed-hero > .lead {
  grid-row: 4;
  max-width: 46ch;
  margin-top: clamp(16px, 1.6vw, 24px);
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.45;
}
.ed-page .ed-byline {
  grid-row: 5;
  margin-top: 22px;
  font-size: var(--step-small);
  color: var(--ink-soft);
}
.ed-page .ed-how {
  grid-row: 6;
  margin-top: 10px;
}
.ed-page .ed-hero > .ed-cover {
  grid-column: 8 / -1;
  grid-row: 2 / -1;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  rotate: 1.6deg;
}

/* an upright cover: a narrower column for it, a wider one for the title */
.ed-page .ed-hero-portrait {
  --ed-col: 0.65;
}
.ed-page .ed-hero-portrait > :not(.ed-crumbs) {
  grid-column: 1 / span 8;
}
.ed-page .ed-hero-portrait > .ed-cover {
  grid-column: 9 / -1;
  max-height: 460px;
}

@media (prefers-reduced-motion: no-preference) {
  .ed-page .ed-hero > :is(.ed-title, .ed-dek, .lead, .ed-byline, .ed-how, .ed-context) {
    animation: ed-rise 0.8s var(--ease-out) both;
  }
  .ed-page .ed-hero > :is(.ed-dek, .lead) {
    animation-delay: 0.08s;
  }
  .ed-page .ed-hero > :is(.ed-byline, .ed-how) {
    animation-delay: 0.16s;
  }
  .ed-page .ed-hero > .ed-cover {
    animation: ed-drop 0.9s var(--ease-out) 0.15s both;
  }
  .ed-page .ed-hero .ed-topic {
    animation: ed-rise 0.7s var(--ease-out) both;
    animation-delay: calc(0.2s + var(--i, 0) * 60ms);
  }
}
@keyframes ed-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}
@keyframes ed-drop {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(1.04);
  }
}

/* ---------- the reading: prose on the left, loose notes beside it ---------- */

.ed-page .ed-body {
  --sheet: var(--paper-raised);
  --edge-x: 35%;
  padding: var(--ed-pad-top) var(--inline) var(--ed-pad-bottom);
}
/* The band: the prose with its notes beside it. The template picks, for each
   reading, where the key idea and "Para pensar" go and the notes column's
   share (--notes), so the two columns end close together; the prose keeps
   its measure whatever its column. */
.ed-page .ed-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--notes, 46%));
  align-items: start;
  column-gap: clamp(36px, 4.4vw, 80px);
}
/* the key idea first in the markup (so a phone reads it first), at the top
   of the notes on a wide screen */
.ed-page .ed-band-key {
  grid-template-rows: auto 1fr;
  row-gap: 30px;
}
.ed-page .ed-band-key > .ed-key {
  grid-column: 2;
  grid-row: 1;
}
.ed-page .ed-band-key > .ed-main-col {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.ed-page .ed-band-key > .ed-side-col {
  grid-column: 2;
  grid-row: 2;
}
.ed-page .ed-key-wide + .ed-band {
  margin-top: var(--ed-block);
}
.ed-page .ed-main-col {
  display: grid;
  gap: var(--ed-block);
}
.ed-page .ed-side-col {
  display: grid;
  gap: 30px;
}
.ed-page .ed-note {
  --piece-w: 38px;
  padding: 8px 12px;
}
/* the key idea is the one short note that tilts, like the home's notes */
.ed-page .ed-key {
  --focus: var(--mustard);
  color: var(--paper-raised);
  rotate: -0.8deg;
}
.ed-page .ed-method p {
  font-size: 18px;
  line-height: 1.58;
}
.ed-page .ed-body h2 {
  margin-bottom: 18px;
  font-size: clamp(28px, 2.6vw, 40px);
}
.ed-page .ed-note h2 {
  margin-bottom: 14px;
  font-size: clamp(24px, 2vw, 30px);
}
.ed-page .ed-key p {
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.36;
  letter-spacing: -0.015em;
}
.ed-page .ed-prose p,
.ed-page .ed-prose li,
.ed-page .ed-limits p,
.ed-page .ed-limits li {
  font-size: 19px;
  line-height: 1.62;
}
/* about 70 characters a line of Apfel Grotezk */
.ed-page .ed-prose p,
.ed-page .ed-prose ul {
  max-width: 31.5em;
}
.ed-page .ed-prose p + p {
  margin-top: 1em;
}
.ed-page :is(.ed-body, .ed-context) ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-page :is(.ed-body, .ed-context) li {
  position: relative;
  padding-left: 26px;
}
.ed-page :is(.ed-body, .ed-context) li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mustard);
}
.ed-page .ed-limits li::before {
  background: var(--coral);
}
/* the key idea laid across the top of the reading, its heading beside it */
.ed-page .ed-key-wide {
  --piece-w: 46px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  align-items: baseline;
  column-gap: clamp(24px, 3vw, 48px);
  padding: 10px 22px;
  rotate: -0.5deg;
}
.ed-page .ed-key-wide h2 {
  margin: 0;
}
.ed-page .ed-key-wide p {
  max-width: 48ch;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

/* the original study, on a loose sheet across the column: its title over
   the journal and links on one side and the licence notes on the other */
.ed-page .ed-source {
  --piece-w: 54px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 14px clamp(32px, 4vw, 64px);
  align-items: start;
  margin-top: var(--ed-block);
  padding: 6px 16px;
  overflow-wrap: anywhere;
}
.ed-page .ed-source > :is(h2, .ed-source-title) {
  grid-column: 1 / -1;
}
.ed-page .ed-source h2 {
  margin-bottom: 0;
  font-size: clamp(26px, 2.2vw, 34px);
}
.ed-page .ed-source-title {
  max-width: 62ch;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ed-page .ed-source-meta,
.ed-page .ed-source-notes {
  display: grid;
  align-content: start;
  gap: 12px;
}
.ed-page .ed-source-link .text-link {
  font-size: 18px;
}
.ed-page .ed-source-notes p {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.55;
}
.ed-page .ed-source summary {
  display: inline;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
  list-style: none;
  cursor: pointer;
}
.ed-page .ed-source summary::-webkit-details-marker {
  display: none;
}
.ed-page .ed-source summary::after {
  content: " +";
}
.ed-page .ed-source details[open] summary::after {
  content: " −";
}
.ed-page .ed-source details p {
  margin-top: 8px;
  font-size: var(--step-small);
}

/* ---------- cards: a cover cut-out and its title ---------- */

.ed-page .ed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(44px, 3.8vw, 64px) var(--gap);
}
.ed-page .ed-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
}
/* every cover gets the same box, so the titles in a row line up (the box
   only replaces the image's own ratio here, never before it loads) */
.ed-page .ed-card-cover {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: 50% 100%;
  rotate: var(--tilt, -1.4deg);
  transition: rotate 0.35s var(--ease-out), translate 0.35s var(--ease-out);
}
.ed-page .ed-card:nth-child(3n + 2) {
  --tilt: 1.3deg;
}
.ed-page .ed-card:nth-child(3n) {
  --tilt: -0.5deg;
}
.ed-page .ed-card:nth-child(5n + 4) {
  --tilt: 2deg;
}
.ed-page .ed-card:hover .ed-card-cover {
  rotate: 0deg;
  translate: 0 -6px;
}
.ed-page .ed-card-text {
  display: grid;
  align-content: start;
  gap: 8px;
}
.ed-page .ed-card h3 {
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.16;
  letter-spacing: -0.025em;
}
.ed-page .ed-card h3 a {
  text-decoration: none;
}
/* the whole card opens the reading */
.ed-page .ed-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ed-page .ed-card:hover h3 a,
.ed-page .ed-card h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.ed-page .ed-card h3 a:focus-visible {
  outline: none;
}
.ed-page .ed-card:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 10px;
}
.ed-page .ed-card-meta {
  font-size: var(--step-small);
  color: var(--ink-soft);
}
.ed-page .ed-card-dek {
  font-size: 16px;
  line-height: 1.5;
}
/* a shelf that does not end on a full row closes with a torn note in the
   cells left over (the template counts them into --rest4 and --rest2) */
.ed-page .ed-shelf-end {
  --piece-w: 40px;
  grid-column: span var(--rest4);
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 18px 32px;
  padding: 12px 20px;
}
.ed-page .ed-shelf-end-copy {
  display: grid;
  justify-items: start;
  gap: 18px;
}
/* a compass cut-out over the words in one cell, beside them across several */
.ed-page .ed-shelf-end-art {
  grid-row: 1;
  justify-self: start;
  width: auto;
  height: 120px;
  rotate: -6deg;
}
.ed-page .ed-shelf-end-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  align-items: center;
}
.ed-page .ed-shelf-end-wide .ed-shelf-end-art {
  grid-row: auto;
  justify-self: center;
  height: min(300px, 100%);
  max-height: 300px;
}
.ed-page .ed-shelf-end p {
  max-width: 30ch;
  font-size: 17px;
  line-height: 1.45;
}
.ed-page .ed-shelf-end .ed-shelf-end-question {
  max-width: 14ch;
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* ---------- related readings ---------- */

.ed-page .ed-related {
  --sheet: var(--mint);
  --edge-x: 70%;
  padding: var(--ed-pad-top) var(--inline) var(--ed-pad-bottom);
}
.ed-page .ed-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 40px;
}
.ed-page :is(.ed-related-head, .ed-shelf-head, .ed-others) h2 {
  font-size: var(--step-head);
}
.ed-page .ed-grid-related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 4vw, 64px);
}
.ed-page .ed-grid-related h3 {
  font-size: clamp(20px, 1.6vw, 24px);
}
.ed-page .ed-grid-related .ed-card-dek {
  font-size: 17px;
}

/* ---------- topics: the app's topic cards ---------- */

.ed-page .ed-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(12px, 1.6vw, 24px);
}
.ed-page .ed-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  gap: 2px;
  text-align: center;
  text-decoration: none;
}
.ed-page .ed-topic-art {
  width: 100%;
  max-width: 168px;
  /* the cards differ in height; one box keeps their names on a line */
  aspect-ratio: 440 / 637;
  object-fit: contain;
  object-position: 50% 100%;
  margin-bottom: 10px;
  rotate: var(--tilt, -2deg);
  transition: rotate 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.ed-page .ed-topic:nth-child(even) {
  --tilt: 2.4deg;
}
.ed-page .ed-topic:nth-child(3n) {
  --tilt: -0.8deg;
}
.ed-page .ed-topic:nth-child(2) { --i: 1; }
.ed-page .ed-topic:nth-child(3) { --i: 2; }
.ed-page .ed-topic:nth-child(4) { --i: 3; }
.ed-page .ed-topic:nth-child(5) { --i: 4; }
.ed-page .ed-topic:nth-child(6) { --i: 5; }
.ed-page .ed-topic:nth-child(7) { --i: 6; }
.ed-page .ed-topic:nth-child(8) { --i: 7; }
.ed-page .ed-topic:hover .ed-topic-art {
  rotate: 0deg;
  translate: 0 -6px;
}
.ed-page .ed-topic-name {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}
.ed-page .ed-topic:hover .ed-topic-name {
  text-decoration-color: currentColor;
}
.ed-page .ed-topic-count {
  font-size: var(--step-small);
  color: var(--ink-soft);
}

/* ---------- the library index ---------- */

.ed-page .ed-hero-library {
  --ed-col: 0.48;
  --ed-title-max: 104px;
}
.ed-page .ed-hero-library > :not(.ed-crumbs) {
  grid-column: 1 / span 6;
}
.ed-page .ed-hero-library > .ed-topics {
  grid-column: 7 / -1;
  grid-row: 2 / -1;
  align-self: center;
  padding-left: clamp(0px, 2vw, 32px);
}
.ed-page .ed-shelf {
  --sheet: var(--paper-raised);
  --edge-x: 60%;
  padding: var(--ed-pad-top) var(--inline) var(--ed-pad-bottom);
}
.ed-page .ed-shelf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px var(--gap);
  margin-bottom: clamp(40px, 4vw, 64px);
}
.ed-page .ed-tools {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: end;
  gap: 14px;
}
.ed-page .ed-tools label {
  display: grid;
  gap: 8px;
  font-weight: 700;
  font-size: var(--step-small);
}
.ed-page .ed-tools :is(input, select) {
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background-color: var(--paper-deep);
  color: var(--ink);
  font: 400 17px / 1.2 var(--text);
}
.ed-page .ed-tools input {
  width: min(28vw, 400px);
}
.ed-page .ed-tools input::placeholder {
  color: var(--ink-soft);
}
.ed-page .ed-tools select {
  appearance: none;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230b1020' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 14px auto;
  cursor: pointer;
}
.ed-page .ed-results {
  font-size: var(--step-small);
  color: var(--ink-soft);
}
.ed-page .ed-empty {
  margin-top: 28px;
  font-size: 19px;
}
.ed-page .ed-more {
  display: flex;
  margin: clamp(56px, 5vw, 80px) auto 0;
}

/* ---------- a topic ---------- */

.ed-page .ed-hero-topic {
  --ed-title-max: 104px;
}
.ed-page .ed-hero-topic > .ed-cover {
  max-width: 380px;
  max-height: 560px;
  rotate: 2.2deg;
}
.ed-page .ed-context {
  --piece-w: 38px;
  grid-row: 7;
  margin-top: clamp(32px, 3vw, 48px);
  padding: 8px 14px;
}
.ed-page .ed-context h2 {
  margin-bottom: 12px;
  font-size: clamp(24px, 2vw, 30px);
}
.ed-page .ed-context p {
  max-width: 62ch;
}
.ed-page .ed-context ul {
  margin: 16px 0;
}
.ed-page .ed-context li {
  font-weight: 700;
}
.ed-page .ed-context li::before {
  background: var(--forest);
}
.ed-page .ed-others {
  --sheet: var(--forest);
  --focus: var(--mustard);
  --edge-x: 20%;
  padding: var(--ed-pad-top) var(--inline) var(--ed-pad-bottom);
  color: var(--paper-raised);
}
.ed-page .ed-others .ed-topics {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: clamp(40px, 4vw, 60px);
}

/* ---------- the editorial standards ---------- */

.ed-page .ed-hero-method {
  --ed-title-max: 88px;
}
.ed-page .ed-hero-method > .ed-cover {
  max-height: 440px;
  rotate: -2deg;
}
.ed-page .ed-standards {
  --sheet: var(--paper-raised);
  --edge-x: 25%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(40px, 3.6vw, 56px) clamp(32px, 5vw, 96px);
  padding: var(--ed-pad-top) var(--inline) var(--ed-pad-bottom);
}
.ed-page .ed-standard h2 {
  margin-bottom: 16px;
  font-size: clamp(26px, 2.3vw, 36px);
}
.ed-page .ed-standard p {
  max-width: 60ch;
  font-size: 19px;
  line-height: 1.62;
}
.ed-page .ed-standard p + p {
  margin-top: 14px;
}
.ed-page .ed-corrections {
  --piece-w: 38px;
  padding: 8px 14px;
}

/* ---------- waitlist ---------- */

.ed-page .ed-waitlist {
  --sheet: var(--mustard);
  --edge-x: 45%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--gap);
  padding: var(--ed-pad-top) var(--inline) clamp(56px, 5vw, 80px);
  color: var(--ink);
}
.ed-page .ed-waitlist-copy {
  grid-column: 1 / span 7;
}
.ed-page .ed-waitlist h2 {
  max-width: 14ch;
  font-size: clamp(40px, 5.6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.ed-page .ed-waitlist-copy > p {
  max-width: 40ch;
  margin-top: 22px;
  font-size: 21px;
  line-height: 1.5;
}
.ed-page .ed-waitlist .button {
  margin-top: 30px;
}
.ed-page .ed-waitlist-copy > .ed-small {
  margin-top: 16px;
  font-size: var(--step-small);
}
.ed-page .ed-waitlist-art {
  grid-column: 8 / -1;
  justify-self: center;
  width: min(100%, 440px);
  rotate: -2deg;
}

/* ---------- the hand-written pilot reading (lecturas/habitos-21-dias) ---------- */

/* the pilot keeps its approved markup, so its parts are placed on a grid:
   the two short sections with the key idea beside them, then the limits
   and the source side by side, then the colophon */
.ed-page .ed-pilot-body {
  display: grid;
  grid-template-columns: minmax(0, min(680px, 57%)) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(36px, 4.4vw, 80px);
}
.ed-page .ed-pilot-body .ed-a {
  grid-column: 1;
  grid-row: 1;
}
.ed-page .ed-pilot-body .ed-b {
  grid-column: 1;
  grid-row: 2;
  margin-top: var(--ed-block);
}
.ed-page .ed-pilot-body > .ed-key {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.ed-page .ed-pilot-body > .ed-key p,
.ed-page blockquote.ed-key {
  margin: 0;
  font-weight: 700;
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.02em;
}
.ed-page .ed-pilot-body > .ed-limits {
  --piece-w: 38px;
  grid-column: 1;
  grid-row: 3;
  align-self: stretch;
  margin-top: var(--ed-block);
  padding: 8px 12px;
}
/* the source keeps its approved markup, so it is cut as a .piece here */
.ed-page .ed-pilot-body > .reading-source {
  --piece: url("/assets/paper/piece-sky.png");
  --piece-fill: #d8e2f0;
  --piece-w: 38px;
  grid-column: 2;
  grid-row: 3;
  align-self: stretch;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: 12px;
  margin-top: var(--ed-block);
  padding: 10px 14px;
  border: var(--piece-w) solid transparent;
  border-image: var(--piece) 64 fill / var(--piece-w) / 0 stretch;
  overflow-wrap: anywhere;
}
.ed-page .ed-pilot-body > .reading-source::after {
  content: "";
  position: absolute;
  inset: calc(var(--piece-w) * -0.36);
  z-index: -1;
  background: var(--piece-fill);
  pointer-events: none;
}
.ed-page .reading-source > p:first-child {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
}
.ed-page .reading-source > a {
  font-weight: 700;
  font-size: 18px;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.ed-page .reading-source .source-note {
  font-size: 16px;
  line-height: 1.55;
}
/* the publication note and the method link, after the reading */
.ed-page .ed-pilot-body > .ed-pilot-colophon {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  margin-top: 40px;
}
.ed-page .ed-pilot-colophon > p {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.55;
}

/* ---------- wide screens ---------- */

@media (min-width: 1101px) {
  /* the standards sit two by two on the rows of one grid (heading, text,
     link), so the paragraphs of a pair start on one line; a heading shorter
     than its neighbour sits down on its text */
  .ed-page .ed-standard {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .ed-page .ed-standard h2 {
    align-self: end;
  }
}
/* on a large screen the prose stops at its measure while the notes keep
   widening; a size up for the notes keeps the two columns ending together,
   as the template planned them at 1440px */
/* just over tablet width the torn edges take a larger share of a narrow
   notes column, so it gets a little more room */
@media (min-width: 1101px) and (max-width: 1300px) {
  .ed-page .ed-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--notes, 46%) + 1.5%));
  }
}
@media (min-width: 1600px) {
  .ed-page .ed-method p {
    font-size: 19px;
  }
  .ed-page .ed-limits li {
    font-size: 20px;
  }
}

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
  .ed-page,
  .ed-page :is(.ed-hero-library, .ed-hero-portrait) {
    --ed-col: 1;
  }
  .ed-page .ed-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .ed-page .ed-hero > *,
  .ed-page .ed-hero-portrait > :not(.ed-crumbs),
  .ed-page .ed-hero-library > :not(.ed-crumbs),
  .ed-page .ed-hero-library > .ed-topics {
    grid-column: 1;
    grid-row: auto;
  }
  .ed-page .ed-hero > .ed-crumbs {
    grid-row: 1;
  }
  .ed-page .ed-hero > .ed-cover {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 620px);
    max-height: 420px;
    margin-bottom: clamp(12px, 4vw, 44px);
  }
  .ed-page .ed-hero-topic > .ed-cover {
    width: min(56%, 300px);
  }
  .ed-page .ed-hero-library > .ed-topics {
    margin-top: 48px;
    padding-left: 0;
  }
  /* one column, in reading order */
  .ed-page .ed-band {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 44px;
  }
  .ed-page .ed-band > :is(.ed-key, .ed-main-col, .ed-side-col) {
    grid-column: 1;
    grid-row: auto;
  }
  .ed-page .ed-key-wide + .ed-band {
    margin-top: 44px;
  }
  .ed-page .ed-key-wide {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
  }
  .ed-page .ed-key-wide h2 {
    margin-bottom: 14px;
  }
  .ed-page .ed-key-wide p {
    font-size: clamp(20px, 2.4vw, 24px);
  }
  .ed-page .ed-main-col {
    gap: 44px;
  }
  .ed-page .ed-side-col {
    gap: 36px;
  }
  .ed-page .ed-note {
    max-width: 680px;
  }
  .ed-page .ed-pilot-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .ed-page .ed-pilot-body > :is(.ed-a, .ed-b, .ed-key, .ed-limits, .reading-source, .ed-pilot-colophon) {
    grid-column: 1;
    grid-row: auto;
  }
  .ed-page .ed-pilot-body > :is(.ed-key, .ed-limits, .reading-source) {
    max-width: 680px;
    margin: 44px 0 0;
  }
  .ed-page .ed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ed-page .ed-shelf-end {
    grid-column: span var(--rest2);
  }
  .ed-page .ed-shelf-end-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .ed-page .ed-shelf-end-wide .ed-shelf-end-art {
    grid-row: 1;
    justify-self: start;
    height: 120px;
  }
  .ed-page .ed-grid-related {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ed-page .ed-shelf-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .ed-page .ed-tools {
    grid-column: 1;
    grid-row: auto;
    flex-wrap: wrap;
  }
  .ed-page .ed-tools label:first-child {
    flex: 1 1 260px;
  }
  .ed-page .ed-tools input {
    width: 100%;
  }
  .ed-page .ed-others .ed-topics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ed-page .ed-standards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .ed-page .ed-source {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- phone ---------- */

@media (max-width: 700px) {
  .ed-page .ed-hero > .ed-crumbs {
    margin-bottom: 20px;
  }
  .ed-page .ed-hero > .ed-cover {
    width: 100%;
    max-height: 260px;
  }
  .ed-page .ed-title {
    letter-spacing: -0.045em;
  }
  .ed-page .ed-dek,
  .ed-page .ed-hero > .lead {
    font-size: 18px;
  }
  /* a reading's title can be as small as 22px here; its dek stays below it */
  .ed-page.ed-article .ed-hero > :is(.ed-dek, .lead) {
    font-size: 17px;
  }
  .ed-page .ed-body h2 {
    font-size: 28px;
  }
  .ed-page .ed-note h2,
  .ed-page .ed-context h2 {
    font-size: 24px;
  }
  .ed-page .ed-prose p,
  .ed-page .ed-prose li,
  .ed-page .ed-limits p,
  .ed-page .ed-limits li,
  .ed-page .ed-standard p {
    font-size: 18px;
  }
  .ed-page .ed-key p,
  .ed-page blockquote.ed-key,
  .ed-page .ed-pilot-body > .ed-key p {
    font-size: 20px;
  }
  .ed-page :is(.ed-note, .ed-source, .ed-context, .ed-corrections, .ed-shelf-end),
  .ed-page .ed-pilot-body > :is(.ed-limits, .reading-source) {
    --piece-w: 34px;
    padding: 2px 4px;
  }
  /* two covers to a row, each over its title */
  .ed-page .ed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 16px;
  }
  .ed-page .ed-card {
    gap: 12px;
  }
  .ed-page .ed-card-cover {
    aspect-ratio: 4 / 3;
  }
  .ed-page .ed-card-text {
    gap: 6px;
  }
  .ed-page .ed-card h3,
  .ed-page .ed-grid-related h3 {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .ed-page .ed-card-dek {
    display: none;
  }
  /* the first related reading runs across, the other two share a row */
  .ed-page .ed-grid-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ed-page .ed-grid-related > :first-child {
    grid-column: 1 / -1;
  }
  .ed-page .ed-grid-related > :first-child .ed-card-cover {
    aspect-ratio: auto;
    max-height: 250px;
  }
  .ed-page .ed-grid-related > :first-child h3 {
    font-size: 22px;
    letter-spacing: -0.03em;
  }
  .ed-page .ed-grid-related > :first-child .ed-card-dek {
    display: block;
  }
  /* a phone's half column is too narrow for the note: it runs across, and a
     last reading left alone on its row runs across above it */
  .ed-page .ed-shelf-end {
    grid-column: 1 / -1;
    gap: 14px;
  }
  .ed-page .ed-grid-library > .ed-card:nth-child(odd):has(+ .ed-shelf-end) {
    grid-column: 1 / -1;
  }
  .ed-page .ed-grid-library > .ed-card:nth-child(odd):has(+ .ed-shelf-end) .ed-card-cover {
    aspect-ratio: auto;
    max-height: 250px;
  }
  .ed-page .ed-grid-library > .ed-card:nth-child(odd):has(+ .ed-shelf-end) h3 {
    font-size: 22px;
    letter-spacing: -0.03em;
  }
  .ed-page .ed-shelf-end .ed-shelf-end-question {
    font-size: 22px;
  }
  .ed-page .ed-shelf-end p {
    font-size: 16px;
  }
  .ed-page .ed-shelf-end .button {
    min-height: 48px;
    padding: 0 18px;
    font-size: 16px;
  }
  .ed-page .ed-topics,
  .ed-page .ed-others .ed-topics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 10px;
  }
  .ed-page .ed-topic-art {
    margin-bottom: 6px;
  }
  .ed-page .ed-topic-name {
    font-size: 14px;
    letter-spacing: -0.03em;
  }
  .ed-page .ed-topic-count {
    font-size: 13px;
  }
  .ed-page .ed-tools label {
    flex: 1 1 100%;
  }
  .ed-page .ed-tools select {
    width: 100%;
  }
  .ed-page .ed-waitlist {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  .ed-page .ed-waitlist-copy,
  .ed-page .ed-waitlist-art {
    grid-column: 1;
  }
  .ed-page .ed-waitlist-art {
    width: min(78%, 320px);
  }
  .ed-page .ed-waitlist-copy > p {
    font-size: 18px;
  }
  .ed-page .ed-waitlist .button {
    width: 100%;
  }
}