/*
	Site-specific styles.

	Kept out of assets/css/main.css on purpose. main.css is the compiled
	Massively theme, generated from assets/sass/; there is no build tooling
	checked in, so anything added there would be both unattributable and
	silently lost the day the sass is recompiled. This file is loaded after
	main.css and only ever adds.

	Colours are taken from the theme palette in assets/sass/libs/_vars.scss
	rather than picked by eye:
	  border    mix(#dcdcdc, #ffffff, 50%) = #eeeeee
	  fg-light  mix(#212931, #ffffff, 50%) = #909498
	  accent    #18bfef
*/

/* Timeline (News & Updates) */

	#news .timeline {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
	}

		/* The rail. Inset top and bottom so it starts and stops at the first
		   and last node rather than floating past them. */
		#news .timeline:before {
			content: '';
			position: absolute;
			left: 5px;
			top: 0.5rem;
			bottom: 0.5rem;
			width: 2px;
			background-color: #eeeeee;
		}

		#news .timeline > li {
			position: relative;
			margin: 0;
			padding: 0 0 2.25rem 2.25rem;
		}

			#news .timeline > li:last-child {
				padding-bottom: 0;
			}

			/* 12px node centred on the 2px rail: the node spans 0-12 with its
			   centre at 6, the rail spans 5-7 with the same centre. */
			#news .timeline > li:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0.4rem;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: #ffffff;
				border: solid 2px #18bfef;
				box-sizing: border-box;
			}

			/* Newest entry is filled, so the eye lands on it first. */
			#news .timeline > li:first-child:before {
				background-color: #18bfef;
			}

			/* Overrides header > .date from main.css, which is set for the
			   centred post headers and is too loose in a dense list. */
			#news .timeline .date {
				display: block;
				font-family: "Source Sans Pro", Helvetica, sans-serif;
				font-weight: 900;
				font-size: 0.7rem;
				letter-spacing: 0.075em;
				text-transform: uppercase;
				color: #909498;
				margin: 0 0 0.35rem 0;
			}

			#news .timeline > li p {
				margin: 0;
			}

	@media screen and (max-width: 736px) {

		#news .timeline > li {
			padding: 0 0 1.75rem 1.75rem;
		}

	}

/* Publications page: keep the Writing heading attached to its post grid */

	/* #main > * in main.css gives every direct child its own padding and a
	   top border, which would otherwise draw a rule between the "Writing"
	   heading and the posts it introduces, making the heading look orphaned
	   in a box of its own. */
	#main > #writing {
		padding-bottom: 0;
	}

	#main > #writing + .posts {
		border-top: 0;
		padding-top: 0;
	}

	/* ul.actions carries no top margin, so the button collided with the last
	   timeline entry, which has its bottom padding stripped. */
	#news .timeline + .actions {
		margin-top: 2rem;
	}

	/* Entry headline. Deliberately NOT the theme's h3 treatment: every
	   heading in main.css is uppercase Source Sans with wide tracking, which
	   beside an already-uppercase date would read as two labels rather than
	   a label and a headline. Body serif at weight 700 against the body's
	   weight 300 carries the emphasis instead. */
	#news .timeline h3 {
		font-family: "Merriweather", Georgia, serif;
		font-weight: 700;
		font-size: 1rem;
		line-height: 1.6;
		letter-spacing: 0;
		text-transform: none;
		color: #212931;
		margin: 0 0 0.25rem 0;
	}