/* ==========================================================================
   KenMacro Macro Data. Visual system, v0.2.7.

   Loaded ONLY on a single macro_entity page (see KMMD_Template::assets), so
   nothing here can reach any other template on the domain.

   No framework, no grid library, no JavaScript. Every rule below is layout,
   type and colour. The page reads identically with this file removed.

   ⛔ Components are wrapped in <div>, not <section>. A sitewide snippet carries
   section{background,margin,padding,border,outline,box-shadow ... !important}
   for the cream repaint, which flattens any styled <section> on the domain.
   The heading outline is unchanged either way, it is carried by the H1 and H2s.

   ------------------------------------------------------------------
   THE COMPOSITION SYSTEM, and the v0.1.4 mistake it corrects.

   v0.1.4 put a 260px contents rail plus an 88px gutter beside the article and
   then forced EVERY component through the remaining 720px. That did two things
   wrong at once: it pushed the hero into the right half of a 1440px screen, and
   it squeezed genuinely wide information (a data module, a six step chain, a two
   scenario comparison, four asset panels) into a prose column, which is why the
   scenarios became skinny walls of text and the asset labels sat marooned in a
   dead left margin.

   There are now THREE widths, and the page deliberately alternates between them:

     PROSE     760px   long form paragraphs
     MID       900px   reference panels, calmer editorial blocks
     WIDE     1120px   data snapshot, transmission chain, scenarios, market
                       impact, and the callout's background

   All three are centred on one spine, so narrow and wide content share a centre
   line and the hero establishes the grid rather than hanging off a rail.
   ------------------------------------------------------------------

   Palette is the live KenMacro palette, taken from the theme's own tokens and
   restated as literals so this file does not depend on any other snippet:
     #0B0D10 ink      #1A1A1A body      #5A5A55 muted
     #B8860B gold     #8A6508 gold deep
     #E5DCC8 rule     #F2EBD8 cream     #FAF7F0 page      #FFFFFF panel
   ========================================================================== */

.kmmd{
  --km-ink:#0B0D10;
  --km-body:#1A1A1A;
  --km-muted:#5A5A55;
  --km-muted-strong:#4A4943;
  --km-faint:#8A8272;
  --km-gold:#B8860B;
  --km-gold-deep:#8A6508;
  --km-rule:#E5DCC8;
  --km-rule-soft:#EFE7D6;
  --km-cream:#F2EBD8;
  --km-tint:#F6F2E8;
  --km-panel:#FFFFFF;
  --km-serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --km-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --km-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --km-prose:760px;
  --km-mid:900px;
  --km-wide:1120px;

  /* Rhythm. Not one blanket margin: structure comes from the alternation of
     widths, from rules and from eyebrows, and only then from space. */
  --km-para:20px;   /* paragraph to paragraph                */
  --km-lede:17px;   /* heading to its first line             */
  --km-sect:52px;   /* prose section to prose section        */
  --km-mod:60px;    /* prose to a wide module, and back      */

  max-width:1180px;
  margin:0 auto;
  padding:0 30px 104px;
  font-family:var(--km-sans);
  font-size:19px;
  line-height:1.72;
  color:var(--km-body);
  -webkit-font-smoothing:antialiased;
}

/* The theme applies overflow-x:hidden to bare article and main tags as a
   sitewide overflow guard. That would turn our own wrapper into a scroll
   container, so we opt this one subtree out. */
.kmmd,
.kmmd .kmmd-entity{overflow:visible !important}

.kmmd .kmmd-doc a{color:var(--km-gold-deep)}
.kmmd .kmmd-doc a:hover{color:var(--km-gold)}

/* --------------------------------------------------------------------------
   1. The three width grid.
   -------------------------------------------------------------------------- */

.kmmd-entity{max-width:var(--km-wide);margin:0 auto}

.kmmd-doc{
  display:grid;
  grid-template-columns:
    [wide-start] minmax(0,1fr)
    [prose-start] minmax(0,var(--km-prose)) [prose-end]
    minmax(0,1fr) [wide-end];
}
.kmmd-doc>*{grid-column:prose-start/prose-end;min-width:0;scroll-margin-top:96px}
.kmmd-doc>.is-wide{grid-column:wide-start/wide-end}
.kmmd-doc>.is-mid{
  grid-column:wide-start/wide-end;
  justify-self:center;width:100%;max-width:var(--km-mid);
}

