/*
Theme Name: Joshua Townsend Portfolio
Theme URI: https://joshuatownsend.com
Author: Joshua Townsend
Description: Child theme of Twenty Twenty-Five carrying the joshuatownsend.com design system: warm charcoal ground, signal amber accent, steel-blue technical metadata, Manrope and Fira Code. The homepage layer lives here too, under .jt-home.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jt-portfolio
*/

/* ==========================================================================
   WHY THIS IS A THEME AND NOT CUSTOM CSS
   --------------------------------------------------------------------------
   The design started life in the Customizer's Custom CSS, scoped to
   `body:has(.jt-home)` so it could not disturb 27 existing blog posts. That
   was right for staging one page. It cannot do three things this can:

     1. Apply site-wide, so a visitor moving from the homepage to a 2011 post
        does not fall off the edge of the design.
     2. Restyle the EDITOR. Custom CSS is front-end only, which is why the
        fixed edge rails floated over the editor canvas -- `position: fixed`
        inside the editor pins to the editor's viewport. `add_editor_style()`
        fixes that; nothing else can.
     3. Redefine the theme's colour tokens. `base` and `contrast` are
        referenced by Twenty Twenty-Five's own rules and by core blocks. On a
        dark ground, an un-overridden `contrast: #111111` renders post titles,
        dates and pagination as black text on charcoal. See theme.json.

   Structure below: tokens, then the site-wide layer, then the blog, then the
   homepage under .jt-home. Every colour is a custom property in section 1, so
   a light variant is an edit to one block.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
	/* Warm-biased neutrals: a gray pulled toward the accent reads as chosen
	   rather than inherited. Nothing here is a pure gray. */
	--jt-bg:      #14110E;
	--jt-bg-2:    #1D1915;
	--jt-bg-3:    #2E271F;
	--jt-hi:      #FBF7F0;
	--jt-tx:      #D6CEC3;
	--jt-mu:      #9C9284;

	/* Primary accent: signal amber, from Josh's own world -- warning beacons
	   and apparatus lighting -- rather than the reference site's mint, which
	   would read as a clone. 8.7:1 on --jt-bg. */
	--jt-ac:      #E9A63E;
	--jt-ac-soft: rgba(233, 166, 62, .10);
	/* Secondary: steel. Carries technical metadata so the amber stays rare. */
	--jt-ac2:     #86AEC9;
	/* Reserved for the fire-service section only. See section 5. */
	--jt-ember:   #E4692F;

	--jt-mono: var(--wp--preset--font-family--fira-code, ui-monospace, monospace);
	--jt-sans: var(--wp--preset--font-family--manrope, system-ui, sans-serif);
}

/* ==========================================================================
   2. SITE-WIDE GROUND AND TYPE
   ========================================================================== */
body {
	background: var(--jt-bg);
	color: var(--jt-tx);
	font-family: var(--jt-sans);
}
.wp-site-blocks { background: var(--jt-bg); }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title, .wp-block-site-title {
	color: var(--jt-hi);
	letter-spacing: -.02em;
	text-wrap: balance;
}
a { color: var(--jt-ac); text-underline-offset: 3px; }
a:hover { color: var(--jt-ac); }
strong, b { color: var(--jt-hi); }
:focus-visible { outline: 2px solid var(--jt-ac); outline-offset: 3px; border-radius: 2px; }

code, kbd, samp, pre, .wp-block-code {
	font-family: var(--jt-mono);
	background: var(--jt-bg-2);
	color: var(--jt-hi);
	border: 1px solid var(--jt-bg-3);
	border-radius: 4px;
}
:not(pre) > code { font-size: .88em; padding: .1em .35em; color: var(--jt-ac); background: var(--jt-ac-soft); border: 0; }
.wp-block-code, pre { padding: 16px 18px; overflow-x: auto; }

blockquote, .wp-block-quote {
	border-left: 2px solid var(--jt-ac);
	padding-left: 20px;
	color: var(--jt-mu);
	font-style: normal;
}
hr, .wp-block-separator { border: 0; border-top: 1px solid var(--jt-bg-3); opacity: 1; }
table th, table td { border-color: var(--jt-bg-3); }

