/* framework.css  ·  one framework, at /frameworks/{id}
 *
 * Linked by every page under /frameworks/ and by nothing else. It lives
 * here rather than in style.css for the reason drill.css does: style.css is
 * downloaded by every reader on every page and is held under 30KB gzipped,
 * which tools/score.js checks. Styles for one page group belong with it.
 *
 * The index page at /frameworks uses the .fw- classes in style.css. These are
 * .fwp- so the two cannot collide, which matters because both describe a
 * thing called a framework and would otherwise fight over .fw-name.
 *
 * Generated by tools/make-framework-pages.js.
 */

.fwp-back { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.fwp-back:hover { color: var(--navy); border-bottom-color: var(--bronze); }

.fwp-group {
  font-family: "Anton", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 0.3rem;
}

/* The purpose is the line that decides whether to read on, so it is set in
   the reading face and larger than body text. Same argument as .dp-why. */
.fwp-purpose {
  font-family: "Newsreader", serif;
  font-weight: 300;
  font-size: clamp(1.12rem, 3.1vw, 1.42rem);
  line-height: 1.38;
  margin: 0.6rem 0 0.9rem;
}

.fwp-situation {
  font-size: 0.98rem;
  color: var(--muted);
  border-left: 2px solid var(--bronze);
  padding-left: 0.85rem;
  margin-bottom: 0.9rem;
}

.fwp-meta {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 2rem;
}

.fwp-block { margin: 2rem 0; }

.fwp-h {
  font-family: "Anton", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

/* ---------- the shape ----------
   The centre of the page. A framework is an order, so the order is the
   largest thing here and is numbered rather than bulleted: the count is the
   information. */
.fwp-shape { margin: 0.4rem 0 0; counter-reset: fwstep; list-style: none; }
.fwp-shape > li {
  counter-increment: fwstep;
  position: relative;
  padding: 0.55rem 0 0.55rem 2.4rem;
  font-size: 1.06rem;
  line-height: 1.45;
  border-top: 1px solid var(--hairline);
}
.fwp-shape > li:first-child { border-top: none; }
.fwp-shape > li::before {
  content: counter(fwstep);
  position: absolute;
  left: 0;
  top: 0.6rem;
  font-family: "Anton", sans-serif;
  font-size: 0.8rem;
  color: var(--bronze-text);
  width: 1.6rem;
}

.fwp-apply { margin: 0.4rem 0 0 1.1rem; }
.fwp-apply li { margin-bottom: 0.4rem; line-height: 1.55; }

/* ---------- the worked example ----------
   Set apart, because the example is what makes a shape legible and a reader
   scanning the page should be able to find it without reading. */
.fwp-eg {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--bronze);
  padding: 1.1rem 1.2rem 0.6rem;
  margin: 2rem 0;
  background: var(--paper, transparent);
}
.fwp-eg-sit { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.7rem; }
.fwp-eg-poor { margin-bottom: 0.9rem; }
.fwp-eg-lab {
  font-family: "Anton", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.15rem;
}
.fwp-eg-parts { margin: 0; }
.fwp-eg-parts dt {
  font-family: "Anton", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-text);
  margin-top: 0.75rem;
}
.fwp-eg-parts dd { margin: 0.15rem 0 0; line-height: 1.5; }
.fwp-eg-full { margin-top: 0.9rem; line-height: 1.6; }
.fwp-eg-note { margin-top: 0.7rem; font-size: 0.92rem; color: var(--muted); }

/* ---------- what it connects to ---------- */
.fwp-links { margin: 2.2rem 0; }
.fwp-list { list-style: none; margin: 0.4rem 0 0; }
.fwp-list li { border-top: 1px solid var(--hairline); padding: 0.5rem 0; }
.fwp-list a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.fwp-list a:hover { border-bottom-color: var(--bronze); }
.fwp-list .fwp-n {
  font-family: "Anton", sans-serif;
  font-size: 0.68rem;
  color: var(--muted);
  margin-right: 0.5rem;
}

.fwp-touch { font-size: 0.95rem; color: var(--muted); margin-top: 0.4rem; }
.fwp-touch a { color: inherit; }

.fwp-note {
  font-size: 0.95rem;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  padding-top: 0.8rem;
  margin-top: 2rem;
}

@media (max-width: 560px) {
  .fwp-shape > li { font-size: 1rem; padding-left: 2rem; }
  .fwp-eg { padding: 0.9rem 0.9rem 0.5rem; }
}