/* ==========================================================================
   custom.css — site-specific overrides.

   Keep ALL local styling changes in this file and never edit main.css.
   main.css is the unmodified Hyperbolic stylesheet; leaving it pristine means
   a future theme update can be dropped in without hunting for local edits.

   This file loads after main.css (see _includes/head.html), so anything here
   wins on equal specificity.

   The aim is to stay as close to the stock theme as possible. There is
   currently one override, explained below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Spotlight images: rectangular, uncropped.

   Hyperbolic masks spotlight images into circles:

       .spotlights section .image     { border-radius: 100%; ... }
       .spotlights section .image img { border-radius: 100%; ... }

   A circular mask crops the left and right edges off a landscape image. The
   work images here are 1440x900 screenshots and logo artwork, where those
   edges carry the content, so the mask is undone and each image is shown
   whole at its natural aspect ratio.

   The theme's drop shadow on .image is deliberately NOT overridden, so the
   images keep it.

   Corner rounding and shadow are set in the shared "Pictures" rule at the
   end of this file.
   -------------------------------------------------------------------------- */

.spotlights section .image img {
		/* Natural proportions: no forced 1:1 box and no cropping. The theme
		   already sets width:100%, so height follows the aspect ratio. */
		height: auto;
	}

/* --------------------------------------------------------------------------
   Spotlight spacing.

   The theme sets `margin-top: -3rem` on each spotlight so adjacent circles
   interlock slightly. That is tuned for the demo's one-line blurbs; the copy
   here runs to a full paragraph per item, so the same negative margin leaves
   the rows looking cramped against each other.

   Replaced with positive separation. This is a deliberate, minimal departure
   from stock: everything else about the component - the circles, sizing,
   shadow and the alternating left/right rhythm - is untouched.
   -------------------------------------------------------------------------- */

.spotlights section {
	margin-top: 5rem;
}

	/* No leading gap on the first one; it already sits below the section header. */
	.spotlights section:first-child {
		margin-top: 0;
	}

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

	/* Stacked layout: image above copy, so the rows need less separation. */
	.spotlights section {
		margin-top: 4rem;
	}

}

/* --------------------------------------------------------------------------
   Contact form: space the submit button away from the fields.

   Hyperbolic's uniform-gutter grid deliberately strips the bottom margin off
   the last element in each column:

       .row.gtr-uniform > * > :last-child { margin-bottom: 0; }

   That is right for grid cells sitting side by side, but it leaves the
   textarea with no space beneath it, and `ul.actions` carries no top margin
   of its own — so the Send Message button sat flush against the box.

   Scoped to actions inside a form so the banner's button row is unaffected.
   -------------------------------------------------------------------------- */

form ul.actions {
	margin-top: 2.5rem;
}


/* --------------------------------------------------------------------------
   Spotlight images on small screens: use the full content width.

   Once the layout stacks (below 980px) the image sits on its own line, but
   the theme keeps it at a fixed 20rem and then SHRINKS it to 15rem below
   736px. On a phone that left it at roughly two-thirds of the column with
   dead space either side, which wastes the width where it is scarcest.

   These rules let the image fill the column instead. They override the
   theme's 736px rule as well: custom.css loads after main.css, and at equal
   specificity the later stylesheet wins regardless of media query.
   -------------------------------------------------------------------------- */

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

	.spotlights section .image,
	.spotlights section:nth-child(2n) .image {
		width: 100%;
		max-width: 100%;
	}

}

/* --------------------------------------------------------------------------
   "Selected work" section header: raise it, and give the divider room.

   The theme puts 8rem of padding above the section header but leaves only
   35px between the divider underneath it and the first spotlight — so the
   heading sat low in its space while the divider crowded the content below.

   Pulls the top padding in and opens up the gap beneath, so the header block
   sits higher and reads as belonging to the section rather than to the
   first item in it. Scoped to this section by id so the contact section and
   the Zoe page keep the theme's stock spacing.
   -------------------------------------------------------------------------- */

