/* =============================================================================
   Journal article as a calm long read (template-article.php), body.ca-article.
   Frame (header, footer, Jost 500/600, --ui-* tokens) from ui.css. House tokens only.
   A 33em reading column of Jost 400 at 18px; header, dek and reading cues; an optional lead image;
   a sticky "See the tour" card beside the text on desktop, inline after paragraph three on phones;
   a reading progress bar (scroll-driven in @supports, article.js otherwise); "Next in the journal".
   Old post_content is neutralised inside .ar-body: no dark backgrounds, no white or faded text.
   ============================================================================= */
html:has(body.ca-article), body.ca-article { overflow-x: clip; }
body.ca-article { background: var(--ui-bg); }
/* The old theme zeroes .site-content padding on journal entries (dark full-bleed hero); the light page sits below the fixed header again */
body.ca-article #content.site-content { padding-top: var(--ar-top, 81px) !important; }
body.ca-article .ar { display: block; color: var(--ui-ink); background: var(--ui-bg); font-family: 'Jost', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.6; }
body.ca-article .ar *, body.ca-article .ar *::before, body.ca-article .ar *::after { box-sizing: border-box; }
body.ca-article .ar-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
body.ca-article .ar h1, body.ca-article .ar h2, body.ca-article .ar h3, body.ca-article .ar h4 { font-family: 'Jost', sans-serif !important; font-style: normal !important; text-transform: none !important; letter-spacing: -.005em !important; color: var(--ui-ink) !important; text-align: left !important; text-shadow: none !important; }
body.ca-article .ar p { text-align: left; }

/* Reading progress: a hairline at the very top of the viewport */
body.ca-article .ar-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100000; pointer-events: none; background: transparent; }
body.ca-article .ar-progress span { display: block; height: 100%; background: var(--ui-accent); transform-origin: 0 50%; transform: scaleX(var(--ar-p, 0)); }
@supports (animation-timeline: scroll()) {
    body.ca-article .ar-progress span { transform: scaleX(0); animation: ar-progress linear both; animation-timeline: scroll(root block); }
    @keyframes ar-progress { to { transform: scaleX(1); } }
}

/* Header: eyebrow, title, dek, byline and reading cues */
body.ca-article .ar-head { padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
body.ca-article .ar-wrap-head { max-width: calc(33em + 2 * clamp(1.25rem, 5vw, 3rem)); margin-left: max(0px, calc((100% - 1200px) / 2)); }
body.ca-article .ar .ar-eyebrow, body.ca-article .ar .ar-eyebrow a { font-family: 'Jost', sans-serif !important; font-style: normal !important; }
body.ca-article .ar .ar-eyebrow { margin: 0 0 .9rem; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
body.ca-article .ar-eyebrow a { color: var(--ui-accent); text-decoration: none; padding: .4rem 0; }
body.ca-article .ar-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.ca-article .ar .ar-h1 { font-weight: 600 !important; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem) !important; line-height: 1.1 !important; margin: 0 0 1rem !important; max-width: 20ch; overflow-wrap: break-word; }
body.ca-article .ar-dek { margin: 0 0 1.4rem; max-width: 40em; font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.5; color: var(--ui-ink-2); }
body.ca-article .ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--ui-line); font-size: 15px; color: var(--ui-ink-2); }
body.ca-article .ar-by { font-weight: 500; color: var(--ui-ink); }
body.ca-article .ar-when { white-space: nowrap; }
body.ca-article .ar-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* Lead image, only when the entry has one or borrows its tour's */
body.ca-article .ar-lead { margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
body.ca-article .ar-lead img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--ui-radius); background: var(--ui-tint); }

