/* NatGas Central · ngc-content.css (workstream C; BUILD_SPEC §1.3): Weekly commentary, posts and the Method / Terms /
   Privacy / Refund pages, ported from the approved prototype's css/pages/content.css (round 5) with class names unchanged.
   Tokens only. Real-site additions are at the end ("real site"). */

/* ---------------------------------------------------------------- shared bits */
.ct-h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--t1); }
.ct-serif { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--reading); max-width: 640px; text-wrap: pretty; }
.ct-crumb { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); line-height: 1.3; }
.ct-crumb a { color: var(--t2); }
.ct-crumb a:hover { color: var(--t1); }
.ct-crumb svg { color: var(--t3); }
.ct-linkbtn { background: none; border: 0; padding: 0; min-height: 32px; color: var(--accent); font-size: 14px; font-weight: 500; }
.ct-linkbtn:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* the five-word house view: the dot + word (.n-bword), the swatches (.n-bsw) and the grouped key (.n-bkey) are core's
   (components.css); only the "How the view changed" grid cells and the size tweaks below are the module's */
.ct-cell { display: block; box-sizing: border-box; border-radius: 2px; }
.ct-cell--pressuring { background: var(--down); }
.ct-cell--cautious { background: color-mix(in srgb, var(--down) 55%, transparent); border: 1.5px solid var(--down); }
.ct-cell--balanced { background: transparent; border: 1.5px solid var(--t3); }
.ct-cell--supportive { background: color-mix(in srgb, var(--up) 55%, transparent); border: 1.5px solid var(--up); }
.ct-cell--constructive { background: var(--up); }