/* --- social icons, site-wide ------------------------------------------------
   `is-style-logos-only` drops the coloured chips but keeps each service's BRAND
   colour on the <li>. On this ground that makes GitHub and X almost invisible
   -- near-black glyphs on a near-black page.

   Setting the colour on the anchor is not enough: core's own
     .wp-block-social-links.is-style-logos-only .wp-social-link a { color: currentColor }
   ties on specificity, so the <li>'s brand colour wins. Adding the `li` element
   selector makes these 0,2,1 against core's 0,2,0 and settles it outright
   rather than relying on which stylesheet happens to load last.

   These were scoped to .jt-home while the design was homepage-only. The footer
   now carries the same icons on every page, so they are site-wide. */
.wp-block-social-links.is-style-logos-only li.wp-social-link,
.wp-block-social-links li.wp-social-link {
	background-color: transparent;
	color: var(--jt-mu);
	transition: color .18s ease, transform .18s ease;
}
.wp-block-social-links.is-style-logos-only li.wp-social-link a,
.wp-block-social-links li.wp-social-link a { color: inherit; padding: 6px; }
.wp-block-social-links li.wp-social-link svg { fill: currentColor; }
.wp-block-social-links.is-style-logos-only li.wp-social-link:hover,
.wp-block-social-links li.wp-social-link:hover {
	color: var(--jt-ac);
	transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-social-links li.wp-social-link:hover { transform: none; }
}

/* ==========================================================================
   3. HEADER AND FOOTER
   ========================================================================== */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	background: rgba(20, 17, 14, .82);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--jt-bg-3);
}
header.wp-block-template-part .wp-block-site-title a {
	color: var(--jt-hi);
	font-weight: 800;
	letter-spacing: -.02em;
	text-decoration: none;
}
header.wp-block-template-part .wp-block-site-title a:hover { color: var(--jt-ac); }
header.wp-block-template-part .wp-block-navigation a {
	color: var(--jt-tx);
	font-family: var(--jt-mono);
	font-size: .8rem;
	text-decoration: none;
}
header.wp-block-template-part .wp-block-navigation a:hover { color: var(--jt-ac); }
/* The mobile overlay is opaque and takes its colours from block attributes in
   the header pattern, which name theme.json slugs -- so it follows the palette
   automatically. This only softens the dividers. */
.wp-block-navigation__responsive-container.is-menu-open { border: 0; }

footer.wp-block-template-part {
	background: var(--jt-bg);
	color: var(--jt-mu);
	border-top: 1px solid var(--jt-bg-3);
}
footer.wp-block-template-part a { color: var(--jt-mu); }
footer.wp-block-template-part a:hover { color: var(--jt-ac); }

/* --- the footer ------------------------------------------------------------
   Twenty Twenty-Five's own footer is demo content: two navigation blocks of
   eight links -- Blog, About, FAQs, Authors, Events, Shop, Patterns, Themes --
   every one of them pointing at "#", plus a paragraph printing the theme's own
   name. Ten links, eight of them dead, on a site meant to be someone's
   professional front door.

   Replaced with the two things a footer here can actually do. No navigation:
   the sticky header carries all six real links on every page, and repeating
   them below would be duplication rather than a second chance.

   The social icons matter more than they look. The fixed edge rails are
   desktop-only from 1240px up, so below that this is the only place outside
   the contact section where those links exist at all.

   No year in the copyright line, deliberately: a hardcoded one is wrong every
   January, and there is no core block that prints the current year. */
.jt-footer {
	padding-block: clamp(40px, 6vw, 64px);
	text-align: center;
}
.jt-footer .jt-footer-social { justify-content: center; margin: 0 0 20px; }
.jt-footer-line {
	font-family: var(--jt-mono);
	font-size: .76rem;
	letter-spacing: .06em;
	color: var(--jt-mu);
	margin: 0;
}

