/*
Theme Name: Osipov Field Notes
Theme URI: https://danosipov.com/
Description: An editorial field-notebook theme for danosipov.com. Warm paper ground, Newsreader for reading and IBM Plex Mono for the apparatus — datestamps, categories, coordinates and kit lists. Built for a blog that is mostly photographs of flora and fauna with a technical archive behind it.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
Author: Dan Osipov
Author URI: https://danosipov.com/
Text Domain: osipov-fieldnotes
Tags: blog, photography, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
	/* Ground */
	--fn-bg:          #fdfdfb;
	--fn-panel:       #faf9f6;
	--fn-stripe:      #f3f2ee;

	/* Ink */
	--fn-ink:         #26241f;
	--fn-body:        #56524b;
	--fn-meta:        #6e6860;
	--fn-muted:       #78736b;

	/* Accent */
	--fn-accent:      #3f6a53;
	--fn-accent-line: #c9ddd1;

	/* Rules */
	--fn-rule:        #eceae4;
	--fn-rule-light:  #f1efea;
	--fn-underline:   #ddd9cf;

	/* Type */
	--fn-serif: Newsreader, Georgia, "Times New Roman", Times, serif;
	--fn-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Measure */
	--fn-wrap:    1180px;
	--fn-gutter:  44px;
	--fn-measure: 660px;

	/* The placeholder hatch used behind every image frame. */
	--fn-hatch: repeating-linear-gradient(135deg, #f3f2ee 0 10px, #faf9f6 10px 20px);
	--fn-hatch-sm: repeating-linear-gradient(135deg, #f3f2ee 0 8px, #faf9f6 8px 16px);
}

/* =========================================================================
   2. Reset & base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fn-bg);
	color: var(--fn-ink);
	font-family: var(--fn-serif);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

a {
	color: var(--fn-ink);
	text-decoration-color: var(--fn-underline);
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	color: var(--fn-accent);
	text-decoration-color: var(--fn-accent);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--fn-accent);
	outline-offset: 2px;
}

img, svg, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
}

figure { margin: 0; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

hr {
	border: 0;
	border-top: 1px solid var(--fn-rule);
	margin: 40px 0;
}

::selection {
	background: var(--fn-accent-line);
	color: var(--fn-ink);
}

/* Screen-reader-only, WordPress's canonical implementation. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--fn-panel);
	clip-path: none;
	color: var(--fn-ink);
	display: block;
	font-family: var(--fn-mono);
	font-size: 12px;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 14px 20px;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
	border: 1px solid var(--fn-rule);
}

.skip-link { position: absolute; }

/* =========================================================================
   3. Repeated primitives
   ========================================================================= */

/* The mono "apparatus" voice: eyebrows, datestamps, captions, counts. */
.fn-mono {
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fn-meta);
	font-weight: 400;
}

.fn-wrap {
	max-width: var(--fn-wrap);
	margin: 0 auto;
	padding-left: var(--fn-gutter);
	padding-right: var(--fn-gutter);
}

/* Section labels above sidebar blocks and index groups. */
.fn-label {
	margin: 0 0 12px;
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fn-meta);
	font-weight: 500;
}

/* Category chip. */
.fn-chip {
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fn-accent);
	border: 1px solid var(--fn-accent-line);
	padding: 3px 8px;
	text-decoration: none;
	display: inline-block;
}

a.fn-chip:hover,
a.fn-chip:focus {
	color: var(--fn-accent);
	border-color: var(--fn-accent);
}

.fn-eyebrow {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.fn-eyebrow time,
.fn-eyebrow .fn-eyebrow__date { color: var(--fn-meta); }

/* The standing "more" link: mono, accent, hairline underline. */
.fn-more {
	align-self: flex-start;
	font-family: var(--fn-mono);
	font-size: 11px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fn-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--fn-accent-line);
	padding-bottom: 3px;
}

.fn-more:hover,
.fn-more:focus { border-bottom-color: var(--fn-accent); }

/* Binomials are set in italic wherever they appear. */
.fn-binomial { font-style: italic; }

/* Every image well shares the hatched placeholder, so a slow or missing
   image still reads as a deliberate frame rather than a hole. */
.fn-frame {
	background: var(--fn-hatch);
	border: 1px solid var(--fn-rule);
	display: flex;
	align-items: flex-end;
	padding: 14px;
	overflow: hidden;
	position: relative;
}

.fn-frame--empty { aspect-ratio: 3 / 2; }

.fn-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fn-frame__note {
	position: relative;
	font-family: var(--fn-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

/* An image that failed to load is removed by navigation.js and the frame falls
   back to the hatch, which is why the hatch is on the frame and not the img.
   In post content the frame is built around the failure, so it needs its own
   block-level sizing. */
.fn-frame--broken { align-items: center; justify-content: center; }

.fn-content .fn-frame--broken {
	display: flex;
	width: 100%;
	margin: 30px 0;
	text-align: center;
}

.fn-content .fn-frame--broken .fn-frame__note { max-width: 40ch; }

/* Inset note panel ("Six frames from this trip are in the ..."). */
.fn-note {
	margin: 44px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--fn-rule);
	background: var(--fn-panel);
}

.fn-note p {
	margin: 0;
	font-size: 17px;
	color: var(--fn-body);
}

/* =========================================================================
   4. Masthead
   ========================================================================= */

.fn-header {
	max-width: var(--fn-wrap);
	margin: 0 auto;
	padding: 28px var(--fn-gutter) 0;
}

.fn-header__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.fn-brand {
	text-decoration: none;
	display: flex;
	align-items: baseline;
	gap: 13px;
	flex-wrap: wrap;
}

.fn-brand__name {
	font-size: 21px;
	letter-spacing: -0.01em;
	color: var(--fn-ink);
}

.fn-brand:hover .fn-brand__name,
.fn-brand:focus .fn-brand__name { color: var(--fn-accent); }

.fn-brand__kicker {
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

.fn-header__blurb {
	margin: 20px 0 0;
	max-width: 62ch;
	color: var(--fn-muted);
	font-size: 17px;
	line-height: 1.55;
}

.fn-header__rule {
	height: 1px;
	background: var(--fn-rule);
	margin-top: 26px;
}

/* Navigation ------------------------------------------------------------ */

.fn-nav ul {
	display: flex;
	align-items: baseline;
	gap: 26px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--fn-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fn-nav a {
	text-decoration: none;
	color: var(--fn-muted);
}

.fn-nav a:hover,
.fn-nav a:focus { color: var(--fn-accent); }

/* Current section, and any link leaving the site, get the accent rule —
   that is how the design distinguishes the Portfolio link. */
.fn-nav .current-menu-item > a,
.fn-nav .current-menu-ancestor > a,
.fn-nav .current_page_item > a,
.fn-nav a[target="_blank"] {
	color: var(--fn-ink);
	border-bottom: 1px solid var(--fn-accent);
	padding-bottom: 2px;
}

.fn-nav a[target="_blank"]::after {
	content: " \2197";
	font-size: 0.95em;
}

/* Submenus are flattened rather than hidden: this navigation is five items
   wide by design and a dropdown would be more machinery than it deserves. */
.fn-nav .sub-menu {
	display: contents;
}

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

.fn-nav-toggle {
	display: none;
	appearance: none;
	background: none;
	border: 1px solid var(--fn-rule);
	color: var(--fn-meta);
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 11px;
	cursor: pointer;
}

.fn-nav-toggle:hover { color: var(--fn-accent); border-color: var(--fn-accent-line); }

/* =========================================================================
   5. Layout shells
   ========================================================================= */

.fn-main {
	max-width: var(--fn-wrap);
	margin: 0 auto;
	padding: 0 var(--fn-gutter);
}

/* Home / archive: stream beside a narrow standing sidebar. */
.fn-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 44px 64px;
	padding: 40px 0 0;
	align-items: flex-start;
}

.fn-stream {
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.fn-aside {
	flex: 0 1 208px;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 36px;
	position: sticky;
	top: 30px;
}

/* Single: body text beside a wider apparatus rail. */
.fn-article-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 44px 56px;
	margin: 44px 0 0;
	align-items: flex-start;
}

.fn-article-body {
	flex: 1 1 420px;
	min-width: 0;
	max-width: var(--fn-measure);
}

.fn-article-aside {
	flex: 0 1 240px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	position: sticky;
	top: 30px;
}

/* =========================================================================
   6. Cards (home, archive, search)
   ========================================================================= */

.fn-card {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 34px;
	align-items: flex-start;
	padding: 40px 0;
	border-top: 1px solid var(--fn-rule);
}

/* First card sits under the masthead rule already, so it needs no top line. */
.fn-stream > .fn-card:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.fn-stream > .fn-card:last-of-type {
	border-bottom: 1px solid var(--fn-rule);
}

.fn-card__media {
	flex: 1 1 300px;
	min-width: 0;
	text-decoration: none;
	display: block;
	aspect-ratio: 3 / 2;
}

.fn-card__media .fn-frame {
	width: 100%;
	height: 100%;
}

.fn-card__body {
	flex: 1 1 280px;
	min-width: 0;
}

.fn-card__title {
	margin: 12px 0 0;
	font-size: 34px;
	line-height: 1.12;
	font-weight: 300;
	letter-spacing: -0.025em;
}

.fn-card__title a { text-decoration: none; }

.fn-card__excerpt {
	margin: 11px 0 0;
	color: var(--fn-body);
	font-size: 18px;
}

/* The dotted meta line under an excerpt: location, frame count, species. */
.fn-card__facts {
	margin: 14px 0 0;
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

/* A binomial inside a mono fact line drops back to serif italic. */
.fn-card__facts em,
.fn-facts em {
	font-style: italic;
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 12px;
	font-family: var(--fn-serif);
}

/* Cards with no usable image give their text the full column. */
.fn-card--textonly .fn-card__body { flex-basis: 100%; }

/* =========================================================================
   7. Single entry
   ========================================================================= */

.fn-entry { padding: 48px 0 0; }

.fn-entry__head { max-width: var(--fn-measure); }

.fn-entry__title {
	margin: 16px 0 0;
	font-size: 50px;
	line-height: 1.07;
	font-weight: 300;
	letter-spacing: -0.03em;
}

/* Species notes run their title against a data panel, so it sets narrower. */
.fn-entry--narrow .fn-entry__title {
	max-width: 24ch;
	font-size: 46px;
	line-height: 1.08;
}

.fn-entry__lede {
	margin: 18px 0 0;
	font-size: 21px;
	line-height: 1.5;
	color: var(--fn-body);
	font-weight: 300;
}

/* Lead frame, full width of the article. */
.fn-entry__lead-frame {
	margin: 38px 0 0;
	aspect-ratio: 2 / 1;
	background: var(--fn-hatch);
	border: 1px solid var(--fn-rule);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.fn-entry__lead-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fn-caption {
	margin: 11px 0 0;
	font-family: var(--fn-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--fn-meta);
	line-height: 1.5;
}

.fn-caption em { font-style: italic; font-family: var(--fn-serif); }

/* A species note leads with a 3:2 frame rather than the 2:1 landscape. */
.fn-entry__lead-frame--species {
	margin-top: 30px;
	aspect-ratio: 3 / 2;
}

/* Prev / next ----------------------------------------------------------- */

.fn-pagination {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin: 60px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--fn-rule);
}

.fn-pagination a { text-decoration: none; }

.fn-pagination__next { text-align: right; }

.fn-pagination__dir {
	display: block;
	font-family: var(--fn-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

.fn-pagination__title {
	display: block;
	margin-top: 6px;
	font-size: 20px;
	line-height: 1.25;
}

/* Contact sheet --------------------------------------------------------- */

.fn-contact-sheet {
	margin: 40px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--fn-rule);
}

.fn-contact-sheet__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}

.fn-contact-sheet__grid a,
.fn-contact-sheet__grid span {
	aspect-ratio: 1;
	background: var(--fn-hatch-sm);
	border: 1px solid var(--fn-rule);
	display: block;
	overflow: hidden;
	position: relative;
}

.fn-contact-sheet__grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Species data panel ---------------------------------------------------- */

.fn-datapanel {
	border: 1px solid var(--fn-rule);
	padding: 22px;
	background: var(--fn-panel);
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.fn-datapanel__name {
	margin: 0;
	font-size: 24px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.fn-datapanel__common {
	margin: 4px 0 0;
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

.fn-datapanel dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 9px 14px;
	font-family: var(--fn-mono);
	font-size: 11px;
	line-height: 1.5;
}

.fn-datapanel dt {
	color: var(--fn-meta);
	letter-spacing: 0.06em;
}

.fn-datapanel dd {
	margin: 0;
	color: var(--fn-body);
}

.fn-datapanel__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--fn-rule);
}

.fn-datapanel__links a {
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Rail blocks (Where / Logged here / Kit) -------------------------------- */

.fn-rail__map {
	aspect-ratio: 4 / 3;
	background: var(--fn-panel);
	border: 1px solid var(--fn-rule);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.fn-rail__map img { width: 100%; height: 100%; object-fit: cover; }

.fn-rail__coords,
.fn-rail__kit {
	margin: 9px 0 0;
	font-family: var(--fn-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--fn-muted);
}

.fn-rail__kit { margin: 0; line-height: 1.8; }

.fn-rail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
}

.fn-rail ul a { text-decoration: none; }

/* =========================================================================
   8. Post content
   ========================================================================= */

.fn-content {
	font-size: 18px;
	line-height: 1.6;
}

.fn-content > * { max-width: var(--fn-measure); }

.fn-content p { margin: 0 0 22px; }

/* The blog's own convention: the first paragraph carries class="lead". */
.fn-content > p.lead,
.fn-content > p:first-child.lead {
	font-size: 20px;
	line-height: 1.55;
	color: var(--fn-body);
	font-weight: 300;
	margin-bottom: 22px;
}

.fn-content h2 {
	margin: 44px 0 16px;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.018em;
}

.fn-content h3 {
	margin: 34px 0 12px;
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.012em;
}

.fn-content h4 {
	margin: 28px 0 10px;
	font-family: var(--fn-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fn-meta);
	font-weight: 500;
}

.fn-content ul,
.fn-content ol { margin: 0 0 22px; padding-left: 1.3em; }

.fn-content li { margin-bottom: 7px; }

.fn-content blockquote {
	margin: 30px 0;
	padding: 2px 0 2px 22px;
	border-left: 1px solid var(--fn-accent-line);
	color: var(--fn-body);
	font-size: 20px;
	font-weight: 300;
	font-style: italic;
}

.fn-content blockquote p:last-child { margin-bottom: 0; }

/* Images sit in the hatched frame like everything else. */
.fn-content img {
	display: block;
	border: 1px solid var(--fn-rule);
	background: var(--fn-hatch);
}

.fn-content figure { margin: 30px 0; }

.fn-content figcaption,
.fn-content .wp-caption-text {
	margin: 9px 0 0;
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	color: var(--fn-meta);
	line-height: 1.5;
}

.fn-content .alignleft {
	float: left;
	margin: 6px 26px 18px 0;
	max-width: 50%;
}

.fn-content .alignright {
	float: right;
	margin: 6px 0 18px 26px;
	max-width: 50%;
}

.fn-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Wide and full images break the measure, which is the point of them. */
.fn-content .alignwide {
	max-width: min(100%, 860px);
	margin-left: auto;
	margin-right: auto;
}

.fn-content .alignfull {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* Code: the technical archive is a third of this blog, so it matters. */
.fn-content code,
.fn-content kbd,
.fn-content samp {
	font-family: var(--fn-mono);
	font-size: 0.85em;
	background: var(--fn-panel);
	border: 1px solid var(--fn-rule);
	padding: 1px 5px;
}

.fn-content pre {
	font-family: var(--fn-mono);
	font-size: 13.5px;
	line-height: 1.65;
	background: var(--fn-panel);
	border: 1px solid var(--fn-rule);
	padding: 18px 20px;
	overflow-x: auto;
	margin: 0 0 24px;
	max-width: var(--fn-measure);
	tab-size: 4;
}

.fn-content pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
}

.fn-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 24px;
	font-size: 16px;
}

.fn-content th,
.fn-content td {
	border-bottom: 1px solid var(--fn-rule-light);
	padding: 9px 12px 9px 0;
	text-align: left;
	vertical-align: top;
}

.fn-content th {
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fn-meta);
	font-weight: 500;
	border-bottom-color: var(--fn-rule);
}

/* Galleries in post content adopt the contact-sheet look. */
.fn-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	margin: 30px 0;
	max-width: var(--fn-measure);
}

.fn-content .gallery br { display: none; }
.fn-content .gallery-item { margin: 0 !important; width: auto !important; }

/* Entry footer ---------------------------------------------------------- */

.fn-entry__footer {
	margin: 40px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--fn-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: baseline;
	justify-content: space-between;
}

.fn-tags {
	margin: 0;
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

.fn-tags a { text-decoration: none; color: var(--fn-muted); }
.fn-tags a:hover, .fn-tags a:focus { color: var(--fn-accent); }

.fn-editlink {
	font-family: var(--fn-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fn-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--fn-rule);
	padding-bottom: 2px;
}

/* =========================================================================
   9. Index listings (technical archive, species index, place archives)
   ========================================================================= */

.fn-page-title {
	margin: 0;
	font-size: 42px;
	font-weight: 300;
	letter-spacing: -0.03em;
}

.fn-page-intro {
	margin: 12px 0 0;
	max-width: 58ch;
	color: var(--fn-muted);
}

.fn-section { padding: 48px 0 0; }

.fn-group { margin: 38px 0 0; }
.fn-group:first-of-type { margin-top: 40px; }

.fn-group > .fn-label { margin-bottom: 4px; }

.fn-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fn-list li {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 13px 0;
	border-top: 1px solid var(--fn-rule-light);
	flex-wrap: wrap;
}

.fn-list li:last-child { border-bottom: 1px solid var(--fn-rule-light); }

.fn-list a { text-decoration: none; }

/* Species index row: binomial, common name, where and when. */
.fn-list__binomial {
	font-style: italic;
	font-size: 19px;
	flex: 0 0 240px;
}

.fn-list__common {
	flex: 1;
	color: var(--fn-muted);
	font-size: 17px;
	min-width: 120px;
}

.fn-list__note {
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

/* Technical archive row: year, title, category. */
.fn-list--archive li { padding: 14px 0; }

.fn-list__year {
	font-family: var(--fn-mono);
	font-size: 11px;
	color: var(--fn-meta);
	flex: 0 0 56px;
}

.fn-list__title {
	font-size: 20px;
	flex: 1;
	min-width: 200px;
	line-height: 1.3;
}

.fn-list__count {
	margin: 22px 0 0;
	font-family: var(--fn-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

/* Archive and search headers sit above the first card. */
.fn-archive-header {
	padding: 0 0 34px;
}

.fn-archive-header .fn-page-title { margin-top: 6px; }

.fn-archive-header .fn-page-intro { margin-top: 10px; }

.fn-archive-header__form { margin-top: 22px; }

/* With a header above it, the first card needs its rule back. */
.fn-archive-header + .fn-card {
	padding-top: 40px;
	border-top: 1px solid var(--fn-rule);
}

/* =========================================================================
   10. Sidebar widgets
   ========================================================================= */

.fn-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 16px;
}

.fn-widget ul a { text-decoration: none; }

.fn-widget ul ul {
	margin-top: 7px;
	padding-left: 14px;
}

/* Post counts that WordPress appends to category/archive lists. */
.fn-widget li { color: var(--fn-meta); }

.fn-widget .fn-count,
.fn-widget li > .count {
	font-family: var(--fn-mono);
	font-size: 10px;
	color: var(--fn-meta);
}

/* Observation list: binomial over common name and date. */
.fn-obs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fn-obs li {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.fn-obs__binomial {
	font-style: italic;
	font-size: 16px;
}

.fn-obs__common {
	font-family: var(--fn-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

.fn-widget__link {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--fn-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fn-muted);
	text-decoration: none;
}

.fn-widget__link:hover,
.fn-widget__link:focus { color: var(--fn-accent); }

/* Default WordPress widget markup, brought into the same voice. */
.fn-widget select,
.fn-widget input[type="text"],
.fn-widget input[type="search"] {
	width: 100%;
	font-family: var(--fn-mono);
	font-size: 12px;
	padding: 7px 9px;
	border: 1px solid var(--fn-rule);
	background: var(--fn-bg);
	color: var(--fn-ink);
}

.fn-widget .wp-calendar-table { font-size: 13px; width: 100%; }

.fn-widget p { font-size: 15px; color: var(--fn-body); margin: 0 0 12px; }

/* Admin-only note under the default rail. */
.fn-rail-hint {
	margin: 0;
	font-family: var(--fn-mono);
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: var(--fn-meta);
	padding: 12px 13px;
	border: 1px dashed var(--fn-rule);
	background: var(--fn-panel);
}

/* =========================================================================
   11. Search form
   ========================================================================= */

.fn-search {
	display: flex;
	gap: 0;
	max-width: 420px;
	border: 1px solid var(--fn-rule);
	background: var(--fn-bg);
}

.fn-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 10px 12px;
	font-family: var(--fn-serif);
	font-size: 16px;
	color: var(--fn-ink);
}

.fn-search input[type="search"]:focus { outline: none; }

.fn-search:focus-within { border-color: var(--fn-accent-line); }

.fn-search button {
	appearance: none;
	border: 0;
	border-left: 1px solid var(--fn-rule);
	background: var(--fn-panel);
	color: var(--fn-meta);
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0 16px;
	cursor: pointer;
}

.fn-search button:hover { color: var(--fn-accent); }

/* =========================================================================
   12. Comments
   ========================================================================= */

.fn-comments {
	margin: 60px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--fn-rule);
	max-width: var(--fn-measure);
}

.fn-comments__list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

.fn-comments__list ol.children {
	list-style: none;
	margin: 20px 0 0 26px;
	padding-left: 20px;
	border-left: 1px solid var(--fn-rule-light);
}

.fn-comment {
	padding: 0 0 22px;
	margin: 0 0 22px;
	border-bottom: 1px solid var(--fn-rule-light);
}

.fn-comment__meta {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

.fn-comment__author { color: var(--fn-ink); }
.fn-comment__author a { text-decoration: none; }

.fn-comment__body { margin-top: 10px; }
.fn-comment__body p { margin: 0 0 14px; }
.fn-comment__body p:last-child { margin-bottom: 0; }

.fn-comment__reply a,
.fn-comments .comment-reply-link {
	font-family: var(--fn-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fn-muted);
	text-decoration: none;
}

.fn-comments .comment-respond { margin-top: 34px; }

.fn-comments .comment-reply-title {
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fn-meta);
	font-weight: 500;
	margin: 0 0 16px;
}

.fn-comments .comment-form label {
	display: block;
	font-family: var(--fn-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fn-meta);
	margin-bottom: 6px;
}

.fn-comments .comment-form input[type="text"],
.fn-comments .comment-form input[type="email"],
.fn-comments .comment-form input[type="url"],
.fn-comments .comment-form textarea {
	width: 100%;
	border: 1px solid var(--fn-rule);
	background: var(--fn-bg);
	padding: 9px 11px;
	font-family: var(--fn-serif);
	font-size: 16px;
	color: var(--fn-ink);
	margin-bottom: 16px;
}

.fn-comments .comment-form textarea { line-height: 1.55; }

.fn-comments .comment-form input:focus,
.fn-comments .comment-form textarea:focus {
	outline: none;
	border-color: var(--fn-accent-line);
}

.fn-comments .form-submit input[type="submit"],
.fn-button {
	appearance: none;
	border: 1px solid var(--fn-accent-line);
	background: none;
	color: var(--fn-accent);
	font-family: var(--fn-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 9px 18px;
	cursor: pointer;
}

.fn-comments .form-submit input[type="submit"]:hover,
.fn-button:hover { border-color: var(--fn-accent); }

.fn-comments .comment-notes,
.fn-comments .logged-in-as {
	font-size: 15px;
	color: var(--fn-muted);
}

/* =========================================================================
   13. Post-list pagination
   ========================================================================= */

.fn-posts-nav {
	margin: 30px 0 0;
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	align-items: baseline;
}

.fn-posts-nav .page-numbers {
	font-family: var(--fn-mono);
	font-size: 11px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fn-muted);
	text-decoration: none;
}

.fn-posts-nav .page-numbers.current {
	color: var(--fn-ink);
	border-bottom: 1px solid var(--fn-accent);
	padding-bottom: 3px;
}

.fn-posts-nav .page-numbers:hover { color: var(--fn-accent); }

/* =========================================================================
   14. Footer
   ========================================================================= */

.fn-footer {
	max-width: var(--fn-wrap);
	margin: 0 auto;
	padding: 80px var(--fn-gutter) 56px;
}

.fn-footer__inner {
	border-top: 1px solid var(--fn-rule);
	padding-top: 24px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	font-family: var(--fn-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fn-meta);
}

.fn-footer__inner a {
	text-decoration: none;
	color: var(--fn-muted);
}

.fn-footer__inner a:hover,
.fn-footer__inner a:focus { color: var(--fn-accent); }

.fn-footer__links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =========================================================================
   15. 404 / empty states
   ========================================================================= */

.fn-empty {
	padding: 48px 0 0;
	max-width: var(--fn-measure);
}

.fn-empty p {
	color: var(--fn-body);
	margin: 14px 0 26px;
}

/* =========================================================================
   16. Responsive
   ========================================================================= */

@media (max-width: 1080px) {
	:root { --fn-gutter: 32px; }

	.fn-entry__title { font-size: 42px; }
	.fn-entry--narrow .fn-entry__title { font-size: 38px; }
	.fn-card__title { font-size: 30px; }
}

@media (max-width: 860px) {
	/* The rails stop standing once they would be narrower than a column. */
	.fn-aside,
	.fn-article-aside {
		position: static;
		flex-basis: 100%;
	}

	.fn-columns { gap: 40px; }

	.fn-contact-sheet__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 680px) {
	:root {
		--fn-gutter: 20px;
		--fn-wrap: 100%;
	}

	body { font-size: 17px; }

	.fn-header { padding-top: 22px; }

	.fn-header__top {
		align-items: center;
		gap: 16px;
	}

	.fn-nav-toggle { display: block; }

	/* Nav collapses behind the toggle; the checkbox-free version below is
	   driven by aria-expanded from navigation.js, and without JS the list
	   simply stays visible. */
	.js .fn-nav {
		flex-basis: 100%;
		display: none;
	}

	.js .fn-nav.is-open { display: block; }

	.fn-nav ul {
		flex-direction: column;
		gap: 14px;
		padding: 16px 0 4px;
	}

	.fn-header__blurb { font-size: 16px; margin-top: 16px; }

	.fn-entry { padding-top: 32px; }
	.fn-entry__title { font-size: 33px; letter-spacing: -0.025em; }
	.fn-entry--narrow .fn-entry__title { font-size: 31px; max-width: none; }
	.fn-entry__lede { font-size: 19px; }
	.fn-entry__lead-frame { aspect-ratio: 3 / 2; }

	.fn-card { padding: 30px 0; gap: 18px; }
	.fn-card__title { font-size: 27px; }
	.fn-card__media { flex-basis: 100%; }
	.fn-card__body { flex-basis: 100%; }

	.fn-page-title { font-size: 32px; }

	.fn-section { padding-top: 32px; }

	/* Index rows stack rather than squeezing three columns into 300px. */
	.fn-list li {
		flex-direction: column;
		gap: 3px;
		padding: 14px 0;
	}

	.fn-list__binomial,
	.fn-list__year,
	.fn-list__title,
	.fn-list__common { flex: none; }

	.fn-pagination {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fn-pagination__next { text-align: left; }

	.fn-contact-sheet__grid { grid-template-columns: repeat(3, 1fr); }

	.fn-footer { padding-top: 56px; }

	.fn-content .alignleft,
	.fn-content .alignright {
		float: none;
		margin: 26px 0;
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   17. Print
   ========================================================================= */

@media print {
	.fn-nav, .fn-aside, .fn-article-aside, .fn-footer__links,
	.fn-pagination, .fn-comments, .fn-posts-nav, .fn-contact-sheet { display: none; }

	body { font-size: 11pt; background: #fff; }
	.fn-article-body { max-width: none; }
	a { text-decoration: none; }
}