/* =====================================================================
 * The article page — single.php, and nothing else.
 *
 * Loaded for `is_singular( 'post' )` only. Depends on kit.css for the tokens, the page head, the
 * section title, the meter, the FAQ accordion and the audio player; and on content.css for
 * `.public-wrap` and the post card the related row is made of.
 *
 * The shape is wireframes/blog-detail.html's — an article beside a sticky side column — re-cut after
 * the owner's review of the first version (2026-09-19, decisions.md):
 *
 *   - quiet. One white box holds the article; the side cards are white; anything that needs a
 *     ground of its own gets the slight grey (`--iz-sunk`). The blue and green tints are kept for
 *     what matters — here, the two full-width bands under the article — not spent on every card.
 *   - small. Titles step down from the kit's page-head size, and the head's facts are a single
 *     line of captions rather than a row of tiles.
 *   - the voice stays with the reader: a card at the top of the sticky side column, and below
 *     900px a bar fixed to the bottom of the screen.
 *
 * Logical properties throughout — the site is RTL and has no LTR variant. `.public-article__hero /
 * __body / __content` stay in content.css: page.php, the booking policy and the assessment page
 * still render them.
 * ===================================================================== */

/* ------------------------------------------------------------- the head: a full-width band
 * `.article-head` is the kit page head with its card taken off, because here the band is the
 * container: the ground runs edge to edge and the content keeps the page's own measure. */
/* Spacing (owner, 2026-09-29: "consider having proper spacing"). The band had 18px above the crumbs
 * and 28px under the head, and the title stack ran 12 / 6 / 14+12. It is now on the standard and
 * reads inner < outer: title → summary 8, the facts row 16 + 12 around its hairline, crumbs → head
 * 16, the band's own padding 24 above and --space-block below. */
.article-band { padding-block: var(--space-4) var(--space-block); border-bottom: 1px solid var(--iz-line-soft); background: #fff; }
.article-band .iz-pagestack { gap: var(--space-head); padding-block-start: 0; }
.article-band .iz-crumbs { margin-bottom: 0; }
.article-head.iz-pagehead { grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: var(--space-head) var(--space-6); align-items: center; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; }
.article-head.iz-pagehead::after { display: none; }
.article-head.iz-pagehead:not(.iz-pagehead--media) { grid-template-columns: minmax(0, 1fr) auto; }
.article-head .iz-pagehead__eyebrow svg { width: 15px; height: 15px; }
.article-head h1 { margin-top: var(--space-1); }
.article-head .iz-pagehead__summary { max-width: 62ch; margin-top: var(--space-1); font: var(--text-body-s); }
.article-head .iz-pagehead__media { aspect-ratio: 16 / 10; box-shadow: none; }
.article-head .iz-pagehead__art { width: clamp(84px, 10vw, 128px); }

/* Author, dates, reading time — one line of captions. The first cut drew them as icon tiles with a
 * label over each value, which made four small facts the loudest thing under the title. */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-head) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--iz-line-soft); }
.article-meta div { display: inline-flex; align-items: center; gap: var(--gap-inline); min-width: 0; }
/* Icons take the size of the rung they sit beside, from the ladder's own size tokens. */
.article-meta i { color: var(--iz-ink-soft); font-size: var(--text-body-s-size); }
.article-meta dt { color: var(--iz-ink-soft); font: var(--text-micro); }
.article-meta dd { margin: 0; color: var(--iz-ink); font: var(--text-caption); font-weight: 600; }

/* ------------------------------------------------------------- the two columns */
/* 2026-09-30: two columns always. The side column holds two asides: `.article-side` (the voice and
 * the contents, when the article has them) over `.article-more` (the shared sidebar, every article).
 * The article spans both rows; the first row takes whatever height the second leaves, so the sticky
 * voice and contents travel down the article and hand over to the sidebar near its end. With neither
 * (`--plain`), the sidebar has the whole column and is the thing that sticks. It replaces `--solo`,
 * the lone centred column most imported articles opened as. */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: 1fr auto; grid-template-areas: "main side" "main more"; gap: var(--space-block); align-items: start; padding-block: var(--space-block) var(--space-section); }
.article-layout--plain { grid-template-areas: "main more" "main more"; }
.article-main { grid-area: main; }
.article-side { grid-area: side; }
.article-more { grid-area: more; min-width: 0; }
.article-layout--plain .article-more { align-self: stretch; }
/* The whole sidebar is taller than a laptop screen, so only its last box — the way to a session —
 * travels with the reader; the column is stretched to the article's height to give it room. */
.article-layout--plain .blog-side { height: 100%; align-content: start; }
.article-layout--plain .blog-side__help { position: sticky; top: 20px; }
.article-main { display: grid; gap: var(--space-block); min-width: 0; padding: var(--space-5); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; }
/* Stretched, not `start`: the sticky wrapper inside can only travel as far as this column is tall,
 * and a column the height of its own content is one it never moves in. */
