/* Manifesto: a supplement label for the thesis, then a quiet editorial read. */

.manifesto-hero {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-l);
}

.manifesto-hero__title {
  font-size: var(--fs-editorial-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  max-width: 27ch;
  text-wrap: balance;
}

.manifesto-hero__lede {
  max-width: var(--reading-measure);
  margin-top: var(--space-l);
  color: var(--ink-muted);
  font-size: var(--fs-reading);
  line-height: var(--lh-body);
}

.manifesto-hero__label { position: relative; padding-bottom: 5rem; }

.sticker--facts {
  position: absolute;
  bottom: 0;
  right: var(--space-l);
  transform: rotate(-5deg);
}

/* The label follows the grammar of a nutrition panel: heavy title, thick and thin rules. */
.facts {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: var(--border) solid var(--ink);
  box-shadow: var(--shadow-hard);
  font-size: var(--fs-control);
  line-height: var(--lh-caption);
}

.facts__title {
  caption-side: top;
  padding: 1rem 1.25rem .625rem;
  background: var(--surface);
  border: var(--border) solid var(--ink);
  border-bottom: 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  font-size: clamp(2rem, 1.5rem + 1.3vw, 2.75rem);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
}

.facts th, .facts td {
  padding: .4rem 1.25rem;
  border-top: 1.5px solid var(--ink);
  text-align: left;
  vertical-align: baseline;
}

.facts td { text-align: right; white-space: nowrap; }
.facts th { font-weight: 400; }

.facts__serving th, .facts__serving td { font-weight: 700; border-top-color: transparent; }
.facts__serving:first-child th, .facts__serving:first-child td { border-top: 1.5px solid var(--ink); }

.facts__head th {
  padding-block: .5rem .375rem;
  font-weight: var(--fw-ui);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.facts__head th:last-child { text-align: right; }

.facts__strong th, .facts__strong td { font-weight: var(--fw-ui); }
.facts__zero th { padding-left: 2.25rem; }
.facts .mono { font-weight: 700; }

.facts__rule-thick th, .facts__rule-thick td { border-top: 10px solid var(--ink); }
.facts__rule-medium th, .facts__rule-medium td { border-top: 5px solid var(--ink); }

.facts__footnote {
  padding: .75rem 1.25rem 2.25rem !important;
  border-top: 5px solid var(--ink) !important;
  text-align: left !important;
  white-space: normal !important;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* One reading column keeps headings, paragraphs and quotes on the same axis. */
.manifesto, .manifesto-index { --container: 48rem; }
.manifesto { padding-block: var(--space-l) var(--space-xl); }
.manifesto-index { margin-top: var(--space-xl); }
.manifesto-index ul { list-style: none; padding: 0; }

.chapter {
  padding-block: var(--space-xl);
  border-top: var(--border-thin) solid var(--ink);
}

.chapter:first-child { border-top: 0; }

.chapter__title {
  margin-bottom: var(--space-l);
  font-size: var(--fs-chapter-title);
  line-height: 1.2;
  font-weight: var(--fw-ui);
}

.chapter__body > * + * { margin-top: 1.25rem; }

.chapter__body p {
  font-size: var(--fs-reading);
  line-height: var(--lh-body);
}

.chapter__aside { font-weight: var(--fw-ui); }

.chapter__body + .chapter__body,
.pull-quote + .chapter__body { margin-top: 0; }

/* Quotes stay with the text they emphasize. */
.pull-quote {
  margin-block: var(--space-xl);
}

.pull-quote p {
  max-width: none;
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  font-size: var(--fs-editorial-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}

.pull-quote__line { display: block; }

.pull-quote__rest {
  max-width: var(--reading-measure);
  margin-top: 1.5rem;
  color: var(--ink-muted);
  font-size: var(--fs-reading);
  line-height: var(--lh-body);
}

ul.verdicts {
  display: grid;
  gap: 1rem;
  margin-block: 2rem;
  padding: 1.75rem 2rem;
  list-style: none;
}

.verdicts li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-weight: var(--fw-ui);
  font-size: var(--fs-reading);
  line-height: var(--lh-body);
}

.verdicts__icon { margin-top: .1em; }
.verdicts__icon--no { color: var(--rails); }
.verdicts__icon--yes { color: var(--accent); }

/* The gradient as a ramp: one step per branch, from the scaffold to the domain model. */
.ramp {
  margin-block: var(--space-xl);
}

.ramp__label {
  margin-bottom: 1rem;
  color: var(--ink-muted);
  font-weight: var(--fw-ui);
  font-size: var(--fs-control);
  line-height: var(--lh-ui);
}

.ramp__overview { display: grid; gap: var(--space-xs); }
.ramp__family { min-width: 0; text-align: center; }
.ramp__points { display: grid; grid-template-columns: repeat(var(--family-size), minmax(0, 1fr)); align-items: end; gap: 2px; height: 9rem; }
.ramp__family-code { display: block; margin-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--fs-caption); }
.ramp__details { margin-top: var(--space-m); border-top: var(--border-thin) solid var(--rail-tie); }
.ramp__details > summary { padding-block: var(--space-m); min-height: 44px; cursor: pointer; font-size: var(--fs-control); font-weight: var(--fw-ui); }
.ramp__family-detail { padding-block: var(--space-m); border-top: var(--border-thin) solid var(--rail-tie); }
.ramp__family-detail h3 { margin-bottom: var(--space-s); font-size: var(--fs-control); font-weight: var(--fw-ui); line-height: var(--lh-ui); }
.ramp__steps { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }
.ramp__link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: var(--space-s); border: var(--border-thin) solid var(--ink); border-radius: var(--radius-btn); background: var(--surface); }
.ramp__link:hover { background: var(--ink); color: var(--surface); }
.ramp__link:hover .ramp__code { color: inherit; }

.ramp__bar {
  display: block;
  height: calc(20% + var(--tone) * .8);
  border: 1px solid var(--ink);
  border-radius: 4px 4px 0 0;
  background: color-mix(in oklab, var(--ramp-color-to) var(--ramp-mix), var(--ramp-color-from));
}

.ramp__note, .ramp__hint { color: var(--ink-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.ramp__note { margin-top: 1rem; }
.ramp__hint { margin-bottom: var(--space-s); }

.ramp__code {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-align: center;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ramp__ends {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  font-size: var(--fs-control);
  font-weight: var(--fw-ui);
  line-height: var(--lh-ui);
}

.ramp__ends span:last-child { text-align: right; }

.evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem !important;
  padding: 1.25rem 1.5rem;
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--radius-btn);
  background: var(--surface);
}

.evidence__scores {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 700;
  font-size: var(--fs-metric-m);
  line-height: 1;
  white-space: nowrap;
}

.evidence__scores strong:last-of-type { color: var(--accent); }

.evidence__text {
  flex: 1 1 18rem;
  font-size: var(--fs-ui-body);
  line-height: var(--lh-ui);
}

/* Closing: strength you can taste. */
.strength { margin-block: 2rem var(--section-pad-y); }

.strength__panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: 4rem 4.25rem;
  background: var(--panel-bg);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius-panel);
  box-shadow: 12px 12px 0 var(--ink);
}