.kmmd-doc>*+*{margin-top:var(--km-sect)}
.kmmd-doc>.is-wide+*,
.kmmd-doc>.is-mid+*,
.kmmd-doc>*+.is-wide,
.kmmd-doc>*+.is-mid{margin-top:var(--km-mod)}

.kmmd-notice{
  max-width:var(--km-prose);margin:24px auto 0;
  background:#FFF8E5;border:1px solid #E0CFA0;border-radius:8px;
  padding:11px 16px;font-size:14px;line-height:1.5;
}

/* --------------------------------------------------------------------------
   2. Hero. Sits on the prose spine, so every left edge on the page agrees.
      The hairline beneath it spans the WIDE width, which is what actually
      establishes the page grid.
   -------------------------------------------------------------------------- */

.kmmd-head{padding:76px 0 0}
.kmmd-head-in{max-width:var(--km-prose);margin:0 auto}
.kmmd-eyebrow{
  margin:0 0 18px;font-size:11.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--km-gold-deep);
}
.kmmd .kmmd-title{
  font-family:var(--km-serif);
  font-size:clamp(40px,4.6vw,54px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.014em;
  color:var(--km-ink);
  margin:0 0 26px;
  text-wrap:balance;
}
.kmmd-answer{font-size:21px;line-height:1.6;color:#2C2820;max-width:700px}
.kmmd-answer p{margin:0 0 var(--km-para)}
.kmmd-answer p:last-child{margin-bottom:0}
/* Curated alias line under the deck. Understated on purpose: it is a reference
   detail, not a second headline. */
/* An unresolved data token. Deliberately impossible to mistake for a number. */
.kmmd .kmmd-token-missing{
  background:#FFE9E4;color:#8A2A12;border:1px solid #E8B9AC;border-radius:4px;
  padding:1px 6px;font-size:.9em;font-weight:600;
}
.kmmd-alias{
  margin:20px 0 0;font-size:14.5px;line-height:1.5;color:var(--km-muted);
}
.kmmd-alias-k{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--km-faint);margin-right:8px;
}
.kmmd-head::after{
  content:"";display:block;height:1px;background:var(--km-rule);margin-top:42px;
}

/* --------------------------------------------------------------------------
   3. Contents.

      Two elements, deliberately. Desktop gets a horizontal band that does NOT
      dictate the article grid. Mobile gets a <details> that is CLOSED by
      default, because the reader came for the number, not the table of
      contents. One element cannot be open on one breakpoint and closed on
      another without JavaScript, and the mobile default is the one that
      matters, so the two are separate and each is hidden at the other's width.
   -------------------------------------------------------------------------- */

.kmmd-toc{
  border-bottom:1px solid var(--km-rule);
  /* The band spans the WIDE width but its contents start on the PROSE spine, so
     the "On this page" label lines up with the hero eyebrow above it. */
  padding:20px 0 18px calc((var(--km-wide) - var(--km-prose)) / 2);
}
.kmmd-toc-t{
  margin:0 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--km-faint);
}
.kmmd-toc ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 26px;
}
.kmmd .kmmd-toc a{
  display:block;font-size:13.5px;line-height:1.5;color:var(--km-muted);
  text-decoration:none;border-bottom:1px solid transparent;
}
.kmmd .kmmd-toc a:hover,.kmmd .kmmd-toc a:focus-visible{
  color:var(--km-gold-deep);border-bottom-color:var(--km-gold);
}

.kmmd-toc-m{display:none}
.kmmd-toc-m>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--km-faint);
  background:var(--km-panel);border:1px solid var(--km-rule);border-radius:10px;
}
.kmmd-toc-m>summary::-webkit-details-marker{display:none}
.kmmd-toc-m>summary::after{content:"+";font-size:17px;color:var(--km-gold);line-height:1}
.kmmd-toc-m[open]>summary{border-radius:10px 10px 0 0;border-bottom-color:transparent}
.kmmd-toc-m[open]>summary::after{content:"\2013"}
.kmmd-toc-m ol{
  list-style:none;margin:0;padding:6px 18px 14px;
  background:var(--km-panel);border:1px solid var(--km-rule);border-top:none;
  border-radius:0 0 10px 10px;
  columns:2;column-gap:22px;
}
.kmmd .kmmd-toc-m a{
  display:block;padding:6px 0;font-size:13.5px;line-height:1.35;
  color:var(--km-muted);text-decoration:none;break-inside:avoid;
}

/* --------------------------------------------------------------------------
   4. Reading rhythm.
   -------------------------------------------------------------------------- */