/* Text column and tour rail */
body.ca-article .ar-layout { display: grid; grid-template-columns: minmax(0, 33em); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
body.ca-article .ar-layout.has-tour { grid-template-columns: minmax(0, 33em) minmax(260px, 320px); }
body.ca-article .ar-rail { position: sticky; top: calc(var(--ar-top, 96px) + 1rem); }
body.ca-article.admin-bar .ar-rail { top: calc(var(--ar-top, 96px) + 32px + 1rem); }
/* The rail fits a 1366x650 laptop window: a shorter photo on short windows, the dek held to four lines,
   and a capped height with its own scroll as the safety net */
body.ca-article .ar-rail { max-height: calc(100vh - var(--ar-top, 96px) - 2rem); overflow-y: auto; overscroll-behavior: auto; scrollbar-width: thin; }   /* auto: the wheel hands back to the page at the rail's end, no scroll trap */
body.ca-article .ar-rail .ar-tour-desc { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-height: 760px) { body.ca-article .ar-rail .ar-tour-media { aspect-ratio: 16 / 10; } }

/* The text. Every rule outranks the legacy dark styles carried by old content. */
body.ca-article .ar-body { min-width: 0; font-size: 17px; line-height: 1.65; color: var(--ui-ink); }
body.ca-article .ar-body > * { margin-top: 0; }
body.ca-article .ar-body,
body.ca-article .ar-body :where(p, li, span, em, strong, td, th, figcaption, div, section) {
    font-family: 'Jost', sans-serif !important; font-style: normal; color: var(--ui-ink) !important; background: transparent !important; text-shadow: none !important; opacity: 1 !important; letter-spacing: 0 !important; text-transform: none !important; }
body.ca-article .ar-body em { font-style: italic; }
body.ca-article .ar-body strong { font-weight: 600; }
body.ca-article .ar-body p, body.ca-article .ar-body li { font-size: 17px !important; font-weight: 400 !important; line-height: 1.65 !important; max-width: none !important; }
body.ca-article .ar-body p { margin: 0 0 1.25em !important; }
body.ca-article .ar-body > p:first-of-type { color: var(--ui-ink) !important; }
body.ca-article .ar-body h2 { font-weight: 600 !important; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem) !important; line-height: 1.25 !important; margin: 2.2em 0 .7em !important; }
body.ca-article .ar-body h3 { font-weight: 600 !important; font-size: 19px !important; line-height: 1.3 !important; margin: 1.8em 0 .6em !important; }
body.ca-article .ar-body a:not(.ar-tour-link) { color: var(--ui-ink) !important; text-decoration: underline; text-decoration-color: var(--ui-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--ca-transition); }
body.ca-article .ar-body a:not(.ar-tour-link):hover { color: var(--ui-accent) !important; }
body.ca-article .ar-body ul, body.ca-article .ar-body ol { margin: 0 0 1.25em; padding-left: 1.25em; }
body.ca-article .ar-body li { margin: 0 0 .4em !important; }
body.ca-article .ar-body li::marker { color: var(--ui-accent); }
body.ca-article .ar-body img { max-width: 100%; height: auto; border-radius: var(--ui-radius-sm); }
body.ca-article .ar-body figure { margin: 2em 0; }
body.ca-article .ar-body .has-background, body.ca-article .ar-body [style*="background"] { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
body.ca-article .ar-body hr { border: 0; border-top: 1px solid var(--ui-line); margin: 2.5em 0; }
body.ca-article .ar-body .ca-journal-hero { display: none; }           /* image credits never show */
/* Pull quotes, only where the content already marks them */
body.ca-article .ar-body blockquote, body.ca-article .ar-body .wp-block-pullquote { margin: 2em 0 !important; padding: .2em 0 .2em 1.25em !important; border: 0 !important; border-left: 3px solid var(--ui-accent) !important; background: transparent !important; }
body.ca-article .ar-body blockquote p, body.ca-article .ar-body .wp-block-pullquote p { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem) !important; line-height: 1.4 !important; font-weight: 500 !important; }
/* The "Also in the journal" line the entries carry */
body.ca-article .ar-body .ca-journal-related { margin-top: 2.5em !important; padding: 1.1rem 1.25rem !important; border-radius: var(--ui-radius-sm); background: var(--ui-tint) !important; font-size: 16px !important; line-height: 1.6 !important; }

