/* Homepage refinements: a little workshop precision around the drawn art. */
.manifesto {
  --heading: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --max: 74rem;
}

/* Keep the essay and chapter titles in Newsreader. Use the second voice sparingly. */
.hero--workshop h1,
.fast-row h3,
.framework-intro h2 {
  font-family: var(--heading);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  font-variation-settings: normal;
  text-wrap: balance;
}
.hero--workshop h1 { font-size: clamp(2.75rem, 4.9vw, 3.875rem); line-height: 1.02; }
.fast-row h3 { font-size: clamp(1.9rem, 3vw, 2.25rem); }
.framework-intro h2 { font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1; }

.manifesto :is(.sc, .stream-label, .hero-meta .expansion, .disc-count) {
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  font-variant-caps: normal;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.manifesto .beat .tag {
  font-family: var(--heading);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--ink-2);
}
.manifesto .moveon b { font-variant-caps: normal; letter-spacing: 0; font-style: italic; color: var(--ink-2); }
.manifesto :is(figcaption, .temptation) { color: var(--ink-2); }
.manifesto .nav ul { font-family: var(--text); font-size: 1.15rem; font-style: italic; gap: 1.75rem; }
.manifesto .nav ul a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.manifesto .nav ul a:hover { text-decoration-color: currentColor; }
.manifesto .btn { font-family: var(--text); font-size: 1.05rem; line-height: 1.3; padding: 0.85rem 1rem; }
.manifesto a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.manifesto .footer-links a { white-space: nowrap; }
.manifesto footer .ascii { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }

/* A real column offset, with the character sharing the opening's full height. */
.hero--workshop { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3.5rem); }
.hero--workshop .huh { font-size: clamp(5rem, 13vw, 10.5rem); white-space: nowrap; }
.hero--workshop .lead { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.4; }
.hero-copy, .hero-figure { min-width: 0; }
.hero-meta .wordmark { font-family: var(--heading); font-size: 1.3rem; letter-spacing: 0.12em; padding-right: 0.75rem; }
.hero-figure { position: relative; isolation: isolate; }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: 18% 0 3.5rem 1rem;
  border: 1px solid var(--rule);
  transform: rotate(2deg);
  z-index: -1;
}
.hero-figure .hero-sticker { max-width: 24rem; filter: drop-shadow(0 4px 7px rgba(23, 21, 15, 0.08)); }
.hero-figure figcaption { border-top: 1px solid var(--rule); padding-top: 0.8rem; margin-top: 1rem; }

@media (min-width: 800px) {
  .hero--workshop .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; }
}
@media (min-width: 1020px) {
  .hero--workshop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
  .hero--workshop > .huh { grid-column: 1 / 8; grid-row: 1; margin-bottom: 1.75rem; }
  .hero--workshop > .hero-grid { display: contents; }
  .hero-copy { grid-column: 2 / 8; grid-row: 2; }
  .hero-figure { grid-column: 8 / -1; grid-row: 1 / 3; align-self: end; }
}

/* Keep the four disciplines unnumbered. The shifted baselines supply the play. */
.fast-row > li { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.fast-row .mark { width: 5rem; }
.fast-row .line { font-size: 1.3rem; line-height: 1.25; }
.fast-test { border-top: 1px solid var(--rule); padding-top: 1.5rem; max-width: none; }
@media (min-width: 1020px) {
  .fast-intro { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 4rem; align-items: end; }
  .fast-intro .sc { grid-column: 1 / -1; }
  .fast-intro h2 { margin-bottom: 0; }
  .fast-intro .lead { font-size: 1.4rem; margin-bottom: 0; }
  .fast-row { align-items: start; padding-bottom: 1.5rem; }
  .fast-row > li:nth-child(even) { margin-top: 1.5rem; }
}

/* A typographic pause before the guided, alternating discipline sequence. */
.framework-intro { max-width: none; border-top: 1px solid var(--rule); padding-top: 2rem; }
@media (min-width: 900px) {
  .framework-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 4rem; }
  .framework-intro .sc { grid-column: 1 / -1; }
  .framework-intro h2 { grid-column: 1; grid-row: 2 / 4; max-width: 12ch; }
  .framework-intro .lead { grid-column: 2; grid-row: 2; font-size: 1.5rem; }
  .framework-intro .small { grid-column: 2; grid-row: 3; margin-bottom: 0; }
  .manifesto .disc-grid > * { min-width: 0; }
}