.kmmd-doc{padding-top:var(--km-mod)}

.kmmd-doc h2{
  font-family:var(--km-serif);
  font-size:34px;line-height:1.16;font-weight:500;letter-spacing:-.008em;
  color:var(--km-ink);
  margin:0 0 var(--km-lede);
}
.kmmd-doc h3{
  font-family:var(--km-serif);
  font-size:24px;line-height:1.25;font-weight:600;color:var(--km-ink);
  margin:32px 0 8px;
}
.kmmd-prose p{margin:0 0 var(--km-para)}
.kmmd-prose p:last-child{margin-bottom:0}
.kmmd-prose ul,.kmmd-prose ol{margin:0 0 var(--km-para);padding-left:22px}
.kmmd-prose li{margin:0 0 8px}
.kmmd-prose strong{font-weight:600;color:var(--km-ink)}

/* A label above a module. Not a heading: the document outline is exactly the
   H1 and the H2s the editor wrote, and nothing else. */
.kmmd-grouplabel{
  margin:0 0 18px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--km-faint);
  padding-bottom:12px;border-bottom:1px solid var(--km-rule);
}
.kmmd-eyebrow-sm{
  margin:0 0 10px;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--km-gold-deep);
}

/* --------------------------------------------------------------------------
   5. Data snapshot. A WIDE information module, not a card in a text column.
   -------------------------------------------------------------------------- */

.kmmd-snap{
  background:var(--km-panel);
  border:1px solid var(--km-rule);
  border-radius:16px;
  padding:34px 40px 30px;
}
.kmmd-snap-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--km-rule-soft);
}
.kmmd .kmmd-snap-top h2{
  font-family:var(--km-sans);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--km-faint);margin:0;
}
.kmmd-snap-flag{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--km-gold-deep);background:var(--km-cream);
  border:1px solid #E3D6AE;border-radius:20px;padding:4px 11px;white-space:nowrap;
}
.kmmd-snap-flag.is-stale{color:var(--km-muted);background:#F3F1EC;border-color:#E2DED4}

/* ⛔ Tracks are sized to their own CONTENT and spread across the card, not four
   equal fractions. An equal split clips a long value such as "1.72% to 2.47%"
   the moment the card narrows, which is exactly what happened at 1024px. */
.kmmd-stats{
  display:grid;grid-template-columns:repeat(4,max-content);
  justify-content:space-between;
  column-gap:32px;row-gap:26px;align-items:start;
}
/* v0.8.0. Five tiles. The grid was hardcoded to four, so a fifth metric orphaned
   onto a row of its own, which reads as a mistake rather than a metric. PCE needs
   five because headline and core each carry a year on year AND a month on month
   figure, and dropping one of those to fit a stylesheet is the wrong way round. */
.kmmd-stats.is-five{grid-template-columns:repeat(5,max-content);column-gap:26px}
@media (max-width:1180px){.kmmd-stats.is-five{grid-template-columns:repeat(3,max-content)}}
.kmmd-stat{display:flex;flex-direction:column;min-width:0}
.kmmd-stat-k{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--km-faint);line-height:1.35;
  margin:0 0 10px;min-height:26px;
}
.kmmd-stat-v{
  display:block;font-size:30px;line-height:1.05;
  font-weight:500;letter-spacing:-.018em;color:var(--km-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kmmd-stat-lead .kmmd-stat-k{color:var(--km-gold-deep)}
.kmmd-stat-lead .kmmd-stat-v{font-size:46px;letter-spacing:-.026em}

.kmmd-snap-meta{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px 32px;margin:30px 0 0;
  padding-top:24px;border-top:1px solid var(--km-rule-soft);
}
.kmmd-snap-meta dt{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--km-faint);margin:0 0 6px;
}
.kmmd-snap-meta dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--km-body)}

/* --------------------------------------------------------------------------
   6. Transmission chain.

      WIDE and horizontal on desktop, because a six step sequence is exactly
      the kind of information that should use the screen. Vertical below
      1080px, and vertical at any width once there are more than six steps.
      Still an <ol>, still one <li> per step, still server rendered.
   -------------------------------------------------------------------------- */

.kmmd-chain{list-style:none;margin:0;padding:0}

