/* Concept B: The Business Story. A printed page rather than a dashboard: paper, hairlines, no cards or shadows. Londrina Solid carries the
   headline and the chapter heads; Inter carries every sentence and figure. Yellow marks the notes on a chart and the figures in the text
   that point to them (annotation, never a warning); cyan is last year and the lower-takings test. */
.concept-b .main-col { background: var(--paper); }
.concept-b .top { padding-bottom: 0; }
.b-story { max-width: 1060px; margin: 0 auto; padding: 0 0 40px; container-type: inline-size; }
.b-mast { padding: 10px 0 22px; border-bottom: 2px solid var(--ink); }
.b-kicker { margin: 0; font: 700 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--green); }
.b-headline { margin: 10px 0 14px; max-width: 18ch; font: 400 clamp(36px, 6.4cqi, 64px)/.98 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
.b-dek { margin: 0; max-width: 62ch; font: 400 clamp(17px, 2.1cqi, 20px)/1.55 var(--font); color: #24342a; text-wrap: pretty; }
.b-ref { display: inline; padding: 0 1px; margin: 0; border: 0; background: linear-gradient(transparent 62%, rgba(253,195,8,.55) 62%); font: inherit; font-weight: 650; color: var(--ink); cursor: pointer; border-radius: 2px; }
@media (hover: hover) { .b-ref:hover { background: rgba(253,195,8,.55); } }
.b-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.b-byline span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--faint); vertical-align: 1px; }
.b-link { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--green); font: 600 13px/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the chapter guide: sticky, it follows the reading position */
.b-toc { position: sticky; top: 0; z-index: 4; display: flex; gap: 2px; margin: 0 0 6px; padding: 6px 0; background: var(--paper); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.b-toc a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font: 700 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.b-toc a .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 10.5px; }
.b-toc a[aria-current] { color: var(--ink); background: rgba(253,195,8,.22); }
@media (hover: hover) { .b-toc a:hover { color: var(--ink); } }

