/* Ahoi Timeline & Publications — minute-track rail, lume-plot markers.
   Neutrals derive from currentColor, so both blocks follow whatever
   text color the active mode (light or dark) sets. Only the
   terracotta accent is fixed. Inner classes are ahoi-prefixed so no
   theme rule reaches inside. */

.wp-block-hron-timeline,
.wp-block-hron-publication-list {
	/* Fallbacks first for browsers without color-mix */
	--tl-tick: currentColor;
	--tl-tick-strong: currentColor;
	--tl-edge: currentColor;

	--tl-tick: color-mix( in srgb, currentColor 40%, transparent );
	--tl-tick-strong: color-mix( in srgb, currentColor 62%, transparent );
	--tl-edge: color-mix( in srgb, currentColor 85%, transparent );

	--tl-terracotta: #c4643f;

	/* Spacing knobs. Raise --tl-entry-gap for a more open dial. */
	--tl-entry-gap: 2.5rem;
	--tl-marker-offset: 10px;
	--tl-year-offset: 4px;

	--tl-year-col: 108px;
	--tl-marker-col: 48px;
	--tl-gap: 24px;
	--tl-rail-x: calc( var( --tl-year-col ) + var( --tl-gap ) );

	/* Break out of any multi-column or float context the theme's
	   section wrapper may impose. This is the reason for the
	   !important flags: the block must own its own layout. */
	column-span: all;
	-webkit-column-span: all;
	columns: auto !important;
	column-count: auto !important;
	column-width: auto !important;
	float: none !important;
	clear: both;
	width: 100%;
	max-width: 100%;

	position: relative;
	display: flex !important;
	flex-direction: column !important;
	gap: var( --tl-entry-gap );
	padding: 6px 0;
	box-sizing: border-box;
}

/* Publications sit a little denser than the resume timeline. */
.wp-block-hron-publication-list {
	--tl-entry-gap: 2.2rem;
}

/* The minute track: two layered repeating gradients.
   Layer 1 = fine 1px ticks every 9px (minutes).
   Layer 2 = heavier 2px strokes every 45px (every fifth tick). */
.wp-block-hron-timeline::before,
.wp-block-hron-publication-list::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: var( --tl-rail-x );
	width: 13px;
	background-image:
		repeating-linear-gradient( to bottom, var( --tl-tick ) 0 1px, transparent 1px 9px ),
		repeating-linear-gradient( to bottom, var( --tl-tick-strong ) 0 2px, transparent 2px 45px );
	background-size: 7px 100%, 13px 100%;
	background-repeat: no-repeat;
	border: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Shared entry grid
   ------------------------------------------------------------------ */

.wp-block-hron-timeline-entry,
.wp-block-hron-publication {
	display: grid !important;
	grid-template-columns: var( --tl-year-col ) var( --tl-marker-col ) 1fr !important;
	column-gap: var( --tl-gap );
	align-items: start;
	columns: auto !important;
	column-count: auto !important;
	float: none !important;
	width: auto !important;
	max-width: none;
	box-sizing: border-box;
}

