/*
 * Editorial: the single post, the record archive, the search results, and the
 * sidebar the three of them share.
 *
 * The sidebar takes its palette from the mark: ink and panel grounds, a teal
 * hairline at the head of every block, orange for anything actionable, and the
 * mark itself set faintly behind the search field.
 */

/* ---------------------------------------------------------------- shell --- */
/*
 * The two columns start on the same line, so the sidebar sits level with the
 * page title rather than below it.
 *
 * Each column scrolls on its own. The sidebar is a sticky, full-height
 * scroller with overscroll-behavior: contain, so a wheel over it never chains
 * into the page by itself, and a wheel over the article never moves it.
 *
 * The handover at the ends is deliberate rather than automatic: app.js passes
 * scrolling to the sidebar once the page has nothing left to give, and back
 * to the page once the sidebar has reached its own end.
 */
.jq-editorial {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 80px;
	align-items: start;
}
.jq-editorial__main { min-width: 0; }

.jq-editorial__side {
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--jq-rule) transparent;
	padding-block: 8px 24px;
}
.jq-editorial__side::-webkit-scrollbar { width: 6px; }
.jq-editorial__side::-webkit-scrollbar-thumb { background: var(--jq-rule); }
.jq-editorial__side::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------- sidebar --- */
.jq-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.jq-side-block {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	background: var(--jq-ground);
	border: 1px solid var(--jq-rule);
	border-top: 3px solid var(--jq-teal);
	overflow: hidden;
}
.jq-side-block--panel { background: var(--jq-panel); border-color: transparent; }
.jq-side-block--search { background: var(--jq-panel); border-color: transparent; }
.jq-side-block--ink {
	background: var(--jq-ink);
	border-color: transparent;
	border-top-color: var(--jq-orange);
	color: var(--jq-footer-text);
}
.jq-side-block__mark {
	position: absolute;
	right: -18px;
	bottom: -18px;
	height: 118px;
	width: auto;
	opacity: 0.07;
	pointer-events: none;
}
.jq-side-block__title {
	font-family: var(--jq-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	position: relative;
	z-index: 1;
}
.jq-side-block__title--reverse { color: #fff; }
.jq-side-block__body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--jq-mid); }
.jq-side-block--ink .jq-side-block__body { color: var(--jq-footer-muted); }

/* Search field */
.jq-side-search { display: flex; gap: 0; position: relative; z-index: 1; }
.jq-side-search__input {
	flex-grow: 1;
	min-width: 0;
	height: var(--jq-field-height);
	border: 1px solid var(--jq-rule);
	border-right: 0;
	background: #fff;
	padding: 0 14px;
	font-family: var(--jq-sans);
	font-size: 14px;
	color: var(--jq-ink);
	border-radius: 0;
	appearance: none;
}
.jq-side-search__input:focus { border-color: var(--jq-ink); outline: none; }
.jq-side-search__submit {
	width: var(--jq-field-height);
	height: var(--jq-field-height);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jq-orange);
	color: #fff;
	border: 0;
	transition: background 0.2s;
}
.jq-side-search__submit:hover { background: var(--jq-ink); }

/* Lists */
.jq-side-list { list-style: none; display: flex; flex-direction: column; }
.jq-side-list__item { padding: 14px 0; border-bottom: 1px solid var(--jq-rule); }
.jq-side-list__item:last-child { border-bottom: 0; }
.jq-side-list__item a { display: flex; flex-direction: column; gap: 4px; color: var(--jq-ink); }
.jq-side-list__item a:hover .jq-side-list__title { color: var(--jq-orange); }
.jq-side-list__kicker {
	font-size: 10px;
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
}
.jq-side-list__title { font-family: var(--jq-serif); font-size: 18px; line-height: 1.25; font-weight: 600; transition: color 0.2s; }

.jq-side-stages { list-style: none; display: flex; flex-direction: column; }
.jq-side-stages li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.jq-side-stages li:last-child { border-bottom: 0; }
.jq-side-stages a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	color: var(--jq-footer-text);
	font-size: 14px;
}
.jq-side-stages a:hover { color: var(--jq-orange); }
.jq-side-stages span {
	font-family: var(--jq-serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--jq-orange);
}