/* figures */
.b-fig { margin: 18px 0 8px; }
.b-fig figcaption { margin: 0 0 8px; max-width: 70ch; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .b-fig figcaption b { color: var(--ink); }
.b-hero { padding: 18px 0 8px; border-bottom: 1px solid var(--line); }
.b-chart svg { display: block; overflow: visible; }
.b-chart svg:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.b-chart .grid { stroke: rgba(23,38,29,.09); }
.b-chart .tick { font: 500 11px var(--font); fill: var(--faint); } .b-chart .tick.m { text-anchor: middle; }
.b-chart .act { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linejoin: round; }
.b-chart .ly { fill: none; stroke: var(--cmp); stroke-width: 1.6; stroke-dasharray: 5 4; }
.b-chart .fc { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.b-chart .band { fill: rgba(6,79,43,.08); }
.b-chart .fz { fill: rgba(23,38,29,.03); } .b-chart .fz-t { font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; fill: var(--muted); }
.b-chart .win { fill: rgba(253,195,8,.12); }
.b-chart .lab { font: 700 12px var(--font); text-anchor: end; } .b-chart .act-l { fill: var(--green); } .b-chart .ly-l { fill: var(--cmp-ink); }
.b-chart .anno { cursor: pointer; }
.b-chart .anno-c { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.2; }
.b-chart .anno-n { font: 800 11px var(--font); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.b-chart .anno-l { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.b-chart .anno-t { font: 650 11.5px var(--font); fill: var(--ink); } .b-chart .anno-t.end { text-anchor: end; }
.b-chart .anno.on .anno-c { stroke-width: 2.5; }
.b-chart .anno:focus-visible { outline: none; } .b-chart .anno:focus-visible .anno-c { stroke: var(--green); stroke-width: 3; }
.b-chart .tip-l { stroke: var(--ink); stroke-width: 1; opacity: .35; } .b-chart .tip-d { fill: var(--paper); stroke: var(--green); stroke-width: 2.4; }
.b-chart .tip-bg { fill: var(--ink); } .b-chart .tip-1 { font: 700 11.5px var(--font); fill: #fff; } .b-chart .tip-2 { font: 500 11.5px var(--font); fill: #dbe7df; }
.b-chart .bar { fill: rgba(6,79,43,.28); } .b-chart .bar.loss { fill: rgba(176,32,32,.30); } .b-chart .bar.thin { fill: rgba(201,138,11,.40); }
.b-chart .rng { stroke: var(--ink); stroke-width: 1.4; opacity: .45; }
.b-chart .be { stroke: var(--ink); stroke-width: 2.5; }
.b-chart .pl { font: 750 12.5px var(--font); text-anchor: middle; } .b-chart .pl.pos { fill: var(--pos); } .b-chart .pl.neg { fill: var(--neg); }
.b-chart .min { stroke: var(--ink); stroke-dasharray: 6 4; stroke-width: 1.2; opacity: .6; } .b-chart .min-t { fill: var(--ink); font-weight: 700; }
.b-chart .low { fill: var(--paper); stroke: var(--green); stroke-width: 2.5; } .b-chart .low-l { fill: var(--paper); stroke: var(--cmp-ink); stroke-width: 2.2; }
.b-chart .key-t { font: 600 11px var(--font); fill: var(--muted); }
.b-mult-chart .act.restaurant { stroke: var(--ch-restaurant); } .b-mult-chart .act.takeaway { stroke: var(--ch-takeaway); } .b-mult-chart .act.collection { stroke: var(--ch-collection); }
.b-mult-chart .act { fill: none; stroke-width: 2; } .b-mult-chart .ly { fill: none; stroke: var(--cmp); stroke-width: 1.3; stroke-dasharray: 3 3; } .b-mult-chart .win { fill: rgba(253,195,8,.14); }
.b-figure-skel { height: 300px; margin: 22px 0; border-radius: 6px; }
.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 100% { background: transparent; } 20% { background: rgba(253,195,8,.28); } }

/* the notes under the hero chart */
.b-annos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; }
.b-annos li.on .anno-b { background: rgba(253,195,8,.2); }
.anno-b { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 44px; padding: 7px 8px; border: 0; border-radius: 8px; background: none; text-align: left; font: 400 13px/1.45 var(--font); color: var(--ink); cursor: pointer; }
.anno-b .num { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); border: 1px solid var(--ink); font: 800 10.5px/1 var(--font); }
.anno-b .muted { color: var(--muted); }

/* chapters */
.b-ch { padding: 28px 0 8px; border-bottom: 1px solid var(--line); scroll-margin-top: 64px; }
.b-ch-k { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--green); }
.b-ch-k .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11.5px; }
.b-h3 { margin: 8px 0 12px; font: 400 clamp(28px, 4cqi, 38px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .015em; color: var(--ink); text-wrap: balance; }
.b-h3:focus { outline: none; }
.b-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 40px; }
@container (min-width: 900px) { .b-cols { grid-template-columns: minmax(0, 1fr) 250px; } }
.b-lede { margin: 0 0 12px; max-width: 64ch; font: 400 17px/1.62 var(--font); color: #24342a; text-wrap: pretty; } .b-lede b { font-weight: 650; color: var(--ink); }
.b-margin { display: grid; gap: 16px; align-content: start; padding-left: 0; }
@container (min-width: 900px) { .b-margin { padding-left: 22px; border-left: 1px solid var(--line); } }
.b-big { margin: 0; font: 650 46px/1 var(--font); letter-spacing: -.03em; color: var(--ink); } .b-big small { display: block; margin-top: 6px; font: 400 13px/1.4 var(--font); letter-spacing: 0; color: var(--muted); }
.b-facts { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: 14px; } .b-facts dt { color: var(--muted); } .b-facts dd { margin: 0; text-align: right; font-weight: 600; }
.b-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.b-period-l { margin-right: 4px; font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.b-pill { min-height: 36px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font: 600 13px/1 var(--font); color: var(--ink); cursor: pointer; }
.b-pill[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (pointer: coarse) { .b-pill { min-height: 44px; } }
.b-multiples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 8px 0 6px; }
.b-mult { margin: 0; } .b-mult figcaption { display: flex; align-items: center; gap: 8px; font-size: 14px; } .b-mult figcaption .chg { margin-left: auto; font-weight: 700; }
.b-mult p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.chg.up, .b-movers .up { color: var(--pos); } .chg.down, .b-movers .down { color: var(--neg); }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.dot.restaurant { background: var(--ch-restaurant); } .dot.takeaway { background: var(--ch-takeaway); } .dot.collection { background: var(--ch-collection); }
.b-bridge { display: flex; gap: 3px; margin: 4px 0 16px; min-height: 52px; }
.b-bridge .seg { display: grid; align-content: center; gap: 1px; min-width: 96px; padding: 6px 10px; border-radius: 6px; background: rgba(6,79,43,.1); }
.b-bridge .seg.orders { background: rgba(6,79,43,.18); } .b-bridge .seg.spend { background: rgba(6,79,43,.1); } .b-bridge .seg.neg { background: rgba(176,32,32,.12); }
.b-bridge b { font-size: 15px; } .b-bridge small { color: var(--muted); font-size: 12px; }
.b-movers { list-style: none; margin: 0; padding: 0; display: grid; }
.b-movers li { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 70px; gap: 12px; align-items: center; min-height: 36px; border-bottom: 1px solid var(--line); font-size: 14px; }
.mv-name em { margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: var(--yellow); font: 700 10px/1 var(--mono); font-style: normal; text-transform: uppercase; vertical-align: 2px; }
.mv-track { position: relative; height: 14px; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(23,38,29,.35) calc(50% - .5px), rgba(23,38,29,.35) calc(50% + .5px), transparent calc(50% + .5px)); }
.mv-bar { position: absolute; top: 2px; bottom: 2px; } .mv-bar.up { background: var(--green); } .mv-bar.down { background: #C0564A; }
.b-movers b { text-align: right; }
.b-ask { padding: 12px 14px; border-left: 3px solid var(--yellow); background: rgba(253,195,8,.08); }
.b-ask.opportunity { border-left-color: var(--pos); background: var(--pos-bg); }
.b-ask p { margin: 0 0 4px; font-size: 14px; } .b-ask-k { font: 700 10.5px/1.2 var(--mono) !important; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.muted { color: var(--muted); } .b-small { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.b-margin-k { margin: 0; font: 700 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.b-coming { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.b-coming li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.b-coming .d { color: var(--muted); font-weight: 600; } .b-coming em { color: var(--purple); font-style: normal; font-size: 12px; }
.b-coming li.closure span:last-child { color: var(--muted); }
.b-do { list-style: none; counter-reset: do; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.b-do li { counter-increment: do; position: relative; padding: 14px 0 14px 56px; border-top: 1px solid var(--line); }
.b-do li::before { content: counter(do); position: absolute; left: 0; top: 12px; font: 400 40px/1 var(--display); color: var(--green); }
.b-do li.bad::before { color: var(--neg); } .b-do li.warn::before { color: #a36d00; }
.b-do-k { margin: 0; font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.b-do-t { margin: 4px 0 6px; max-width: 60ch; font: 650 18px/1.4 var(--font); color: var(--ink); text-wrap: pretty; }
.b-do-w { margin: 0; max-width: 72ch; color: var(--muted); font-size: 14px; line-height: 1.55; } .b-do-w b { color: var(--ink); font-weight: 600; }
.b-also { margin: 12px 0 18px; } .b-also summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--green); }
.b-also ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); } .b-also b { color: var(--ink); }
.b-colophon { padding: 14px 0 0; } .b-colophon summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--green); }
.b-colo p { max-width: 74ch; margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.b-fail { padding: 30px 0; } .b-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: none; font: 700 12px/1 var(--mono); text-transform: uppercase; cursor: pointer; }

/* narrow: one column, notes as a list, multiples stacked */
@container (max-width: 720px) {
  .b-annos { grid-template-columns: 1fr 1fr; }
  .b-multiples { grid-template-columns: 1fr; gap: 10px; }
  .b-mult { display: grid; grid-template-columns: minmax(0, 1fr) 46%; gap: 4px 12px; align-items: center; } .b-mult figcaption { grid-column: 1 / -1; } .b-mult p { grid-row: 2; }
}
@container (max-width: 520px) {
  .b-annos { grid-template-columns: 1fr; }
  .b-movers li { grid-template-columns: minmax(0, 1fr) 64px; } .mv-track { grid-column: 1 / -1; grid-row: 2; margin-bottom: 6px; }
  .b-do li { padding-left: 40px; } .b-do li::before { font-size: 32px; }
  .b-bridge { flex-wrap: wrap; } .b-bridge .seg { flex-basis: 40%; }
}

/* revision 1: the margin from 760px, a three-line headline, chapters that fold on a phone */
.b-headline { max-width: 24ch; font-size: clamp(34px, 5.2cqi, 58px); }
@container (min-width: 760px) { .b-cols { grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 36px; } .b-margin { padding-left: 20px; border-left: 1px solid var(--line); } }
@container (max-width: 759px) { .b-margin { padding-left: 0; border-left: 0; } .b-margin-top { display: none; } }
.b-ch-head .b-lede { margin-bottom: 4px; }
.b-ch-more { padding-top: 6px; }
.b-margin-top { align-self: start; }
.b-big.neg-ish { color: #9c2a20; }
.b-more-btn { display: none; align-items: center; min-height: 44px; margin: 6px 0 4px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font: 700 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); cursor: pointer; }
@container (max-width: 600px) {
  .b-more-btn { display: inline-flex; }
  .b-ch:not([data-open]) .b-ch-more { display: none; }
  .b-ch { padding: 22px 0 14px; }
  .b-h3 { font-size: 27px; }
  .b-lede { font-size: 16px; }
}
.b-do li { padding-bottom: 10px; }
.b-do-t { font-size: 17px; }
.b-do-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 2px; }
.b-why summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--green); font: 600 13px/1 var(--font); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.b-why summary::-webkit-details-marker { display: none; }
.b-why[open] { flex-basis: 100%; } .b-why p { margin: 0 0 6px; max-width: 72ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.b-annos .muted { color: var(--muted); }

.b-chart .lab.mid { text-anchor: middle; }

.b-bridge .seg.orders small, .b-bridge .seg small { color: #3f4d44; }
.b-fail.inline { padding: 14px 16px; margin: 12px 0; border-left: 3px solid var(--neg); background: var(--neg-bg); } .b-fail.inline p { margin: 0 0 10px; }
.b-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.b-key span { display: inline-flex; align-items: center; gap: 7px; }
.b-key .sw { display: inline-block; width: 20px; height: 0; border-top: 2.4px solid var(--green); }
.b-key .sw.ly { border-top: 2px dashed var(--cmp); } .b-key .sw.min { border-top: 1.5px dashed rgba(23,38,29,.6); } .b-key .sw.be { border-top: 2.5px solid var(--ink); }
.b-key .n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 1.2px var(--ink); color: var(--ink); font: 800 10.5px/1 var(--font); font-style: normal; }
/* labels stay legible where they cross a line or a hatched closure */
.b-chart text:not(.anno-n), .b-mult-chart text { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.b-more-btn span { margin-left: 6px; }
.b-big.sm { font-size: 34px; } .b-today { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }