/* OOMLO 2.0.9 · the pages Networkers, How the split works and Fitness (oomlo/json-page), the two guides, and the
   additions on the home and /creators (D14-9). OOMLO's tokens and fonts only: no new colour, no new font. Loaded only
   where one of these pieces prints. */

/* Hero (on --oomlo-bg). The H1 is the LCP. */
.oomlo-jp__hero { padding: var(--oomlo-space-9) 0 var(--oomlo-space-8); background: var(--oomlo-bg); }
.oomlo-jp__hero-text { max-width: 760px; }
.oomlo-jp__hero .oomlo-eyebrow { display: block; margin: 0 0 var(--oomlo-space-5); }
.oomlo-jp__h1 { margin: 0 0 var(--oomlo-space-5); }
.oomlo-jp__lead { font-size: var(--oomlo-body-l); color: var(--oomlo-text-2); max-width: 64ch; margin: 0 0 var(--oomlo-space-6); }
.oomlo-jp__actions { display: flex; flex-wrap: wrap; gap: var(--oomlo-space-3); }
.oomlo-jp__actions--center { justify-content: center; margin-top: var(--oomlo-space-6); }
.oomlo-jp__line { margin: var(--oomlo-space-5) 0 0; font-size: var(--oomlo-small); color: var(--oomlo-text-2); max-width: 64ch; }

/* Sections. */
.oomlo-jp__section { padding: var(--oomlo-space-8) 0; background: var(--oomlo-bg); }
.oomlo-jp__section--surface { background: var(--oomlo-surface); }
.oomlo-jp__section--air { padding: var(--oomlo-space-9) 0; }
.oomlo-jp__head { max-width: 760px; margin-bottom: var(--oomlo-space-6); }
.oomlo-jp__head--wide { max-width: 820px; }
.oomlo-jp__h2 { font-size: var(--oomlo-h2); margin: 0 0 var(--oomlo-space-4); }
.oomlo-jp__intro { color: var(--oomlo-text-2); font-size: var(--oomlo-body-l); max-width: 64ch; margin: 0; }
.oomlo-jp__head .oomlo-jp__intro + .oomlo-jp__intro { margin-top: var(--oomlo-space-4); }
.oomlo-jp__narrow { max-width: calc(820px + 2 * var(--oomlo-gutter)); }
.oomlo-jp__close-line { margin: var(--oomlo-space-6) 0 0; font-size: var(--oomlo-body-l); max-width: 64ch; }
.oomlo-jp__highlight { margin: var(--oomlo-space-6) 0 0; padding: var(--oomlo-space-4) var(--oomlo-space-5); border-left: 3px solid var(--oomlo-accent); background: var(--oomlo-bg); font-size: var(--oomlo-body-l); font-weight: 600; max-width: 64ch; border-radius: 0 var(--oomlo-radius-card) var(--oomlo-radius-card) 0; }
.oomlo-jp__small-text { margin: var(--oomlo-space-5) 0 0; font-size: var(--oomlo-small); color: var(--oomlo-text-2); max-width: 72ch; }
.oomlo-jp__more { margin: var(--oomlo-space-6) 0 0; }

/* Links in running text: underlined, the text colour (AA in both modes, no new colour). */
a.oomlo-jp__link, .oomlo-jp__source a, a.oomlo-jp__tile-link { color: var(--oomlo-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; }
a.oomlo-jp__link:hover, a.oomlo-jp__link:focus-visible, .oomlo-jp__source a:hover, .oomlo-jp__source a:focus-visible, a.oomlo-jp__tile-link:hover, a.oomlo-jp__tile-link:focus-visible { color: var(--oomlo-text); text-decoration-thickness: 2px; }

/* Items with a bold lead: two columns on desktop, one on the phone. */
.oomlo-jp__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oomlo-space-5); list-style: none; margin: 0; padding: 0; }
.oomlo-jp__includes .oomlo-jp__item { padding: var(--oomlo-space-5); border: 1px solid var(--oomlo-border); border-radius: var(--oomlo-radius-card); background: var(--oomlo-bg); }
.oomlo-jp__item p { margin: 0; color: var(--oomlo-text-2); }
.oomlo-jp__item strong { color: var(--oomlo-text); }