.article-side { align-self: stretch; min-width: 0; }
/* `minmax(0, 1fr)`, not the implicit auto track — the page stack's lesson in kit.css: an auto track
 * sizes itself to its widest child's max-content, and one unwrapping child takes the page sideways. */
.article-side__stick { position: sticky; top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block); }
.article-voice, .article-toc { min-width: 0; padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r); background: #fff; }

/* ------------------------------------------------------------- the article's voice */
/* The card is its heading, the player and the link to the recording's text. The recording's title
 * and the speaker's name and role used to sit between the heading and the player (owner,
 * 2026-09-29: "remove text of article voice"); they are still the player's accessible name. */
.article-voice { display: grid; gap: var(--space-1); }
.article-voice__label { display: flex; align-items: center; gap: var(--gap-inline); margin: 0 0 var(--space-1); color: var(--iz-ink); font: var(--text-h4); }
.article-voice__label i { color: var(--secondary-600); font-size: var(--text-h4-size); }
.article-voice__label small { margin-inline-start: auto; color: var(--iz-ink-soft); font: var(--text-micro); }
.article-voice .iz-audio { padding: var(--space-1) var(--space-2); border: 0; border-radius: 12px; background: var(--iz-sunk); }
.article-voice__transcript { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; border-radius: 6px; color: var(--primary-700); font: var(--text-button-s); text-underline-offset: 3px; }
.article-voice__transcript:focus-visible { outline: none; box-shadow: var(--iz-focus); }

/* ------------------------------------------------------------- table of contents
 * The same list at every width: a phone gets it above the article instead of beside it, and that
 * is the only difference. */
.article-toc h2 { display: flex; align-items: center; gap: var(--gap-inline); margin: 0 0 var(--space-head); color: var(--iz-ink); font: var(--text-h4); }
.article-toc h2 i { color: var(--secondary-600); font-size: var(--text-h4-size); }
/* A long article's list scrolls inside the card, so the column never outgrows the screen it is
 * pinned to. */
.article-toc ol { display: grid; max-height: max(160px, calc(100vh - 420px)); margin: 0; padding: 0; overflow-y: auto; scrollbar-width: thin; list-style: none; }
.article-toc a { display: flex; align-items: center; min-height: 44px; padding-block: var(--space-0); padding-inline: var(--space-2) var(--space-1); border-inline-start: 2px solid var(--iz-line-soft); color: var(--iz-text); font: var(--text-caption); text-decoration: none; transition: color .16s var(--iz-ease), border-color .16s var(--iz-ease), background-color .16s var(--iz-ease); }
.article-toc a[aria-current] { border-inline-start-color: var(--secondary-500); background: var(--iz-sunk); color: var(--iz-ink); font-weight: 600; }
.article-toc a:focus-visible { outline: none; box-shadow: inset var(--iz-focus); }
.article-toc__progress { height: 4px; margin-top: var(--space-stack); }
/* The meter eases over .9s everywhere else because it animates to a value once. This one follows a
 * finger on a scrollbar, and easing toward a target that moves every frame reads as lag. */
.article-toc__progress > span { transition: none; }
@media (hover: hover) and (pointer: fine) { .article-toc a:not([aria-current]):hover { color: var(--primary-700); border-inline-start-color: var(--primary-200); } }

/* ------------------------------------------------------------- key takeaways */
.article-takeaways { padding: var(--pad-card); border-radius: var(--iz-r); background: var(--iz-sunk); }
.article-takeaways h2 { display: flex; align-items: center; gap: var(--gap-inline); margin: 0 0 var(--space-head); color: var(--iz-ink); font: var(--text-h3); }
.article-takeaways h2 i { color: var(--secondary-600); font-size: var(--text-h3-size); }
.article-takeaways ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
/* The tick is a box one line of the text tall with the glyph centred in it, so it sits on the first
 * line at any size without a nudge. */
.article-takeaways li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-inline); color: var(--iz-text); font: var(--text-body-s); }
.article-takeaways li i { display: grid; place-items: center; height: calc(var(--text-body-s-size) * var(--text-body-s-lh)); color: var(--secondary-500); font-size: var(--text-body-s-size); }

/* ------------------------------------------------------------- the article itself */
.article-content { color: var(--iz-ink); font: var(--text-body); overflow-wrap: break-word; }
.article-content > :first-child { margin-top: 0; }
.article-content > :last-child { margin-bottom: 0; }
.article-content p { margin: 0 0 1.1em; text-wrap: pretty; }
/* A heading belongs to what follows it: a wide gap above, a narrow one below. h3 and h4 share the
 * ladder's floor rung (--text-h4): the ladder retires a fourth prose tier the way it retired h5/h6. */