/* Let phone readers use the whole column, with the art at an intentional scale. */
@media (max-width: 799px) {
  .hero-figure { width: min(100%, 22rem); justify-self: end; margin-top: 0.5rem; }
  .hero-figure .hero-sticker { max-width: 18rem; }
  .hero-figure figcaption { font-size: 0.95rem; }
}
@media (max-width: 619px) {
  .manifesto .nav { gap: 1rem; }
  .manifesto .nav ul { gap: 0.65rem 1.2rem; flex-wrap: wrap; font-size: 1rem; }
  .hero--workshop .hero-meta { gap: 0.65rem; }
  .hero--workshop .hero-links { gap: 1rem; align-items: center; }
  .hero--workshop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem 1rem; }
  .hero--workshop > .huh { grid-column: 1; grid-row: 1; align-self: center; font-size: clamp(3.25rem, 17vw, 4.25rem); margin: 0; }
  .hero--workshop > .hero-grid { display: contents; }
  .hero-copy { grid-column: 1 / -1; grid-row: 2; }
  .hero-figure { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
  .hero-figure::before { display: none; }
  .hero-figure figcaption { border: 0; padding: 0; margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.3; }
  .manifesto .beat { padding: 1.25rem; }
  .manifesto :is(.disc--indent, .disc--mosaic) .beat:nth-child(n) { margin-left: 0; }
  .framework-intro h2 { max-width: 13ch; }
}

/* The example gets the room; the discipline name gets the first word. */
.manifesto .disc-grid > * { min-width: 0; }
.manifesto .beat code { overflow-wrap: anywhere; }
.manifesto .disc-sticky h3 { font-size: clamp(3.25rem, 5vw, 4rem); }
.disc-signoff { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.manifesto .disc-signoff .mark { width: 8.5rem; margin: 0; flex: 0 0 auto; }
.manifesto .disc-signoff .disc-count { margin: 0; }
.manifesto .beat { max-width: 40rem; padding: 2rem 2.25rem; }
.manifesto .beat h4 { font-size: clamp(1.65rem, 2.6vw, 2.1rem); line-height: 1.12; margin-bottom: 1rem; }
.manifesto .beat p { font-size: 1.25rem; line-height: 1.5; }
.manifesto .beat .turn { font-size: 1.2rem; padding-top: 1rem; margin-top: 1rem; }
.manifesto .disc--mosaic .beat:nth-child(n) { max-width: 40rem; }
@media (min-width: 1100px) {
  .manifesto .disc-grid { max-width: 78rem; grid-template-columns: 22rem minmax(0, 1fr); gap: 3rem; }
  .manifesto .disc--right .disc-grid { grid-template-columns: minmax(0, 1fr) 22rem; }
  .manifesto .disc--indent .beat:nth-child(even),
  .manifesto .disc--mosaic .beat:nth-child(3n+2) { margin-left: 1.5rem; }
  .manifesto .disc--indent .beat:nth-child(4n),
  .manifesto .disc--mosaic .beat:nth-child(3n) { margin-left: 2.5rem; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .manifesto .disc-grid { grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; }
  .manifesto .disc--right .disc-grid { grid-template-columns: minmax(0, 1fr) 17rem; }
}
@media (max-width: 1099px) {
  .manifesto :is(.disc--indent, .disc--mosaic) .beat:nth-child(n) { margin-left: 0; }
  .manifesto .beat { padding: 1.75rem; }
}
@media (max-height: 940px) and (min-width: 900px) {
  .disc-signoff { margin-top: 1.25rem; }
  .manifesto .disc-signoff .mark { width: 7rem; }
  .manifesto .disc-sticky h3 { font-size: 3.25rem; }
}
@media (max-width: 619px) {
  .manifesto .beat { padding: 1.5rem; }
  .manifesto .beat p { font-size: 1.15rem; }
  .manifesto .beat .turn { font-size: 1.1rem; }
  .manifesto .beat .tag { font-size: 1rem; }
  .manifesto .disc-signoff .mark { width: 7rem; }
}

/* Two further ways to carry learning forward, alongside the illustrated endings. */
.manifesto .outcome-practice { padding-top: 1.5rem; }
.manifesto .outcome-practice h4 { font-family: var(--heading); font-weight: 600; font-size: 2rem; margin-bottom: 0.75rem; }
.manifesto .outcome-practice p { max-width: 34rem; }
@media (min-width: 1000px) {
  .manifesto .outcome-practice { grid-column: span 2; }
}

/* Five states, one row of stamps. The two practice notes follow underneath. */
@media (min-width: 1040px) {
  .manifesto .outcomes { grid-template-columns: repeat(5, 1fr); }
  .manifesto .outcome-practice { grid-column: span 2; }
}