/* ==========================================================================
   case.css — per-block type and layout for the Restricted Content Review case

   Same model as banco-inter/case.css: the block system in styles/ does the
   layout, this file only names the per-block type scale and the few components
   this case needs that the Banco Inter page didn't (option cards, metric grid,
   fill markers).

   Font sizes are in `em` against the 10px root — see base.css.
   ========================================================================== */

.page.project {
  --page-background: #000;
  --nav-height: 124px;

  /*
   * Near-monochrome. The subject is screens in a closed store at night, and
   * the palette is deliberately quieter than the Banco Inter case's orange:
   * one blue accent, used only where something is live or shipped.
   */
  /* Sampled off 00-cover.jpg, so a crop sliver matches the photo. */
  --s-cover: #8e8378;
  /* Apple's marketing blue. White on it measures 4.70:1, which clears AA for
     body text as well as for the headline. #0a84ff, the iOS system blue this
     case uses for links, only reaches 3.65:1 and would be large-text-only. */
  --s-accent: #0071e3;
  --case-accent: #0a84ff;
}

/*
 * The prev/next nav and the footer sit below the last block, on the black page
 * background, so they take a light ink.
 */
.page.project .project-nav,
.page.project footer {
  --color: #e2e2e2;
  --nav-link-color: #e2e2e2;
}

/*
 * The header keeps a dark ink even now the cover is back, because this cover is
 * a light store interior rather than Banco Inter's dark one. Measured over the
 * photo: black is 10.02:1 where the pinned mark sits and 9.47:1 under the nav
 * links, while white would be 2.10:1 and 2.22:1. Light ink here would be
 * unreadable.
 */
.page.project > .navigation {
  --color: #000;
  --nav-link-color: #000;
}

/* --- cover height ------------------------------------------------------ */
/*
 * Short of the viewport on purpose. A cover that fills the screen exactly
 * gives a reader no reason to believe there is anything under it; leaving the
 * next band's edge showing is the affordance.
 */

.page.project {
  --cover-height: 86vh;
}

/* --- scroll reveal ------------------------------------------------------ */
/*
 * base.css reveals every `.block > .content` as one object: 50px of lift over
 * 500ms. Right for the Banco Inter port, which has to match the original, but
 * on this page it reads as a section switching on all at once.
 *
 * Here the block stops moving and its ROWS move instead, one after another, in
 * document order: the headline, then each subsection title, then each
 * paragraph, then each list item or figure. scripts/reveal-rows.js numbers
 * them into `--row`; everything below is the timing.
 *
 * `cubic-bezier(.16,1,.3,1)` is the near-exponential ease-out — most of the
 * distance is covered immediately and the last pixels settle slowly, which is
 * what lets a 24px move read as deliberate rather than twitchy.
 *
 * All of it is scoped under `html.reveal-rows`, a class the script adds only
 * once it has indexed something. Without the script none of this applies and
 * base.css's block-level reveal is what runs.
 */

.reveal-rows .page.project .block.animated > .content {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}

.reveal-rows .page.project .block.animated [data-row] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * 130ms a row. Below about 100 the rows blur into one event; above about 160
 * the reader catches up with the animation and waits for it. The 90ms lead-in
 * keeps the first row from firing on the same frame the block is triggered,
 * which is what made the old version feel abrupt.
 */
.reveal-rows .page.project .block.animated.is-revealed [data-row] {
  opacity: 1;
  transform: none;
  transition-delay: calc(90ms + var(--row, 0) * 130ms);
}

/*
 * Decoration, all of it. Without this the page would sit at opacity 0 for
 * anyone who asked for less movement, since the rows never get the class that
 * brings them back.
 */