/* ---------------------------------------------------------------- rail pieces (commentary + post) */
.ct-rail__block { display: flex; flex-direction: column; min-width: 0; }
.ct-rail__p { font-size: 13px; line-height: 1.55; color: var(--t2); margin: 10px 0 12px; }
.ct-next { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--t3); }
.ct-next p { display: flex; flex-direction: column; gap: 2px; }
.ct-next__k { font-size: 12px; color: var(--t3); }
.ct-next__v { font-size: 14px; color: var(--t2); }
.ct-next__v strong { color: var(--t1); font-weight: 600; }
.ct-arch__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.ct-arch__all { font-size: 12px; color: var(--t3); }
.ct-arch__alllink { font-size: 13px; }
.ct-arch__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--hair-soft); font-size: 14px; color: var(--t1); }
.ct-arch__row:hover { color: var(--accent-hover); }
.ct-arch__row[aria-current="page"] { color: var(--accent); font-weight: 600; }
.ct-arch__row--all { color: var(--accent); }
.ct-arch__n { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; }
.ct-proof { display: flex; flex-direction: column; margin-top: 10px; }
.ct-proof__row { padding: 14px 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; }
.ct-proof__row:first-child { border-top: 0; padding-top: 4px; }
.ct-proof__v { font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-proof__u { font-size: 15px; color: var(--t2); letter-spacing: 0; }
.ct-proof__k { font-size: 14px; line-height: 1.5; color: var(--t2); }
.ct-proof__k .n-link { white-space: nowrap; }
.ct-cta { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.ct-cta__t { font-size: 17px; line-height: 1.3; }
.ct-cta__text { font-size: 14px; line-height: 1.55; color: var(--t2); }
.ct-cta__text .n-chip { margin-right: 4px; vertical-align: 1px; }
.ct-cta__notice { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.ct-cta__notice svg { margin-top: 3px; color: var(--t3); }
.ct-cta__fine { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); }
.ct-cta__fine .n-link { font-size: 14px; }

/* ================================================================ COMMENTARY INDEX */
.ct-idx__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.ct-idx__main { grid-column: 1 / 9; min-width: 0; }
.ct-idx__rail { grid-column: 10 / 13; min-width: 0; display: flex; flex-direction: column; gap: 36px; padding-top: 8px; }
/* round 5 (SPEC5 §4.5 item 2): sticky elements sit under the pinned header. The desktop nav is pinned too since the 2 Oct
   integration, so --pin-h is 64 px there and these tops are 88 px (below 1100 px these elements are static). */
.ct-cta--sticky { position: sticky; top: calc(var(--pin-h, 0px) + 24px); }

.ct-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; padding-top: 8px; }
.ct-head__t { letter-spacing: -0.02em; }
.ct-head--sub { gap: 10px; margin-bottom: 32px; }
.ct-head__sub { font-size: 14px; color: var(--t3); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.ct-notice { margin: -8px 0 32px; }

/* featured post */
.ct-feat { display: flex; flex-direction: column; }
.ct-feat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; }
.ct-feat__when { margin-left: 4px; }
.ct-feat__t { margin-top: 14px; font-size: 32px; line-height: 1.2; letter-spacing: -0.018em; text-wrap: balance; }
.ct-feat__t a { color: var(--t1); }
.ct-feat__t a:hover { color: var(--accent-hover); }
.ct-feat__dek { margin-top: 12px; max-width: 680px; font-size: 17px; line-height: 1.55; color: var(--t2); text-wrap: pretty; }
.ct-feat__plain { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.ct-feat__foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 18px; }
.ct-fhv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; max-width: 640px; }
.ct-fhv__cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-fhv__h { font-size: 12px; font-weight: 500; color: var(--t3); }
.ct-fhv__chg { font-size: 12px; color: var(--t3); }
.ct-fhv__chg strong { color: var(--t1); }
.ct-feat__end { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.ct-feat__since { font-size: 13px; color: var(--t3); }

/* "How the view changed" */
.ct-hist { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hair); }
.ct-hist__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.ct-hist__sub { font-size: 12px; line-height: 1.5; color: var(--t3); font-variant-numeric: tabular-nums; }
/* "click" or "tap" by input type, not screen width, so an iPad says "tap" (plain CSS, the same in the PHP template) */
.ct-hist__tap { display: none; }
@media (hover: none) { .ct-hist__click { display: none; } .ct-hist__tap { display: inline; } }
.ct-hist__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 48px; }
.ct-hist__scroll { min-width: 0; max-width: 100%; }
.ct-hist__grid { --cell: 16px; --gap: 4px; --lab: 60px; display: grid; grid-template-columns: var(--lab) repeat(var(--n), minmax(0, var(--cell))); column-gap: var(--gap); row-gap: 6px; align-items: center; }
.ct-hist__lab { grid-column: 1; font-size: 12px; color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-hist__latest { grid-row: 1; font-size: 11px; font-weight: 600; color: var(--t1); text-align: right; white-space: nowrap; line-height: 1.2; }
.ct-hist__tick { font-size: 11px; color: var(--t3); white-space: nowrap; line-height: 1.2; padding-top: 2px; }
.ct-cell { width: 100%; aspect-ratio: 1 / 1; }
.ct-cell--last { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--line); }
/* one link per column over its three cells (round 5): the ::after reaches half the gap each side, so the columns tile edge to edge */
.ct-hist__col { grid-row: 2 / span 3; align-self: stretch; position: relative; z-index: 1; border-radius: 3px; cursor: pointer; }
.ct-hist__col::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); }
.ct-hist__col:hover { outline: 1px solid var(--t2); outline-offset: 1px; }
/* the narrowest phones (360 px: columns about 11–13 px wide, too thin to hit the right week with a thumb): the drawing is a picture
   only and the caption drops "tap a column"; the list below and its pages link every post (SPEC5 §4.5 item 4, the fallback) */
@media (max-width: 379px) {
  .ct-hist__col { pointer-events: none; cursor: default; }
  .ct-hist__sub > span[aria-hidden] { display: none; }
}
.ct-hist .n-bkey { min-width: 240px; padding-top: 16px; }
.ct-hist__note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--t2); max-width: 640px; }