/* Numbered steps (CSS counter: the numbers are not text). */
.oomlo-jp__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oomlo-space-4); max-width: 820px; counter-reset: oomlo-jp-step; }
.oomlo-jp__steps .oomlo-jp__item { display: grid; grid-template-columns: 40px 1fr; gap: var(--oomlo-space-4); align-items: start; counter-increment: oomlo-jp-step; }
.oomlo-jp__steps .oomlo-jp__item p { margin-top: 6px; }
.oomlo-jp__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; border: 1px solid var(--oomlo-border-input); font: 600 var(--oomlo-body)/1 var(--oomlo-font-display); color: var(--oomlo-text); }
.oomlo-jp__n::before { content: counter(oomlo-jp-step); }

/* Lists with a neutral mark (no icons). */
.oomlo-jp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--oomlo-space-3); max-width: 72ch; }
.oomlo-jp__list li { position: relative; padding-left: var(--oomlo-space-5); color: var(--oomlo-text-2); }
.oomlo-jp__list--marks li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 10px; height: 2px; background: var(--oomlo-border-input); }

/* Networkers S5 · the labelled example card. */
.oomlo-jp__example { max-width: 820px; padding: var(--oomlo-space-6); border: 1px solid var(--oomlo-border); border-radius: var(--oomlo-radius-card); background: var(--oomlo-bg); box-shadow: var(--oomlo-shadow-1); }
.oomlo-jp__tag { display: inline-block; margin: 0 0 var(--oomlo-space-4); padding: 4px 12px; border: 1px solid var(--oomlo-border-input); border-radius: var(--oomlo-radius-tag); font-size: var(--oomlo-caption); font-weight: 600; color: var(--oomlo-text); }
.oomlo-jp__who { margin: 0 0 var(--oomlo-space-5); font-weight: 600; }
.oomlo-jp__pairs { margin: 0; display: grid; gap: var(--oomlo-space-5); }
.oomlo-jp__pair dt { font-size: var(--oomlo-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--oomlo-text-2); margin: 0 0 var(--oomlo-space-2); }
.oomlo-jp__pair dd { margin: 0; white-space: pre-line; }
.oomlo-jp__pair--before dd { color: var(--oomlo-text-2); }
.oomlo-jp__pair--before s { text-decoration-thickness: 1px; }

/* Split S2 · the formula: label in bold, value in body type. */
.oomlo-jp__formula { margin: 0; display: grid; gap: var(--oomlo-space-3); max-width: 820px; }
.oomlo-jp__formula-row { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: var(--oomlo-space-4); padding: var(--oomlo-space-4) var(--oomlo-space-5); border: 1px solid var(--oomlo-border); border-radius: var(--oomlo-radius-card); background: var(--oomlo-surface); }
.oomlo-jp__formula dt { font-weight: 700; margin: 0; }
.oomlo-jp__formula dd { margin: 0; color: var(--oomlo-text-2); }

/* Split S6 and S7 · tables. */
.oomlo-jp__table { width: 100%; max-width: 900px; border-collapse: collapse; }
.oomlo-jp__table th, .oomlo-jp__table td { text-align: left; vertical-align: top; padding: var(--oomlo-space-4) var(--oomlo-space-4) var(--oomlo-space-4) 0; border-bottom: 1px solid var(--oomlo-border); }
.oomlo-jp__table td { color: var(--oomlo-text-2); }
.oomlo-jp__table th { color: var(--oomlo-text); font-weight: 600; }
.oomlo-jp__table--ladder .oomlo-jp__rate { font: 700 var(--oomlo-h2)/1 var(--oomlo-font-display); width: 1%; white-space: nowrap; padding-right: var(--oomlo-space-6); }
.oomlo-jp__table--ladder .oomlo-jp__tier { color: var(--oomlo-text); font-weight: 600; white-space: nowrap; }
.oomlo-jp__table--owners th { width: 40%; }
.oomlo-jp__notes { margin: var(--oomlo-space-4) 0 0; padding-left: 1.2em; font-size: var(--oomlo-small); color: var(--oomlo-text-2); max-width: 72ch; }
.oomlo-jp__notes li + li { margin-top: var(--oomlo-space-2); }
.oomlo-jp__source { margin: var(--oomlo-space-5) 0 0; font-size: var(--oomlo-small); color: var(--oomlo-text-2); max-width: 72ch; }

