/*
 * The journal (inc/journal.php): /journal/, a category's archive and an article.
 * Built from the Home's journal cards (.post), the page hero, the department head and the shop's chips and breadcrumb;
 * this sheet only adds what the journal has of its own. Mobile first: phone rules here, wider screens below.
 */

/* White journal pages (Ben, 3 Nov 2026: "Don't have to use this cream background all over the website", "make journal
   pages white"). The index, a category and an article sit on white; the tinted boxes inside them (who it's for, the
   email boxes, about the author, call the store) take the light neutral field instead of cream. ---------------------- */
.glo-journal { background: var(--paper); }
.glo-journal .band--white { background: var(--paper); }
.jlist, .jpost, .jrel { --canvas: var(--field-light); }
.jrel { border-top: 1px solid var(--edge); }
.jrel + .jsign-band, .jpost + .jsign-band { padding-top: 0; } /* one white gap, not two */

/* Index and category: heading, category bar, feature card, grid, pager ------------------------------------------ */
.jlist__head { display: grid; gap: 16px; margin-bottom: 28px; }
.jlist--cat .glo-crumbs { padding-top: 6px; }
.jlist--cat .dhead__row { margin-bottom: 18px; }
.jcats__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.jlist--cat .jcats { margin-bottom: 28px; }
.jlist--cat .jcats__list { justify-content: center; }
.glo-chip.is-current { border-color: var(--navy); background: var(--navy); color: #fff; }
.glo-chip.is-current:hover { color: #fff; }

.jcard { min-width: 0; }
.jcard .post { display: grid; gap: 14px; }
.jcard--feature { margin-bottom: 36px; }
.jcard--feature .post__title { font-size: clamp(30px, 3.4vw, 46px); line-height: .98; text-wrap: balance; }
.jcard--feature .post__dek { font-size: 17px; line-height: 1.6; max-width: 60ch; }
.jcard__more { justify-self: start; margin-top: 6px; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.jposts .post__title { font-size: 26px; line-height: 1.02; text-wrap: balance; }
/* A row that isn't full sits in the middle, cards keep their three-across width (Aiden, 29 Oct 2026: "Might as well center it"). */
@media (min-width: 900px) {
	.jposts { display: flex; flex-wrap: wrap; justify-content: center; }
	.jposts > .jcard { flex: 0 1 calc((100% - 48px) / 3); }
}

.jmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.jmeta > * + *::before { content: "\00B7"; margin: 0 8px; color: var(--muted); }
.jmeta__cat { color: var(--spruce); text-transform: uppercase; letter-spacing: .06em; }
.jcard .jmeta__cat { flex-basis: 100%; }
.jcard .jmeta__cat + *::before { content: none; }

.jempty { font-size: 17px; color: var(--muted); }

.jpager { margin-top: 48px; text-align: center; }
.jpager .nav-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jpager .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-1); background: var(--paper); color: var(--ink); font: 600 16px var(--f-head); transition: border-color var(--fast), background-color var(--fast); }
.jpager a.page-numbers:hover { border-color: var(--navy); color: var(--navy); background: var(--canvas); }
.jpager .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.jpager .page-numbers.dots { border-color: transparent; background: none; }
.jpager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Article: head, photo, body beside the side column, older/newer ------------------------------------------------ */
.jpost .glo-crumbs { padding-top: 6px; }
.jpost__head { display: grid; justify-items: center; gap: 14px; max-width: 880px; margin: 22px auto 28px; text-align: center; }
.jpost__cat { padding: 6px 12px; border-radius: var(--r-4); background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: background-color var(--fast); }
.jpost__cat:hover { background: var(--spruce); }
.jpost__title { margin: 0; font: 800 clamp(38px, 4.6vw, 64px)/.95 var(--f-head); color: var(--navy); letter-spacing: .004em; text-wrap: balance; }
.jpost__dek { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.jpost__meta { justify-content: center; font-size: 14px; }
@media (max-width: 699px) { .jpost__meta { column-gap: 14px; } .jpost__meta > * + *::before { content: none; } } /* wrapped centred lines: space, not a dot that starts a line */
.jpost__photo { margin: 0 0 36px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-3); background: var(--canvas); }
.jpost__photo img { width: 100%; height: 100%; object-fit: cover; }

.jpost__grid { display: grid; gap: 32px; }
.jpost__side { display: grid; gap: 18px; align-content: start; }
.jtoc { padding: 20px 22px; border: 1px solid var(--edge); border-radius: var(--r-3); background: var(--paper); }
.jtoc__title, .jask__title { margin: 0 0 10px; font: 700 18px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.jtoc__list { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.4; }
.jtoc__list a { color: var(--ink); transition: color var(--fast); }
.jtoc__list a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.jask { display: grid; gap: 12px; padding: 20px 22px; border-radius: var(--r-3); background: var(--canvas); }
.jask__title { margin: 0; }
.jask__line { margin: 0; font-size: 15px; color: var(--muted); }
.jask { display: none; } /* phones and tablets: the Ask band under the article does this job */

.jpost__body { min-width: 0; max-width: 72ch; font-size: 18px; line-height: 1.75; color: var(--ink); }
.jpost__body > * { margin: 0 0 1.1em; }
.jpost__body h2 { margin: 1.6em 0 .5em; font: 800 clamp(28px, 2.8vw, 38px)/1.02 var(--f-head); color: var(--navy); text-wrap: balance; scroll-margin-top: calc(var(--glo-head-h) + 16px); }
.jpost__body h3 { margin: 1.4em 0 .4em; font: 700 24px/1.1 var(--f-head); color: var(--navy); }
.jpost__body :is(p, li, figcaption, td) > a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; } /* text links only, not the cards and buttons in the blocks */
.jpost__body :is(p, li, figcaption, td) > a:hover { color: var(--spruce); }
.jpost__body :where(ul, ol) { padding-left: 1.3em; }
.jpost__body :where(li + li) { margin-top: .35em; }
.jpost__body img { border-radius: var(--r-2); }
.jpost__body figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.jpost__body blockquote { margin-left: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--blaze); font-size: 20px; color: var(--navy); }