/* ----------------------------------------------------------- single post --- */
.jq-post-hero { padding-block: 56px 0; }
.jq-post-hero__inner { max-width: 900px; }
.jq-post__kicker {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-orange);
	display: block;
	margin-bottom: 18px;
}
.jq-post__title {
	font-family: var(--jq-serif);
	font-size: 66px;
	font-weight: 600;
	line-height: 1.03;
	letter-spacing: -0.012em;
	margin: 0;
}
.jq-post__standfirst {
	font-family: var(--jq-serif);
	font-size: 24px;
	line-height: 1.45;
	color: var(--jq-body);
	margin: 22px 0 0;
	max-width: 62ch;
}
.jq-post__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--jq-rule);
	font-size: var(--jq-small);
	color: var(--jq-mid);
}
.jq-post__author { color: var(--jq-ink); font-weight: 600; }
.jq-post__dot { color: var(--jq-teal); }
.jq-post__figure { margin: 40px 0 0; }
.jq-post__figure img { width: 100%; height: auto; display: block; }
.jq-post__figcaption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
	font-family: var(--jq-serif);
	font-style: italic;
	font-size: 15px;
	color: var(--jq-mid);
}
.jq-post__figcaption img { height: var(--jq-mark-code); width: auto; opacity: 0.9; }

/* The reading column. Measure held near 68 characters. */
.jq-prose { max-width: 68ch; }
.jq-prose p {
	font-size: 19px;
	line-height: 1.75;
	color: var(--jq-body);
	margin: 0 0 1.15em;
}
.jq-prose > p:first-of-type::first-letter {
	font-family: var(--jq-serif);
	float: left;
	font-size: 76px;
	line-height: 0.78;
	font-weight: 600;
	color: var(--jq-ink);
	padding: 6px 12px 0 0;
}
.jq-prose h2 {
	font-family: var(--jq-serif);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.15;
	margin: 1.6em 0 0.5em;
}
.jq-prose h3 {
	font-family: var(--jq-serif);
	font-size: 26px;
	font-weight: 600;
	margin: 1.4em 0 0.4em;
}
.jq-prose blockquote {
	margin: 1.6em 0;
	padding-left: 24px;
	border-left: 3px solid var(--jq-teal);
	font-family: var(--jq-serif);
	font-size: 26px;
	line-height: 1.4;
	color: var(--jq-ink);
}
.jq-prose ul, .jq-prose ol { margin: 0 0 1.15em 1.2em; }
.jq-prose li { font-size: 19px; line-height: 1.75; color: var(--jq-body); margin-bottom: 0.4em; }
.jq-prose a { color: var(--jq-orange); border-bottom: 1px solid rgba(243, 112, 33, 0.35); }
.jq-prose a:hover { color: var(--jq-ink); border-bottom-color: var(--jq-ink); }
.jq-prose img { margin: 1.6em 0; }

.jq-post__foot {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--jq-rule);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	max-width: 68ch;
}
.jq-post__attribution { font-size: var(--jq-small); color: var(--jq-mid); margin: 0; max-width: 46ch; }

/* Related */
.jq-related { margin-top: 64px; }
.jq-related__head { margin-bottom: 24px; }

/* -------------------------------------------------------------- comments --- */
.jq-comments { margin-top: 64px; max-width: 68ch; }
.jq-comments__title {
	font-family: var(--jq-serif);
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 8px;
}
.jq-comments__note { font-size: var(--jq-small); color: var(--jq-mid); margin: 0 0 28px; }
.jq-comments .comment-list { list-style: none; margin: 0 0 40px; padding: 0; }
.jq-comments .comment-list li { list-style: none; }
.jq-comments .comment-body {
	padding: 22px 0;
	border-bottom: 1px solid var(--jq-rule);
}
.jq-comments .comment-author {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-ink);
	font-weight: 600;
}
.jq-comments .comment-author .says { display: none; }
.jq-comments .comment-meta { font-size: 12px; color: var(--jq-mid); margin-bottom: 10px; }
.jq-comments .comment-meta a { color: var(--jq-mid); }
.jq-comments .comment-content p { font-size: 16px; line-height: 1.7; color: var(--jq-body); }
.jq-comments .reply a {
	font-size: 11px;
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--jq-orange);
}
.jq-comments .children { margin: 0 0 0 28px; padding-left: 20px; border-left: 1px solid var(--jq-rule); }

/* -------------------------------------------------------- archive, search --- */
.jq-archive-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 24px;
}
.jq-archive-grid .jq-record-card__title { font-size: 26px; }

.jq-result {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 24px;
	padding: 26px 0;
	border-bottom: 1px solid var(--jq-rule);
	align-items: start;
}
.jq-result__media { background: var(--jq-panel); aspect-ratio: 8 / 5; overflow: hidden; }
.jq-result__media img { width: 100%; height: 100%; object-fit: cover; }
.jq-result__body { display: flex; flex-direction: column; gap: 8px; }
.jq-result__type {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-orange);
}
.jq-result__title { font-family: var(--jq-serif); font-size: 28px; font-weight: 600; line-height: 1.2; }
.jq-result__title a { color: var(--jq-ink); }
.jq-result__title a:hover { color: var(--jq-orange); }
.jq-result__excerpt { margin: 0; font-size: 15px; line-height: 1.65; color: var(--jq-mid); }
.jq-result mark { background: rgba(10, 186, 181, 0.2); color: inherit; }

.jq-search-head { display: flex; flex-direction: column; gap: 20px; }
.jq-search-form { display: flex; max-width: 560px; }
.jq-search-form input[type="search"] {
	flex-grow: 1;
	height: var(--jq-btn-height);
	border: 1px solid var(--jq-ink);
	border-right: 0;
	padding: 0 16px;
	font-family: var(--jq-sans);
	font-size: 16px;
	background: #fff;
	border-radius: 0;
	appearance: none;
}
.jq-search-form button {
	height: var(--jq-btn-height);
	padding: 0 28px;
	background: var(--jq-orange);
	color: #fff;
	border: 0;
	font-size: var(--jq-small);
	font-weight: 600;
	letter-spacing: var(--jq-track-btn);
	text-transform: uppercase;
}
.jq-search-form button:hover { background: var(--jq-ink); }
.jq-empty { padding: 40px 0; }


/* Body blocks sit under the headline inside the same column. */
.jq-post__body { margin-top: 40px; }
.jq-archive-body, .jq-search-body { margin-top: 40px; }

/* --------------------------------------------------------------- read next --- */
.jq-readnext {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	margin-top: 56px;
	padding: 24px;
	background: var(--jq-panel);
	border-top: 3px solid var(--jq-teal);
	color: var(--jq-ink);
}
.jq-readnext:hover { color: var(--jq-ink); }
.jq-readnext:hover .jq-readnext__title { color: var(--jq-orange); }
.jq-readnext__media { display: block; }
.jq-readnext__media .jq-record-card__media { aspect-ratio: 8 / 5; }
.jq-readnext__body { display: flex; flex-direction: column; gap: 8px; }
.jq-readnext__label {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-eyebrow);
	text-transform: uppercase;
	color: var(--jq-orange);
	font-weight: 600;
}
.jq-readnext__title {
	font-family: var(--jq-serif);
	font-size: 30px;
	line-height: 1.15;
	font-weight: 600;
	transition: color 0.2s;
}
.jq-readnext__meta { font-size: var(--jq-small); color: var(--jq-mid); }

/* ------------------------------------------------------- drawn placeholder --- */
/*
 * Used when a record has no featured image. Drawn rather than shipped as a
 * file, so it picks up whatever mark is set in Settings.
 */
.jq-record-card__media--placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 20px;
	background: var(--jq-panel);
	overflow: hidden;
}
.jq-record-card__mark {
	position: absolute;
	right: -14px;
	bottom: -14px;
	height: 76%;
	width: auto;
	opacity: 0.12;
	pointer-events: none;
}
.jq-record-card__num {
	font-family: var(--jq-serif);
	font-size: 34px;
	font-weight: 600;
	color: var(--jq-orange);
	line-height: 1;
	position: relative;
	z-index: 1;
}
.jq-record-card__stage {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------- pagination --- */
.jq-pagination { margin-top: 48px; }
.jq-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	margin-right: 6px;
	border: 1px solid var(--jq-rule);
	font-size: 14px;
	font-weight: 600;
	color: var(--jq-ink);
}
.jq-pagination .page-numbers:hover { border-color: var(--jq-ink); }
.jq-pagination .page-numbers.current {
	background: var(--jq-orange);
	border-color: var(--jq-orange);
	color: #fff;
}
.jq-pagination .page-numbers.dots { border-color: transparent; }
.jq-pagination .prev, .jq-pagination .next {
	letter-spacing: var(--jq-track-btn);
	text-transform: uppercase;
	font-size: 12px;
}
.jq-pagination__count {
	display: block;
	margin-top: 14px;
	font-size: var(--jq-small);
	color: var(--jq-mid);
}