#first {
	padding-top: 5rem;
}

	/* NOTE: this margin does not simply add to the existing gap. The header
	   already sat 35px clear of the first spotlight, and adjacent vertical
	   margins collapse to the larger of the two — so the resulting gap is
	   this value, not this value plus 35px. Measured at 72px. */
	#first > .inner > header.major.special {
		margin-bottom: 4.5rem;
	}

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

	#first {
		padding-top: 3.5rem;
	}

		/* Vertical space is scarce on a phone, and the stacked layout already
		   separates the header from the first image. The desktop gap would
		   just push content below the fold. */
		#first > .inner > header.major.special {
			margin-bottom: 2.5rem;
		}

}

/* --------------------------------------------------------------------------
   Writing: essay pages and the /writing/all/ index.
   -------------------------------------------------------------------------- */

/* Layout: the same width as the Zoe and Zephy page, left-aligned, with
   pictures beside the text.

   The container is the theme's standard content width (75rem, as on the
   Zoe page). Within it, text is held to a 42rem column on the left: long
   lines are hard to read, because the eye loses its place moving from the
   end of one line to the start of the next, and ~80 characters is about the
   comfortable limit. Pictures use the space to the right of
   that column on wide screens — see further down. */
.essay-body > *,
.essay-index .essay-entry,
.essay-index .essay-feed {
	max-width: 42rem;
}

	/* Contain floated figures, so the bottom navigation never rides up beside
	   a picture that is taller than the text next to it. */
	.essay-body::after {
		content: "";
		display: block;
		clear: both;
	}

/* Titles are links (to the essay's own page) but should read as headings,
   not as links: no dotted underline, same colour as an unlinked heading. */
.essay header.major h1 a,
.essay-index .essay-entry h2 a {
	color: inherit;
	border-bottom: 0;
}

	.essay-index .essay-entry h2 a:hover {
		opacity: 0.75;
	}

/* Publication date: secondary to the title.

   Specificity matters here. The theme styles every paragraph in a section
   header with `header.major p { margin: 0 0 6rem 0; }`, which outranks a plain
   `.essay-date` selector — an earlier version of this rule lost silently and
   left a 96px gap under the date. The selector below is deliberately more
   specific than the theme's. */
.essay header.major p.essay-date,
.essay-index p.essay-date {
	font-size: 0.9em;
	opacity: 0.7;
}

	/* Gap between the date and the first paragraph of the essay. */
	.essay header.major p.essay-date {
		margin-bottom: 3rem;
	}

	.essay-index p.essay-date {
		margin-bottom: 0.5rem;
	}

/* Lift the heading, matching the homepage's "Selected work" section: the
   theme's 8rem of top padding put the title a long way down the screen, and
   on an essay that pushes the start of the text below the fold. */
.wrapper.essay,
.wrapper.essay-index {
	padding-top: 5rem;
}

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

	.wrapper.essay,
	.wrapper.essay-index {
		padding-top: 3.5rem;
	}

}

/* Index entries: spacing between essays. */
.essay-index .essay-entry {
	margin-bottom: 3rem;
}

	.essay-index .essay-entry h2 {
		margin-bottom: 0.25rem;
	}

/* Pictures in an essay.

   Written as plain Markdown, with no HTML or classes in the essay itself:

       ![Description of the picture](/images/writing/slug/picture.jpg)

   or, to let readers click through to the full-size file:

       [![Description](/images/.../picture.jpg)](/images/.../picture.jpg)

   Any paragraph containing a picture becomes a picture block. Several
   pictures in one paragraph (on one line, separated by a space) sit side
   by side. Pictures are never enlarged beyond their own size, so a small
   image stays small rather than turning to blur.

   Placement: at 1281px and wider the block floats into the space to the
   right of the text column, level with the paragraph that FOLLOWS it in the
   file — so put a picture just before the text it belongs beside. Narrower
   than that, it stays in the text flow where it was written; on phones,
   side-by-side pictures stack.

   Uses :has(), supported by every current browser. An older browser just
   shows the pictures inline in the text, which is a sensible fallback. */