/* vertical form, the default and the small screen form */
.kmmd-node{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);
  column-gap:20px;padding:0 0 26px;
}
.kmmd-node:last-child{padding-bottom:0}
.kmmd-node:not(:last-child)::before{
  content:"";position:absolute;left:21px;top:50px;bottom:14px;width:2px;
  background:var(--km-rule);
}
.kmmd-node:not(:last-child)::after{
  content:"";position:absolute;left:16px;bottom:6px;width:9px;height:9px;
  border-right:2px solid var(--km-rule);border-bottom:2px solid var(--km-rule);
  transform:rotate(45deg);
}
.kmmd-node-n{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--km-rule);background:var(--km-panel);
  display:grid;place-items:center;
  font-family:var(--km-mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--km-muted);
}
.kmmd-node-b{padding-top:8px;min-width:0}
.kmmd-node-l{
  display:block;font-size:18px;font-weight:600;line-height:1.3;color:var(--km-ink);
  text-decoration:none;
}
a.kmmd-node-l:hover{color:var(--km-gold-deep)}
.kmmd-node-note{
  display:block;font-size:15px;line-height:1.55;color:var(--km-muted);margin-top:5px;
}
.kmmd-node.is-current .kmmd-node-n{
  background:var(--km-gold);border-color:var(--km-gold);color:#fff;
}
.kmmd-node.is-current .kmmd-node-b{
  background:var(--km-cream);border:1px solid #E3D6AE;
  border-left:3px solid var(--km-gold);border-radius:10px;
  padding:15px 20px;margin-top:-2px;
}
.kmmd-node.is-current .kmmd-node-l{
  font-size:16px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--km-gold-deep);
}

/* --------------------------------------------------------------------------
   7. Scenario pair and market impact. Both WIDE, so a panel that holds long
      analysis gets a real reading measure instead of a skinny column.
   -------------------------------------------------------------------------- */

.kmmd-pair,.kmmd-quad{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  align-items:start;
}
.kmmd-card{
  background:var(--km-panel);border:1px solid var(--km-rule);border-radius:14px;
  padding:30px 32px 28px;border-top:3px solid var(--km-rule);
}
.kmmd .kmmd-card h2{font-size:25px;line-height:1.2;margin:0 0 14px}
.kmmd-card p{margin:0 0 16px;font-size:17px;line-height:1.62}
.kmmd-card p:last-child{margin-bottom:0}
.kmmd-card-body>p:first-child{font-weight:500;color:var(--km-ink)}
/* Two restrained accents, not a red and green traffic light. */
.kmmd-card.is-hot{border-top-color:var(--km-gold)}
.kmmd-card.is-soft{border-top-color:var(--km-muted)}
.kmmd-card.is-inline{border-top-color:var(--km-rule)}

/* Scenario panels only. A little more air around the heading and between
   paragraphs. Market impact is approved as it stands and is not touched. */
.kmmd-pair .kmmd-card{padding:32px 32px 30px}
.kmmd-pair .kmmd-eyebrow-sm{margin-bottom:13px}
.kmmd .kmmd-pair .kmmd-card h2{margin-bottom:18px}
.kmmd-pair .kmmd-card p{margin-bottom:18px;line-height:1.66}

/* Market impact keeps the two column measure but drops the box. Six white cards
   in a row down one page reads as a dashboard, which is the thing to avoid; a
   column rule separates these four just as clearly and much more quietly. */
.kmmd-quad{column-gap:56px;row-gap:34px}
/* The four cells carry their own column rules, so the group label drops its one
   rather than stacking two hairlines forty pixels apart. */
.has-quad .kmmd-grouplabel{border-bottom:none;padding-bottom:0;margin-bottom:16px}
.kmmd-quad .kmmd-card{
  background:none;border:none;border-top:1px solid var(--km-rule);
  border-radius:0;padding:26px 0 0;
}
/* Scenario cards keep their box even when there are three of them and they borrow
   the two by two grid. They are a comparison, not a reference list, and the wrapper
   is has-quad in that case so this keys off the section id. */
#scenario-analysis .kmmd-quad .kmmd-card{
  background:var(--km-panel);border:1px solid var(--km-rule);border-top-width:3px;
  border-radius:14px;padding:32px 32px 30px;
}
.kmmd .kmmd-quad h2{font-size:26px}

/* Optional structured sub points inside a scenario card. Renders only when an
   editor has written them. Nothing is generated. */
.kmmd-points{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--km-rule-soft)}
.kmmd-points>div{padding:0 0 12px;margin:0}
.kmmd-points>div:last-child{padding-bottom:0}
.kmmd-points dt{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--km-faint);margin:0 0 4px;
}
.kmmd-points dd{margin:0;font-size:16px;line-height:1.5}