/* The tour card */
body.ca-article .ar-tour { margin: 0; }
body.ca-article .ar-tour-link { display: flex; flex-direction: column; color: var(--ui-ink); text-decoration: none; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; transition: box-shadow var(--ca-transition), transform var(--ca-transition); }
body.ca-article .ar-tour-link:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); }
body.ca-article .ar-tour-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
body.ca-article .ar-tour-media { display: block; aspect-ratio: 4 / 3; background: var(--ui-tint); }
body.ca-article .ar-tour-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; }
body.ca-article .ar-tour-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.25rem; }
body.ca-article .ar .ar-tour-eyebrow { font-family: 'Jost', sans-serif !important; font-style: normal !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--ui-accent) !important; }
body.ca-article .ar .ar-tour-title, body.ca-article .ar .ar-tour-desc, body.ca-article .ar .ar-btn { font-family: 'Jost', sans-serif !important; font-style: normal !important; }
body.ca-article .ar .ar-tour-title { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--ui-ink) !important; }
body.ca-article .ar .ar-tour-desc { font-size: 15px !important; line-height: 1.55 !important; color: var(--ui-ink-2) !important; }
body.ca-article .ar-tour .ar-btn { margin-top: .4rem; align-self: flex-start; }
body.ca-article .ar-tour-link:hover .ar-btn-ghost { border-color: var(--ui-ink); background: var(--ui-bg); }
body.ca-article .ar-tour-inline { display: none; }

/* Buttons: ghost, and the one green WhatsApp action */
body.ca-article .ar-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem; border-radius: var(--ui-radius-sm); font: 600 16px/1.2 'Jost', sans-serif !important; text-decoration: none; text-transform: none; letter-spacing: .01em !important; cursor: pointer; transition: border-color var(--ca-transition), background var(--ca-transition); }
body.ca-article .ar-btn-ghost { background: transparent; color: var(--ui-ink) !important; border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); }
body.ca-article a.ar-btn-ghost:hover { border-color: var(--ui-ink); background: var(--ui-paper); }
body.ca-article .ar-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-article .ar-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }
body.ca-article .ar-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* End of the piece */
body.ca-article .ar-end { padding-top: clamp(1rem, 3vw, 1.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
body.ca-article .ar-end-inner { max-width: 33em; display: flex; flex-wrap: wrap; gap: .75rem; padding-top: 1.75rem; border-top: 1px solid var(--ui-line); }

/* Next in the journal: the hub's card language */
body.ca-article .ar-next { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--ui-tint); }
body.ca-article .ar .ar-h2 { font-weight: 600 !important; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem) !important; line-height: 1.15 !important; margin: 0 0 1.25rem !important; }
body.ca-article .ar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
body.ca-article .ar-cell { margin: 0; padding: 0; container-type: inline-size; container-name: arcard; }
body.ca-article .ar-cell::before { content: none; }
body.ca-article .ar-card { position: relative; height: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr); background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; transition: box-shadow var(--ca-transition), transform var(--ca-transition); }
body.ca-article .ar-card:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); }
body.ca-article .ar-card:has(.ar-stretch:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body.ca-article .ar-card-media { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 100%;
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, var(--ui-line) 27px 28px),
        linear-gradient(150deg, var(--ui-tint), color-mix(in srgb, var(--beige) 70%, var(--gold-pale))); }