.jnext { display: grid; gap: 12px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.jnext__link { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--r-3); background: var(--paper); transition: border-color var(--fast); }
.jnext__link:hover { border-color: var(--navy); }
.jnext__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.jnext__title { font: 700 20px/1.1 var(--f-head); color: var(--navy); }

@media (min-width: 700px) {
	.jnext { grid-template-columns: 1fr 1fr; }
	.jnext__link--newer { grid-column: 2; text-align: right; }
}
@media (min-width: 900px) {
	.jlist__head { grid-template-columns: auto 1fr; align-items: end; }
	.jlist__head .jcats__list { justify-content: flex-end; }
	.jcard--feature .post { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center; }
	.jcard--feature .post__img { aspect-ratio: 16 / 10; }
}
@media (min-width: 1100px) {
	.jpost__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
	.jask { display: grid; }
	.jpost__side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--glo-head-h) + 24px); }
	.jpost__body { grid-column: 1; grid-row: 1; }
}
/* Wide screens: the article reads down the middle of the page, the author card and contents sit in the right
   gutter, the left gutter mirrors it (Aiden, 29 Oct 2026: "the article itself in the post template" centred). */
@media (min-width: 1360px) {
	.jpost__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr); column-gap: 40px; }
	.jpost__body { grid-column: 2; max-width: none; }
	.jpost__side { grid-column: 3; width: 100%; max-width: 300px; }
}

/* Article blocks (inc/journal-article.php) ---------------------------------------------------------------------- */
.javatar { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; font: 800 19px/1 var(--f-head); letter-spacing: .02em; }
.javatar--sm { width: 36px; height: 36px; font-size: 14px; }
.javatar--lg { width: 72px; height: 72px; font-size: 26px; }
.javatar--photo { overflow: hidden; }
.javatar--photo img { width: 100%; height: 100%; object-fit: cover; }

.jwho { display: none; gap: 12px; padding: 20px 22px; border: 1px solid var(--edge); border-radius: var(--r-3); background: var(--paper); } /* phones: the meta line and About the author carry it */
.jwho__row { display: flex; align-items: center; gap: 14px; }
.jwho__row p, .jwho__bio { margin: 0; }
.jwho__label, .jabout__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.jwho__name { font: 800 22px/1.05 var(--f-head); color: var(--navy); }
.jwho__role, .jabout__role { font-size: 14px; font-weight: 600; color: var(--spruce); }
.jwho__bio { font-size: 15px; line-height: 1.55; color: var(--muted); }

.jintro { font-size: 21px; line-height: 1.6; color: var(--navy); }
/* TL;DR and Who it's for: one quiet summary, no boxes (Aiden picked design 1, 4 Nov 2026, with no green in it).
   A small dark label over each, TL;DR with short grey dashes, Who it's for as one line with grey dots, one hairline under the pair. */
.jsum { display: grid; gap: 22px; padding-bottom: 26px; border-bottom: 1px solid var(--edge); }
.jtldr, .jfor { padding: 0; border: 0; border-radius: 0; background: none; }
.jvisit__title, .jsign__title { margin: 0 0 10px; font: 800 18px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .03em; color: var(--navy); }
.jtldr__title, .jfor__title { margin: 0 0 8px; font: 700 13px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--navy); }
.jfor__title .ico, .jfor__list .ico { display: none; }
.jtldr__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 1.55; color: var(--navy); }
.jtldr__list li { position: relative; margin: 0; padding-left: 22px; }
.jtldr__list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 2px; background: var(--muted); }
.jfor__list { margin: 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.6; }
.jfor__list li { display: inline; margin: 0; }
.jfor__list li + li::before { content: "\00b7"; margin: 0 10px; color: var(--muted); font-weight: 700; }
.jtoc--side { display: none; }