@media (prefers-reduced-motion: reduce) {
  .reveal-rows .page.project .block.animated [data-row] {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ==========================================================================
   Dark mode

   The README always said the `--s-*` surface tokens were the hook for this, and
   they were: almost everything below is a token swap, not a restyle. Only five
   rules need a hand-written dark value, and each is a hard-coded colour that
   should have been a token in the first place.

   Keyed off `data-theme="dark"` on <html>, set before first paint by the inline
   script in index.html's head.

   NOT themed, deliberately:

   - The nav ink and the brand mark stay dark in both modes. They only ever sit
     over the cover photograph, which does not change with the theme, and the
     nav scrolls away with the page rather than sticking. Lightening them would
     put light ink on a light wall.
   - The reading bar keeps its light glass CONTROLS. A floating control layer
     reading light over a dark page is the relationship iOS uses, and the
     pills stay legible.

     Its SCRIM does have to flip. That is a full-width white gradient ramping
     to 0.9 alpha at the bottom edge, and over a black page it washes the last
     144px of every screen out to near-white. Same three stops, inverted, plus
     the two hairlines that were tuned against white.
   - The CTA band keeps apple.com's #0071e3 in both modes. The iOS system blue
     #0a84ff was the first choice for dark, but white on it is only 3.65:1
     against 4.70:1 on the darker blue, and text contrast beats the marginal
     gain in separation from black. It also could not have worked as written:
     `--s-accent` is declared on `.page.project`, so an override on <html>
     never reaches it.
   ========================================================================== */

[data-theme="dark"] {
  --s-page: #000;
  --s-raised: #121214;
  --s-sunken: #17171a;

  --color: #f5f5f7;
  --accent-color: #f5f5f7;
  --link-color: #f5f5f7;
  --background-color: #000;

  --label-color: #86868b;
  --numeral-color: #48484a;
}

/* The five hard-coded colours. */

[data-theme="dark"] code {
  background: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .impact-list,
[data-theme="dark"] .impact-list > li {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .impact-list > li {
  color: #98989d;
}

[data-theme="dark"] .process-map .stage-aside {
  border-top-color: rgba(255, 255, 255, 0.24);
}

/* The plate behind the prototype. The video itself is a recording of a light
   interface and stays light — a lit window on an unlit desk. */
[data-theme="dark"] .prototype-frame {
  background: #1c1c1e;
}

/*
 * The scrim, inverted. Same stops and the same ramp; only the ink changes.
 * The `@media (max-width: 560px)` variant in reading-bar.css pushes the bottom
 * stop to 0.98, so the phone case is restated too or it stays white there.
 */
[data-theme="dark"] .reading-bar__scrim::after {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.65) 35%,
    rgba(0, 0, 0, 0) 100%
  );
}

@media (max-width: 560px) {
  [data-theme="dark"] .reading-bar__scrim::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.98) 0%,
      rgba(0, 0, 0, 0.85) 45%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* Both halves of the progress hairline were tuned against white: 6% black is
   invisible on black, and so is the 45% black fill. */
[data-theme="dark"] .reading-bar__progress {
  background: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .reading-bar__progress > span {
  background: rgba(255, 255, 255, 0.5);
}

/* --- theme toggle ------------------------------------------------------- */
/*
 * One icon element, two states. The visible glyph names the DESTINATION: a moon
 * while the page is light, a sun while it is dark. Showing the current state
 * instead is the classic mistake — it makes the control read as a label.
 */

.reading-bar__theme .theme-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.reading-bar__theme .i-sun,
[data-theme="dark"] .reading-bar__theme .i-moon {
  display: none;
}

[data-theme="dark"] .reading-bar__theme .i-sun {
  display: block;
}

/* --- inline code ------------------------------------------------------- */
/*
 * The case leans on literal strings — opaque IDs, `001.mov`. Sized in `em`
 * against the surrounding copy and nudged up, because browsers otherwise apply
 * their own smaller default size to any monospace family and the numerals fall
 * out of the line.
 */

code {
  padding: 0.12em 0.32em;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  /* Overrides `.block`'s `word-break: break-word`: these literals are short
     and a broken `001.mov` reads as two things. */
  word-break: normal;
  white-space: nowrap;
}

/* --- client mark -------------------------------------------------------- */
/*
 * `.media > img` in blocks.css positions and sizes the image inside the
 * aspect-ratio well; the rule does not reach an inline `<svg>`, so the mark
 * needs the same treatment stated here or it collapses to nothing.
 */
.block.logo-block .logo-grid .media > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/*
 * Two things the shared `logo-grid` does that are right for a wordmark and
 * wrong for a glyph.
 *
 * It centres each mark in its column (`.media` carries `margin: 0 auto`), which
 * for a 480px-wide logo in a 1100px grid is barely a shift and for a 39px mark
 * puts it adrift in the middle of nothing. Flush left instead, on the same edge
 * as the ROLES column directly beneath it.
 *
 * And it forces a 1:1 well. The Apple mark is 19.55 x 24, so a square well
 * letterboxes it and the left edge of the glyph lands inside the left edge of
 * the box — which is exactly the alignment being asked for here. The well takes
 * the mark's own ratio instead, and the two edges become one.
 */
.block.logo-block .logo-grid .client-mark {
  margin-left: 0;
  aspect-ratio: 1955 / 2400;
  max-width: 39px;
}

/* --- project meta + summary -------------------------------------------- */

.block.meta {
  --label-size: 1.7em;
  --label-leading: 1.51;
  --label-weight: 400;
  --body-size: 2.3em;
  --body-leading: 1.49;
}

.block.meta .meta-list dt {
  color: var(--label-color);
  font-weight: 600;
}

.block.meta .meta-list dd {
  margin: 0;
}

.block.meta .meta-list dd + dt {
  margin-top: 1.51em;
}

/*
 * The summary runs to two paragraphs here (Banco Inter's is one), and this
 * column is not `.rich`, so it has no paragraph rhythm of its own. One blank
 * line box, which at this block's leading is 1.49em.
 */
.block.meta .col-body p + p {
  margin-top: 1.49em;
}

/* ==========================================================================
   A note on units, because it bites

   `.block.intro .col-body` sets `font-size: 1.7em` — 17px against the 10px
   root. Everything below lives inside that column, so its `em`s are relative
   to 17px, NOT to the root. A component written as `1.7em` in here renders at
   28.9px, not 17px.

   So: components that should read as body copy declare no font-size at all and
   inherit the column's, and anything that needs a different size is expressed
   as a multiple of 17px (0.94em = 16px, 2.6em = 44px).

   The exceptions are `.asset-caption` and the slot wells, which sit in
   `.block.fluid > .content` where no font-size is set — there an `em` is a root
   `em` and reads as "× 10px", like the rest of the site.
   ========================================================================== */

/* --- section headline column ------------------------------------------- */
/*
 * blocks.css splits `.intro` into four equal columns and gives the headline
 * one of them: 255px at this grid, minus the 20px gutter, so 235px of measure.
 * "The Process" and "The Problem" needed a hard <br> to fit that, which is a
 * markup workaround for a column 40px too narrow.
 *
 * 290px removes the need for the break and costs the body column 35px, which
 * is well inside the measure it wants. `:not(.stacked)` because the stacked
 * blocks run their headline across the whole grid and must keep one column.
 */

.block.intro:not(.stacked) > .content {
  grid-template-columns: 290px repeat(3, 1fr);
}

/* --- the problem ------------------------------------------------------- */
/*
 * One sentence, at the largest body size on the page. It is set a step above
 * Design Challenge because it is the shorter of the two and lands first: the
 * problem is the claim the case rests on, so it gets the whole column and
 * nothing else.
 *
 * Everything that explains it — what the system is, how the old process ran,
 * what hurt — belongs in Context, above. If this block grows past three lines,
 * the copy has drifted back into background and should move up.
 */

.block.problem .col-body {
  --body-size: 2.6em;
  --body-leading: 1.5;
}

/*
 * On a phone, blocks.css clamps every `.col-body` to `4vw` — 15.6px at 390px,
 * which is the same size as ordinary body copy. Banco Inter's Design Challenge
 * renders that way and stays that way, because that page is a faithful port.
 * Here it defeats the point: a one-sentence display statement that reads at
 * body size is just a short paragraph. So the Problem gets its own ceiling,
 * still fluid, just a larger fraction of the viewport.
 */
@media (max-width: 768px) {
  .block.problem .col-body {
    font-size: clamp(1em, 2.6em, 6.4vw);
  }
}

/* --- the process ------------------------------------------------------- */
/*
 * The design challenge lives inside this section now, as its first `h4`, so
 * this block is ordinary rich text rather than the display statement it used
 * to be. 1.8em is a shade above the 1.7em body default, which is what the
 * section carried before and what keeps it distinct from Context above it.
 */

.block.process .col-body {
  --body-size: 1.8em;
}

/* --- stacked intro ----------------------------------------------------- */
/*
 * Headline across the full grid with its paragraph beneath, instead of the
 * label-column / body-column split every other `.intro` block uses. For a
 * section whose title is a statement in its own right rather than a filing
 * label.
 *
 * Built as a modifier on `.intro` rather than a plain block so the headline
 * keeps `--label-size` and the paragraph keeps `--body-size`; dropping `intro`
 * would mean restating both. The mobile rules in blocks.css already collapse
 * `.intro` to one column, so nothing here needs a breakpoint.
 */

.block.intro.stacked > .content {
  grid-template-columns: 1fr;
}

.block.intro.stacked .col-label,
.block.intro.stacked .col-body {
  grid-column: 1;
  padding-right: 0;
}

.block.intro.stacked .col-label {
  margin-bottom: 24px;
}

/*
 * No measure cap: when the headline runs the full grid the paragraph does too,
 * so the two share one left and right edge. That does mean a long line, so keep
 * the copy in these blocks to two or three sentences.
 */

/* --- process roadmap --------------------------------------------------- */
/*
 * The three-phase diagram under The Process, standing in for the exported
 * roadmap image the Banco Inter case uses. Built in markup rather than as an
 * <svg> on purpose: SVG <text> does not wrap, so a three-up diagram of
 * sentences cannot reflow to one column on a phone without shipping a second
 * copy of itself — and its copy would be invisible to the in-page editor.
 *
 * It sits in a plain `.block`, not an `.intro` one, so `.content` is the full
 * 1100px grid and an `em` here is a root em (× 10px) like the rest of the site.
 *
 * The 2px top rule per stage is the diagram: three equal bars reading left to
 * right as a timeline.
 */

.process-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 34px;
}

.process-map .stage {
  border-top: 2px solid var(--color);
  padding-top: 16px;
}

.process-map .stage-num {
  display: block;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--numeral-color);
}

.process-map .stage-title {
  margin-top: 8px;
  font-size: 1.9em;
  line-height: 1.25;
  font-weight: 600;
}

.process-map .stage-desc {
  margin-top: 12px;
  font-size: 1.5em;
  line-height: 1.5;
}

/*
 * Phase four is a full-width row beneath the three columns: eyebrow and title
 * on one line, then the paragraph running the whole grid. It was a 1fr/2fr
 * split first, which put the paragraph's left edge under phase 02 and made it
 * read as belonging to phases 2 and 3 rather than following all three.
 *
 * It stays secondary through the dashed rule, the "THEN" eyebrow and a smaller
 * title — NOT through colour. The first version set the whole row in
 * `--label-color`, which is #999 and measures 2.85:1 on white; that is under
 * the 4.5:1 floor for body text, and it is why the paragraph read as absent
 * rather than as de-emphasised.
 */
.process-map .stage-aside {
  grid-column: 1 / -1;
  display: block;
  border-top: 1px dashed rgba(0, 0, 0, 0.24);
}

/* The eyebrow stacks above the title, same as the three phases; only the
   title's size marks this one as secondary. */
.process-map .stage-aside .stage-title {
  font-size: 1.7em;
}

/* Held to a readable measure rather than the full 1100px. */
.process-map .stage-aside .stage-desc {
  max-width: 84ch;
}

@media (max-width: 768px) {
  .process-map {
    grid-template-columns: 1fr;
    gap: 32px 0;
  }
}

/* --- a section's opening line ------------------------------------------ */
/*
 * One sentence that introduces the section under its own label, a step down
 * from Problem and Challenge. Used on Explorations.
 */

.block.lead .col-body {
  --body-size: 2.5em;
  --body-leading: 1.66;
}

/* --- option cards: the alternatives considered ------------------------- */
/*
 * Four candidate answers to the same question, three of them rejected. Laid
 * out as a rule-separated list rather than as boxes: they're read in sequence
 * and compared, and boxes would imply they're browsable in any order.
 */

/* Body size is inherited from `.col-body` — see the note on units above. */
.options {
  line-height: 1.61;
}

.options > li {
  padding: 32px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.options > li:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.options .option-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.options .option-id {
  font-size: 0.71em;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--label-color);
}

.options .option-title {
  font-size: 1.24em;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.options p + p {
  margin-top: 0.8em;
}

/* "Why not —" / "Why this —": the sentence a reviewer is actually looking for,
   so the lead-in is set in the label grey and the rest reads as body. */
.options .option-why strong {
  color: var(--label-color);
  font-weight: 600;
}

/* --- messy-parts highlight cards --------------------------------------- */
/*
 * `.block.columns` already gives the two-up grid, the image well and the
 * kicker/caption rhythm (blocks.css). These cards add a second and sometimes
 * third caption under the first, so the 1.5em `padding-top` that separates a
 * caption from its image would triple-space them.
 */

/*
 * The highlight cards carry no title: the image is the subject, and each half
 * of the caption is introduced by a small eyebrow instead. Problem, then a gap,
 * then Solution.
 *
 * The eyebrow is the label grey, which is fine here in a way it was not for a
 * card title — it labels the paragraph rather than carrying its meaning, and
 * the paragraph itself is body ink.
 */
/*
 * Half the gap blocks.css puts between the image and its caption: 20px of
 * margin plus 1.5em of padding read as a break between two things, and these
 * two are one card. 10px + 0.75em lands at about 23px.
 */
.block.columns .caption-group {
  margin-top: 10px;
}

.block.columns .caption {
  padding-top: 0.75em;
}

.block.columns .caption .eyebrow {
  display: block;
  margin-bottom: 0.35em;
  font-size: 0.71em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-color);
}

/* The gap between the problem and the solution: one blank line box plus a
   little, so the two read as a pair rather than as one run of text. */
.block.columns .caption + .caption {
  padding-top: 1.7em;
}

/* --- verdict chips ----------------------------------------------------- */

.verdict {
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 0.65em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.verdict.rejected {
  border: 1px solid rgba(0, 0, 0, 0.16);
  color: var(--label-color);
}

.verdict.shipped {
  background: #1d1d1f;
  color: #fff;
}

/* --- tight lists inside rich text -------------------------------------- */
/*
 * `.rich .tight` is base.css's one-line-per-item numbered list — Context's key
 * pain points, and the three platform constraints in My Role. It sits between
 * paragraphs there, so it needs the same blank line above and below that
 * `.rich > * + *` gives everything else; base.css only zeroes the gaps
 * *between* the items.
 */

.rich > .tight {
  margin-top: var(--rhythm);
}

/* --- metric grid ------------------------------------------------------- */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 34px;
  margin-bottom: 48px;
}

/* 2.6em / 0.94em / 0.82em of the column's 17px = 44 / 16 / 14px. */
.metric-value {
  display: block;
  font-size: 2.6em;
  line-height: 1.1;
  font-weight: var(--title-weight);
  letter-spacing: -0.02em;
}

.metric-label {
  display: block;
  margin-top: 12px;
  font-size: 0.94em;
  line-height: 1.45;
  font-weight: 600;
}

.metric-note {
  display: block;
  margin-top: 4px;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--label-color);
}