/* --------------------------------------------------------------------------
   8. Callout, reference panels, sources.
   -------------------------------------------------------------------------- */

.kmmd-callout{
  background:var(--km-cream);border:1px solid #E3D6AE;
  border-left:4px solid var(--km-gold);border-radius:16px;
  padding:46px 56px;
}
.kmmd .kmmd-callout h2,.kmmd-callout .kmmd-prose{max-width:760px;margin-left:auto;margin-right:auto}
.kmmd .kmmd-callout h2{font-size:30px;margin-bottom:18px}
.kmmd-callout p{font-size:18px}

.kmmd-rulebox{
  background:var(--km-tint);border:1px solid var(--km-rule-soft);
  border-left:3px solid var(--km-muted);border-radius:0 12px 12px 0;
  padding:34px 40px;
}
.kmmd .kmmd-rulebox h2{font-size:29px;margin-bottom:16px}

.kmmd-panel{
  background:var(--km-panel);border:1px solid var(--km-rule);border-radius:14px;
  padding:34px 40px;
}
.kmmd-panel-tag{
  margin:0 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--km-faint);
}
.kmmd .kmmd-panel h2{font-size:29px;margin-bottom:16px}
.kmmd-panel p{font-size:17.5px}

.kmmd-sources{list-style:none;margin:0;padding:0}
.kmmd-sources li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;
  align-items:baseline;
  padding:18px 0;border-top:1px solid var(--km-rule-soft);
}
.kmmd-sources li:first-child{border-top:none;padding-top:4px}
.kmmd-src-org{
  grid-column:1;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--km-faint);
}
.kmmd-src-title{grid-column:1;font-size:16.5px;line-height:1.45;overflow-wrap:anywhere}
.kmmd-src-title a{text-decoration:none;border-bottom:1px solid #DCCFA8}
.kmmd-src-title a:hover{border-bottom-color:var(--km-gold)}
.kmmd-src-out{font-size:13px;color:var(--km-faint);margin-left:4px}
.kmmd-src-date{
  grid-column:2;grid-row:1/span 2;align-self:center;
  font-size:12.5px;color:var(--km-faint);white-space:nowrap;text-align:right;
}

.kmmd-related{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  list-style:none;margin:0;padding:0;
}
.kmmd .kmmd-related a{
  display:block;background:var(--km-panel);border:1px solid var(--km-rule);
  border-radius:12px;padding:18px 20px;font-size:16.5px;font-weight:500;
  line-height:1.35;text-decoration:none;color:var(--km-ink);
}
.kmmd .kmmd-related a:hover{border-color:var(--km-gold);color:var(--km-gold-deep)}

/* --------------------------------------------------------------------------
   9. Reading environment.

   Two sitewide overlays compete with a long reference page. Suppressed here
   only, because this stylesheet loads on nothing else. The desk assistant
   BUTTON stays; only its self opening teaser is stood down.
   -------------------------------------------------------------------------- */

#km-da-teaser{display:none !important}
#km-rt{display:none !important}

/* --------------------------------------------------------------------------
   10. Desktop only: the horizontal chain.
   -------------------------------------------------------------------------- */

@media (min-width:1080px){
  .kmmd-chain[data-steps="3"],
  .kmmd-chain[data-steps="4"],
  .kmmd-chain[data-steps="5"],
  .kmmd-chain[data-steps="6"]{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;
  }
  .kmmd-chain[data-steps="3"] .kmmd-node,
  .kmmd-chain[data-steps="4"] .kmmd-node,
  .kmmd-chain[data-steps="5"] .kmmd-node,
  .kmmd-chain[data-steps="6"] .kmmd-node{
    display:block;text-align:center;padding:0 14px;
  }
  /* clear the vertical rail and chevron, or the first node keeps a stray one */
  .kmmd-chain[data-steps] .kmmd-node::before,
  .kmmd-chain[data-steps] .kmmd-node::after{content:none}
  /* the rule arriving from the previous node, ending just before this badge */
  .kmmd-chain[data-steps] .kmmd-node+.kmmd-node::before{
    content:"";position:absolute;top:21px;height:2px;
    left:calc(-50% + 22px);right:calc(50% + 22px);bottom:auto;width:auto;
    background:var(--km-rule);
  }
  /* and its arrow head */
  .kmmd-chain[data-steps] .kmmd-node+.kmmd-node::after{
    content:"";position:absolute;top:16px;left:calc(50% - 28px);bottom:auto;
    width:9px;height:9px;
    border-right:2px solid var(--km-rule);border-top:2px solid var(--km-rule);
    border-bottom:none;transform:rotate(45deg);
  }
  .kmmd-chain[data-steps] .kmmd-node-n{margin:0 auto}
  .kmmd-chain[data-steps] .kmmd-node-b{padding:16px 0 0}
  /* two lines reserved for every label, so the notes below them line up */
  .kmmd-chain[data-steps] .kmmd-node-l{font-size:16.5px;font-weight:600;line-height:1.3;letter-spacing:-.004em;min-height:2.6em}
  /* The supporting line is signature IP, not a footnote: bigger, looser and
     darker than the muted grey used elsewhere. */
  .kmmd-chain[data-steps] .kmmd-node-note{
    font-size:13.5px;line-height:1.52;margin-top:8px;color:var(--km-muted-strong);
  }
  .kmmd-chain[data-steps] .kmmd-node.is-current .kmmd-node-b{
    background:none;border:none;border-radius:0;padding:16px 0 0;margin:0;
  }
  .kmmd-chain[data-steps] .kmmd-node.is-current .kmmd-node-l{
    font-size:14.5px;font-weight:700;letter-spacing:.09em;
  }
  .kmmd-chain[data-steps] .kmmd-node.is-current .kmmd-node-l::after{
    content:"";display:block;width:34px;height:2px;background:var(--km-gold);
    margin:9px auto 0;
  }
}

/* --------------------------------------------------------------------------
   11. Below the desktop grid.
   -------------------------------------------------------------------------- */

@media (max-width:1079px){
  .kmmd{--km-wide:900px;padding:0 26px 88px}
  .kmmd-entity{max-width:900px}
  .kmmd-toc{display:none}
  .kmmd-toc-m{display:block;margin-top:32px}
  .kmmd-head{padding-top:56px}
  .kmmd-head::after{margin-top:34px}
  .kmmd-doc{padding-top:48px}
  .kmmd-callout{padding:38px 40px}
}

@media (max-width:900px){
  .kmmd-pair,.kmmd-quad,.kmmd-related{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:768px){
  .kmmd{
    font-size:17.5px;line-height:1.7;padding:0 20px 80px;
    --km-para:18px;--km-lede:14px;--km-sect:44px;--km-mod:44px;
  }
  /* The theme carries a sitewide h1/h2 font-size override marked important
     below 768px. These rules are the only way to keep this template's own
     heading scale, and they are scoped to this page's classes. */
  .kmmd .kmmd-title{font-size:clamp(32px,7.4vw,40px) !important;line-height:1.1 !important}
  .kmmd .kmmd-doc h2{font-size:28px !important;line-height:1.2 !important}
  .kmmd .kmmd-card h2{font-size:23px !important}
  .kmmd .kmmd-callout h2{font-size:25px !important}
  .kmmd .kmmd-panel h2,.kmmd .kmmd-rulebox h2{font-size:24px !important}
  .kmmd .kmmd-snap-top h2{font-size:11px !important;line-height:1.4 !important}
  .kmmd-answer{font-size:19px}
  .kmmd-head{padding-top:44px}
  .kmmd-snap{padding:26px 24px 24px;border-radius:14px}
  .kmmd-stats,.kmmd-stats.is-five{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:start;column-gap:20px;row-gap:22px}
  .kmmd-stat-lead{grid-column:1/-1}
  .kmmd-stat-lead .kmmd-stat-v{font-size:40px}
  .kmmd-stat-v{font-size:26px}
  .kmmd-stat-k{min-height:0}
  .kmmd-snap-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
  .kmmd-card{padding:24px 22px}
  .kmmd-callout{padding:28px 24px}
  .kmmd .kmmd-callout h2,.kmmd-callout .kmmd-prose{max-width:none}
  .kmmd-callout p{font-size:17.5px}
  .kmmd-panel,.kmmd-rulebox{padding:26px 24px}
  .kmmd-panel p{font-size:17px}
  .kmmd-sources li{grid-template-columns:minmax(0,1fr)}
  .kmmd-src-date{grid-column:1;grid-row:auto;text-align:left;padding-top:2px}
}

@media (max-width:430px){
  /* The theme adds 16px of its own side padding to .wrap below 414px, so this
     page's own padding drops to keep the total at roughly 20px. */
  .kmmd{font-size:17px;padding:0 4px 72px}
  .kmmd .kmmd-title{font-size:clamp(30px,8.4vw,36px) !important;line-height:1.08 !important}
  .kmmd .kmmd-doc h2{font-size:26px !important}
  .kmmd .kmmd-card h2{font-size:22px !important}
  .kmmd .kmmd-callout h2{font-size:24px !important}
  .kmmd .kmmd-panel h2,.kmmd .kmmd-rulebox h2{font-size:23px !important}
  .kmmd .kmmd-snap-top h2{font-size:11px !important}
  .kmmd-head{padding-top:36px}
  .kmmd-answer{font-size:18px}
  /* .kmmd-snap padding is NOT set here. Section 12 below is a max-width:480px
     block, so it is later in the file and wins every tie at 430 and under. The
     rule that used to sit on this line was dead, and read as though it were the
     one in force. Snapshot padding lives in section 12, in one place. */
  .kmmd-stat-lead .kmmd-stat-v{font-size:36px}
  .kmmd-stat-v{font-size:24px}
  .kmmd-node{grid-template-columns:38px minmax(0,1fr);column-gap:16px}
  .kmmd-node-n{width:38px;height:38px;font-size:11px}
  .kmmd-node:not(:last-child)::before{left:18px;top:44px}
  .kmmd-node:not(:last-child)::after{left:13px}
  .kmmd-node.is-current .kmmd-node-b{padding:13px 16px}
  .kmmd-card,.kmmd-callout,.kmmd-panel,.kmmd-rulebox{padding:22px 18px}
  .kmmd-toc-m ol{columns:1}
}

/* --------------------------------------------------------------------------
   12. Mobile snapshot, final polish. Roughly twelve per cent of the internal
       vertical air removed so the module costs less of a phone screen. The
       value sizes, the information and the card itself are unchanged.
   -------------------------------------------------------------------------- */

@media (max-width:480px){
  .kmmd-snap{padding:19px 18px 18px}
  .kmmd-snap-top{margin-bottom:22px;padding-bottom:13px}
  .kmmd-stats{row-gap:19px}
  .kmmd-stat-k{margin-bottom:8px}
  .kmmd-snap-meta{margin-top:24px;padding-top:19px;gap:14px 20px}
}

/* --------------------------------------------------------------------------
   13. The desk assistant on a phone.

   ⛔ On CPI at 390 the floating "Ask the desk" pill sat across the CORE YEAR ON
   YEAR value in the data snapshot. A floating control covering the primary
   number is worse than a floating control covering a sentence: the number is
   the reason the reader opened the page.

   The pill is a sitewide component and it STAYS. What changes, on this
   stylesheet only and only on a phone, is its footprint. It becomes a compact
   circular control of about 46px instead of a 150px labelled pill, which is
   roughly a fifth of the area and narrow enough to sit in the right margin
   beside a snapshot value rather than on top of one.

   Accessibility: the label is moved off screen with text-indent rather than
   removed or hidden with display, so the button keeps its accessible name.
   The live dot is repositioned to the centre and given a ring so the control
   still reads as the desk assistant and not as an unlabelled blob.

   The bottom offset is RAISED, not lowered. The theme puts the control 58px up
   so it clears the sliding .kmbar; 96px lifts it clear of the phone browser's
   own bottom toolbar band as well, and measured across every 25px scroll
   position on all three entities that offset produces no contact with a value,
   a label, a heading, body copy or a source link. 58px left the corner of the
   CORE YEAR ON YEAR label under the control. Moving it DOWN was never an
   option: that is where the bottom bar lives.
   -------------------------------------------------------------------------- */

@media (max-width:480px){
  /* ⛔ The 96px offset alone is GEOMETRY DEPENDENT and does not generalise. It
     cleared every contact on the first three entities, then NFP arrived with
     different label lengths and put "Unemployment rate" back under the control
     for 58 square pixels. Chasing that with another offset would just move the
     problem to the fifth entity.

     The general fix is here instead: the snapshot's LABELS reserve the control's
     column, so no label on any entity, present or future, can reach into it.
     Values are untouched, because they are short and must never be made to wrap
     again. The offset above stays as the second line of defence. */
  .kmmd-stats .kmmd-stat-k{padding-right:46px}

  /* The theme scales the whole control by .84. Undo it so the sizes below are
     the real rendered sizes and not 84 per cent of them. */
  #km-da{transform:none !important;bottom:96px !important}

  #km-da-btn{
    position:relative !important;
    width:46px !important;height:46px !important;
    min-width:0 !important;
    padding:0 !important;gap:0 !important;
    border-radius:50% !important;
    text-indent:-9999px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    box-shadow:0 4px 14px rgba(0,0,0,.24) !important;
  }
  #km-da-btn .km-da-dot{
    position:absolute !important;
    top:50% !important;left:50% !important;
    width:9px !important;height:9px !important;
    margin:-4.5px 0 0 -4.5px !important;
    text-indent:0 !important;
    box-shadow:0 0 0 5px rgba(184,134,11,.28) !important;
  }
}