body.ca-article .ar-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.ca-article .ar-mono { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 2.6rem; line-height: 1; color: color-mix(in srgb, var(--ui-accent) 70%, transparent); user-select: none; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
body.ca-article .ar-card:hover .ar-mono { transform: scale(1.08); }
body.ca-article .ar-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.05rem; }
body.ca-article .ar .ar-card-title { margin: 0 !important; font-weight: 600 !important; font-size: 18px !important; line-height: 1.3 !important; }
body.ca-article .ar-stretch { color: inherit; text-decoration: none; }
body.ca-article .ar-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
body.ca-article .ar-stretch:focus-visible { outline: none; }
body.ca-article .ar-card-dek { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ui-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.ca-article .ar-card-meta { margin: auto 0 0; padding-top: .25rem; font-size: 14px; color: var(--ui-ink-2); }
@container arcard (min-width: 300px) {
    body.ca-article .ar-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    body.ca-article .ar-card-media { aspect-ratio: 16 / 8; min-height: 0; }
    body.ca-article .ar-mono { font-size: 5rem; }
    body.ca-article .ar-card-body { padding: 1.15rem 1.3rem 1.25rem; }
}

/* Tablet and phone: one column; the tour card moves into the text after paragraph three */
@media (max-width: 1000px) {
    body.ca-article .ar-layout.has-tour { grid-template-columns: minmax(0, 33em); }
    body.ca-article .ar-rail { display: none; }
    body.ca-article .ar-tour-inline { display: block; margin: 2em 0 2.2em; }
    body.ca-article .ar-tour-inline .ar-tour-link { flex-direction: row; }
    body.ca-article .ar-tour-inline .ar-tour-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 560px) {
    /* Byline on its own line, the date and reading time below it: no separator left hanging at a line end */
    body.ca-article .ar-by { flex-basis: 100%; }
    body.ca-article .ar-dot { display: none; }
    body.ca-article .ar-wrap-head { margin-left: 0; }
    body.ca-article .ar-lead { padding: 0; }
    body.ca-article .ar-lead img { aspect-ratio: 4 / 3; border-radius: 0; }
    body.ca-article .ar-body, body.ca-article .ar-body p, body.ca-article .ar-body li { font-size: 17px !important; line-height: 1.65 !important; }
    body.ca-article .ar-tour-inline .ar-tour-link { flex-direction: column; }
    body.ca-article .ar-tour-inline .ar-tour-media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
    body.ca-article .ar-end-inner .ar-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    body.ca-article .ar-card, body.ca-article .ar-tour-link, body.ca-article .ar-mono { transition: none; }
    body.ca-article .ar-card:hover, body.ca-article .ar-tour-link:hover { transform: none; }
}
@media print {
    body.ca-article .ar-progress, body.ca-article .ui-mbar, body.ca-article .ar-rail, body.ca-article .ar-tour-inline, body.ca-article .ar-next, body.ca-article .ar-end { display: none !important; }
}

/* =============================================================================
   m-details 2026-10-08 (S2-2 / S2-3)
   Phones: the two card lists become swipe rails (ux.css .ux-snap: momentum, snap, dots; the rail's end never
   turns into a back navigation, vertical scroll passes through). The phone action bar is the shared .ui-mbar.
   Desktop: a piece with no tour card reads as one centred column under its header, the lead photograph wider
   than the text; 18px from 1280; pull quotes ready in the display face for when the content marks one.
   ============================================================================= */
/* Swipe rails on phones: full-bleed to the screen edge, first card on the text edge */
@media (max-width: 760px) {
    body.ca-article .ar .ar-grid.ux-snap { --ux-snap-item: 84%; --ux-snap-gap: 12px; --ux-snap-pad: clamp(1.25rem, 5vw, 3rem);
        grid-template-columns: none; gap: var(--ux-snap-gap); margin: 0 calc(clamp(1.25rem, 5vw, 3rem) * -1); padding-top: .25rem; padding-bottom: .5rem; }
    body.ca-article .ar-grid.ux-snap > .ar-cell { height: auto; }
    /* A swipe card is a photo card: picture on top, words below, whatever the card's width */
    body.ca-article .ar-grid.ux-snap .ar-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    body.ca-article .ar-grid.ux-snap .ar-card-media { aspect-ratio: 16 / 9; min-height: 0; }
    body.ca-article .ar-grid.ux-snap .ar-mono { font-size: 4rem; }
    body.ca-article .ar-next .ux-snap-ui { margin-top: .25rem; }
    body.ca-article .ar-next .ar-card:hover { transform: none; }
}
/* From 761px the same lists are plain grids again: no rail, no dots */
@media (min-width: 761px) {
    body.ca-article .ar .ar-grid.ux-snap { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
        overflow: visible; padding: 0; scroll-snap-type: none; gap: 1.25rem; }
    body.ca-article .ar-next .ux-snap-ui { display: none; }
}
/* Two tinted sections in a row read as one: the second one only gets a hairline and less air */
body.ca-article .ar-next + .ar-next { padding-top: 0; }
body.ca-article .ar .ar-next + .ar-next .ar-h2 { padding-top: clamp(2rem, 4vw, 3rem) !important; border-top: 1px solid color-mix(in srgb, var(--obsidian) 10%, transparent); }

/* Pull quotes in the display face, hung into the margin on wide screens (ready for content that marks one) */
body.ca-article .ar-body blockquote p, body.ca-article .ar-body .wp-block-pullquote p { font-family: var(--ui-font-display) !important; font-weight: 450 !important; letter-spacing: var(--ui-display-track) !important; }
body.ca-article .ar-body blockquote cite, body.ca-article .ar-body .wp-block-pullquote cite { display: block; margin-top: .6rem; font: 500 14px/1.4 'Jost', sans-serif; font-style: normal; color: var(--ui-ink-2); }

@media (min-width: 1001px) {
    /* No tour card: one centred reading column; header and the end of the piece share its edge */
    body.ca-article .ar-article.no-tour .ar-wrap-head { margin-left: auto; margin-right: auto; }
    body.ca-article .ar-article.no-tour .ar-layout { justify-content: center; }
    body.ca-article .ar-article.no-tour .ar-end-inner { margin: 0 auto; }
    body.ca-article .ar-article.no-tour .ar-body blockquote,
    body.ca-article .ar-article.no-tour .ar-body .wp-block-pullquote { margin-left: -2.5rem !important; margin-right: -2.5rem !important; padding-left: 2.5rem !important; }
    /* With the tour card: column and card together sit in the middle of the frame */
    body.ca-article .ar-article.has-tour .ar-layout { justify-content: center; }
    body.ca-article .ar-article.has-tour .ar-wrap-head { margin-left: auto; margin-right: auto; max-width: calc(33em + clamp(2rem, 5vw, 4.5rem) + 320px + 2 * clamp(1.25rem, 5vw, 3rem)); }
    body.ca-article .ar-article.has-tour .ar-wrap-head > * { max-width: 33em; }
    body.ca-article .ar-article.has-tour .ar-wrap-head .ar-h1 { max-width: 20ch; }
    body.ca-article .ar-article.has-tour .ar-end-inner { margin: 0 auto; max-width: calc(33em + clamp(2rem, 5vw, 4.5rem) + 320px); }
    /* The lead photograph: wider than the text, held to a calm height */
    body.ca-article .ar-lead img { aspect-ratio: 21 / 9; max-height: 560px; }
}
@media (min-width: 1280px) {
    body.ca-article .ar { font-size: 18px; }
    body.ca-article .ar-article.no-tour .ar-wrap-head { max-width: calc(33em + 2 * clamp(1.25rem, 5vw, 3rem)); }
    body.ca-article .ar-article.no-tour .ar-end-inner { max-width: 33em; }
    body.ca-article .ar-body, body.ca-article .ar-body p, body.ca-article .ar-body li { font-size: 18px !important; line-height: 1.7 !important; }
    body.ca-article .ar-layout, body.ca-article .ar-layout.has-tour { grid-template-columns: minmax(0, 33em); }
    body.ca-article .ar-layout.has-tour { grid-template-columns: minmax(0, 33em) minmax(280px, 340px); }
    body.ca-article .ar-dek { font-size: 1.4rem; }
}
@media (min-width: 1600px) {
    body.ca-article .ar-head { padding-top: 5rem; }
    body.ca-article .ar .ar-h1 { font-size: 4rem !important; }
}