/* archive list */
.ct-idx { --ct-row-cols: 64px minmax(0, 1fr) 280px 16px; }
.ct-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 56px; padding-bottom: 12px; }
.ct-head--sub + .ct-mchips + .ct-list__head, .ct-head--sub + .ct-list__head { margin-top: 8px; }
.ct-list__hint { font-size: 12px; line-height: 1.5; color: var(--t3); text-wrap: balance; }
.ct-list__hintdot { color: var(--t2); font-weight: 600; }
.ct-list__cols { display: grid; grid-template-columns: var(--ct-row-cols); column-gap: 24px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--t3); }
.ct-list__hv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
.ct-list__month { padding: 22px 0 10px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); line-height: 1.3; }
.ct-row { position: relative; display: grid; grid-template-columns: var(--ct-row-cols); column-gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hair-soft); }
.ct-row__date time { display: flex; flex-direction: column; gap: 2px; }
.ct-row__d { font-size: 15px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-row__wd { font-size: 12px; color: var(--t3); white-space: nowrap; }
.ct-row__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ct-row__t { font-size: 16px; font-weight: 600; line-height: 1.35; }
.ct-row__t a { color: var(--t1); }
.ct-row__t a::after { content: ''; position: absolute; inset: 0; }
.ct-row:hover .ct-row__t a { color: var(--accent-hover); }
.ct-row__series { font-size: 12px; font-weight: 500; color: var(--t3); white-space: nowrap; margin-left: 6px; }
.ct-row__x { font-size: 14px; line-height: 1.55; color: var(--t2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-row__phone { display: none; }
.ct-row__bias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; align-items: baseline; font-size: 13px; }
.ct-row__bias .n-bword { font-size: 13px; gap: 6px; }
.ct-row__b--same { color: var(--t3); padding-left: 14px; }
.ct-row__arrow { color: var(--t3); align-self: start; padding-top: 3px; transition: transform .12s, color .12s; }
.ct-row:hover .ct-row__arrow { color: var(--t1); transform: translateX(2px); }

/* pagination and month navigation */
.ct-pag { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 32px; }
.ct-pag__btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ct-pag__n { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid transparent; font-size: 14px; font-weight: 500; color: var(--t2); font-variant-numeric: tabular-nums; }
.ct-pag__n:hover { color: var(--t1); background: var(--surface); }
.ct-pag__n[aria-current="page"] { background: var(--raised); border-color: var(--line); color: var(--t1); }
.ct-pag__step { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; font-size: 15px; font-weight: 500; color: var(--accent); }
.ct-pag__step:hover { color: var(--accent-hover); }
.ct-pag__info { font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; }
.ct-mnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; }
.ct-mnav__a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--accent); }
.ct-mnav__a:hover { color: var(--accent-hover); }

/* month chips (phone and tablet) */
.ct-mchips { margin-top: 40px; }
.ct-head--sub + .ct-mchips { margin-top: 0; margin-bottom: 24px; }
.ct-mchips__in { display: flex; gap: 8px; padding-bottom: 4px; }
.ct-mchip { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--t2); white-space: nowrap; }
.ct-mchip span { color: var(--t3); font-variant-numeric: tabular-nums; }
.ct-mchip:hover { color: var(--t1); border-color: var(--t3); }
.ct-mchip[aria-current="page"] { background: var(--raised); border-color: var(--t3); color: var(--t1); }

.ct-sample { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--t2); }

/* ================================================================ POST + DOC layout (the Article board) */
.ct-art__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.ct-art__main { grid-column: 3 / 9; min-width: 0; }
.ct-art__rail { grid-column: 10 / 13; min-width: 0; }
.ct-art__railin { position: sticky; top: calc(var(--pin-h, 0px) + 24px); display: flex; flex-direction: column; gap: 36px; padding-top: 8px; }
/* a screen shorter than the rail: the rail scrolls with the page, so nothing in it is ever cut off (wide.md 11). The rail pins
   88 px down (the 64 px desktop nav + 24), so it needs its height + 88 px of window. The post rail is 898 px tall (every post,
   every viewer, 2 Oct), so it needs 986 px; it lets go at 1023 px and below (1280×800, 1366×768, 1440×900, and most 1080-tall
   screens once the browser's own bars are taken off) and pins from a 1024 px window. The doc rail ("On this page", Questions,
   Other pages) is 487–561 px, so it needs up to 649 px; it stays pinned, with its scroll-position highlight, down to a 680 px
   window. */