/* ==========================================================================
   4. THE BLOG
   --------------------------------------------------------------------------
   27 posts from 2008-2015, written for a light theme. They are classic HTML
   with inline screenshots, most of them white. Nothing here tries to recolour
   their images -- that would be lying about what the screenshots show. The
   images get a hairline and a radius so they read as inset objects rather
   than as holes punched in the page.
   ========================================================================== */
.wp-block-post-title a { color: var(--jt-hi); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--jt-ac); }
.wp-block-post-date, .wp-block-post-terms, .wp-block-post-author-name {
	font-family: var(--jt-mono);
	font-size: .78rem;
	letter-spacing: .05em;
	color: var(--jt-mu);
}
.wp-block-post-date a, .wp-block-post-terms a { color: var(--jt-mu); }
.wp-block-post-date a:hover, .wp-block-post-terms a:hover { color: var(--jt-ac); }

.wp-block-post-content img,
.wp-block-post-content .wp-block-image img,
.entry-content img {
	border-radius: 4px;
	border: 1px solid var(--jt-bg-3);
}
.wp-block-post-content figcaption, figcaption {
	color: var(--jt-mu);
	font-size: .85rem;
}
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { color: var(--jt-ac); }
.wp-block-query-pagination .current { color: var(--jt-hi); }
.wp-block-post-navigation-link a { color: var(--jt-ac); }

/* --- the archive list ---
   See patterns/archive-loop.php for why this is a list with a small square
   rather than a card grid: four of the 27 posts have a featured image and the
   smallest is 166x197, so a wide slot would upscale it about three times. */
.jt-arch-main { padding-block: clamp(40px, 6vw, 72px); }
.jt-arch-heading {
	font-size: clamp(1.5rem, 3.6vw, 2.05rem);
	font-weight: 800;
	margin: 0 0 8px;
}
.jt-arch-termdesc { color: var(--jt-mu); margin: 0 0 20px; }

.jt-arch-row {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	padding-block: 26px;
	border-bottom: 1px solid var(--jt-bg-3);
}
/* Core's block-gap adds a top margin to every sibling after the first, which
   inside a flex row pushes the body text down away from the thumbnail. */
.jt-arch-row > * { margin-block-start: 0; }

/* The slot is always drawn, whether or not there is an image to put in it.
   core/post-featured-image renders NOTHING when a post has no thumbnail, so
   without this wrapper 23 of the 27 rows would simply have no left column and
   the list would not line up. */
.jt-arch-thumb {
	flex: none;
	width: 140px;
	height: 140px;
	border-radius: 6px;
	border: 1px solid var(--jt-bg-3);
	background: var(--jt-bg-2);
	overflow: hidden;
	position: relative;
}
/* The placeholder sits underneath. An image, when there is one, covers it. */
.jt-arch-thumb::before {
	content: "\25B9";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.7rem;
	color: var(--jt-ac);
	opacity: .26;
}
.jt-arch-thumb .wp-block-post-featured-image { position: relative; margin: 0; height: 100%; }
.jt-arch-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 0;
}

.jt-arch-body { min-width: 0; flex: 1 1 auto; }
.jt-arch-body > * { margin-block-start: 0; }
.jt-arch-date {
	font-family: var(--jt-mono);
	font-size: .74rem;
	letter-spacing: .06em;
	color: var(--jt-mu);
	margin: 0 0 6px;
	font-variant-numeric: tabular-nums;
}
.jt-arch-title { font-size: 1.24rem; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.jt-arch-title a { color: var(--jt-hi); text-decoration: none; }
.jt-arch-title a:hover { color: var(--jt-ac); }
.jt-arch-excerpt { font-size: .95rem; line-height: 1.65; color: var(--jt-mu); margin: 0; }
/* Core wraps the excerpt text in its own <p>, which keeps a bottom margin and
   opened a ~50px hole between the excerpt and its Read more link. */
.jt-arch-excerpt .wp-block-post-excerpt__excerpt { margin: 0; }
.jt-arch-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--jt-mono);
	font-size: .74rem;
	letter-spacing: .06em;
	color: var(--jt-ac);
	text-decoration: none;
}
.jt-arch-excerpt .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