.essay-body p:has(img) {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

	.essay-body p:has(img) > * {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
	}

	.essay-body p:has(img) img {
		display: block;
		max-width: 100%;
		height: auto;
		/* Shadow and rounded corners come from the shared picture rule at the
		   end of this file. */
	}

	/* Pictures that link to their full-size file are not text links: no
	   dotted underline. */
	.essay-body p:has(img) a {
		border-bottom: 0;
	}

@media screen and (min-width: 1281px) {

	.essay-body p:has(img) {
		float: right;
		clear: right;
		/* Everything to the right of the 42rem text column, less a 3rem gap. */
		width: calc(100% - 45rem);
		max-width: none;
		margin: 0.35rem 0 2rem 3rem;
	}

}

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

	.essay-body p:has(img) {
		flex-direction: column;
	}

}

/* --------------------------------------------------------------------------
   Body text: weight and line spacing, site-wide.

   The theme sets body text in IBM Plex Sans at weight 200 (ExtraLight) with
   a line height of 2 — double spacing. That suits the theme's large thin
   headings, but for paragraphs it reads as washed-out grey, and the lines
   drift apart so the eye struggles to track from one to the next.

   Paragraph text moves to 400 (Regular) at 1.7. Headings keep the theme's
   thin 200 weight, so the look of the site is unchanged; only running text
   is affected.

   Scoped to paragraphs, blockquotes and list items inside content sections.
   Setting it on `body` would also have reached the nav and buttons, and a
   line-height on every `ul` would change the height of the nav bar.

   Bold: the theme's bold is 400 — the same as the new body weight, which
   would make bold text invisible. In content it moves to 600, loaded alongside the
   theme's fonts in _includes/head.html (the theme only loads 200 and 400).
   -------------------------------------------------------------------------- */

p,
blockquote,
.wrapper li {
	font-weight: 400;
	line-height: 1.7;
}

/* Scoped to content sections: the nav-bar logo is also marked up as <strong>,
   and should keep the theme's weight rather than pick up this change. */
.wrapper strong,
.wrapper b {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Headings inside running text: more space above than below.

   With the theme's spacing, a heading in the middle of an essay had 2rem
   above it (the previous paragraph's margin) and 1.5rem below — nearly
   equal, so it floated between two sections rather than reading as the
   start of the one below it.

   Applies to any heading that directly follows text, anywhere on the site.
   The other pages open each section with its own header block, so nothing
   there matches; in practice this affects essays, and any future page
   written as continuous text.
   -------------------------------------------------------------------------- */

:is(p, ul, ol, blockquote) + :is(h2, h3, h4) {
	/* Vertical margins between siblings collapse to the larger of the two,
	   so this REPLACES the paragraph's 2rem rather than adding to it. */
	margin-top: 4rem;
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Pictures: one look for the whole site.

   The same drop shadow and corner rounding for the homepage "Selected work"
   pictures and every picture in an essay. The shadow is the theme's own
   picture shadow, taken from the homepage spotlights, so both now read as
   the same kind of object. Change the values here and both update.

   Deliberately NOT applied to the Zoe and Zephy page: its pictures are
   cut-out illustrations and a book mock-up that already has a shadow drawn
   in, and a box shadow would outline their transparent edges.
   -------------------------------------------------------------------------- */

:root {
	--picture-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.25);
	--picture-radius: 0.5rem;
}

.spotlights section .image,
.essay-body p:has(img) img {
	box-shadow: var(--picture-shadow);
	border-radius: var(--picture-radius);
}

	/* The spotlight container clips its image, so the image's own corners
	   must match the container's. */
	.spotlights section .image img {
		border-radius: var(--picture-radius);
	}