/* The RMF hub release (round 24, 26 Oct 2026): the rules the hub needs from the next site.css, linked by the hub
   only, so www's site.css (v40) and every live page stay as they are. Generated by
   website/server/releases/r24_hub_prepare.py from website/assets/site.css; retire it when site.css ships. */

/* The live post card (blog listing, and the RMF hub's component cards): the whole card opens its link (.pc-read
   stretches over it), an ink outline and a small lift on hover and keyboard focus. Shared here from the blog's inline
   style (founder, 25 Oct), so other pages reuse it; blog.html still carries its own identical copy. */
.post-card-live { position: relative; border-style: solid; border-color: var(--ink-3); transition: transform .2s ease, box-shadow .2s ease; }
.post-card-live:hover { border-color: var(--ink); }
.post-card-live:hover, .post-card-live:focus-within { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31, 70, 81, .12); }
@media (prefers-reduced-motion: reduce) { .post-card-live { transition: box-shadow .2s ease; } .post-card-live:hover, .post-card-live:focus-within { transform: none; } }
.post-card-live .h3, .post-card-live p { margin: 0; }
.post-card-live .pc-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin-top: auto; padding-top: 6px; }
.post-card-live .pc-read { font-weight: 700; color: var(--accent-deep); text-underline-offset: 4px; }
.post-card-live .pc-read::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card-live .pc-read:focus-visible { outline: none; }
.post-card-live:has(.pc-read:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* The teal CTA panel (founder, 25 Oct): framework pages and the Halden page. Moved here from framework-hub.css so a live
   page can use it. Milk on teal #17797A 5.08:1; ink on the milk button 10.03:1; milk focus ring. */
.cta.cta-panel { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--content) - 2 * var(--gutter));
  margin: 32px auto 64px; padding: 48px 48px 44px; border-radius: 22px; background: var(--accent-deep); color: var(--surface); }
.cta-panel .text .h2-sm { color: var(--surface); }
.cta-panel .btn-primary { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.cta-panel .btn-primary:hover { background: var(--ground); border-color: var(--ground); color: var(--ink); }
.cta-panel > .text :focus-visible { outline: 3px solid var(--surface); outline-offset: 3px; }
.cta-panel > .follow-box { border-color: transparent; }
@media (max-width: 599px) {
  .cta.cta-panel { width: calc(100% - 2 * 16px); margin: 24px auto 48px; padding: 28px 18px 18px; border-radius: 18px; gap: 24px; }
}
/* the CTA panel on pages whose closing CTA carries a body line or an outline button (Direction) */
.cta-panel > .text p { color: var(--surface); }
.cta-panel > .text .btn-outline { background: transparent; border-color: var(--surface); color: var(--surface); }
.cta-panel > .text .btn-outline:hover { background: var(--surface); border-color: var(--surface); color: var(--ink); }
/* the CTA panel without the Follow Halden box (it sits in the report placeholder on that page): the headline runs wider */
.cta-panel-solo > .text { flex: 1 1 auto; max-width: 52em; }

/* ===== Layout standard for the framework pages (founder, 25 Oct 2026, item J; tools/layout.py) =====
   Every content section: a two-column row from 960px, text left (5/12, at most 60ch) and its visual right (7/12), a
   56px gap, the home page's section padding (.section: 72px, 48px on a phone) and its band alternation (band-milk,
   painted edge to edge even when the section sits inside the page's .wrap). .sec-wide puts the text above a visual
   that needs the full width; .sec-callout is the right-hand card of a section with no visual of its own. */
.sec { display: block; border-top: 0; }
.sec.band-milk { border: 0; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.sec-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.sec-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 60ch; }
.sec-text > h2, .sec-text > h3, .sec-text > p { margin: 0; }
.sec-text .fp-prose { margin: 4px 0 0; }
.sec-visual { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sec-visual > * { margin-top: 0; }
.sec-callout { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--border);
  border-left: 4px solid var(--accent-deep); background: #FDFFF9; box-shadow: 0 1px 2px rgba(31, 70, 81, .06), 0 6px 18px -6px rgba(31, 70, 81, .14); }
.sec-callout > * { margin: 0; }
.sec-callout p { font-size: 16px; line-height: 1.6; color: var(--ink); }
@media (min-width: 960px) {
  .sec-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .sec-wide .sec-row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .sec-wide .sec-text { max-width: min(60ch, calc((100% - 56px) * 5 / 12)); }
}
/* /halden in the layout standard: the report grid and the benefit cards sit in the row's visual column, so they drop
   their own top margin; the reporting grid is the page's one full-width section */
.sec-visual > .hb-benefits, .hb-reports.sec-visual { margin-top: 0; }
/* the standard's section padding wins over the generators' own flat-section rules (.rl-sec 26px, loaded later) */
section.sec.section { display: block; padding-top: 72px; padding-bottom: 72px; border-top: 0; }
@media (max-width: 599px) { section.sec.section { padding-top: 48px; padding-bottom: 48px; } }