.article-content :is(h2, h3, h4) { color: var(--iz-ink); text-wrap: balance; scroll-margin-top: 20px; }
.article-content h2 { margin: 2em 0 .5em; font: var(--text-h3); }
.article-content h3 { margin: 1.7em 0 .45em; font: var(--text-h4); }
.article-content h4 { margin: 1.5em 0 .4em; font: var(--text-h4); }
.article-content a { color: var(--primary-700); text-underline-offset: 3px; }
.article-content a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--iz-focus); }
.article-content :is(ul, ol) { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.article-content li { margin-bottom: .35em; }
.article-content li::marker { color: var(--secondary-600); font-weight: 600; }
.article-content blockquote { margin: 1.6em 0; padding: var(--pad-card); border-radius: var(--iz-r); background: var(--iz-sunk); color: var(--iz-ink); font: var(--text-h4); }
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content blockquote cite { display: block; margin-top: var(--space-1); color: var(--iz-ink-soft); font: var(--text-caption); font-weight: 500; }
.article-content img { max-width: 100%; height: auto; border-radius: var(--iz-r); }
.article-content figure { margin: 1.8em 0; }
.article-content figcaption { margin-top: var(--space-1); color: var(--iz-ink-soft); font: var(--text-caption); text-align: center; }
/* `display: block` so a table wider than a phone scrolls inside itself instead of widening the page. */
.article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font: var(--text-caption); }
.article-content :is(th, td) { padding: var(--space-1) var(--space-2); border: 1px solid var(--iz-line-soft); text-align: start; }
.article-content th { background: var(--iz-sunk); font-weight: 600; }
.article-content hr { margin: 2em 0; border: 0; border-top: 1px solid var(--iz-line-soft); }
.article-content :is(iframe, video, audio) { max-width: 100%; }
.article-content :is(code, pre) { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------- the voice's text */
.article-transcript { border-top: 1px solid var(--iz-line-soft); scroll-margin-top: 20px; }
.article-transcript > summary { display: flex; align-items: center; gap: var(--gap-inline); min-height: 52px; border-radius: 8px; color: var(--iz-ink); font: var(--text-body-s); font-weight: 600; cursor: pointer; list-style: none; }
.article-transcript > summary::-webkit-details-marker { display: none; }
.article-transcript > summary:focus-visible { outline: none; box-shadow: var(--iz-focus); }
.article-transcript > summary i:first-child { color: var(--secondary-600); font-size: var(--text-h4-size); }
.article-transcript__caret { margin-inline-start: auto; color: var(--iz-ink-soft); transition: rotate .24s var(--iz-ease-out); }
.article-transcript[open] .article-transcript__caret { rotate: 180deg; }
.article-transcript > div { padding-bottom: var(--space-1); color: var(--iz-text); font: var(--text-body); }
.article-transcript p { margin: 0 0 .8em; }
.article-transcript p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- sources, the update line, the author, share
 * Everything after the text is a footnote to it: a hairline above, small type, no box of its own. */
.article-end { display: grid; gap: var(--space-stack); padding-top: var(--space-4); border-top: 1px solid var(--iz-line-soft); }
.article-sources h2 { margin: 0 0 var(--space-1); color: var(--iz-ink); font: var(--text-h4); }
.article-sources ol { display: grid; gap: var(--space-0); margin: 0; padding-inline-start: 1.3em; color: var(--iz-text); font: var(--text-caption); }
/* No underline at rest (owner, 2026-09-29). A source with no link is plain text in the list's grey,
 * so the teal (--primary-700, 9.3:1 on white, 5.6:1 against the grey beside it) is what marks a
 * link; the underline comes back on hover and on keyboard focus, with the ring. */
.article-sources a { border-radius: 4px; color: var(--primary-700); font-weight: 500; text-decoration: none; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-sources a:focus-visible { outline: none; box-shadow: var(--iz-focus); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .article-sources a:hover { text-decoration: underline; } }
.article-sources a.iz-ltr { display: inline-block; text-align: start; }
.article-end__updated { display: flex; align-items: center; gap: var(--gap-inline); margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.article-end__updated i { font-size: var(--text-body-s-size); }

.article-author { display: grid; gap: var(--space-head); padding-top: var(--space-4); border-top: 1px solid var(--iz-line-soft); }
.article-author > h2 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
/* Two rows (owner, 2026-09-29): the portrait and the name on the first, the biography on its own
 * row under both at the card's full width — beside a 72px portrait it was a narrow column with a
 * blank strip under the picture. The speciality line under the name is gone. */
.article-author__card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-stack) var(--space-2); align-items: center; }
/* The rounded leaf corners are drawn for a 72px frame; at 56 they take half of it. */
.article-author__portrait { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 20px 6px 20px 6px; background: var(--iz-sunk); color: var(--secondary-500); font-size: var(--text-number-l-size); }
.article-author__portrait img { width: 100%; height: 100%; object-fit: cover; }
.article-author__card h3 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
.article-author__bio { grid-column: 1 / -1; margin: 0; color: var(--iz-text); font: var(--text-body-s); text-wrap: pretty; }
.article-author__card .iz-link { grid-column: 1 / -1; justify-self: start; }

/* The two actions share the row, half each, both filled (owner, 2026-09-29). A button this browser
 * cannot use stays `hidden` (article.js), and the one left takes the whole row. The second filled
 * button is the accent scale — "the third colour" — so the pair is not two identical slabs:
 * white on --accent-600 is 5.8:1, on --accent-700 7.6:1. */
.article-share { display: grid; gap: var(--space-stack); padding-top: var(--space-4); border-top: 1px solid var(--iz-line-soft); }
.article-share p { margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.article-share > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap-inline); }
.article-share .iz-btn { min-width: 0; padding-inline: var(--space-3); }
.article-share__alt { background: var(--accent-600); color: #fff; }
.article-share__alt:active { background: var(--accent-800); }
@media (hover: hover) and (pointer: fine) { .article-share__alt:hover { background: var(--accent-700); } }

/* ------------------------------------------------------------- the two bands under the article
 * This is where the page spends its colour. The questions and the further reading are each a
 * different kind of thing from the article above them, and a band says so at a glance. */
.article-faq { padding-block: var(--space-band); background: var(--surface-blue); }
.article-related { padding-block: var(--space-band); background: #f5f5f5; }
.article-related__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-title) var(--space-3); margin-bottom: var(--space-head); }
.article-related__head .iz-h2 { margin: 0; }
.article-related__head p { margin: 0; color: var(--iz-text); font: var(--text-caption); }
.article-related__head .iz-link { margin-inline-start: auto; }
/* No gap between the layout and the first band: the layout's own bottom padding is the gap. */