/* Fitness S4 · four cards, 2 × 2. */
.oomlo-jp__card { padding: var(--oomlo-space-6); border: 1px solid var(--oomlo-border); border-radius: var(--oomlo-radius-card); background: var(--oomlo-surface); box-shadow: var(--oomlo-shadow-1); }
.oomlo-jp__card-name { font-size: var(--oomlo-h3); margin: 0 0 var(--oomlo-space-2); }
.oomlo-jp__card-line { font-weight: 600; margin: 0 0 var(--oomlo-space-3); }
.oomlo-jp__card p { color: var(--oomlo-text-2); }
.oomlo-jp__card .oomlo-jp__card-line { color: var(--oomlo-text); }

/* The FAQ accordion keeps OOMLO's component; a little room above it. */
.oomlo-jp__faq { max-width: 900px; }

/* Close. */
.oomlo-jp__close { padding: var(--oomlo-space-9) 0; background: var(--oomlo-bg); text-align: center; }
.oomlo-jp__close .oomlo-jp__intro { margin: 0 auto; }
.oomlo-jp__small { margin: var(--oomlo-space-5) 0 0; font-size: var(--oomlo-small); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--oomlo-space-5); }

/* Editors only: a piece whose keys are missing (J9). */
.oomlo-jp__notice { padding: var(--oomlo-space-3); border: 1px dashed var(--oomlo-border-input); color: var(--oomlo-text-2); font-size: var(--oomlo-small); }

/* Home · the subline under the H1 (the entry's style, shorter), the Fitness tile link, the six questions. */
.oomlo-hero__subline { font-size: var(--oomlo-body-l); font-weight: 600; color: var(--oomlo-text); max-width: 56ch; margin: 0 0 var(--oomlo-space-4); }
.oomlo-tiles li:has(> .oomlo-jp__tile-link) { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--oomlo-space-3); }
a.oomlo-jp__tile-link { font-family: var(--oomlo-font-text); font-size: var(--oomlo-small); line-height: 1.4; }
.oomlo-jp-faq .oomlo-faq { max-width: 900px; }

/* Guides: the dek, the closing box, the archive intro. */
.oomlo-jp__dek { font-size: var(--oomlo-body-l); color: var(--oomlo-text-2); max-width: 64ch; margin: var(--oomlo-space-5) 0 0; }
.oomlo-jp__cta { margin: var(--oomlo-space-8) 0 0; padding: var(--oomlo-space-6); border: 1px solid var(--oomlo-border); border-radius: var(--oomlo-radius-card); background: var(--oomlo-surface); }
.oomlo-jp__cta-text { margin: 0 0 var(--oomlo-space-5); font-size: var(--oomlo-body-l); }
.oomlo-jp__archive-intro { margin-top: var(--oomlo-space-4); }
/* The guides list now has cards: their "Read" link takes the text colour there (the accent on the card surface is
   4.05:1 in dark mode, under AA for 14 px text). Scoped to /guides/, where this file loads. */
.oomlo-post-list .oomlo-card__link { color: var(--oomlo-text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 899px) {
	.oomlo-jp__grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	/* On the phone the H1 takes the larger display size and the entry the body size, so the H1 stays the largest
	   block of the first screen (the LCP), as on the brief. Tokens only. */
	.oomlo-jp__h1 { font-size: var(--oomlo-display-1); text-wrap: pretty; }
	.oomlo-jp__lead { font-size: var(--oomlo-body); }
	.oomlo-jp__hero { padding: var(--oomlo-space-7) 0; }
	.oomlo-jp__section { padding: var(--oomlo-space-7) 0; }
	.oomlo-jp__section--air, .oomlo-jp__close { padding: var(--oomlo-space-8) 0; }
	.oomlo-jp__actions .oomlo-btn { flex: 1 1 100%; justify-content: center; }
	.oomlo-jp__formula-row { grid-template-columns: minmax(0, 1fr); gap: var(--oomlo-space-2); }
	.oomlo-jp__table--ladder .oomlo-jp__tier { white-space: normal; }
	.oomlo-jp__table--owners th { width: auto; }
	.oomlo-jp__example { padding: var(--oomlo-space-5); }
}