.jt-arch-nav { margin-top: 34px; }
.jt-arch-nav .wp-block-query-pagination { font-family: var(--jt-mono); font-size: .8rem; }

@media (max-width: 600px) {
	.jt-arch-row { gap: 16px; }
	.jt-arch-thumb { width: 92px; height: 92px; }
	.jt-arch-thumb::before { font-size: 1.2rem; }
	.jt-arch-title { font-size: 1.08rem; }
}

/* ==========================================================================
   5. THE HOMEPAGE
   --------------------------------------------------------------------------
   Everything below is class-scoped to .jt-home, so it applies to the page
   that carries that block and nowhere else. Flow and hierarchy follow
   v4.brittanychiang.com -- numbered sections, mono metadata, a display hero,
   card grids, fixed edge rails -- but none of its palette.
   ========================================================================== */
.jt-home {
	counter-reset: jt-sec;                 /* see .jt-h2::before */
	background: var(--jt-bg);
	color: var(--jt-tx);
	font-family: var(--jt-sans);
	padding-inline: clamp(20px, 5vw, 40px);
	padding-bottom: clamp(60px, 9vw, 110px);
	overflow-x: clip;
}
.jt-home a { color: var(--jt-ac); text-decoration-color: rgba(233, 166, 62, .35); }
.jt-home a:hover { text-decoration-color: var(--jt-ac); }
.jt-home strong { color: var(--jt-hi); font-weight: 700; }

/* --- hero --- */
.jt-hero {
	min-height: min(84vh, 760px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(70px, 12vh, 130px);
	max-width: 1080px;
	margin-inline: auto;
}
.jt-eyebrow {
	font-family: var(--jt-mono);
	font-size: .84rem;
	letter-spacing: .1em;
	color: var(--jt-ac);
	margin: 0 0 22px;
}
.jt-name {
	font-size: clamp(2.9rem, 9.5vw, 5.6rem);
	line-height: .92;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--jt-hi);
	margin: 0;
}
.jt-role {
	font-size: clamp(1.5rem, 5.2vw, 3rem);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--jt-mu);
	margin: .12em 0 0;
}
.jt-strip {
	font-family: var(--jt-mono);
	font-size: clamp(.72rem, 1.6vw, .84rem);
	line-height: 1.7;
	color: var(--jt-ac2);
	margin: 26px 0 0;
	/* No max-width. At 60ch this mono line broke after "Infrastructure" and
	   orphaned "· Firefighter/EMT" -- the half that makes it worth printing. */
}
.jt-lede {
	font-size: clamp(1rem, 1.5vw, 1.08rem);
	line-height: 1.7;
	color: var(--jt-tx);
	max-width: 62ch;
	margin: 26px 0 0;
}

/* --- buttons --- */
.jt-home .jt-cta { margin-top: 40px; }
.jt-home .jt-btn .wp-block-button__link {
	background: transparent;
	color: var(--jt-ac);
	border: 1px solid var(--jt-ac);
	border-radius: 4px;
	font-family: var(--jt-mono);
	font-size: .86rem;
	padding: .85em 1.6em;
	transition: background-color .18s ease, transform .18s ease;
}
.jt-home .jt-btn .wp-block-button__link:hover,
.jt-home .jt-btn .wp-block-button__link:focus {
	background: var(--jt-ac-soft);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.jt-home .jt-btn .wp-block-button__link:hover { transform: none; }
}

/* --- sections --- */
.jt-section {
	max-width: 1080px;
	margin-inline: auto;
	padding-block: clamp(54px, 8vw, 96px);
	scroll-margin-top: 84px;              /* clears the sticky header */
}
/* The number is generated, not typed. Move a section and it renumbers itself;
   a hand-written "03." starts lying the moment anything is reordered. */
.jt-h2 {
	counter-increment: jt-sec;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(1.5rem, 3.6vw, 2.05rem);
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--jt-hi);
	margin: 0 0 30px;
	scroll-margin-top: 84px;
}
.jt-h2::before {
	content: "0" counter(jt-sec) ".";
	font-family: var(--jt-mono);
	font-size: clamp(.9rem, 2vw, 1.1rem);
	font-weight: 400;
	color: var(--jt-ac);
	flex: none;
}
.jt-h2::after {
	content: "";
	height: 1px;
	background: var(--jt-bg-3);
	flex: 1 1 auto;
	min-width: 30px;
}

.jt-prose { font-size: 1rem; line-height: 1.75; color: var(--jt-tx); max-width: 68ch; margin: 0 0 18px; }
.jt-aside { color: var(--jt-mu); font-size: .94rem; margin-top: 26px; }
.jt-meta  { font-size: .94rem; line-height: 2; color: var(--jt-mu); margin: 34px 0 0; }
.jt-label {
	font-family: var(--jt-mono);
	font-size: .76rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jt-ac2);
	margin: 36px 0 14px;
}
.jt-home .jt-list { list-style: none; padding: 0; margin: 0; max-width: 74ch; }
.jt-home .jt-list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 14px;
	line-height: 1.65;
	color: var(--jt-tx);
}
.jt-home .jt-list li::before {
	content: "\25B9";                      /* the reference's marker */
	position: absolute;
	left: 0;
	color: var(--jt-ac);
	font-size: .95em;
}

/* --- the three numbers from the Claude-skills work --- */
.jt-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1px;
	background: var(--jt-bg-3);
	border: 1px solid var(--jt-bg-3);
	border-radius: 6px;
	overflow: hidden;
	margin-top: 34px;
	max-width: 68ch;
}
.jt-stat { background: var(--jt-bg-2); padding: 22px 20px; }
.jt-stat-n {
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--jt-ac);
	line-height: 1;
	margin: 0 0 8px;
	font-variant-numeric: tabular-nums;
}
.jt-stat-l { font-size: .84rem; line-height: 1.5; color: var(--jt-mu); margin: 0; }

/* Core spaces sibling blocks with
     :root :where(.wp-block-group) > :where(*) + :where(*) { margin-block-start }
   Harmless in normal flow; inside a grid container it pushes every item after
   the first DOWN, so cards in one row stop sharing a top edge. `:where()`
   contributes no specificity, so two classes win without !important. */
.jt-home .jt-cards > *,
.jt-home .jt-stats > * { margin-block-start: 0; }

/* --- product and repo cards ---
   The reference alternates large screenshots with overlapping copy. There are
   no screenshots for these seven products, so the card grid it uses for
   secondary work is promoted here, and the GitHub grid below is made denser so
   the hierarchy still reads. Faking hero imagery was the worse trade. */
.jt-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}
@media (min-width: 760px) {
	/* Fixed two columns, not auto-fit. auto-fit collapses empty tracks, so the
	   single card under "For the household" stretched the full width and read
	   as a mistake. Two columns keeps a lone card at half width. */
	.jt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jt-card {
	background: var(--jt-bg-2);
	border: 1px solid var(--jt-bg-3);
	border-radius: 6px;
	padding: 26px 24px 22px;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, border-color .2s ease;
}
.jt-card:hover { transform: translateY(-4px); border-color: var(--jt-ac); }
@media (prefers-reduced-motion: reduce) { .jt-card:hover { transform: none; } }
.jt-card-t { font-size: 1.16rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 10px; line-height: 1.3; }
.jt-card-t a { color: var(--jt-hi); text-decoration: none; }
.jt-card:hover .jt-card-t a { color: var(--jt-ac); }
.jt-card-d { font-size: .92rem; line-height: 1.65; color: var(--jt-mu); margin: 0; flex: 1 1 auto; }
.jt-card-u {
	font-family: var(--jt-mono);
	font-size: .74rem;
	letter-spacing: .04em;
	color: var(--jt-ac2);
	margin: 16px 0 0;
}
.jt-cards-sm { gap: 14px; }
.jt-repo { padding: 22px 20px; }
.jt-repo .jt-card-t { font-family: var(--jt-mono); font-size: .94rem; letter-spacing: -.01em; }

/* --- experience ---
   A list, not the reference's tabs. Tabs need JavaScript and hide four jobs
   out of five; a resume should not make its reader click to see the career. */
.jt-job { margin-bottom: 42px; }
.jt-when {
	font-family: var(--jt-mono);
	font-size: .76rem;
	letter-spacing: .06em;
	color: var(--jt-mu);
	margin: 0 0 6px;
	font-variant-numeric: tabular-nums;
}
.jt-job-t { font-size: 1.1rem; font-weight: 700; color: var(--jt-hi); margin: 0 0 8px; line-height: 1.4; }
.jt-job-d { font-size: .96rem; line-height: 1.7; color: var(--jt-tx); margin: 0; max-width: 68ch; }

@media (min-width: 760px) {
	.jt-job {
		display: grid;
		grid-template-columns: 168px minmax(0, 1fr);
		column-gap: 28px;
	}
	.jt-when  { grid-column: 1; grid-row: 1 / span 2; padding-top: .32em; margin: 0; }
	.jt-job-t { grid-column: 2; grid-row: 1; }
	.jt-job-d { grid-column: 2; grid-row: 2; }
	.jt-home .jt-job > * { margin-block-start: 0; }
}

/* --- fire and rescue ---
   The one section that shifts accent. The page carries two worlds -- enterprise
   infrastructure and the fire service -- and the colour change marks the
   crossing. It is the only place the amber moves, so it reads as meaning
   rather than decoration. */
.jt-fire { --jt-ac: var(--jt-ember); --jt-ac-soft: rgba(228, 105, 47, .10); }

/* --- contact --- */
.jt-contact { text-align: center; padding-block: clamp(80px, 12vw, 140px); }
.jt-contact .jt-h2 { justify-content: center; }
.jt-contact .jt-h2::after { display: none; }
.jt-contact .jt-prose { max-width: 54ch; margin-inline: auto; }
.jt-contact .jt-cta { justify-content: center; }

.jt-home .jt-social { justify-content: center; margin-top: 34px; }

/* --- the fixed edge rails ---
   The reference's signature: socials pinned bottom-left, the address bottom-
   right, each on a hairline running off the bottom of the screen. Desktop
   only -- below 1240px there is no gutter for them, and both are duplicated in
   the contact section, so hiding them loses nothing.
   See editor.css: `position: fixed` has to be undone inside the editor. */
.jt-rail { display: none; }
@media (min-width: 1240px) {
	.jt-rail {
		display: block;
		position: fixed;
		bottom: 0;
		z-index: 15;
	}
	.jt-rail::after {
		content: "";
		display: block;
		width: 1px;
		height: 92px;
		margin: 20px auto 0;
		background: var(--jt-bg-3);
	}
	.jt-rail-left  { left: 34px; }
	.jt-rail-right { right: 34px; }
	.jt-home .jt-rail-social {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.jt-rail-mail { margin: 0; }
	.jt-rail-mail a {
		writing-mode: vertical-rl;
		font-family: var(--jt-mono);
		font-size: .76rem;
		letter-spacing: .14em;
		color: var(--jt-mu);
		text-decoration: none;
	}
	.jt-rail-mail a:hover { color: var(--jt-ac); }
}
/* The rails must never sit on top of the text they flank. */
@media (min-width: 1240px) and (max-width: 1420px) {
	.jt-home { padding-inline: 84px; }
}

/* A rule hiding the reCAPTCHA badge on the homepage used to live here. It is
   gone because the thing it hid is gone: Phase 4 deactivated contact-form-7 on
   this blog, so no reCAPTCHA script loads on any page and there is no badge.
   A rule that hides an element nothing renders is not harmless -- it is a note
   claiming a problem still exists. The selector is deliberately not written
   out above, so that grepping this file for it finds nothing. */