/* ------------------------------------------------------------- narrower */
@media (max-width: 1100px) {
	.article-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 900px) {
	/* One column: the contents above the article, the sidebar after it. */
	.article-layout, .article-layout--plain { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "side" "main" "more"; gap: var(--space-3); }
	.article-more { margin-block-start: var(--space-block); }
	.article-layout--plain .blog-side { height: auto; }
	.article-layout--plain .blog-side__help { position: static; }
	/* The contents go above what they index. The wireframe parks them under the article on a phone,
	 * where a list of sections is a list of things already read. */
	.article-side { order: -1; }
	.article-side__stick { position: static; }
	.article-toc ol { max-height: none; }
	.article-toc__progress { display: none; }

	/* The voice, as a bar along the bottom of the screen. Fixed rather than sticky so it is there
	 * from the first paragraph to the last; `display: none` is never used on the label, because it
	 * is what names the region for a screen reader. */
	.article-voice { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--space-1) var(--space-3) calc(var(--space-1) + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--iz-line-soft); border-radius: 0; background: rgb(255 255 255 / .96); backdrop-filter: blur(12px); box-shadow: 0 -6px 20px rgb(20 46 55 / .08); }
	.article-voice__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.article-voice__transcript { display: none; }
	.article-voice .iz-audio { padding: 0; background: none; }
	/* Room for the bar, so the last line of the footer is never under it; and the back-to-top
	 * button steps up out of its way. The bar is 61px now that it is the player alone (8 + 44 + 8
	 * and its hairline); it was 88 with the recording's title over the player. */
	body:has(.article-voice) { padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom)); }
	body:has(.article-voice) .to-top { bottom: calc(var(--space-7) + var(--space-2) + env(safe-area-inset-bottom)); }
}

@media (max-width: 860px) {
	/* The kit stacks the head here and puts the picture first. A short, wide crop: on a phone the
	 * head's job is to get out of the way of the article. */
	.article-head .iz-pagehead__media { aspect-ratio: 2 / 1; border-radius: 18px 6px 18px 6px; }
	.article-head.iz-pagehead, .article-head.iz-pagehead:not(.iz-pagehead--media) { grid-template-columns: minmax(0, 1fr); gap: var(--space-head); }
	.article-head .iz-pagehead__art { display: none; }
}

@media (max-width: 520px) {
	.article-band { padding-block-start: var(--space-3); }
	.article-head .iz-pagehead__summary { font: var(--text-caption); }
	.article-meta { column-gap: var(--space-3); }
	.article-main { padding: var(--pad-row); border-radius: var(--iz-r); }
	.article-author__card { grid-template-columns: 48px minmax(0, 1fr); }
}

/* The sidebar's last box: a white box with a line, not a tint. */
.article-more .blog-side__help { border-color: var(--iz-line-soft); background: var(--color-surface); }