@media (max-height: 1023px) { .ct-art:not(.ct-doc) .ct-art__railin { position: static; } }
@media (max-height: 679px) { .ct-doc .ct-art__railin { position: static; } }
/* round 5 (SPEC5 §4.5 item 1, wide.md 6): the text column keeps its right edge one column before the rail and grows left, to at
   most 680 px, so it never gets narrower as the window gets wider (619 px at 1100, 680 from about 1190) */
@media (min-width: 1100px) { .ct-art__main { grid-column: 1 / 9; width: 100%; max-width: 680px; justify-self: end; } }
.ct-art__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; padding-top: 8px; }
.ct-art__t { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.ct-art__dek { font-size: 18px; line-height: 1.55; color: var(--t2); text-wrap: pretty; }
.ct-art__meta { font-size: 14px; color: var(--t2); font-variant-numeric: tabular-nums; }
.ct-art__meta strong { color: var(--t1); font-weight: 500; }
.ct-art__by { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--t2); margin-top: -4px; }
.ct-art__by strong { color: var(--t1); font-weight: 500; }

/* house view strip */
.ct-strip { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 20px; margin-bottom: 40px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ct-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.ct-strip__line { font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.ct-strip__line strong { color: var(--t1); }
.ct-strip__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.ct-strip__cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ct-strip__h { font-size: 12px; font-weight: 500; color: var(--t3); }
.ct-strip__cell .n-bword { font-size: 15px; }
.ct-strip__sub { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--t3); }
.ct-strip__sub strong { color: var(--t1); }
.ct-strip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t1); flex: none; }
.ct-strip__key { font-size: 12px; line-height: 1.5; color: var(--t3); }

/* long-form reading: the real post HTML, and the doc pages */
.ct-prose { color: var(--reading); }
.ct-prose--post > h2, .ct-doc__sec > h2, .ct-doc__intro > h2 { font-family: var(--sans); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--t1); margin: 40px 0 12px; scroll-margin-top: 16px; }
.ct-prose--post > h2:first-child, .ct-doc__sec:first-child > h2, .ct-doc__sec:first-child > .ct-doc__intro > h2 { margin-top: 0; }
.ct-prose--post h3, .ct-doc__sec > h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--t1); margin: 28px 0 10px; }
/* bullet lists only (ul without a class): the phone model list (.ct-mlist) keeps its own sans rows, like the table it stands in for */
.ct-prose--post p, .ct-doc__sec > p:not([class]), .ct-doc__intro > p:not([class]), .ct-doc__sec > ul:not([class]) > li { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--reading); text-wrap: pretty; }
.ct-prose--post p, .ct-doc__sec > p:not([class]), .ct-doc__intro > p:not([class]) { margin: 0 0 20px; }
.ct-doc__sec > ul:not([class]) { margin: 0 0 20px; padding-left: 22px; }
.ct-doc__sec > ul:not([class]) > li { margin-bottom: 10px; }
.ct-doc__sec > ul:not([class]) > li::marker { color: var(--t3); }
.ct-prose strong { color: var(--t1); font-weight: 600; }
.ct-prose a, .ct-prose__ext { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ct-prose a:hover, .ct-prose__ext:hover { color: var(--accent-hover); }
.ct-prose .n-link { text-decoration: none; }
.ct-prose__ext { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ct-plainbox { margin: 36px 0 8px; padding: 22px 24px 2px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.ct-prose--post .ct-plainbox__h { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); line-height: 1.3; }

/* "How this is written" */
.ct-how { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); color: var(--t3); }
.ct-how > svg { margin-top: 1px; }
.ct-how__t { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.ct-how p { font-size: 14px; line-height: 1.6; color: var(--t2); }

/* end call to action */
.ct-end { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; padding: 28px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.ct-end__t { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.ct-end__text { font-size: 15px; line-height: 1.6; color: var(--t2); max-width: 560px; }
.ct-end .n-overline { margin-top: 4px; }
.ct-end__lines { list-style: none; margin: -6px 0 4px; padding: 0; border-top: 1px solid var(--hair-soft); }
.ct-end__lines li { border-bottom: 1px solid var(--hair-soft); }
.ct-end__line { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: var(--t1); }
.ct-end__line > svg { color: var(--t3); }
.ct-end__line--a { grid-template-columns: 16px minmax(0, 1fr) auto 14px; }
.ct-end__line--a:hover { color: var(--accent-hover); }
.ct-end__line--a:hover .ct-end__v { color: var(--t2); }
.ct-end__v { font-size: 13px; color: var(--t3); text-align: right; font-variant-numeric: tabular-nums; }
.ct-end__fine { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); }

/* previous / next */
.ct-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ct-pn__a { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 20px 0; color: var(--t1); min-width: 0; }
.ct-pn__a--next { align-items: flex-end; text-align: right; padding: 20px 0 20px 20px; border-left: 1px solid var(--hair); }
a.ct-pn__a:hover .ct-pn__t { color: var(--accent-hover); }
.ct-pn__k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--t3); }
.ct-pn__t { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--t1); }
.ct-pn__d { font-size: 13px; color: var(--t3); }
.ct-pn__a--none .ct-pn__t { color: var(--t2); }
.ct-pn__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--t3); }
.ct-pn__foot .n-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* post rail */
.ct-more { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.ct-more__d { font-size: 12px; color: var(--t3); }
.ct-more__t { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--t1); }
.ct-more:hover .ct-more__t { color: var(--accent-hover); }