.strength__arm {
  font-size: clamp(6rem, 4rem + 8vw, 12rem);
  line-height: 1;
}

.strength__title {
  color: var(--panel-title);
  font-size: var(--fs-section);
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-display);
  max-width: 11em;
  text-wrap: balance;
}

.strength__text {
  max-width: var(--reading-measure);
  margin-top: 1.25rem;
  color: var(--panel-text);
  font-size: var(--fs-reading);
  line-height: var(--lh-body);
}

.strength__signature {
  margin-top: 1.25rem;
  color: var(--panel-title);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-code-large);
}

.strength__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

@media (max-width: 720px) {
  .ramp__points { height: 7rem; }
  .strength__panel { grid-template-columns: minmax(0, 1fr); padding: 3rem 1.5rem 2rem; box-shadow: 8px 8px 0 var(--ink); }
  .manifesto-hero__label { padding-bottom: 4rem; }
  .sticker--facts { right: .5rem; }
  ul.verdicts { padding: 1.5rem 1.25rem; }
}

@media (max-width: 560px) {
  .facts { table-layout: fixed; font-size: var(--fs-control); }
  .facts th, .facts td { padding-inline: .625rem; }
  .facts td { white-space: normal; }
  .facts__title { padding-inline: .625rem; }
  .facts__zero th { padding-left: 1.25rem; }
  .facts__footnote { padding-inline: .625rem !important; }
  .evidence { padding: 1rem; }
  .evidence__scores { gap: .375rem; font-size: clamp(1.25rem, 6vw, 2rem); }
  .ramp__ends { flex-wrap: wrap; }
}

/* A long argument needs landmarks and an explicit point of emphasis. */
.manifesto > .chapter { scroll-margin-top: var(--space-l); }
.chapter--now .pull-quote { padding: 2.5rem; background: var(--panel-bg); color: var(--panel-title); border-radius: var(--radius-card); }
.chapter--now .pull-quote__rest { color: var(--panel-text); }
.chapter--taste .ramp { padding: var(--space-l); border: var(--border-thin) solid var(--ink); border-radius: var(--radius-card); background: var(--surface); }
.evidence { border-left: .5rem solid var(--accent-3); }
@media (max-width: 560px) {
  .chapter--now .pull-quote { padding: var(--space-l); }
  .chapter--taste .ramp { padding: var(--space-m); }
}

/* The same table becomes a horizontal label at tablet and desktop widths. */
.facts-label {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr);
  background: var(--surface);
  border: var(--border) solid var(--ink);
  box-shadow: var(--shadow-hard);
}
.facts-label__summary { padding: var(--space-l); }
.facts-label .facts__title { border: 0; padding: 0; font-size: var(--fs-ui-title); }
.facts-label__servings { margin-top: var(--space-m); font-size: var(--fs-control); line-height: var(--lh-ui); }
.facts-label__servings > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); }
.facts-label__servings dt, .facts-label__servings dd { font-weight: var(--fw-ui); }
.facts-label__servings dd { margin: 0; }
.facts--manifesto { grid-column: 2; grid-row: 1 / span 2; border: 0; border-left: var(--border) solid var(--ink); box-shadow: none; table-layout: fixed; }
.facts--manifesto th:first-child { width: 66%; }
.facts--manifesto thead th { border-top: 0; }
.facts--manifesto th, .facts--manifesto td { padding: var(--space-xs) var(--space-l); }
.facts--manifesto .facts__zero th { padding-left: var(--space-l); }
.facts-label__footnote { grid-column: 1; grid-row: 2; border-top: 5px solid var(--ink); padding: var(--space-m) var(--space-l) var(--space-l); color: var(--ink-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); }

@media (max-width: 719px) {
  .facts-label { grid-template-columns: minmax(0, 1fr); }
  .facts-label__summary { padding: var(--space-m); }
  .facts-label__summary .facts__title { font-size: var(--fs-editorial-title); }
  .facts-label__servings { margin-top: var(--space-m); }
  .facts--manifesto { grid-column: 1; grid-row: auto; border-left: 0; border-top: 10px solid var(--ink); }
  .facts--manifesto th:first-child { width: 60%; }
  .facts--manifesto th, .facts--manifesto td, .facts--manifesto .facts__zero th { padding-inline: var(--space-s); }
  .facts-label__footnote { grid-row: auto; padding-inline: var(--space-m); }
}