/* --------------------------------------------------------------------------
   14. The curated hub at /macro-data/.

   Same three widths, same type, same panel and rule colours as an entity page.

   ⛔ COMPOSITION. The first build put the cards in a two column grid inside the
   WIDE band. With one entity per group that produced a 551px card sitting in a
   1120px band, left aligned, with a dead column down the right of the whole
   page. That is the exact fault the 4 Sep review rejected on the entity pages.

   The card is now a ROW at MID width: the name, the role line and the link on
   the left, the live figure held right against a hairline. A group with two
   entities splits into two rows, not into two half empty columns. The width is
   used by the content rather than by the container.

   Every selector below is prefixed .kmmd-hub so nothing here can reach an
   entity page.
   -------------------------------------------------------------------------- */

.kmmd-hub .kmmd-grouplabel{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  color:var(--km-ink);font-size:12px;letter-spacing:.15em;
}
.kmmd-hub-step{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--km-rule);background:var(--km-panel);
  font-size:10px;letter-spacing:.04em;color:var(--km-gold-deep);
  flex:0 0 auto;
}
.kmmd-hub-standfirst{
  font-size:11px;letter-spacing:.13em;color:var(--km-faint);font-weight:500;
}

.kmmd-hub-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}

.kmmd-hub .kmmd-hub-card{
  background:var(--km-panel);
  border:1px solid var(--km-rule);
  border-top:3px solid var(--km-gold);
  border-radius:14px;
  padding:28px 30px 26px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:22px;
}
/* ⛔ The reading order differs by width, on purpose. Stacked on a phone the
   figure has to come BEFORE the link, or the card reads name, role, "read the
   full entry", and only then the number the reader came for. On desktop the
   figure holds the right column across both rows and the link sits under the
   role, which is the natural eye path there. */