/* Nothing inside the blocks inherits a column flow or a float. */
.wp-block-hron-timeline-entry > *,
.wp-block-hron-timeline-entry .ahoi-body > *,
.wp-block-hron-publication > *,
.wp-block-hron-publication .ahoi-body > * {
	columns: auto !important;
	column-count: auto !important;
	float: none !important;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Markers are the applied lume plots: flat horizontal rectangles,
   sharp corners, sitting inward of the track like indices on the dial. */
.wp-block-hron-timeline-entry .ahoi-marker,
.wp-block-hron-publication .ahoi-marker {
	grid-column: 2;
	width: 22px;
	height: 8px;
	margin-top: var( --tl-marker-offset );
	margin-left: 21px;
	border: 1.5px solid var( --tl-edge );
	background: transparent;
	border-radius: 0;
	box-sizing: border-box;
}

/* Resume: terracotta = the current position. */
.wp-block-hron-timeline-entry .ahoi-marker--current {
	background: var( --tl-terracotta );
	border-color: var( --tl-terracotta );
}

/* Publications: solid ink = published, peer-reviewed.
   Hollow = in progress or a talk. */
.wp-block-hron-publication .ahoi-marker--solid {
	background: currentColor;
	border-color: currentColor;
}

/* The first child of the body sets the entry's top edge, so the
   marker lines up with the heading rather than floating above it. */
.wp-block-hron-timeline-entry .ahoi-body > *:first-child,
.wp-block-hron-publication .ahoi-body > *:first-child {
	margin-top: 0 !important;
}

.wp-block-hron-timeline-entry .ahoi-body,
.wp-block-hron-publication .ahoi-body {
	grid-column: 3;
	min-width: 0;
}

/* ------------------------------------------------------------------
   Resume timeline entry
   ------------------------------------------------------------------ */

.wp-block-hron-timeline-entry .ahoi-year {
	grid-column: 1;
	text-align: right;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.62;
	padding-top: var( --tl-year-offset );
	margin: 0 !important;
	line-height: 1.3;
}

.wp-block-hron-timeline-entry .ahoi-title {
	margin: 0 0 0.3rem !important;
	padding: 0;
	font-size: 1.45rem;
	line-height: 1.2;
}

.wp-block-hron-timeline-entry .ahoi-org {
	font-style: italic;
	opacity: 0.72;
	margin: 0 0 0.4rem !important;
	padding: 0;
	line-height: 1.45;
}

.wp-block-hron-timeline-entry .ahoi-detail {
	opacity: 0.85;
	margin: 0 !important;
	padding: 0;
	font-size: 0.97rem;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Publication entry. The year sits in a small outlined box:
   the Ahoi's date window.
   ------------------------------------------------------------------ */

.wp-block-hron-publication .ahoi-pub-year {
	grid-column: 1;
	justify-self: end;
	margin: 0 !important;
	margin-top: 1px !important;
	padding: 1px 8px 2px;
	border: 1.5px solid var( --tl-edge );
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	opacity: 0.85;
}

.wp-block-hron-publication .ahoi-pub-title {
	margin: 0 0 0.25rem !important;
	padding: 0;
	font-size: 1.15rem;
	line-height: 1.35;
	font-weight: 600;
}

.wp-block-hron-publication .ahoi-pub-authors {
	margin: 0 0 0.15rem !important;
	padding: 0;
	font-size: 0.95rem;
	opacity: 0.8;
	line-height: 1.45;
}

.wp-block-hron-publication .ahoi-pub-venue {
	font-style: italic;
	margin: 0 0 0.3rem !important;
	padding: 0;
	font-size: 0.95rem;
	opacity: 0.72;
	line-height: 1.45;
}

.wp-block-hron-publication .ahoi-pub-note {
	margin: 0 !important;
	padding: 0;
	font-size: 0.93rem;
	opacity: 0.85;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */

@media ( max-width: 620px ) {
	.wp-block-hron-timeline,
	.wp-block-hron-publication-list {
		--tl-year-col: 62px;
		--tl-marker-col: 34px;
		--tl-gap: 14px;
		--tl-entry-gap: 2rem;
		--tl-marker-offset: 9px;
	}
	.wp-block-hron-timeline::before,
	.wp-block-hron-publication-list::before {
		width: 10px;
		background-size: 5px 100%, 10px 100%;
	}
	.wp-block-hron-timeline-entry .ahoi-marker,
	.wp-block-hron-publication .ahoi-marker {
		width: 18px;
		height: 7px;
		margin-left: 15px;
	}
	.wp-block-hron-timeline-entry .ahoi-year {
		font-size: 0.9rem;
	}
	.wp-block-hron-publication .ahoi-pub-year {
		font-size: 0.85rem;
		padding: 1px 5px 2px;
	}
}

/* ==================================================================
   Page furniture for the publications page.
   Everything below replaces repeated inline styles. All colour
   derives from currentColor and the terracotta accent, so both
   light and dark modes work without a second declaration.
   ================================================================== */

.hron-eyebrow,
.wp-block-hron-eyebrow {
	--hron-edge: currentColor;
	--hron-edge: color-mix( in srgb, currentColor 85%, transparent );

	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.62;
	margin: 0 0 1.25em !important;
	line-height: 1.5;
}

/* The Selected badge. Terracotta stays an accent, never a fill. */
.hron-selected {
	display: inline-block;
	color: #c4643f;
	border: 1.5px solid #c4643f;
	background: transparent;
	padding: 0.1em 0.55em;
	margin-right: 0.6em;
	border-radius: 0;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* Inline highlight. Replaces the repeated rgba mark styling. */
.hron-mark,
mark.hron-mark {
	background-color: rgba( 196, 100, 63, 0.18 );
	color: inherit;
	padding: 0.05em 0.25em;
}

/* ------------------------------------------------------------------
   At a glance. Numbers sit in date windows, as on the dial.
   ------------------------------------------------------------------ */

.hron-glance {
	--hron-edge: currentColor;
	--hron-edge: color-mix( in srgb, currentColor 30%, transparent );

	border: 1px solid var( --hron-edge );
	border-radius: 0;
	padding: 2em 2.5em;
	margin: 2em 0 3em;
	background: transparent;
	color: inherit;
}

.hron-glance__header {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
	margin: 0 0 1.5em !important;
}

.hron-glance__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 1.75em;
}

.hron-glance__item {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}

.hron-glance__item:hover {
	opacity: 0.7;
}

.hron-glance__number {
	display: inline-block;
	border: 1.5px solid var( --hron-edge );
	padding: 0.05em 0.4em 0.1em;
	font-size: 2.4rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
	margin: 0 !important;
}

.hron-glance__label {
	font-size: 1.05rem;
	opacity: 0.75;
	margin: 0.55em 0 0 !important;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
   Tick rule. A short fragment of the minute track, for use as a
   section divider so the pages share a spine.
   ------------------------------------------------------------------ */

.hron-tick-rule {
	--hron-tick: currentColor;
	--hron-tick: color-mix( in srgb, currentColor 45%, transparent );

	height: 9px;
	margin: 2.5em 0;
	border: 0;
	background-image: repeating-linear-gradient( to right, var( --hron-tick ) 0 1px, transparent 1px 9px );
	background-repeat: no-repeat;
	background-size: 100% 9px;
}

@media ( max-width: 620px ) {
	.hron-glance {
		padding: 1.5em 1.25em;
	}
	.hron-glance__number {
		font-size: 2rem;
	}
}

/* ------------------------------------------------------------------
   Links inside headings.
   A theme's link styling normally overrides the heading face, so a
   linked paper title renders sans-serif while an unlinked one stays
   serif. Titles inherit the heading's typography; the link keeps a
   thin rule underneath as its only affordance.
   ------------------------------------------------------------------ */

.wp-block-hron-publication .ahoi-pub-title a,
.wp-block-hron-timeline-entry .ahoi-title a {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	letter-spacing: inherit;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none;
	border-bottom: 1px solid color-mix( in srgb, currentColor 35%, transparent );
	padding-bottom: 0.05em;
	transition: border-color 0.15s ease;
}

.wp-block-hron-publication .ahoi-pub-title a:hover,
.wp-block-hron-timeline-entry .ahoi-title a:hover {
	border-bottom-color: #c4643f;
}

/* Venue and status lines carry the links that do look like links. */
.wp-block-hron-publication .ahoi-pub-venue a {
	color: inherit;
}

/* ==================================================================
   The record at a glance. A dense index built from the page's own
   sections, so it never falls out of sync with the writing below.
   Empty until the script fills it, so it degrades to nothing.
   ================================================================== */

.hron-index {
	--hron-edge: currentColor;
	--hron-edge: color-mix( in srgb, currentColor 28%, transparent );

	margin: 2em 0 3.5em;
}

.hron-index__header {
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.55;
	margin: 0 0 1em !important;
}

.hron-index__list {
	border-top: 1px solid var( --hron-edge );
}

.hron-index__row {
	display: grid;
	grid-template-columns: 62px 28px 1fr;
	align-items: baseline;
	column-gap: 14px;
	padding: 0.6em 0;
	border-bottom: 1px solid var( --hron-edge );
	text-decoration: none !important;
	color: inherit !important;
	transition: opacity 0.12s ease;
}

.hron-index__row:hover {
	opacity: 0.65;
}

.hron-index__year {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	border: 1px solid var( --hron-edge );
	padding: 0 4px 1px;
	opacity: 0.8;
}

/* The lume plot again: solid for work on the record, hollow for
   work in progress. Same encoding as the timeline. */
.hron-index__plot {
	width: 16px;
	height: 6px;
	align-self: center;
	border: 1.5px solid var( --hron-edge );
	background: transparent;
	box-sizing: border-box;
}

.hron-index__plot.is-solid {
	background: currentColor;
	border-color: currentColor;
}

.hron-index__body {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.7em;
	row-gap: 0.15em;
}

.hron-index__title {
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.35;
}

.hron-index__row.is-selected .hron-index__title {
	color: #c4643f;
}

.hron-index__meta {
	font-size: 0.86rem;
	opacity: 0.6;
	line-height: 1.4;
}

@media ( max-width: 620px ) {
	.hron-index__row {
		grid-template-columns: 50px 20px 1fr;
		column-gap: 10px;
	}
	.hron-index__body {
		display: block;
	}
	.hron-index__meta {
		display: block;
		margin-top: 0.1em;
	}
}

/* ==================================================================
   Smooth in-page navigation.
   The scroll-margin keeps the target heading clear of a sticky
   header instead of landing underneath it. Anyone who has asked
   their system for reduced motion still gets an instant jump.
   ================================================================== */

html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

:target,
.hron-scroll-target {
	scroll-margin-top: var( --hron-scroll-offset, 96px );
}

.hron-index__row:focus-visible {
	outline: 2px solid #c4643f;
	outline-offset: 2px;
}

/* ==================================================================
   Scannable entry body: a one-line claim, then the narrative folded
   away. The lead carries the finding; the accordion carries the voice.
   ================================================================== */

.hron-lead {
	font-size: 1.1rem;
	line-height: 1.5;
	margin: 0 0 0.9em !important;
}

.hron-links {
	font-size: 0.92rem;
	margin: 0 0 1.1em !important;
	opacity: 0.85;
}

/* Accordions. Same face for the narrative and the citation. */
.hron-fold {
	--hron-edge: currentColor;
	--hron-edge: color-mix( in srgb, currentColor 25%, transparent );

	border-top: 1px solid var( --hron-edge );
	margin: 0;
	padding: 0;
}

.hron-fold + .hron-fold {
	border-top: 0;
}

.hron-fold > summary {
	cursor: pointer;
	list-style: none;
	padding: 0.55em 0;
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	opacity: 0.55;
	transition: opacity 0.12s ease;
}

.hron-fold > summary:hover {
	opacity: 0.85;
}

.hron-fold > summary::-webkit-details-marker {
	display: none;
}

.hron-fold > summary::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	font-weight: 400;
	opacity: 0.8;
}

.hron-fold[open] > summary::before {
	content: "–";
}

.hron-fold > summary:focus-visible {
	outline: 2px solid #c4643f;
	outline-offset: 2px;
}

.hron-fold > *:not( summary ) {
	margin: 0 0 0.9em;
	font-size: 0.97rem;
	line-height: 1.6;
}

.hron-fold > *:last-child {
	margin-bottom: 1.1em;
}

/* ------------------------------------------------------------------
   Index colour correction and group headers.
   The rows are anchors, so a theme's link colour would otherwise
   paint the whole index in the accent. Text stays text; terracotta
   marks the selected work only.
   ------------------------------------------------------------------ */

.hron-index .hron-index__row,
.hron-index .hron-index__row:link,
.hron-index .hron-index__row:visited,
.hron-index .hron-index__row:hover,
.hron-index .hron-index__row *,
.hron-index .hron-index__row:hover * {
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border-bottom-color: transparent;
}

.hron-index .hron-index__title {
	color: inherit !important;
}

.hron-index .hron-index__meta {
	opacity: 0.55;
}

/* Terracotta earns its place on one thing only. */
.hron-index .hron-index__row.is-selected .hron-index__title {
	color: #c4643f !important;
}

.hron-index__group {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	opacity: 0.45;
	margin: 1.6em 0 0 !important;
	padding: 0 0 0.4em;
	border-bottom: 1px solid var( --hron-edge );
}

.hron-index__list > .hron-index__group:first-child {
	margin-top: 0 !important;
}

/* The group header supplies the rule above its first row. */
.hron-index__group + .hron-index__row {
	border-top: 0;
}

.hron-index__list {
	border-top: 0;
}

/* ==================================================================
   The record as the page. Each row is a details element: the summary
   is the scannable line, the panel holds the claim and the story.
   Works with JavaScript off.
   ================================================================== */

.hron-table {
	--hron-edge: currentColor;
	--hron-edge: color-mix( in srgb, currentColor 26%, transparent );

	margin: 1.5em 0 2.5em;
}

.hron-table__group {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	opacity: 0.45;
	margin: 1.8em 0 0 !important;
	padding: 0 0 0.4em;
	border-bottom: 1px solid var( --hron-edge );
}

.hron-table > .hron-table__group:first-child {
	margin-top: 0 !important;
}

.hron-row {
	border-bottom: 1px solid var( --hron-edge );
	margin: 0;
	padding: 0;
}

.hron-row > summary {
	display: grid;
	grid-template-columns: 62px 28px 1fr 20px;
	align-items: baseline;
	column-gap: 14px;
	padding: 0.7em 0;
	cursor: pointer;
	list-style: none;
	transition: opacity 0.12s ease;
}

.hron-row > summary:hover {
	opacity: 0.7;
}

.hron-row > summary::-webkit-details-marker {
	display: none;
}

.hron-row > summary:focus-visible {
	outline: 2px solid #c4643f;
	outline-offset: 2px;
}

/* Year in the date window. */
.hron-row__year {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	border: 1px solid var( --hron-edge );
	padding: 0 4px 1px;
	opacity: 0.8;
}

/* The lume plot: solid for work on the record, hollow for work
   still in motion. Same encoding as the resume timeline. */
.hron-row__plot {
	width: 16px;
	height: 6px;
	align-self: center;
	border: 1.5px solid var( --hron-edge );
	background: transparent;
	box-sizing: border-box;
}

.hron-row__plot--solid {
	background: currentColor;
	border-color: currentColor;
}

.hron-row__body {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.7em;
	row-gap: 0.15em;
}

.hron-row__title {
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.35;
}

.hron-row--selected .hron-row__title {
	color: #c4643f;
}

.hron-row__meta {
	font-size: 0.86rem;
	opacity: 0.55;
	line-height: 1.4;
}

.hron-row__toggle {
	justify-self: end;
	align-self: center;
	font-size: 1rem;
	opacity: 0.4;
	line-height: 1;
}

.hron-row[open] .hron-row__toggle {
	opacity: 0.75;
}

.hron-row__toggle::before {
	content: "+";
}

.hron-row[open] .hron-row__toggle::before {
	content: "–";
}

/* Expanded panel, indented to the title column. */
.hron-row__panel {
	padding: 0 0 1.4em calc( 62px + 28px + 28px );
}

.hron-row__panel .hron-lead {
	font-size: 1.05rem;
	line-height: 1.5;
	margin: 0 0 0.8em !important;
}

.hron-row__panel p {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 0.8em;
}

.hron-row__panel .hron-links {
	margin: 0 0 0.8em !important;
}

.hron-row__cite {
	font-size: 0.86rem !important;
	opacity: 0.6;
	margin: 0 !important;
	padding-top: 0.6em;
	border-top: 1px solid var( --hron-edge );
}

@media ( max-width: 620px ) {
	.hron-row > summary {
		grid-template-columns: 50px 20px 1fr 16px;
		column-gap: 10px;
	}
	.hron-row__body {
		display: block;
	}
	.hron-row__meta {
		display: block;
		margin-top: 0.1em;
	}
	.hron-row__panel {
		padding-left: 0;
	}
}

/* ==================================================================
   Corrections: single-line years, no toggle column, and a reset for
   themes that treat details elements as cards or uppercase summaries.
   ================================================================== */

/* Card styling is left to the theme; the rail is layered behind it. */

.hron-row > summary {
	grid-template-columns: 76px 28px 1fr;
	text-transform: none !important;
}

.hron-row > summary *,
.hron-table__group {
	text-transform: none;
}

.hron-table__group {
	text-transform: uppercase;
}

/* Years never wrap. The window sizes to the digits. */
.hron-row__year {
	white-space: nowrap;
	min-width: 0;
	justify-self: start;
	padding: 0 6px 1px;
	letter-spacing: 0;
}

/* The whole row is the control, so the plus was saying what the
   cursor already says. */
.hron-row__toggle {
	display: none !important;
}

.hron-row__panel {
	padding-left: calc( 76px + 28px + 28px );
}

@media ( max-width: 620px ) {
	.hron-row > summary {
		grid-template-columns: 62px 20px 1fr;
	}
	.hron-row__panel {
		padding-left: 0;
	}
}

/* ------------------------------------------------------------------
   Editor view for record rows: a labelled form, not a details
   element, so every field stays reachable while editing.
   ------------------------------------------------------------------ */

.hron-row-edit {
	--hron-edge: currentColor;
	--hron-edge: color-mix( in srgb, currentColor 25%, transparent );

	border: 1px solid var( --hron-edge );
	padding: 0.9em 1em;
	margin: 0 0 0.6em;
}

.hron-row-edit.is-selected {
	border-left: 3px solid #c4643f;
}

.hron-row-edit__field {
	margin-bottom: 0.55em;
}

.hron-row-edit__label {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	opacity: 0.45;
	margin-bottom: 0.15em;
}

.hron-row-edit__head {
	display: grid;
	grid-template-columns: 90px 1fr;
	column-gap: 14px;
	margin-bottom: 0.4em;
}

.hron-row-edit__title {
	font-weight: 600;
	font-size: 1rem;
}

.hron-row-edit__meta,
.hron-row-edit__year {
	font-size: 0.88rem;
	opacity: 0.75;
}

.hron-row-edit .hron-row__cite {
	opacity: 0.55;
}

/* ==================================================================
   Publications on the rail.
   The record now uses the resume timeline's vocabulary: a minute
   track down the page, years in the left column, lume plots on the
   track, serif titles, air between entries. Rules and boxes go.
   ================================================================== */

.hron-table {
	--tl-tick: currentColor;
	--tl-tick-strong: currentColor;
	--tl-edge: currentColor;
	--tl-tick: color-mix( in srgb, currentColor 40%, transparent );
	--tl-tick-strong: color-mix( in srgb, currentColor 62%, transparent );
	--tl-edge: color-mix( in srgb, currentColor 85%, transparent );

	--tl-terracotta: #c4643f;
	--tl-year-col: 108px;
	--tl-marker-col: 48px;
	--tl-gap: 24px;
	--tl-entry-gap: 2.4rem;
	--tl-marker-offset: 10px;
	--tl-rail-x: calc( var( --tl-year-col ) + var( --tl-gap ) );

	column-span: all;
	columns: auto !important;
	column-count: auto !important;
	float: none !important;
	clear: both;
	width: 100%;

	position: relative;
	display: flex !important;
	flex-direction: column !important;
	gap: var( --tl-entry-gap );
	padding: 6px 0;
	margin: 1.5em 0 2.5em;
	box-sizing: border-box;
}

.hron-table::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: var( --tl-rail-x );
	width: 13px;
	background-image:
		repeating-linear-gradient( to bottom, var( --tl-tick ) 0 1px, transparent 1px 9px ),
		repeating-linear-gradient( to bottom, var( --tl-tick-strong ) 0 2px, transparent 2px 45px );
	background-size: 7px 100%, 13px 100%;
	background-repeat: no-repeat;
	border: 0;
	pointer-events: none;
}

/* Group labels sit in the year column, out of the reading path. */
.hron-table__group {
	border: 0 !important;
	padding: 0 !important;
	margin: 0.8em 0 -1.2em !important;
	width: var( --tl-year-col );
	text-align: right;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	opacity: 0.4;
}

.hron-table > .hron-table__group:first-child {
	margin-top: 0 !important;
}

.hron-row {
	margin: 0;
}

.hron-row > summary {
	display: grid;
	grid-template-columns: var( --tl-year-col ) var( --tl-marker-col ) 1fr;
	column-gap: var( --tl-gap );
	align-items: start;
	padding: 0;
	cursor: pointer;
	list-style: none;
}

/* Year: plain, right-aligned, tabular. No window here; the date
   window belongs to a single date, not a column of them. */
.hron-row__year {
	grid-column: 1;
	border: 0 !important;
	padding: 4px 0 0 !important;
	margin: 0 !important;
	text-align: right;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.62;
	line-height: 1.3;
	white-space: nowrap;
}

.hron-row__plot {
	grid-column: 2;
	width: 22px;
	height: 8px;
	align-self: start;
	margin-top: var( --tl-marker-offset );
	margin-left: 21px;
	border: 1.5px solid var( --tl-edge );
	background: transparent;
	border-radius: 0;
	box-sizing: border-box;
}

.hron-row__plot--solid {
	background: currentColor;
	border-color: currentColor;
}

.hron-row__body {
	grid-column: 3;
	display: block;
	min-width: 0;
}

/* Title as a heading, so it takes the serif face the resume uses. */
.hron-row__title {
	display: block;
	margin: 0 0 0.3rem !important;
	padding: 0;
	font-size: 1.28rem;
	line-height: 1.25;
	font-weight: 600;
	text-transform: none;
}

.hron-row--selected .hron-row__title {
	color: #c4643f;
}

.hron-row__meta {
	display: block;
	font-style: italic;
	font-size: 0.97rem;
	opacity: 0.72;
	line-height: 1.45;
	margin: 0;
	text-transform: none;
}

/* The panel opens under the body column, aligned to the title. */
.hron-row__panel {
	padding: 0.9em 0 0 calc( var( --tl-year-col ) + var( --tl-gap ) + var( --tl-marker-col ) + var( --tl-gap ) );
}

.hron-row__panel .hron-lead {
	font-size: 1.02rem;
	line-height: 1.55;
	margin: 0 0 0.8em !important;
}

.hron-row__panel .hron-row__story,
.hron-row__panel p {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 0.8em;
	opacity: 0.9;
}

.hron-row__panel .hron-row__cite {
	font-size: 0.85rem !important;
	opacity: 0.55;
	margin: 0 !important;
	padding-top: 0.6em;
	border-top: 1px solid color-mix( in srgb, currentColor 20%, transparent );
}

@media ( max-width: 620px ) {
	.hron-table {
		--tl-year-col: 62px;
		--tl-marker-col: 34px;
		--tl-gap: 14px;
		--tl-entry-gap: 2rem;
	}
	.hron-table::before {
		width: 10px;
		background-size: 5px 100%, 10px 100%;
	}
	.hron-row__plot {
		width: 18px;
		height: 7px;
		margin-left: 15px;
	}
	.hron-row__year {
		font-size: 0.9rem;
	}
	.hron-row__title {
		font-size: 1.12rem;
	}
	.hron-row__panel {
		padding-left: 0;
	}
	.hron-table__group {
		width: auto;
		text-align: left;
	}
}

/* ------------------------------------------------------------------
   Kill every disclosure marker.
   Themes draw these three different ways, and any one of them takes
   inline space that shifts the summary out of its grid columns and
   leaves the rail running through the title.
   ------------------------------------------------------------------ */

.hron-row > summary {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.hron-row > summary::marker {
	content: "" !important;
	font-size: 0 !important;
}

.hron-row > summary::-webkit-details-marker {
	display: none !important;
}

.hron-row > summary::before,
.hron-row > summary::after {
	content: none !important;
	display: none !important;
}

/* Highlights sit tight against their neighbours. */
.hron-mark,
mark.hron-mark {
	padding: 0.05em 0.15em;
	margin: 0 -0.05em;
}

/* ==================================================================
   Rail anchoring, take two.
   The track used to hang off the table while each row's box was
   reshaped by the theme, so the two drifted apart. The track now
   rides on the rows themselves: same box, same columns, no drift.
   ================================================================== */

/* Strip whatever the theme puts around a details element. */
.hron-table details,
.hron-table summary,
.hron-row,
.hron-row > summary {
	background: transparent !important;
	background-image: none;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	outline: 0;
}

.hron-row::before,
.hron-row::after {
	content: none !important;
	display: none !important;
}

/* The table stops drawing the track and stops spacing the rows,
   so the track can run unbroken from row to row. */
.hron-table {
	display: block !important;
	gap: 0 !important;
	padding: 0 !important;
}

.hron-table::before {
	display: none !important;
	content: none !important;
}

/* Every direct child carries its own segment of the minute track,
   positioned from its own left edge. */
.hron-table > * {
	position: relative;
	background-image:
		repeating-linear-gradient( to bottom, var( --tl-tick ) 0 1px, transparent 1px 9px ),
		repeating-linear-gradient( to bottom, var( --tl-tick-strong ) 0 2px, transparent 2px 45px ) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-size: 7px 100%, 13px 100% !important;
	background-position:
		calc( var( --tl-year-col ) + var( --tl-gap ) ) 0,
		calc( var( --tl-year-col ) + var( --tl-gap ) ) 0 !important;
}

.hron-row {
	display: block !important;
	padding-top: 1.15rem !important;
	padding-bottom: 1.15rem !important;
}

/* The plot needs an opaque gap so the track reads as interrupted
   by an index rather than running underneath it. */
.hron-row__plot {
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 5px var( --hron-page-bg, transparent );
}

/* Group labels keep the track running while they annotate it. */
.hron-table__group {
	padding-top: 1.6rem !important;
	padding-bottom: 0.2rem !important;
	margin: 0 !important;
	box-sizing: border-box;
}

/* ==================================================================
   Layering: the minute track runs behind the cards.
   The rail is continuous down the whole table, but each card sits on
   top of it, so the ticks read in the gaps between entries and never
   cross a title. Cards need an opaque background for this to work;
   the theme supplies one, and the fallback below covers the case
   where it does not.
   ================================================================== */

.hron-table {
	isolation: isolate;
}

.hron-table::before {
	z-index: 0;
}

.hron-row {
	position: relative;
	z-index: 1;
}

/* If the theme leaves cards transparent, paint them with the page
   background so the track still stops at the card edge. Set
   --hron-card-bg in your theme CSS to override. */
.hron-row {
	background-color: var( --hron-card-bg, Canvas );
}

@supports not ( background-color: Canvas ) {
	.hron-row {
		background-color: var( --hron-card-bg, transparent );
	}
}

/* The group label sits on the rail too, so it needs the same lift. */
.hron-table__group {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------
   Card padding. Text should never touch the card edge, on any side.
   Applied to the row so the summary grid and the expanded panel
   share one inner box.
   ------------------------------------------------------------------ */

.hron-row {
	padding: 1.15em 1.6em 1.25em;
	box-sizing: border-box;
}

.hron-row > summary {
	padding: 0;
}

/* The panel keeps its indent to the title column, and now stops
   short of the right edge like everything else in the card. */
.hron-row__panel {
	padding-right: 0;
	padding-bottom: 0;
}

.hron-row__panel > *:last-child {
	margin-bottom: 0 !important;
}

@media ( max-width: 620px ) {
	.hron-row {
		padding: 1em 1.1em 1.1em;
	}
}

/* ------------------------------------------------------------------
   Years: one line, always legible, and absent when there is none.
   ------------------------------------------------------------------ */

.hron-row__year {
	white-space: nowrap !important;
	overflow: visible;
	word-break: keep-all;
	hyphens: none;
}

.hron-row__year--empty {
	min-height: 0;
}

@media ( max-width: 620px ) {
	.hron-table {
		--tl-year-col: 54px;
		--tl-marker-col: 26px;
		--tl-gap: 12px;
	}
	.hron-row__year {
		font-size: 0.85rem;
		padding-top: 3px !important;
	}
	.hron-row__plot {
		margin-left: 6px;
	}
}

@media ( max-width: 380px ) {
	.hron-table {
		--tl-year-col: 46px;
		--tl-gap: 10px;
	}
	.hron-row__year {
		font-size: 0.8rem;
	}
}

/* ------------------------------------------------------------------
   The card always covers the year.
   The row spans the full width of the table, and the year column is
   never narrower than the digits it holds, so a year can never sit
   outside the card or overhang its padding.
   ------------------------------------------------------------------ */

.hron-row {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.hron-row > summary {
	grid-template-columns:
		minmax( var( --tl-year-col ), max-content )
		var( --tl-marker-col )
		minmax( 0, 1fr );
	max-width: 100%;
}

.hron-row__year {
	max-width: 100%;
	text-overflow: clip;
}

@media ( max-width: 620px ) {
	.hron-table {
		--tl-year-col: max( 46px, 4.5ch );
	}
}

@media ( max-width: 380px ) {
	.hron-table {
		--tl-year-col: max( 42px, 4.5ch );
	}
}

/* ------------------------------------------------------------------
   Mobile rows stack instead of holding columns.
   A fixed year column can always be overflowed by a wide enough
   year on a narrow enough screen. Below the breakpoint the year and
   its plot sit on their own line above the title, so the card is
   guaranteed to contain them whatever the text says.
   ------------------------------------------------------------------ */

@media ( max-width: 620px ) {
	.hron-row > summary {
		display: block !important;
		grid-template-columns: none;
	}

	.hron-row__year {
		display: inline-block;
		width: auto !important;
		max-width: none;
		text-align: left !important;
		padding: 0 !important;
		margin: 0 0.6em 0.35em 0 !important;
		vertical-align: middle;
		font-size: 0.88rem;
		opacity: 0.62;
	}

	.hron-row__year--empty {
		display: none;
	}

	.hron-row__plot {
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 0.35em 0 !important;
	}

	.hron-row__body {
		display: block;
		clear: both;
	}

	.hron-row__title {
		font-size: 1.1rem;
	}

	.hron-row__panel {
		padding-left: 0 !important;
	}

	/* The rail has nothing to align to once rows stack. */
	.hron-table::before {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Panel typography and measure.
   The indent to the title column only earns its keep when the card
   is wide enough to keep a readable line under it. Below that it is
   dropped. Text sets ragged right with hyphenation off, because
   justified type in a narrow measure opens rivers and breaks words.
   ------------------------------------------------------------------ */

.hron-row__panel {
	padding-left: 0;
	padding-top: 1em;
	margin-top: 0.9em;
	border-top: 1px solid color-mix( in srgb, currentColor 14%, transparent );
}

.hron-row__panel,
.hron-row__panel p {
	text-align: left !important;
	hyphens: manual !important;
	-webkit-hyphens: manual !important;
	text-wrap: pretty;
}

.hron-row__panel > * {
	max-width: 68ch;
}

/* Wide cards only: line the panel up under the title. */
@media ( min-width: 1100px ) {
	.hron-row__panel {
		padding-left: calc( var( --tl-year-col ) + var( --tl-gap ) + var( --tl-marker-col ) + var( --tl-gap ) );
	}
}

.hron-row__panel .hron-lead {
	margin-bottom: 0.75em !important;
}

.hron-row__panel .hron-row__story {
	margin-bottom: 0.85em;
}

.hron-row__panel .hron-links {
	margin-bottom: 0.9em !important;
}

.hron-row__panel .hron-row__cite {
	padding-top: 0.7em;
	margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   Group labels run the width of the table.
   Pinned to the year column they had roughly seven characters to
   work with, so a two-word label broke across three hyphenated
   lines. They sit above their group instead, on one line.
   ------------------------------------------------------------------ */

.hron-table__group {
	width: auto !important;
	max-width: none;
	text-align: left !important;
	margin: 1.4em 0 -0.6em !important;
	padding: 0 0 0 0.1em !important;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	opacity: 0.42;
	white-space: nowrap;
	overflow: visible;
	hyphens: none !important;
	-webkit-hyphens: none !important;
	word-break: keep-all;
}

.hron-table > .hron-table__group:first-child {
	margin-top: 0 !important;
}

@media ( max-width: 620px ) {
	.hron-table__group {
		white-space: normal;
		margin: 1.2em 0 -0.4em !important;
	}
}