.jnote { margin: 0 0 1.4em; padding: 22px 24px; border-radius: var(--r-3); background: var(--navy); color: #fff; }
.jnote__by { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brass); }
.jnote__by .javatar { background: var(--paper); color: var(--navy); }
.jpost__body .jnote__text { margin: 0; padding: 0; border: 0; font-size: 19px; line-height: 1.6; font-style: italic; color: #fff; }
.jnote__text p { margin: 0; }

.jrail { margin: 2em 0; padding: 20px 20px 18px; border: 1px solid var(--edge); border-radius: var(--r-3); background: var(--paper); font-size: 16px; line-height: 1.4; }
.jrail__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.jrail__title { margin: 0; font: 800 20px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.jrail__all { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--navy); }
.jrail__all .ico { width: 16px; height: 16px; }
.jrail__all:hover { color: var(--spruce); }
.jrail .rail__bar { margin-top: 14px; }

.jsign { display: grid; gap: 14px; margin: 2em 0; padding: 22px 24px; border-radius: var(--r-3); background: var(--canvas); font-size: 16px; line-height: 1.5; }
.jsign__ico { display: none; }
.jsign__title { margin-bottom: 4px; }
.jsign__line { margin: 0; color: var(--muted); }
.jpost__body .jsign__form, .jsign__form { margin: 0; max-width: none; }
.jsign__form input { border: 1px solid var(--edge-strong); }
.jsign--end { margin: 0 auto; max-width: 980px; background: var(--navy); color: #fff; }
.jsign--end .jsign__title { color: #fff; }
.jsign--end .jsign__line { color: var(--muted-light); }
.jsign--end .jsign__form input { border-color: transparent; }
.jsign-band { padding-block: 56px; }
.jsign .signup__note { grid-column: 1 / -1; margin: 0; color: var(--ink); font-size: 15px; } /* the sign-up's reply, under the form */
.jsign .signup__legal { grid-column: 1 / -1; margin: 0; color: var(--muted); } /* the CASL line; the footer's light colour is for a dark band */
.jsign--end .signup__note { color: #fff; }
.jsign--end .signup__legal { color: var(--muted-light); }

.jfaq, .jrefs { margin-top: 2.2em; }
.jfaq__list { display: grid; gap: 10px; }
.jpost__body .qa > * { margin: 0; }
.jpost__body .qa__a p { margin: 0; padding: 0 20px 18px; font-size: 17px; line-height: 1.65; color: var(--ink); }

.jvisit { margin-top: 2.2em; padding: 22px 24px; border: 1px solid var(--edge); border-radius: var(--r-3); background: var(--paper); }
.jvisit__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 17px; }
.jvisit__list li { display: flex; align-items: center; gap: 12px; margin: 0; }
.jvisit__list .ico { flex: none; width: 22px; height: 22px; color: var(--spruce); }

.jrefs__list { margin: 0; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }

.jabout { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-top: 2.2em; padding: 24px; border-top: 4px solid var(--blaze); border-radius: var(--r-3); background: var(--canvas); }
.jabout p { margin: 0; }
.jabout__name { margin: 2px 0 2px; font: 800 26px/1.05 var(--f-head); color: var(--navy); }
.jabout__bio { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--ink); }

@media (min-width: 700px) {
	.jsign { grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; }
	.jsign__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; }
	.jsign--end .jsign__ico { background: var(--blaze); color: var(--glo-cta-ink); }
	.jsign__ico .ico { width: 24px; height: 24px; }
	.jsign__form { grid-column: 1 / -1; }
	.jsign--end { grid-template-columns: auto 1fr minmax(0, 1.1fr); padding: 30px 34px; }
	.jsign--end .jsign__form { grid-column: auto; }
}
@media (min-width: 900px) {
	.jrail .rail__track { grid-auto-columns: calc((100% - 16px * 2) / 3); }
	.jrail .rail__arrow--prev { left: -12px; }
	.jrail .rail__arrow--next { right: -12px; }
}
@media (min-width: 1100px) {
	.jwho, .jtoc--side { display: grid; }
	.jtoc--side { display: block; }
	.jtoc--inline { display: none; }
}
/* Boxes in a post: white with the hairline edge, not tinted (Aiden, 4 Nov 2026: option B). The navy end band and the author's blaze top edge stay. */
.jpost .jsign:not(.jsign--end), .jpost .jask, .jpost .jabout, .jpost .qa { background: var(--paper); border: 1px solid var(--edge); }
.jpost .jabout { border-top: 4px solid var(--blaze); }