/* ================================================================ DOC pages */
.ct-crumb--doc span { color: var(--t3); }
.ct-doc__upd { font-size: 14px; color: var(--t2); font-variant-numeric: tabular-nums; }
.ct-doc__note { margin-bottom: 32px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.ct-doc__note .n-note { font-size: 14px; color: var(--t2); }
.ct-doc__note .n-note svg { margin-top: 3px; color: var(--t3); }
.ct-doc__sec + .ct-doc__sec { margin-top: 12px; }
.ct-defs { margin: 0 0 24px; border-top: 1px solid var(--hair-soft); }
.ct-defs__row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.ct-defs__row dt { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--t1); }
.ct-defs__row dd { font-size: 15px; line-height: 1.6; color: var(--t2); }
.ct-doc__table { margin: 4px 0 10px; }
.ct-doc__table .n-chip { vertical-align: 1px; }
.ct-doc__cap { font-size: 13px; line-height: 1.55; color: var(--t3); margin: 0 0 24px; max-width: 640px; }
.ct-doc__cap strong { color: var(--t2); font-weight: 600; }
.ct-mod { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--t1); font-weight: 600; }
.ct-mod__g { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--t3); }
.ct-doc__models td, .ct-doc__models th { vertical-align: top; }
.ct-mlist { list-style: none; margin: 4px 0 12px; padding: 0; border-top: 1px solid var(--hair); }
.ct-defs + .ct-mlist { border-top: 0; }
.ct-mlist li { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.ct-mlist .ct-mod { font-size: 15px; line-height: 1.4; }
.ct-mlist__m { font-size: 13px; color: var(--t2); }
/* the run-time explanation ("00Z") sits in a row of short codes: a bigger hit area, the line itself unchanged */
.ct-mlist__m .n-term { position: relative; }
.ct-mlist__m .n-term::after { content: ""; position: absolute; inset: -12px -10px; }
.ct-mlist__s { font-size: 12px; line-height: 1.5; color: var(--t3); }
.ct-toc { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.ct-toc li { border-bottom: 1px solid var(--hair-soft); }
.ct-toc__a { display: flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--t2); }
.ct-toc__a:hover { color: var(--t1); }
.ct-toc__a[aria-current] { color: var(--t1); font-weight: 500; }
/* a part is in view: its section's link stays lit, a step quieter than the part itself */
.ct-toc__a--parent { color: var(--t1); }
.ct-tocm { margin: -8px 0 28px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.ct-tocm summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-size: 15px; font-weight: 500; color: var(--t1); }
.ct-tocm summary > span { display: inline-flex; align-items: center; gap: 10px; }
.ct-tocm summary svg { color: var(--t3); }
.ct-tocm__chev { transition: transform .15s; }
.ct-tocm[open] .ct-tocm__chev { transform: rotate(180deg); }
.ct-tocm .ct-toc { margin: 0 16px 8px; }
.ct-tocm .ct-toc__a { min-height: 44px; }
/* a section's parts, indented under it in the "On this page" list */
.ct-toc--sub { margin: -4px 0 8px 1px; padding-left: 13px; border-top: 0; border-left: 1px solid var(--hair); }
.ct-toc--sub li { border-bottom: 0; }
.ct-toc__a--sub { min-height: 30px; font-size: 13px; line-height: 1.35; }
.ct-tocm .ct-toc--sub { margin: -4px 0 8px 1px; }

/* ---------------------------------------------------------------- Method › "Reading the report" (round 4): three parts */
.ct-doc__sub { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hair-soft); }
.ct-doc__sub > h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--t1); margin: 0 0 12px; scroll-margin-top: 16px; }
.ct-doc__sub > p:not([class]) { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--reading); text-wrap: pretty; margin: 0 0 20px; }
/* the example calls: a quiet figure on the surface, the widget's own caption underneath */
.ct-ex { margin: 4px 0 24px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); --ow-under: var(--surface); }
.ct-ex__head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-ex__l { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); line-height: 1.4; }
.ct-ex__open { font-size: 13px; white-space: nowrap; }
.ct-ex__w { min-width: 0; }
.ct-ex__cap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
/* one rule above the caption: the widget's last row drops its own bottom hairline inside the card */
.ct-ex .n-owm__row:last-child { border-bottom: 0; }
/* a day when no call moved: says so, and how a move is drawn */
.ct-ex__still { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--t2); }
.ct-ex .n-ow__key { margin: 0; font-size: 13px; line-height: 1.55; color: var(--t2); max-width: none; }
.ct-ex .n-ow__key b { color: var(--t1); }
.ct-ex--key { padding: 14px 18px; }
/* the colours: legend and the reader's switch, the explanation set as body text, the thresholds */
.ct-cols__top { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 0; border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); }
.ct-cols__top .n-clegend { font-size: 13px; }
.ct-cols__help .n-chelp p { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--reading); margin: 0 0 20px; }
.ct-cols__help .n-chelp__asof { display: none; }            /* the date is in the thresholds caption below, with the rule */
.ct-th .n-table th[scope="row"] { font-weight: 400; }
.ct-th__m { display: block; color: var(--t1); font-weight: 600; }
.ct-th__s { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--t3); font-weight: 400; white-space: normal; }
.ct-th td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-tone { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.ct-tone__sw { width: 8px; height: 8px; border-radius: 1px; flex: none; background: currentColor; }
.ct-tone--sup { color: var(--up); }
.ct-tone--pre { color: var(--down); }
/* the colours example: three real day changes, each with its arrow, colour and (in Price impact) its word, as in the report */
.ct-cex { margin-top: -4px; }
.ct-cex__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.ct-cex__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-cex__f dt { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--t3); }
.ct-cex__f dd { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.ct-cex__f .n-c__w { margin-top: 2px; font-size: 12px; }
.ct-cex__cap { font-size: 13px; line-height: 1.55; color: var(--t3); }
.ct-lines { margin: 4px 0 24px; padding: 18px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }


/* ================================================================ tablet (700–1099) */
@media (max-width: 1099px) {
  .ct-idx__grid, .ct-art__grid { display: block; }
  .ct-idx__rail { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; padding-top: 0; }
  .ct-idx__rail .ct-next { grid-column: 1 / -1; }
  .ct-cta--sticky { position: static; }
  .ct-art__main { max-width: 680px; margin: 0 auto; }
  .ct-art__rail { max-width: 680px; margin: 64px auto 0; }
  .ct-art__railin { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .ct-art__railin > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ================================================================ phone (≤ 699) */
@media (max-width: 699px) {
  .ct-head { margin-bottom: 28px; padding-top: 0; }
  .ct-notice { margin: -4px 0 24px; }
  .ct-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .ct-art__head { gap: 10px; margin-bottom: 24px; padding-top: 0; }
  .ct-art__t { font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; }
  .ct-art__dek { font-size: 17px; }
  .ct-art__by { margin-top: 0; }
  .ct-linkbtn { min-height: 44px; }

  .ct-feat__when { margin-left: 0; }
  .ct-feat__t { font-size: 26px; line-height: 1.22; }
  .ct-feat__dek { font-size: 16px; }
  .ct-serif { font-size: 17px; line-height: 1.6; }
  .ct-fhv { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hair-soft); }
  .ct-fhv__cell { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--hair-soft); }
  .ct-fhv__h { width: 64px; flex: none; }
  .ct-fhv__chg { margin-left: auto; }
  .ct-feat__foot { border-top: 0; padding-top: 0; margin-top: 24px; }
  .ct-feat__end .n-btn { width: 100%; }

  .ct-hist { margin-top: 40px; padding-top: 28px; }
  .ct-hist__grid { --cell: 12px; --gap: 2px; --lab: 50px; row-gap: 5px; }
  /* a 12 px floor for the labels, the "Latest" marker and the month ticks (small_screen L1) */
  .ct-hist__lab, .ct-hist__latest, .ct-hist__tick { font-size: 12px; }
  .ct-hist .n-bkey { min-width: 0; width: 100%; padding-top: 0; }

  .ct-mchips { margin-top: 32px; }
  .ct-mchip { height: 44px; }
  .ct-list__head { margin-top: 28px; }
  .ct-list__cols { display: none; }
  .ct-list__month { padding-top: 18px; }
  .ct-row { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 6px; padding: 16px 0; }
  .ct-row__date { grid-column: 1; }
  .ct-row__date time { flex-direction: row; gap: 8px; align-items: baseline; }
  .ct-row__d { font-size: 13px; }
  .ct-row__main { grid-column: 1; }
  .ct-row__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ct-row__bias { display: none; }
  .ct-row__phone { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--t2); margin-top: 2px; }
  .ct-row__phone .n-bword { font-size: 13px; gap: 6px; }
  .ct-row__pc, .ct-row__first { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .ct-row__same { color: var(--t3); }
  .ct-pag { flex-direction: column; align-items: flex-start; }
  .ct-sample { flex-direction: column; align-items: stretch; }
  .ct-sample .n-btn { width: 100%; }

  .ct-idx__rail, .ct-art__railin { grid-template-columns: minmax(0, 1fr); }

  .ct-strip { margin-bottom: 28px; padding: 14px 0 16px; }
  .ct-strip__cells { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hair-soft); }
  .ct-strip__cell { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--hair-soft); }
  .ct-strip__h { width: 76px; flex: none; }
  .ct-strip__sub { margin-left: auto; }
  .ct-prose--post > h2, .ct-doc__sec > h2, .ct-doc__intro > h2 { font-size: 20px; margin-top: 32px; }
  .ct-prose--post p, .ct-doc__sec > p:not([class]), .ct-doc__intro > p:not([class]), .ct-doc__sec > ul:not([class]) > li { font-size: 17px; }
  .ct-plainbox { padding: 18px 16px 2px; margin-top: 28px; }
  .ct-end { padding: 20px 16px; }
  .ct-end__t { font-size: 20px; }
  .ct-end__line, .ct-end__line--a { grid-template-columns: 16px minmax(0, 1fr); row-gap: 2px; padding: 10px 0; }
  .ct-end__line--a > svg:last-child { display: none; }
  .ct-end__v { grid-column: 2; text-align: left; }
  .ct-pn { grid-template-columns: minmax(0, 1fr); }
  .ct-pn__a { padding: 16px 0; }
  .ct-pn__a--next { align-items: flex-start; text-align: left; padding: 16px 0; border-left: 0; border-top: 1px solid var(--hair); }

  .ct-defs__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ct-doc__note { margin-bottom: 24px; }
  .ct-doc__sub { margin-top: 26px; padding-top: 22px; }
  .ct-doc__sub > h3 { font-size: 17px; }
  .ct-doc__sub > p:not([class]), .ct-cols__help .n-chelp p { font-size: 17px; }
  .ct-ex { padding: 14px 12px 12px; }
  .ct-ex__open { display: inline-flex; align-items: center; min-height: 44px; }
  .ct-ex__head { margin-bottom: 6px; }
  .ct-lines { padding: 14px 12px; }
  .ct-cex__figs { gap: 10px 12px; }
  .ct-cex__f dd { font-size: 15px; }
  .ct-cols__top { padding: 8px 0; }
  .ct-tocm .ct-toc__a--sub { min-height: 44px; font-size: 14px; }

  /* "Not published yet" (core ui.notInProto): the long "Move the demo clock to …" label wraps inside the box, 44px targets */
  .ct-nyp .n-empty .n-btnrow { width: 100%; }
  .ct-nyp .n-empty .n-btn { width: 100%; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; white-space: normal; line-height: 1.3; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-row__arrow, .ct-tocm__chev { transition: none; }
}

