/* Round 26 (26 Oct 2026): the rules the hub, /halden and the two approach pages need from the next site.css, linked by those four pages only, so
   www's site.css (v40) and every other page stay as they are. Generated by website/server/releases/r25_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. */
/* r26 (founder, 26 Oct): no card. The CTA is a full-width teal band, its content on the .wrap grid (the padding does
   the wrap's job, since the section itself is the band). Closes the page: the footer sits straight under it. */
.cta.cta-panel { width: auto; max-width: none; margin: 0; border-radius: 0;
  padding: 72px max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter))) 64px; background: var(--accent-deep); color: var(--surface); }
main:has(> .cta-panel:last-child) { padding-bottom: 0; }
main:has(> .cta-panel:last-child) + .site-footer, main:has(> .cta-panel:last-child) ~ .site-footer { margin-top: 0; }
.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 { padding: 44px 16px 40px; 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; }

/* The Halden page (founder, 25 Oct, item F): framework, reporting and benefits in the home page's rhythm */
.hb-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hb-txt { display: flex; flex-direction: column; gap: 12px; max-width: 46em; min-width: 0; }
.hb-txt .h2-sm, .hb-txt p { margin: 0; }
.hb-sub { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.hb-vis { min-width: 0; }
.hb-more { margin-top: 4px; }
.hb-reports { display: flex; flex-direction: column; gap: 24px; margin-top: 28px; }
.hb-reports:empty { display: none; }
.hb-cards-line { margin: 0; }
.hb-benefits { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hb-benefits li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); border-top: 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); }
.hb-benefits b { font-size: 17px; line-height: 1.3; }
.hb-benefits span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 720px) { .hb-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hb-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }

/* ===== 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)); }
}
/* r26 (founder, 26 Oct): every visual centres in its column. Across: a visual narrower than the column sits in its
   middle, never stretched (each child fills the column unless its own rules give it a narrower width or max-width,
   and those load after this file). Down: the visual centres on the text column's height; assets/sec-align.js marks a
   row sec-top when the text is much taller, and that row top-aligns with the visual level with the heading. The
   :is() and :not() lift these over the generators' own "align-items: start" rows, which load later. */
.sec-visual { align-items: center; }
.sec-visual > * { width: 100%; }
@media (min-width: 960px) {
  :is(.sec-row, .fp-split):not(.sec-top) { align-items: center; }
  :is(.sec-row, .fp-split).sec-top { align-items: start; }
}
/* /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; } }

/* item F: the Halden hero, equal columns (overrides www site.css v40 on this page only), one column below 960px */
.hr-hero.hr-hero-hs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }   /* founder, 25 Oct (item F): equal columns */
@media (max-width: 959px) { .hr-hero.hr-hero-hs { grid-template-columns: minmax(0, 1fr); gap: 32px; } .hr-hero-hs .hr-hero-copy { max-width: 46em; } }