/*
 * The four-across variant, used for the research figures under The Process. It
 * sits in a plain `.block` where an `em` is a root em, so it restates the 17px
 * body size the Impact grid inherits from its column — otherwise `.metric-value`
 * at 2.6em would render at 26px instead of 44px.
 */
/*
 * The research band under What the Numbers Showed. Three across, wrapping to
 * two rows at six items — the same column count as the Impact grid, but bigger
 * numerals, because these are the point of their own section rather than a
 * summary at the foot of one.
 *
 * It restates a 17px base because `.metric-grid`'s children are sized in em
 * against a body column, and this grid sits in a plain block that has none.
 */
.metric-grid.stats {
  gap: 64px 34px;
  font-size: 1.7em;
}

.metric-grid.stats .metric-value {
  font-size: 3.8em;
  letter-spacing: -0.03em;
}

/* "6hrs" — the unit rides at the numeral's size class, not the numeral's. */
.metric-value .unit {
  margin-left: 0.06em;
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .metric-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .metric-grid.stats {
    gap: 36px 20px;
  }

  .metric-grid.stats .metric-value {
    font-size: clamp(1em, 3.8em, 15vw);
  }

  .metric-value {
    font-size: clamp(1em, 2.6em, 11vw);
  }
}

/* --- prototype frame ---------------------------------------------------- */
/*
 * The shipped prototype, framed to match the first-version image above it: a
 * 1020x800 plate with the app window sitting proud of it and running off the
 * bottom edge.
 *
 * The three offsets are MEASURED off 01-v1-review-tab.jpg, not guessed — the
 * window in that file starts 11.6% down, is inset 14.8% each side and is 70.4%
 * wide. Matching them is what makes the before and after read as one pair
 * rather than two unrelated pictures.
 *
 * `overflow: hidden` is what crops the video, and it clips the lower half of
 * the shadow with it, which is correct: a window running off the plate has no
 * bottom edge to cast one.
 */