/* ================================================================ print (round 5, SPEC5 §4.5 item 7, wide.md 14)
   Core's print block hides the site chrome and prints light. On a post or a doc page the paper copy is the article only: no
   subscribe card, no rail, no "On this page" box, no previous / next links; on Commentary, no month chips, pages or sign-up card.
   The house-view squares keep their colours. */
@media print {
  .ct-end, .ct-art__rail, .ct-tocm, .ct-pn, .ct-pn__foot, .ct-art__by .ct-linkbtn, .ct-art__by > span[aria-hidden] { display: none !important; }
  /* the Commentary index: its controls and the subscribe card don't print either */
  .ct-cta, .ct-mchips, .ct-pag, .ct-mnav, .ct-sample { display: none !important; }
  /* …nor its rail ("Next post", "The daily report, measured"): web furniture on paper */
  .ct-idx__rail { display: none !important; }
  .ct-art__main { max-width: none; margin: 0; }
  .ct-cell, .ct-strip__dot, .ct-tone__sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ct-strip, .ct-plainbox, .ct-ex, .ct-defs__row, .ct-how { break-inside: avoid; }
}

/* ================================================================ real site */
/* Rob's own words on a legal page (the WordPress page content), set like the generated sections */
.ct-doc__own > h2 { font-family: var(--sans); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--t1); margin: 40px 0 12px; scroll-margin-top: 16px; }
.ct-doc__own > h2:first-child { margin-top: 0; }
.ct-doc__own > h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--t1); margin: 28px 0 10px; }
.ct-doc__own > p, .ct-doc__own > ul > li, .ct-doc__own > ol > li { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--reading); text-wrap: pretty; }
.ct-doc__own > p { margin: 0 0 20px; }
.ct-doc__own > ul, .ct-doc__own > ol { margin: 0 0 20px; padding-left: 22px; }
.ct-doc__own > ul > li, .ct-doc__own > ol > li { margin-bottom: 10px; }
.ct-doc__own + .ct-prose--doc { margin-top: 32px; }
/* the post body: tables and lists in a post read like its paragraphs; nothing in it may push the page sideways */
.ct-prose--post { overflow-wrap: anywhere; }
.ct-prose--post ul, .ct-prose--post ol { margin: 0 0 20px; padding-left: 22px; }
.ct-prose--post li { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--reading); margin-bottom: 10px; }
.ct-prose--post blockquote { margin: 0 0 20px; padding-left: 16px; border-left: 2px solid var(--line); }
.ct-prose--post table { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 699px) { .ct-prose--post li, .ct-doc__own > p, .ct-doc__own > ul > li, .ct-doc__own > ol > li { font-size: 17px; } }