@media (min-width:720px){
  .kmmd-hub .kmmd-hub-card{
    grid-template-columns:minmax(0,1fr) minmax(210px,250px);
    grid-template-areas:"main fig" "go fig";
    align-items:start;gap:16px 34px;
  }
  .kmmd-hub-main{grid-area:main}
  .kmmd-hub-figure{grid-area:fig}
  .kmmd-hub-go{grid-area:go;align-self:end}
}
.kmmd-hub-main{min-width:0}
.kmmd .kmmd-hub-card h2{font-size:25px;line-height:1.2;margin:0 0 12px}
.kmmd .kmmd-hub-card h2 a{text-decoration:none;color:var(--km-ink);border:0}
.kmmd .kmmd-hub-card h2 a:hover{color:var(--km-gold-deep)}
.kmmd-hub-role{margin:0;font-size:16.5px;line-height:1.6;color:var(--km-muted-strong)}

.kmmd-hub-figure{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding-top:2px}
@media (min-width:720px){
  .kmmd-hub-figure{border-left:1px solid var(--km-rule-soft);padding-left:28px;height:100%}
}
.kmmd-hub-k{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--km-faint);line-height:1.35;
}
.kmmd-hub-v{font-size:32px;line-height:1.05;font-weight:500;letter-spacing:-.018em;color:var(--km-ink)}
.kmmd-hub-stamp{font-size:13.5px;color:var(--km-muted);line-height:1.45}

.kmmd-hub-go{margin:0;font-size:14.5px}
.kmmd .kmmd-hub-go a{color:var(--km-gold-deep);text-decoration:none;border-bottom:1px solid var(--km-rule)}
.kmmd .kmmd-hub-go a:hover{border-bottom-color:var(--km-gold)}

@media (max-width:480px){
  .kmmd-hub .kmmd-hub-card{padding:22px 18px 20px;gap:18px}
  .kmmd .kmmd-hub-card h2{font-size:22px}
  .kmmd-hub-role{font-size:16px}
  .kmmd-hub-v{font-size:28px}
}