.prototype-frame {
  position: relative;
  max-width: 1020px;
  margin: 0 auto;
  aspect-ratio: 51 / 40;
  overflow: hidden;
  background: #ebebeb;
}

/*
 * A wrapper carries the position, the radius and the shadow; the video just
 * fills it. Putting `border-radius` on the <video> itself is unreliable —
 * WebKit composites video on its own layer and does not always clip it to the
 * element's radius, which shows as square dark corners. `overflow: hidden`
 * here clips the video for certain, and does NOT clip this element's own
 * shadow (only an ancestor's overflow could).
 *
 * `line-height: 0` kills the inline descender gap a replaced element would
 * otherwise leave under itself.
 */
.prototype-window {
  position: absolute;
  top: 11.6%;
  left: 14.8%;
  width: 70.4%;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.07),
    0 16px 40px rgba(0, 0, 0, 0.11);
}

/* Portrait source in a landscape plate, so height comes from the intrinsic
   ratio and overshoots the bottom of the plate by design. */
.prototype-window video {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

@media (max-width: 768px) {
  .prototype-window {
    border-radius: 8px;
  }
}

/* --- impact statements -------------------------------------------------- */
/*
 * Six outcomes as big-type statements rather than number tiles. Tiles put the
 * figure first and the meaning second, which works when every row is a figure;
 * half of these are not, so the sentence leads and the figures inside it are
 * lifted to the title weight instead.
 *
 * Plain `.block`, so 3.2em is 32px against the 10px root.
 */

.impact-list {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/*
 * The indent is padding on the item, not margin on the list, so the hairlines
 * still run the full grid width while the statements sit inset from them. As a
 * percentage it resolves against the list's width, so it stays a fifth of the
 * measure at any viewport.
 */
.impact-list > li {
  padding: 14px 0 14px 20%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 3.2em;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: var(--title-weight);
  color: #6e6e73;
}

/*
 * With the whole statement bold, weight can no longer separate the figure from
 * the sentence — 700 is the heaviest face loaded. So the figure holds the full
 * black while the sentence sits back in dark grey.
 */
.impact-list .fig {
  color: var(--color);
}

@media (max-width: 768px) {
  .impact-list > li {
    padding: 10px 0 10px 16px;
    font-size: clamp(1em, 3.2em, 7vw);
  }
  /* A fifth of a 350px measure is 70px, which is most of the line. */
}

/* --- fill markers ------------------------------------------------------ */
/*
 * Every number on this page that only Airton can supply. Marked rather than
 * guessed: a placeholder that looks like a placeholder can't be shipped by
 * accident, and an invented metric is worse than a missing one.
 *
 * Delete the `fill` class (and its contents) as each real figure lands.
 */

.fill {
  border-bottom: 2px dashed rgba(178, 94, 0, 0.5);
  background: rgba(255, 176, 46, 0.14);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-weight: 400;
  color: #a75800;
}

.metric-value .fill {
  font-size: 0.62em;
  letter-spacing: 0;
}

/* --- editorial callout ------------------------------------------------- */
/*
 * A note to the author, not to the reader. Styled so it is impossible to
 * mistake for case copy and impossible to miss when proofing.
 */

.callout {
  padding: 20px 24px;
  border: 1px solid rgba(178, 94, 0, 0.28);
  border-radius: 10px;
  background: #fff8ef;
  /*
   * `rem` against the 10px root, not `em`, so the note is 15px wherever it is
   * placed. As an `em` it inherited its container: 15px inside Impact's 17px
   * body column, but 8.8px in the plain block under The Process.
   */
  font-size: 1.5rem;
  line-height: 1.55;
  color: #6b4405;
}

.callout .callout-label {
  display: block;
  margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a75800;
}

.callout ul {
  margin-top: 0.7em;
  padding-left: 1.2em;
  list-style: disc;
}

.callout li {
  display: list-item;
  margin-top: 0.35em;
}

/* --- hindsight --------------------------------------------------------- */
/* One blank line between sections rather than two, as in Learnings. */

.block.learnings .col-body {
  --section-gap: 1;
}

/* --- call to action ---------------------------------------------------- */

/* Both white: the band is blue now, so the accent that used to carry the link
   would be invisible on it. */
.block.header .headline,
.block.header .subheadline a {
  color: #fff;
}