/* ==========================================================================
   With Love, Cata — blog section
   --------------------------------------------------------------------------
   Every rule is scoped to .wlc-section. Nothing in this file can reach the
   portfolio.

   Values measured from the live BuzzBlog Pro site on 14 September 2026.
   Change the tokens below, not the rules underneath them.
   ========================================================================== */

.wlc-section {
	/* Type ---------------------------------------------------------------- */
	--wlc-font-display: "Playfair Display", "Instrument Serif", Georgia, serif;
	--wlc-font-label:   "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* The blog's name, and nothing else.

	   17 Sep 2026 — Playfair Display italic, picked by Cata from twenty settings
	   shown in the real masthead rather than on a board. It is the same face as
	   the headlines, which she had ruled out earlier on the reasonable grounds
	   that a wordmark should not repeat the headline face. She chose it anyway,
	   with the wordmark and a headline in the same frame, where the italic and
	   the size gap keep them apart. Deliberate, not an oversight — do not
	   "fix" it back.

	   Parisienne is still self-hosted in fonts.css if it is ever wanted again. */
	--wlc-font-mark:    "Playfair Display", Georgia, "Times New Roman", serif;

	/* Her handwriting, on the portrait in the sidebar and nowhere else.
	   Chosen 19 Sep from ten scripts; see assets/fonts.css. */
	--wlc-font-hand:    "Homemade Apple", "Parisienne", cursive;

	--wlc-size-headline: 44px;   /* post titles */
	--wlc-size-section:  30px;   /* secondary headings */
	--wlc-size-body:     15px;
	--wlc-size-meta:     13px;
	--wlc-size-label:    14px;   /* uppercase labels, buttons */

	--wlc-lh-headline: 1.05;     /* sisterlystyle.com sets 62px at 60px */
	--wlc-lh-body:     1.87;     /* 28px at 15px */

	--wlc-track-headline: -0.038em; /* measured off sisterlystyle.com: -2.4px  */
	                                /* at 60px. In em so it holds at every    */
	                                /* size the headline is set at.           */
	--wlc-track-label:     2px;  /* the airy setting on uppercase labels */

	/* Colour -------------------------------------------------------------- */
	--wlc-ground:   #ffffff;
	--wlc-ink:      #222222;   /* headlines, navigation */
	--wlc-body:     #525252;   /* running text */
	--wlc-meta:     #919191;   /* dates, captions */
	--wlc-hairline: #d8d8d8;   /* dividers */
	--wlc-deep:     #0a0a0a;   /* buttons, footer */

	/* Measure ------------------------------------------------------------- */
	--wlc-measure: 680px;      /* reading width for body copy */
	--wlc-wide:    1200px;     /* archive grid, wide media */
	--wlc-gutter:  24px;

	background: var(--wlc-ground);
	color: var(--wlc-body);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.wlc-section .wlc-entry-title,
.wlc-section .wp-block-post-title {
	font-family: var(--wlc-font-display);
	font-size: var(--wlc-size-headline);
	font-weight: 400;
	line-height: var(--wlc-lh-headline);
	letter-spacing: var(--wlc-track-headline);
	color: var(--wlc-ink);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

.wlc-section .wp-block-post-content p,
.wlc-section .wlc-content p {
	font-family: var(--wlc-font-display);
	font-size: var(--wlc-size-body);
	line-height: var(--wlc-lh-body);
	color: var(--wlc-body);
	margin: 0 0 1.6em;
}

/* Body copy set in a display serif is unusual, and it is what the original
   did. It is beautiful and it is harder to read at length. To try the
   alternative, change --wlc-font-display to --wlc-font-label in the rule
   above and nothing else moves. */

.wlc-section h2 {
	font-family: var(--wlc-font-display);
	font-size: var(--wlc-size-section);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--wlc-ink);
	margin: 2em 0 0.6em;
}

.wlc-section h3 {
	font-family: var(--wlc-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--wlc-ink);
	margin: 1.8em 0 0.5em;
}

/* --------------------------------------------------------------------------
   Labels — the one sans in the system. Categories, buttons, "read more".
   -------------------------------------------------------------------------- */

.wlc-section .wlc-label,
.wlc-section .wp-block-post-terms,
.wlc-section .wp-block-read-more {
	font-family: var(--wlc-font-label);
	font-size: var(--wlc-size-label);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	color: var(--wlc-ink);
	text-decoration: none;
}

.wlc-section .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.18s ease;
}

.wlc-section .wp-block-post-terms a:hover,
.wlc-section .wp-block-post-terms a:focus-visible {
	border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   Meta — dates, read time, location
   -------------------------------------------------------------------------- */

.wlc-section .wp-block-post-date,
.wlc-section .wlc-meta {
	font-family: var(--wlc-font-display);
	font-size: var(--wlc-size-meta);
	line-height: 2;
	color: var(--wlc-meta);
	letter-spacing: 0;
	text-transform: none;
}

.wlc-section .wlc-meta > * + *::before {
	content: "·";
	margin: 0 0.6em;
	color: var(--wlc-hairline);
}

/* --------------------------------------------------------------------------
   Drop cap — restores the old [bigletter] shortcode
   -------------------------------------------------------------------------- */

.wlc-section .wlc-bigletter {
	display: block;
}

.wlc-section .wlc-bigletter::first-letter {
	float: left;
	font-family: var(--wlc-font-display);
	/*
	 * A statement rather than a large first letter.
	 *
	 * Grey, so it reads as ornament and does not compete with the headline
	 * for the darkest thing on the page; and set to hang, which is the part
	 * that makes it look drawn rather than typed.
	 *
	 * The numbers, on 15px text with a 28px line:
	 *   7em            = 105px, cap height about 73px
	 *   line-height .76 = a 79.8px box
	 *   margin-top -.07em = 7.35px above the first line's top
	 *   float height   = 79.8 - 7.35 = 72.5px, which wraps three lines (85px)
	 *   margin-left -.18em = 19px out past the left edge of the column
	 *
	 * The left margin is what makes it hang; the top margin is what lifts it
	 * off the first line. Both are in em of the cap's own size, so the whole
	 * arrangement scales together if the size is ever changed.
	 */
	font-size: 7em;
	line-height: 0.76;
	font-weight: 700;
	font-style: normal;
	color: var(--wlc-ink);
	margin: -0.07em 0.1em 0 -0.18em;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wlc-section .wlc-content,
.wlc-section .wp-block-post-content {
	max-width: var(--wlc-measure);
	margin-inline: auto;
	padding-inline: var(--wlc-gutter);
}

/* Full-bleed imagery, as the original had. */
.wlc-section .wp-block-post-featured-image,
.wlc-section .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.wlc-section .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.wlc-section .alignwide {
	max-width: var(--wlc-wide);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Rules — hairlines, not the portfolio's hard 4px bars. This is the main
   structural difference between the two halves of the site.
   -------------------------------------------------------------------------- */

.wlc-section hr,
.wlc-section .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wlc-hairline);
	margin: 3em auto;
	max-width: var(--wlc-measure);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Archive
   -------------------------------------------------------------------------- */

.wlc-section .wlc-archive {
	max-width: var(--wlc-wide);
	margin-inline: auto;
	padding-inline: var(--wlc-gutter);
}

.wlc-section .wlc-archive-header {
	text-align: center;
	padding: 4rem 0 3rem;
	border-bottom: 1px solid var(--wlc-hairline);
	margin-bottom: 3rem;
}

.wlc-section .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 3.5rem 2.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.wlc-section .wp-block-post-template > li > .wp-block-post-title {
	font-size: var(--wlc-size-section);
}

.wlc-section .wp-block-post-template img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 1.2rem;
}

.wlc-section .wp-block-post-excerpt__excerpt {
	font-family: var(--wlc-font-display);
	font-size: var(--wlc-size-body);
	line-height: var(--wlc-lh-body);
	color: var(--wlc-body);
}

/* --------------------------------------------------------------------------
   Links inside running text
   -------------------------------------------------------------------------- */

.wlc-section .wp-block-post-content a,
.wlc-section .wlc-content a {
	color: var(--wlc-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-hairline);
	transition: border-color 0.18s ease;
}

.wlc-section .wp-block-post-content a:hover,
.wlc-section .wlc-content a:focus-visible {
	border-bottom-color: var(--wlc-ink);
}

/* --------------------------------------------------------------------------
   Pull quotes
   -------------------------------------------------------------------------- */

.wlc-section blockquote,
.wlc-section .wp-block-quote {
	font-family: var(--wlc-font-display);
	font-size: 24px;
	line-height: 1.5;
	font-style: italic;
	color: var(--wlc-ink);
	border: 0;
	border-top: 1px solid var(--wlc-hairline);
	border-bottom: 1px solid var(--wlc-hairline);
	padding: 1.6em 0;
	margin: 2.4em 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive — the original's meaningful breakpoints were 576 / 768 / 992
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.wlc-section {
		--wlc-size-headline: 32px;
		--wlc-size-section: 24px;
		--wlc-track-headline: -0.03em;
		--wlc-gutter: 20px;
	}

	.wlc-section .wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.wlc-section .wlc-archive-header {
		padding: 2.5rem 0 2rem;
	}

	.wlc-section blockquote,
	.wlc-section .wp-block-quote {
		font-size: 20px;
	}
}

@media (max-width: 576px) {
	.wlc-section {
		--wlc-size-headline: 28px;
	}

	.wlc-section .wlc-bigletter::first-letter {
		font-size: 5.4em;
		margin-left: -0.08em;
	}
}

/* ==========================================================================
   Masthead
   --------------------------------------------------------------------------
   The blog's own header. The portfolio's is left-aligned sans in caps; this is
   centred serif. That contrast is the main signal that you have walked into a
   different place.
   ========================================================================== */

.wlc-section .wlc-masthead {
	border-bottom: 1px solid var(--wlc-hairline);
	text-align: center;
}

.wlc-section .wlc-wordmark {
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(38px, 6vw, 64px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wlc-ink);
	margin: 0.1em 0 0.35em;
}

.wlc-section .wlc-wordmark a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-tagline {
	font-family: var(--wlc-font-label);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wlc-meta);
	margin: 0;
}

/* The way back to the portfolio. Quiet, but always there. */
.wlc-section .wlc-backlink {
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 0.5em;
}

.wlc-section .wlc-backlink a {
	color: var(--wlc-meta);
	text-decoration: none;
	border: 0;
	transition: color 0.18s ease;
}

.wlc-section .wlc-backlink a:hover,
.wlc-section .wlc-backlink a:focus-visible {
	color: var(--wlc-ink);
}

.wlc-section .wlc-backlink-foot {
	margin: 3rem 0 4rem;
}


/* ==========================================================================
   Archive grid
   ========================================================================== */

.wlc-section .wlc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 4rem 2.5rem;
	list-style: none;
	margin: 3.5rem 0 0;
	padding: 0;
}

.wlc-section .wlc-grid > li {
	display: flex;
	flex-direction: column;
}

.wlc-section .wlc-card-image {
	margin: 0 0 1.1rem;
}

.wlc-section .wlc-card-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.wlc-section .wlc-card-terms {
	font-family: var(--wlc-font-label);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wlc-meta);
	margin: 0 0 0.7rem;
}

.wlc-section .wlc-card-terms a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-card-terms a:hover {
	color: var(--wlc-ink);
}

.wlc-section .wlc-card-title {
	font-family: var(--wlc-font-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.4px;
	margin: 0 0 0.6rem;
	text-wrap: balance;
}

.wlc-section .wlc-card-title a {
	color: var(--wlc-ink);
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-card-title a:hover,
.wlc-section .wlc-card-title a:focus-visible {
	color: var(--wlc-body);
}

.wlc-section .wlc-card-excerpt p {
	font-size: 14px;
	line-height: 1.75;
	margin: 0 0 0.9rem;
}

.wlc-section .wlc-card-date {
	font-family: var(--wlc-font-label);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wlc-meta);
	margin-top: auto;
}

.wlc-section .wlc-empty {
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: 17px;
	color: var(--wlc-meta);
	padding: 3.5rem 0;
}


/* ==========================================================================
   Pagination
   ========================================================================== */

.wlc-section .wlc-pagination {
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 1.4rem;
	margin: 5rem 0 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-pagination a {
	color: var(--wlc-meta);
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-pagination a:hover {
	color: var(--wlc-ink);
}

.wlc-section .wlc-pagination .current {
	color: var(--wlc-ink);
}


/* ==========================================================================
   Single post
   ========================================================================== */

.wlc-section .wlc-entry-header {
	max-width: 760px;
	margin-inline: auto;
}

.wlc-section .wlc-entry-terms {
	font-family: var(--wlc-font-label);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wlc-meta);
	margin: 0 0 1rem;
}

.wlc-section .wlc-entry-terms a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-entry-meta {
	font-family: var(--wlc-font-label);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wlc-meta);
	gap: 1.2rem;
	margin-top: 1.2rem;
}

.wlc-section .wlc-hero {
	margin: 0 0 3.5rem;
}

/* Full-bleed, but capped.
   A 1024x683 photo across a 1268px viewport renders 846px tall — taller than
   most screens, so the reader arrives at an image and nothing else. Capping at
   72vh keeps it generous while leaving the top of the article in view. */
.wlc-section .wlc-hero img {
	width: 100%;
	max-height: min(72vh, 720px);
	object-fit: cover;
	object-position: center;
	display: block;
}

.wlc-section .wlc-entry-tags {
	font-family: var(--wlc-font-label);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wlc-meta);
	max-width: var(--wlc-measure);
	margin: 2rem auto 0;
	padding-inline: var(--wlc-gutter);
}

.wlc-section .wlc-entry-tags a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-hairline);
}


/* ==========================================================================
   Responsive additions
   ========================================================================== */

@media (max-width: 768px) {
	.wlc-section .wlc-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.wlc-section .wlc-tagline {
		letter-spacing: 0.16em;
		font-size: 10px;
	}

	.wlc-section .wlc-hero {
		margin-bottom: 2.5rem;
	}
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wlc-section * {
		transition: none !important;
	}
}


/* ==========================================================================
   THE OPENER — ten layouts
   ==========================================================================

   Every post begins with the same ingredients: category, title, subtitle, date,
   place, photograph. The layout decides how they are arranged. The block in
   blocks.php emits one .wlc-opener with a modifier class; everything below is
   that modifier deciding the shape.
   ========================================================================== */

.wlc-section .wlc-opener {
	margin: 0 0 3.5rem;
}

.wlc-section .wlc-opener-words {
	max-width: var(--wlc-measure);
	margin: 0 auto;
	padding: 2rem var(--wlc-gutter) 2rem;
	text-align: center;
}

.wlc-section .wlc-entry-terms {
	margin: 0 0 1rem;
	font-family: var(--wlc-font-label);
	font-size: var(--wlc-size-meta);
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-entry-terms a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-entry-title {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: clamp(32px, 5vw, var(--wlc-size-headline));
	line-height: var(--wlc-lh-headline);
	letter-spacing: var(--wlc-track-headline);
	color: var(--wlc-ink);
}

/* The subtitle is the voice of the thing — the aside she would say out loud.
   Italic, warm, and deliberately not the same family as the label above it. */
.wlc-section .wlc-entry-subtitle {
	margin: 0.9rem 0 0;
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: clamp(17px, 2.4vw, 21px);
	line-height: 1.45;
	color: var(--wlc-body);
}

.wlc-section .wlc-entry-meta {
	margin: 1.4rem 0 0;
	font-family: var(--wlc-font-label);
	font-size: var(--wlc-size-meta);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-entry-place::before {
	content: "·";
	margin: 0 0.5em;
}

.wlc-section .wlc-entry-place a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-entry-intro {
	max-width: var(--wlc-measure);
	margin: 0 auto 2.5rem;
	padding: 0 var(--wlc-gutter);
}

.wlc-section .wlc-entry-intro p {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wlc-body);
	text-align: center;
}

/* --- The photograph itself --------------------------------------------- */

.wlc-section .wlc-hero {
	margin: 0;
}

.wlc-section .wlc-hero-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(72vh, 720px);
	object-fit: cover;
	object-position: center;
}

.wlc-section .wlc-hero figcaption {
	max-width: var(--wlc-measure);
	margin: 0.75rem auto 0;
	padding: 0 var(--wlc-gutter);
	font-family: var(--wlc-font-label);
	font-size: 12px;
	letter-spacing: 0.5px;
	text-align: center;
	color: var(--wlc-meta);
}

/* --- Title on the photo, and the postcard ------------------------------ */

.wlc-section .wlc-opener-frame {
	position: relative;
}

.wlc-opener--overlay .wlc-opener-frame::after,
.wlc-opener--postcard .wlc-opener-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.wlc-opener--overlay .wlc-hero-img,
.wlc-opener--postcard .wlc-hero-img {
	max-height: min(84vh, 860px);
}

.wlc-opener--overlay .wlc-opener-words,
.wlc-opener--postcard .wlc-opener-words {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding-bottom: 3rem;
}

.wlc-opener--overlay .wlc-entry-title,
.wlc-opener--postcard .wlc-entry-title,
.wlc-opener--overlay .wlc-entry-subtitle,
.wlc-opener--postcard .wlc-entry-subtitle,
.wlc-opener--overlay .wlc-entry-terms,
.wlc-opener--postcard .wlc-entry-terms,
.wlc-opener--overlay .wlc-entry-meta,
.wlc-opener--postcard .wlc-entry-meta {
	color: #fff;
}

.wlc-opener--overlay .wlc-entry-place a,
.wlc-opener--postcard .wlc-entry-place a {
	border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* The postmark: the place, stamped across the corner of the picture. */
.wlc-section .wlc-stamp {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 2;
	padding: 0.6rem 1rem;
	font-family: var(--wlc-font-label);
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.85);
	transform: rotate(-6deg);

	/* The stamp sits wherever the photograph happens to be light or dark. White
	   type alone vanished over a bright sky, so it carries its own ground: a
	   soft dark wash behind it, and a shadow on the type itself. */
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(2px);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* --- Side by side ------------------------------------------------------- */

.wlc-section .wlc-opener-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 3rem;
	max-width: var(--wlc-wide);
	margin: 0 auto;
	padding: 0 var(--wlc-gutter);
}

.wlc-opener--split .wlc-opener-words,
.wlc-opener--split .wlc-entry-intro {
	max-width: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

.wlc-opener--split .wlc-entry-intro p {
	text-align: left;
}

.wlc-opener--split .wlc-hero-img {
	max-height: 80vh;
}

/* --- Portrait ----------------------------------------------------------- */

.wlc-opener--portrait .wlc-hero {
	max-width: 620px;
	margin: 0 auto;
	padding: 0 var(--wlc-gutter);
}

.wlc-opener--portrait .wlc-hero-img {
	max-height: none;
	aspect-ratio: 4 / 5;
}

/* --- Edge to edge ------------------------------------------------------- */

.wlc-opener--wide .wlc-hero-img {
	max-height: none;
	object-fit: contain;
}

/* --- Letter: no photograph at all --------------------------------------- */

.wlc-opener--letter .wlc-opener-words {
	padding-top: 4rem;
	padding-bottom: 1rem;
}

.wlc-opener--letter .wlc-entry-title {
	font-size: clamp(34px, 6vw, 54px);
}

/* --- Two photographs ---------------------------------------------------- */

.wlc-section .wlc-opener-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	max-width: var(--wlc-wide);
	margin: 0 auto;
	padding: 0 var(--wlc-gutter);
}

.wlc-opener--duo .wlc-hero-img {
	aspect-ratio: 4 / 5;
	max-height: none;
}

/* --- Wordmark opener ---------------------------------------------------- */

.wlc-section .wlc-opener-wordmark {
	margin: 2rem 0 0;
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: clamp(28px, 4vw, 40px);
	text-align: center;
	letter-spacing: -0.02em;
	color: var(--wlc-deep);
}

.wlc-section .wlc-opener-wordmark a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-opener--wordmark .wlc-opener-words {
	padding-top: 1rem;
}


/* ==========================================================================
   THE SIGN-OFF
   ==========================================================================

   The whole conceit of the blog: a letter from wherever she happens to be.
   Every post ends the way she ends a letter.
   ========================================================================== */

.wlc-section .wlc-signoff {
	max-width: var(--wlc-measure);
	margin: 3.5rem auto 0;
	padding: 0 var(--wlc-gutter);
	text-align: center;
}

.wlc-section .wlc-signoff-line {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: 19px;
	color: var(--wlc-body);
}

.wlc-section .wlc-signoff-line a {
	color: inherit;
	border-bottom: 1px solid var(--wlc-hairline);
	text-decoration: none;
}

.wlc-section .wlc-signoff-name {
	margin: 0.4rem 0 0;
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1;
	color: var(--wlc-deep);
}


/* ==========================================================================
   SHOP THE POST
   ==========================================================================

   Affiliate items. The disclosure is part of the component, not an optional
   extra — a link that earns money has to say so, and burying that in a footer
   is not saying so.
   ========================================================================== */

.wlc-section .wlc-shop {
	max-width: var(--wlc-wide);
	margin: 4rem auto 0;
	padding: 2.5rem var(--wlc-gutter);
	border-top: 1px solid var(--wlc-hairline);
	border-bottom: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-shop-heading {
	margin: 0;
	font-family: var(--wlc-font-label);
	font-size: var(--wlc-size-label);
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	text-align: center;
	color: var(--wlc-ink);
}

.wlc-section .wlc-shop-disclosure {
	/*
	 * No bottom margin any more. The air above the pictures used to come from
	 * here, which was fine while the disclosure always printed — and stopped
	 * being fine on 19 Sep, when it became conditional and the heading ended up
	 * sitting on top of the photographs on every look with no links in it.
	 *
	 * The space belongs to the row of pictures, not to the sentence that may or
	 * may not be above it. See .wlc-shop-items below.
	 */
	margin: 0.6rem 0 0;
	font-family: var(--wlc-font-label);
	font-size: 12px;
	text-align: center;
	color: var(--wlc-meta);
}

.wlc-section .wlc-shop-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
	justify-content: center;
	/* The gap under the heading, wherever the heading ends. */
	gap: 2rem 1.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-shop-item a {
	display: block;
	text-decoration: none;
	border: 0;
	color: inherit;
}

.wlc-section .wlc-shop-img {
	display: block;
	width: 100%;
	height: auto; /* beats the width/height attributes WordPress prints */
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin-bottom: 0.75rem;
	transition: opacity 0.25s ease;
}

.wlc-section .wlc-shop-item a:hover .wlc-shop-img {
	opacity: 0.82;
}

.wlc-section .wlc-shop-title,
.wlc-section .wlc-shop-retailer,
.wlc-section .wlc-shop-price {
	display: block;
	text-align: center;
}

.wlc-section .wlc-shop-title {
	font-family: var(--wlc-font-label);
	font-size: 13px;
	line-height: 1.4;
	color: var(--wlc-ink);
}

.wlc-section .wlc-shop-retailer {
	margin-top: 0.2rem;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-shop-price {
	margin-top: 0.35rem;
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: 15px;
	color: var(--wlc-body);
}


/* ==========================================================================
   RELATED STORIES — "You Might Also Like"

   Design Three, "with the black rule", chosen by Cata 19 Sep 2026, then
   squared and enlarged at her request.

   Square photographs in a row, and under each one a white card with a 2px
   black keyline that rides up over the foot of the picture. The keyline is
   the point of the design: the card's top edge draws a black rule straight
   across the bottom of the photograph, and the white below it reads as a
   label pinned to the print rather than a caption sitting under it.

   THE ARITHMETIC, and why the strip breaks out of its column.

   .wlc-related lives inside .wlc-post-main, which carries 27.2px of padding
   on each side. Inside that padding the strip measured 651px at a 1522px
   viewport, which at a 30px gap left photographs of 181px. Squaring them at
   that width would have made them SMALLER, not larger — 181x181 against the
   old 181x263.

   So the strip steps out of the column's padding with a negative inline
   margin (the same trick the header and the full-width figures use, further
   down this file), taking it to 706px. At a 16px gap that is three columns
   of 224px: bigger than the old portraits were wide, with barely more than
   half the air between them. Which is what "a little larger, and the padding
   a bit smaller" asks for.

   The breakout is desktop-only. Below 901px the sidebar has collapsed and
   .wlc-post-main is the whole page; pulling out of its padding there would
   run the photographs into the edge of the screen.
   ========================================================================== */

.wlc-section .wlc-related {
	max-width: var(--wlc-wide);
	margin: 4rem auto 2rem;
	padding: 0;
}

@media (min-width: 901px) {

	/* Out of the column's padding — see the arithmetic above. */
	.wlc-section .wlc-related {
		margin-inline: calc(var(--wlc-col-pad) * -1);
	}
}

.wlc-section .wlc-related-heading {
	margin: 10px 0 30px;
	font-family: var(--wlc-font-label);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: #000;
}

/* Text in the middle, a rule running out to each edge. */
.wlc-section .wlc-related-heading span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.wlc-section .wlc-related-heading span::before,
.wlc-section .wlc-related-heading span::after {
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid #eee;
}

.wlc-section .wlc-related-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-related-item {
	min-width: 0;
}

.wlc-section .wlc-related-item a {
	display: block;
	text-decoration: none;
	border: 0;
	color: inherit;
}

.wlc-section .wlc-related-figure {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.wlc-section .wlc-related-img {
	display: block;
	width: 100%;
	height: auto; /* beats the width/height attributes WordPress prints */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.wlc-section .wlc-related-img--none {
	background: #f2f2f2;
}

.wlc-section .wlc-related-item a:hover .wlc-related-img {
	opacity: 0.85;
}

/* The white card with the black keyline, overlapping the photograph.
 *
 * It rides 34px up over the picture — about a seventh of a 224px square, the
 * same proportion the old 30px lap had against the old 263px portrait, so the
 * overlap reads the same at the new size.
 *
 * The words have to ride up with it or the overlap is wasted: generous top
 * padding would put the first line BELOW the edge of the photograph and leave
 * the white as an empty ledge. 14px of padding and no margin on the title puts
 * the first line inside the overlap, which is the whole point of it.
 */
.wlc-section .wlc-related-card {
	position: relative;
	z-index: 1;
	display: block;
	box-sizing: border-box;
	width: 88%;
	margin: -34px auto 0;
	padding: 14px 14px 12px;
	border: 2px solid var(--wlc-ink);
	background: #fff;
	text-align: center;
}

/*
 * The title in the display face, not the label face.
 *
 * It was set in Lexend Deca, copied off the old blog. That was the wrong way
 * round for this one: everywhere else on the blog a headline is Playfair and
 * the label face is reserved for dates, kickers and buttons. Three story
 * titles in the label face read as three captions.
 */
.wlc-section .wlc-related-title {
	display: block;
	margin: 0 0 8px;
	font-family: var(--wlc-font-display);
	font-size: 17px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.32;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wlc-ink);
}

.wlc-section .wlc-related-date {
	display: block;
	font-family: var(--wlc-font-label);
	font-size: 10px;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

@media (max-width: 700px) {

	.wlc-section .wlc-related-items {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* A narrower column takes a shallower lap and a smaller line. */
	.wlc-section .wlc-related-card {
		width: 92%;
		margin-top: -26px;
		padding: 11px 10px 10px;
	}

	.wlc-section .wlc-related-title {
		font-size: 15px;
		margin-bottom: 6px;
	}
}


/* ==========================================================================
   THE INDEX CARD — second photograph on hover
   ==========================================================================

   "Depending on what I want it to look like on the homepage." The second image
   sits on top of the first and fades in under the cursor. Where there is no
   cursor — a phone — the first image simply stays, which is correct.
   ========================================================================== */

.wlc-section .wlc-card-image {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 1.25rem;
	border: 0;
}

.wlc-section .wlc-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wlc-section .wlc-card-img--second {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

@media (hover: hover) {
	.wlc-section .wlc-card-image--swap:hover .wlc-card-img--second,
	.wlc-section .wlc-card-image--swap:focus-visible .wlc-card-img--second {
		opacity: 1;
	}
}

.wlc-section .wlc-card-subtitle {
	margin: 0.4rem 0 0;
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wlc-body);
}


/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */

@media (max-width: 782px) {

	.wlc-section .wlc-opener-split,
	.wlc-section .wlc-opener-duo {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.wlc-opener--split .wlc-opener-words {
		text-align: center;
	}

	.wlc-opener--split .wlc-entry-intro p {
		text-align: center;
	}

	/* Words over a photograph stop being readable on a small screen, so the
	   overlay layouts fall back to putting them underneath. */
	.wlc-opener--overlay .wlc-opener-words,
	.wlc-opener--postcard .wlc-opener-words {
		position: static;
		padding-bottom: 0;
	}

	.wlc-opener--overlay .wlc-opener-frame::after,
	.wlc-opener--postcard .wlc-opener-frame::after {
		display: none;
	}

	.wlc-opener--overlay .wlc-entry-title,
	.wlc-opener--postcard .wlc-entry-title,
	.wlc-opener--overlay .wlc-entry-subtitle,
	.wlc-opener--postcard .wlc-entry-subtitle {
		color: var(--wlc-ink);
	}

	.wlc-opener--overlay .wlc-entry-terms,
	.wlc-opener--postcard .wlc-entry-terms,
	.wlc-opener--overlay .wlc-entry-meta,
	.wlc-opener--postcard .wlc-entry-meta {
		color: var(--wlc-meta);
	}

	.wlc-section .wlc-stamp {
		top: 1rem;
		right: 1rem;
		padding: 0.45rem 0.75rem;
		font-size: 10px;
		letter-spacing: 2px;
	}
}


/* ==========================================================================
   THE MASTHEAD — measured off the live withlovecata.com
   ==========================================================================

   Wordmark 345px wide, centred. Navigation split either side of it. Social
   rail fixed down the left edge at 38px. Everything below is those numbers.
   ========================================================================== */

.wlc-section .wlc-masthead-bar {
	padding: 2.25rem var(--wlc-gutter) 2.75rem;
	background: var(--wlc-ground);
}

.wlc-section .wlc-masthead-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	max-width: 1280px;
	margin: 0 auto;
}

.wlc-section .wlc-masthead-centre {
	text-align: center;
}

.wlc-section .wlc-wordmark {
	display: inline-block;
	border: 0;
	text-decoration: none;
}

.wlc-section .wlc-wordmark-img {
	display: block;
	width: 345px;
	max-width: 100%;
	height: auto;
}

/* Fallback if the logo file is ever missing. */
.wlc-section .wlc-wordmark--type {
	font-family: var(--wlc-font-mark);
	font-style: italic;
	/* A serif sets larger than a script did at the same size, so these numbers
	   came down when the face changed. */
	font-size: clamp(34px, 5.2vw, 56px);
	letter-spacing: -0.005em;
	color: var(--wlc-deep);
}

.wlc-section .wlc-masthead-bar .wlc-tagline {
	margin: 0.35rem 0 0;
	font-family: var(--wlc-font-label);
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

/* --- the split navigation --------------------------------------------- */

/* The top-level bar only. Scoped with > so it cannot reach the lists inside
   the dropdowns, which stack vertically. */
.wlc-section .wlc-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-nav--left > ul  { justify-content: flex-end; }
.wlc-section .wlc-nav--right > ul { justify-content: flex-start; }

/* Top-level links only.
 *
 * This was written as `.wlc-nav a`, which reached every link inside the
 * dropdowns too — uppercasing them, tracking them out, and forcing them onto
 * a single line so the post titles ran across each other. Scoped to the bar
 * itself, the dropdowns are free to look like prose, which is what they are. */
.wlc-section .wlc-nav > ul > li > a {
	font-family: var(--wlc-font-label);
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wlc-ink);
	text-decoration: none;
	border: 0;
	white-space: nowrap;
}

.wlc-section .wlc-nav > ul > li > a:hover,
.wlc-section .wlc-nav > ul > li > a:focus-visible {
	color: var(--wlc-meta);
}

/* Everything inside a dropdown: ordinary, wrapping, readable. */
.wlc-section .wlc-subnav a {
	text-decoration: none;
	border: 0;
	white-space: normal;
	text-transform: none;
	letter-spacing: 0;
}

.wlc-section .wlc-nav-back a {
	color: var(--wlc-meta);
	letter-spacing: 1px;
	text-transform: none;
	font-style: italic;
}

/* Children appear on hover, as they did on the original. */
.wlc-section .wlc-nav-item {
	position: relative;
}

.wlc-section .wlc-subnav {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 40;
	display: flex;
	gap: 2.5rem;
	min-width: 13rem;
	padding: 1.75rem 2rem;
	margin: 0;
	transform: translateX(-50%) translateY(6px);
	background: var(--wlc-ground);
	border: 1px solid var(--wlc-hairline);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.07);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* A dropdown with photographs is wide, and wants to sit inside the window
   rather than hang off the edge when its parent is near one end of the bar. */
.wlc-section .wlc-has-mega > .wlc-subnav {
	width: min(60rem, calc(100vw - 4rem));
}

.wlc-section .wlc-nav-item:hover > .wlc-subnav,
.wlc-section .wlc-nav-item:focus-within > .wlc-subnav {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.wlc-section .wlc-subnav li {
	display: block;
	margin: 0;
}

.wlc-section .wlc-subnav a {
	display: block;
	padding: 0.4rem 1.25rem;
	font-size: 11px;
	letter-spacing: 1.2px;
	white-space: nowrap;
}

/* --- the social rail --------------------------------------------------- */

.wlc-section .wlc-social-rail {
	position: fixed;
	left: 6px;
	top: 50%;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	transform: translateY(-50%);
}

.wlc-section .wlc-social-rail a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	color: var(--wlc-meta);
	transition: color 0.2s ease;
}

.wlc-section .wlc-social-rail a:hover,
.wlc-section .wlc-social-rail a:focus-visible {
	color: var(--wlc-deep);
}

.wlc-section .wlc-social-rail svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}


/* ==========================================================================
   THE FEED — a magazine you scroll, not a contact sheet
   ==========================================================================

   1086px container, two 543px halves, images 700px tall. Alternating sides,
   with a full-width block every third post.
   ========================================================================== */

.wlc-section .wlc-archive {
	padding: 0 0 4rem;
}

.wlc-section .wlc-feed {
	max-width: 1086px;
	margin: 0 auto;
	padding: 0 var(--wlc-gutter);
}

.wlc-section .wlc-feed-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	column-gap: 3.5rem;
	margin-bottom: 5.5rem;
}

.wlc-section .wlc-feed-item--right .wlc-feed-figure { order: 2; }
.wlc-section .wlc-feed-item--right .wlc-feed-words  { order: 1; }

/* Every third one runs the full width, image above the words. */
.wlc-section .wlc-feed-item--full {
	grid-template-columns: 1fr;
	row-gap: 2.25rem;
}

.wlc-section .wlc-feed-item--full .wlc-feed-img {
	height: 500px;
}

.wlc-section .wlc-feed-item--full .wlc-feed-words {
	max-width: 543px;
	margin: 0 auto;
}

/* --- the photograph ---------------------------------------------------- */

.wlc-section .wlc-feed-figure {
	position: relative;
	display: block;
	overflow: hidden;
	border: 0;
}

.wlc-section .wlc-feed-img {
	display: block;
	width: 100%;
	height: 700px;
	object-fit: cover;
	object-position: center;
}

.wlc-section .wlc-feed-img--second {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

@media (hover: hover) {
	.wlc-section .wlc-feed-figure--swap:hover .wlc-feed-img--second,
	.wlc-section .wlc-feed-figure--swap:focus-visible .wlc-feed-img--second {
		opacity: 1;
	}
}

/* --- the words --------------------------------------------------------- */

.wlc-section .wlc-feed-words {
	text-align: center;
}

.wlc-section .wlc-feed-terms {
	margin: 0 0 1rem;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-feed-terms a {
	color: inherit;
	text-decoration: none;
	border: 0;
	margin: 0 0.35rem;
}

.wlc-section .wlc-feed-title {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: var(--wlc-size-headline);
	line-height: var(--wlc-lh-headline);
	letter-spacing: var(--wlc-track-headline);
	font-weight: 400;
	color: var(--wlc-ink);
}

.wlc-section .wlc-feed-title a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-feed-subtitle {
	margin: 0.9rem 0 0;
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: 17px;
	line-height: 1.5;
	color: var(--wlc-body);
}

.wlc-section .wlc-feed-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 1.25rem;
	margin: 1.25rem 0 0;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--wlc-meta);
}

.wlc-section .wlc-feed-meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-feed-more {
	margin: 1.5rem 0 0;
}

.wlc-section .wlc-feed-more a {
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wlc-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-ink);
	padding-bottom: 3px;
}

.wlc-section .wlc-feed-excerpt p {
	margin: 1.5rem 0 0;
	font-size: var(--wlc-size-body);
	line-height: 1.85;
	color: var(--wlc-body);
}

/* --- pagination -------------------------------------------------------- */

.wlc-section .wlc-pagination ul {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-pagination a,
.wlc-section .wlc-pagination .current {
	font-family: var(--wlc-font-label);
	font-size: 12px;
	letter-spacing: 1.5px;
	color: var(--wlc-meta);
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-pagination .current {
	color: var(--wlc-ink);
}


/* ==========================================================================
   NARROW SCREENS — the feed becomes one column, the rail moves to the foot
   ========================================================================== */

@media (max-width: 900px) {

	.wlc-section .wlc-masthead-inner {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.wlc-section .wlc-masthead-centre { order: -1; }

	.wlc-section .wlc-nav ul,
	.wlc-section .wlc-nav--left ul,
	.wlc-section .wlc-nav--right ul {
		justify-content: center;
		gap: 1.1rem;
	}

	.wlc-section .wlc-nav a { font-size: 11px; letter-spacing: 1px; }

	/* Hover menus are meaningless without a cursor: show the children inline. */
	.wlc-section .wlc-subnav { display: none; }

	.wlc-section .wlc-feed-item,
	.wlc-section .wlc-feed-item--full {
		grid-template-columns: 1fr;
		row-gap: 1.75rem;
		margin-bottom: 4rem;
	}

	.wlc-section .wlc-feed-item--right .wlc-feed-figure { order: 0; }
	.wlc-section .wlc-feed-item--right .wlc-feed-words  { order: 1; }

	.wlc-section .wlc-feed-img,
	.wlc-section .wlc-feed-item--full .wlc-feed-img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.wlc-section .wlc-feed-title { font-size: clamp(28px, 6vw, 38px); }

	/* The rail stops being a rail and becomes a row under the masthead. */
	.wlc-section .wlc-social-rail {
		position: static;
		flex-direction: row;
		justify-content: center;
		gap: 0.25rem;
		transform: none;
		padding-top: 1.25rem;
	}
}


/* ==========================================================================
   THE MASTHEAD, SET AS TYPE
   ==========================================================================

   Cata's preference over the logo file: the arrow back to the portfolio, the
   name in the display italic, the tagline in spaced small caps beneath. These
   rules come after the image-based ones above so they win without needing
   !important.
   ========================================================================== */

.wlc-section .wlc-masthead-centre {
	padding: 0.5rem 0;
}

/* The way back to the portfolio. Quiet, but always there. */
.wlc-section .wlc-masthead-centre .wlc-backlink {
	margin: 0 0 0.5rem;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	color: var(--wlc-meta);
}

.wlc-section .wlc-masthead-centre .wlc-backlink a {
	color: inherit;
	text-decoration: none;
	border: 0;
	transition: color 0.2s ease;
}

.wlc-section .wlc-masthead-centre .wlc-backlink a:hover,
.wlc-section .wlc-masthead-centre .wlc-backlink a:focus-visible {
	color: var(--wlc-ink);
}

.wlc-section .wlc-masthead-bar .wlc-wordmark--type {
	display: block;
	margin: 0;
	font-family: var(--wlc-font-mark);
	font-style: italic;
	font-weight: 400;
	/* 56px, measured against the menu either side: the largest setting that
	   still leaves about 50px of air before Beauty and Travel. 72px did not. */
	font-size: clamp(34px, 5.2vw, 56px);
	line-height: 1.12;
	letter-spacing: -0.005em;
	text-align: center;
	color: var(--wlc-deep);
}

.wlc-section .wlc-masthead-bar .wlc-wordmark--type a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-masthead-bar .wlc-tagline {
	margin: 0.6rem 0 0;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	color: var(--wlc-meta);
}

/* The centre column is three lines now, so the navigation either side wants
   aligning to the wordmark rather than to the middle of the whole stack. */
.wlc-section .wlc-masthead-inner {
	align-items: center;
}



/* ==========================================================================
   THE MEGA DROPDOWN
   ==========================================================================

   Copied in spirit from the original Lifestyle menu: up to three of Cata's
   own posts with their photographs, and the child categories listed beside
   them behind a hairline. Which posts appear is hers to choose, post by post
   — the old site decided for her.

   Categories with nothing featured fall back to a plain list, which is what
   Travel and Wellness looked like on the original.
   ========================================================================== */

.wlc-section .wlc-mega-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	flex: 1 1 auto;
}

.wlc-section .wlc-mega-post {
	display: block;
	border: 0;
	text-decoration: none;
	color: inherit;
}

/*
 * Square, and the same square every time.
 *
 * The photographs behind these are every shape she has ever shot — portraits,
 * landscapes, a phone snap — and a dropdown full of different rectangles reads
 * as a mistake. A fixed aspect ratio with the picture covering it means the
 * three cards are always identical boxes whatever is inside them; what stays
 * in the square is the part she marked in step 5 of the letterhead.
 */
.wlc-section .wlc-mega-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 0.75rem;
	transition: opacity 0.25s ease;
}

.wlc-section .wlc-mega-img--none {
	background: #f2f2f2;
}

.wlc-section .wlc-mega-post:hover .wlc-mega-img,
.wlc-section .wlc-mega-post:focus-visible .wlc-mega-img {
	opacity: 0.82;
}

.wlc-section .wlc-mega-title {
	display: block;
	font-family: var(--wlc-font-display);
	font-size: 15px;
	line-height: 1.35;
	color: var(--wlc-ink);
	text-transform: none;
	letter-spacing: 0;
}

.wlc-section .wlc-mega-date {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--wlc-font-label);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

/* --- the category column ---------------------------------------------- */

.wlc-section .wlc-mega-cats {
	flex: 0 0 auto;
	min-width: 11rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-has-mega .wlc-mega-cats {
	padding-left: 2.5rem;
	border-left: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-mega-cats li + li {
	border-top: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-mega-cats a {
	display: block;
	padding: 0.7rem 0;
	font-family: var(--wlc-font-display);
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wlc-body);
	white-space: nowrap;
}

.wlc-section .wlc-mega-cats a:hover,
.wlc-section .wlc-mega-cats a:focus-visible {
	color: var(--wlc-deep);
}


/* ==========================================================================
   THE ABOUT PAGE
   ========================================================================== */

.wlc-section .wlc-about-portrait {
	max-width: var(--wlc-measure);
	margin: 0 auto 2.5rem;
}

.wlc-section .wlc-about-portrait img {
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {

	.wlc-section .wlc-subnav,
	.wlc-section .wlc-has-mega > .wlc-subnav {
		display: none;
	}
}



/* ==========================================================================
   DROPDOWN CORRECTIONS
   ==========================================================================

   Three things were wrong on first sight of it:

   1. The rule that lays the top-level bar out in a row was also catching the
      category list inside the dropdown, so City guide / Destinations /
      Tips + Planning sat side by side instead of stacking. Scoping that rule
      with ">" fixed the cause; this makes the intent explicit.
   2. Being a row made the panel far too wide, so it reached across and sat
      over the wordmark.
   3. The masthead's centre column was painting on top of the open panel, so
      the tagline showed through it.
   ========================================================================== */

.wlc-section .wlc-mega-cats {
	display: block;
}

.wlc-section .wlc-mega-cats li {
	display: block;
	margin: 0;
}

/* A dropdown with no photographs is a plain column, and only as wide as its
   longest word needs. */
.wlc-section .wlc-nav-item:not(.wlc-has-mega) > .wlc-subnav {
	display: block;
	width: auto;
	min-width: 12rem;
	padding: 0.5rem 1.5rem;
}

.wlc-section .wlc-nav-item:not(.wlc-has-mega) .wlc-mega-cats {
	padding-left: 0;
	border-left: 0;
}

/* Above the wordmark, which sits in the middle of the same row. */
.wlc-section .wlc-subnav {
	z-index: 60;
}

.wlc-section .wlc-masthead-centre {
	position: relative;
	z-index: 10;
}

/*
 * The panel belongs to the page, not to the word that opens it.
 *
 * Anchored to the menu item, a 979px panel hung off whichever edge the item
 * was nearest: Beauty sits at the right of the bar, so its panel reached past
 * the left edge of the window and stopped in the middle of nothing. Anchoring
 * it to the masthead's own box instead means every panel starts or ends where
 * the menu does — flush left under Home, flush right under Reach Out — and
 * never touches the edge of the window.
 *
 * The item is made static so the panel resolves against the masthead box. That
 * costs nothing vertically: the item is stretched to the full height of that
 * box (see DROPDOWNS THAT DO NOT SIT ON THE WORDMARK below), so both have the
 * same top and the same height, and "100% of it" lands in the same place
 * either way — measured, not assumed.
 */
.wlc-section .wlc-masthead-inner {
	position: relative;
}

@media (min-width: 901px) {

	.wlc-section .wlc-nav-item.wlc-has-mega {
		position: static;
	}

	.wlc-section .wlc-nav--left .wlc-has-mega > .wlc-subnav {
		left: 0;
		right: auto;
	}

	.wlc-section .wlc-nav--right .wlc-has-mega > .wlc-subnav {
		left: auto;
		right: 0;
	}
}

.wlc-section .wlc-nav--left .wlc-has-mega > .wlc-subnav,
.wlc-section .wlc-nav--right .wlc-has-mega > .wlc-subnav {
	transform: translateX(0) translateY(6px);
}

.wlc-section .wlc-nav--left .wlc-has-mega:hover > .wlc-subnav,
.wlc-section .wlc-nav--left .wlc-has-mega:focus-within > .wlc-subnav,
.wlc-section .wlc-nav--right .wlc-has-mega:hover > .wlc-subnav,
.wlc-section .wlc-nav--right .wlc-has-mega:focus-within > .wlc-subnav {
	transform: translateX(0) translateY(0);
}



/* --- dropdown text, made to behave ------------------------------------- */

.wlc-section .wlc-mega-post,
.wlc-section .wlc-mega-title,
.wlc-section .wlc-mega-date {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* A grid cell will happily stretch to fit one long unbreakable line unless it
   is told not to. minmax(0,1fr) above sets the floor; this holds the ceiling. */
.wlc-section .wlc-mega-post {
	min-width: 0;
	max-width: 100%;
}

.wlc-section .wlc-mega-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The category column keeps its single-line links. */
.wlc-section .wlc-mega-cats a {
	white-space: nowrap;
}


/* ==========================================================================
   THE PANEL IS AS WIDE AS WHAT IS IN IT
   ==========================================================================

   The photograph panel was built at a fixed width on the assumption that three
   posts would always be featured. Travel has one, so the card sat in the first
   third and the remaining two thirds were empty white reaching to the edge of
   the screen.

   Fixed tracks laid out along the column axis mean the grid makes exactly as
   many columns as there are cards, and the panel around it sizes to them. One
   featured post gives a small panel; three give a wide one. Either way the
   panel stops where the content stops.
   ========================================================================== */

.wlc-section .wlc-has-mega > .wlc-subnav {
	width: auto;
	/* Now that the panel is anchored to the masthead box rather than to the
	   window, its ceiling is that box: on a narrow window the panel gives
	   before the page does, and it still lines up with the menu above it. */
	max-width: 100%;
}

.wlc-section .wlc-mega-posts {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: 200px;
	flex: 0 0 auto;
}

/* Below this the tracks would push the panel off the screen, so they give. */
@media (max-width: 1200px) {

	.wlc-section .wlc-mega-posts {
		grid-auto-columns: minmax(0, 160px);
	}
}


/* ==========================================================================
   THE ABOUT PAGE, IN THE BLOG'S OWN CLOTHES
   ==========================================================================

   It is an ordinary WordPress page, which is why it was being handed the
   portfolio's page template — masthead, journalism navigation and all. It has
   its own template now (see includes/templates.php); this is the dressing.

   Nothing here is new design. The title is a letter's title, the words sit on
   the same measure as a letter, and the photograph is given room to breathe
   the way the opening photograph of a post is.
   ========================================================================== */

.wlc-section .wlc-about .wlc-opener {
	margin-bottom: 1.5rem;
}

.wlc-section .wlc-about .wlc-entry-title {
	font-size: clamp(34px, 6vw, 54px);
}

/* The portrait is allowed past the reading measure — it is the first thing on
   the page and it should feel like arriving somewhere. */
.wlc-section .wlc-about .wlc-about-portrait {
	max-width: min(var(--wlc-wide), 100%);
	margin: 0 auto 3rem;
	padding-inline: var(--wlc-gutter);
}

.wlc-section .wlc-about .wlc-about-portrait img {
	width: 100%;
	height: auto;
}

/* The theme sets its own heavy sans on page titles. Not here. */
.wlc-section .wlc-about .wp-block-post-title {
	font-family: var(--wlc-font-display);
	font-weight: 400;
	letter-spacing: var(--wlc-track-headline);
	line-height: var(--wlc-lh-headline);
	color: var(--wlc-ink);
	border: 0;
}

.wlc-section .wlc-about .wlc-signoff {
	margin-top: 3rem;
}


/* ==========================================================================
   THE FOOT OF THE PAGE
   ==========================================================================

   Every page of the blog used to end with the portfolio's footer: the heavy
   sans wordmark, Terms & Conditions, Privacy Policy, the newsletter box. So a
   reader who scrolled to the end of a letter was told, at the last moment,
   that they had been somewhere else all along.

   This ends the page the way it opens. Same serif wordmark, same tagline in
   the same small caps, the sections listed flat, and the accounts in a row
   instead of down the edge. One quiet link back to the journalism, because the
   blog does live under catabalzano.com — but it is a door, not a second
   identity.
   ========================================================================== */

.wlc-section .wlc-foot {
	margin-top: 5rem;
	padding: 4rem var(--wlc-gutter) 3rem;
	border-top: 1px solid var(--wlc-hairline);
	background: var(--wlc-ground);
	text-align: center;
}

.wlc-section .wlc-foot-inner {
	max-width: var(--wlc-wide);
	margin: 0 auto;
}

.wlc-section .wlc-foot-mark {
	margin: 0;
	font-family: var(--wlc-font-mark);
	/* Held at the ratio to the masthead it has always had, 0.64. */
	font-size: clamp(26px, 3.6vw, 36px);
	line-height: 1.12;
}

.wlc-section .wlc-foot-mark a {
	color: var(--wlc-ink);
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-foot-tag {
	margin: 0.6rem 0 0;
	font-family: var(--wlc-font-label);
	font-size: var(--wlc-size-meta);
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	color: var(--wlc-meta);
}

/* --- the sections, listed flat ----------------------------------------- */

.wlc-section .wlc-foot-nav {
	margin-top: 2.5rem;
}

.wlc-section .wlc-foot-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-foot-nav li {
	margin: 0;
}

.wlc-section .wlc-foot-nav a {
	font-family: var(--wlc-font-label);
	font-size: var(--wlc-size-meta);
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	color: var(--wlc-body);
	text-decoration: none;
	border: 0;
	white-space: nowrap;
}

.wlc-section .wlc-foot-nav a:hover,
.wlc-section .wlc-foot-nav a:focus-visible {
	color: var(--wlc-deep);
}

/* --- the accounts, in a row -------------------------------------------- */

.wlc-section .wlc-foot-socials {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.wlc-section .wlc-foot-socials a {
	display: block;
	border: 0;
	line-height: 0;
	color: var(--wlc-meta);
}

.wlc-section .wlc-foot-socials svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.wlc-section .wlc-foot-socials a:hover,
.wlc-section .wlc-foot-socials a:focus-visible {
	color: var(--wlc-ink);
}

/* --- the small print ---------------------------------------------------- */

.wlc-section .wlc-foot-fine {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 2rem;
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--wlc-hairline);
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

/* The designer's credit sits on the same bottom line as the copyright, and its
   link is dressed exactly like the door back to the journalism — one hairline,
   lifted on hover. A credit should read as part of the small print, not as a
   second call to action. */
.wlc-section .wlc-foot-portfolio,
.wlc-section .wlc-foot-credit-link {
	color: var(--wlc-meta);
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-hairline);
	padding-bottom: 2px;
}

.wlc-section .wlc-foot-portfolio:hover,
.wlc-section .wlc-foot-portfolio:focus-visible,
.wlc-section .wlc-foot-credit-link:hover,
.wlc-section .wlc-foot-credit-link:focus-visible {
	color: var(--wlc-ink);
	border-bottom-color: currentColor;
}

@media (max-width: 600px) {

	.wlc-section .wlc-foot {
		padding-top: 3rem;
	}

	.wlc-section .wlc-foot-nav ul {
		gap: 0.5rem 1.25rem;
	}
}


/* ==========================================================================
   THE ABOUT PAGE, MATCHED TO THE ORIGINAL
   ==========================================================================

   Built from the live page rather than from guesswork. What it does:

   - opens on two lines of type and nothing else — "This is my intention" over
     "from whichever place in the world I may be" — with a lot of air above
   - then the photograph, wide
   - then the words, set in the sans rather than the display serif the posts
     use, which is what the original does here
   - the second passage is a quotation: indented from the left and justified

   The page's filing name, "About me", does not appear on the page. It never
   did on the original either; it is what the page is called, not what it says.
   ========================================================================== */

/*
 * Cata, 19 Sep: "the space between the logo and the top of the image is waaay
 * too big."
 *
 * It was three gaps stacked: 3rem of padding on the page, 4rem of top margin
 * on the photograph, and the masthead's own space below it — about 112px
 * before anything had happened. The page's own padding comes down, and the
 * first thing in the writing loses its top margin entirely, because the space
 * above the first element on a page is the page's job, not the element's.
 */
.wlc-section .wlc-about {
	padding-top: 1.6rem;
}

/*
 * Nothing in the writing carries space above it when it is the first thing.
 *
 * COUNT THE CLASSES BEFORE EDITING THIS. The rule it has to beat is
 * `.wlc-about .wp-block-post-content > figure.wp-block-image`, which is four
 * classes and a type. A plain `> *:first-child` is four classes and a
 * pseudo-class — one type selector short — and loses in silence, which is
 * exactly what it did the first time this was written.
 */
.wlc-section .wlc-about .wp-block-post-content > *:first-child,
.wlc-section .wlc-about .wp-block-post-content > figure.wp-block-image:first-child,
.wlc-section .wlc-about .wp-block-post-content > p:first-child {
	margin-top: 0;
}

.wlc-section .wlc-about .wlc-about-title {
	max-width: var(--wlc-wide);
	margin: 0 auto;
	padding: 0 var(--wlc-gutter);
	font-family: var(--wlc-font-display);
	/*
	 * Cata, 19 Sep: "the headline font is massive. make it a bit smaller."
	 * It was 68px at a desktop width, which is larger than a letter's own
	 * headline (44px) and made the About page shout louder than any story on
	 * the blog. 54px keeps it the biggest thing on its own page without
	 * outranking the whole publication.
	 */
	font-size: clamp(32px, 4.4vw, 54px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -1px;
	color: var(--wlc-ink);
	text-align: center;
	text-wrap: balance;
}

.wlc-section .wlc-about .wlc-about-standfirst {
	max-width: var(--wlc-wide);
	/*
	 * Air under it. It had none: margin-bottom was 0, so the first line of the
	 * writing began directly beneath the subtitle and the two read as one
	 * paragraph in two sizes. The drop cap makes it worse, because it lifts
	 * itself a few pixels above the line it belongs to.
	 */
	margin: 1.2rem auto 2.8rem;
	padding: 0 var(--wlc-gutter);
	font-family: var(--wlc-font-display);
	font-size: clamp(18px, 2.2vw, 26px);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wlc-ink);
	text-align: center;
}

/* The photograph, given the width the original gives it. */
.wlc-section .wlc-about .wlc-about-portrait {
	max-width: min(1460px, 100%);
	margin: 4rem auto 3.5rem;
	padding-inline: var(--wlc-gutter);
}

.wlc-section .wlc-about .wlc-about-portrait img {
	width: 100%;
	height: auto;
}

/* --- the words --------------------------------------------------------- */

/*
 * The running text, in the blog's own body face.
 *
 * It used to be set in Lexend Deca — the label face — at up to 18px, in the
 * ink colour, justified, across a 1460px column. Cata, 19 Sep: "The font is
 * also bold (i think — it all looks really thick)." Nothing here was bold. It
 * was four things at once, each of them adding weight to the page:
 *
 *   the label face, drawn for navigation and small caps, not for paragraphs
 *   #222 ink rather than the #525252 every letter on the blog is set in
 *   justification, which packs the words and blocks the column solid
 *   a 1248px measure, so every line ran on and on
 *
 * So it is the letters' setting now — Work Sans, the body colour, ragged
 * right — one step larger than a letter and on a slightly wider measure,
 * because this page carries no sidebar and is meant to read as her talking
 * rather than as an article.
 */
.wlc-section .wlc-about .wp-block-post-content p {
	font-family: var(--wlc-font-body);
	font-size: 16px;
	line-height: 30px;
	color: var(--wlc-body);
}

/*
 * The measure — on the sentences, not on the column.
 *
 * 1460px is not a measure, it is a wall. Typographic advice is 45–75
 * characters a line; at 16px Work Sans, 760px lands at about 68.
 *
 * But the limit belongs to the words alone. Capping the container caps the
 * photograph with it, and a portrait squeezed into a reading measure is a
 * thumbnail. So the container keeps the width of the page and each paragraph
 * takes its own 760px, centred.
 */
.wlc-section .wlc-about .wp-block-post-content {
	max-width: min(1460px, 100%);
	margin-inline: auto;
	padding-inline: var(--wlc-gutter);
}

.wlc-section .wlc-about .wp-block-post-content > p,
.wlc-section .wlc-about .wp-block-post-content > ul,
.wlc-section .wlc-about .wp-block-post-content > ol,
.wlc-section .wlc-about .wp-block-post-content > blockquote {
	max-width: 760px;
	margin-inline: auto;
}

/*
 * Any photograph in the writing, at the width of the page.
 *
 * Not only .wlc-about-portrait. That class is written by the importer and by
 * the repair, and a photograph Cata adds herself in the editor will not have
 * it — which is exactly what happened on 19 Sep, when one put back by hand
 * came out at the reading measure and sat between two paragraphs. The class
 * is now a convenience, not a requirement.
 */
.wlc-section .wlc-about .wp-block-post-content > figure.wp-block-image {
	max-width: min(1460px, 100%);
	margin: 4rem auto 3.5rem;
}

.wlc-section .wlc-about .wp-block-post-content > figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/*
 * Quotations on this page are the blog's quotations. See HIGHLIGHTED QUOTES.
 *
 * There used to be three rules here dressing a blockquote as an indented
 * passage in body type. They were not a design — they were a workaround. The
 * imported About page arrived with her second paragraph wrongly wrapped in a
 * <blockquote>, and these rules made that look like a paragraph rather than a
 * quotation. The page is real blocks now, that paragraph is a paragraph, and
 * the workaround was the only thing standing between a real quote and the
 * house style.
 */

.wlc-section .wlc-about .wlc-backlink-foot {
	margin-top: 4rem;
}

@media (max-width: 700px) {

	.wlc-section .wlc-about {
		padding-top: 1.5rem;
	}

	.wlc-section .wlc-about .wlc-about-portrait {
		margin: 2.5rem auto;
	}

}


/* ==========================================================================
   ONE SIZE ON THE ABOUT PAGE
   ==========================================================================

   The page came out in two different sizes and this is why: her first
   paragraph is not a paragraph. It is wrapped in the old [bigletter]
   shortcode, and the page builder that used to run this page wraps everything
   it touches in a <div class="wpb-content-wrapper">. So the opening passage is
   loose text inside a div, while the rest of the page is ordinary <p> tags.

   Every rule written for this page addressed paragraphs. The opening passage
   was not one, so it inherited the portfolio theme's 30px DM Sans and towered
   over everything beneath it.

   Sizing the container rather than the tags fixes it at the root: whatever
   shape the old builder left behind, it is one size now.
   ========================================================================== */

.wlc-section .wlc-about .wp-block-post-content,
.wlc-section .wlc-about .wpb-content-wrapper,
.wlc-section .wlc-about .wlc-bigletter,
.wlc-section .wlc-about .wp-block-post-content p,
.wlc-section .wlc-about .wp-block-post-content li {
	font-family: var(--wlc-font-body);
	font-size: 16px;
	line-height: 30px;
	color: var(--wlc-body);
}

/* The wrapper is the builder's, not ours — it should add nothing. */
.wlc-section .wlc-about .wpb-content-wrapper {
	margin: 0;
	padding: 0;
}

/* Space between the opening passage and the quotation that follows it, which
   the missing </p> would otherwise have provided. */
.wlc-section .wlc-about .wlc-bigletter {
	display: block;
	margin-bottom: 1.6em;
}

/* ==========================================================================
   ONE DROP CAP, NOT TWO — 19 SEP 2026
   ==========================================================================

   Cata: "why are there 2 dropcaps???"

   Because she split the opening paragraph in two, and splitting a block in
   the editor copies its classes to both halves. Both halves came out carrying
   wlc-bigletter, and wlc-bigletter is what draws the cap. Nothing was broken;
   the rule was simply answering twice.

   The cap belongs to the first paragraph of the page and to nothing else, so
   any wlc-bigletter that FOLLOWS another one gives its first letter back.
   The general sibling combinator is doing the work: it matches every one
   except the first, however many there turn out to be, and it keeps working
   the next time she splits a paragraph — which she will, because that is what
   writing is.

   Resetting each property by name rather than reaching for `all: unset`:
   `all` on ::first-letter also throws away the inherited font, and the letter
   comes back in the browser's default serif.
   ========================================================================== */

.wlc-section .wlc-about .wlc-bigletter ~ .wlc-bigletter::first-letter,
.wlc-section .wlc-post-body .wlc-bigletter ~ .wlc-bigletter::first-letter {
	float: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}


/* ==========================================================================
   ONE COLUMN, BOTH EDGES
   ==========================================================================

   The second passage was arriving as a <blockquote>, which is why it started
   further in than the first and looked like a different, narrower column. It
   is not a quotation — it is the second half of what she is saying — so it
   gets no indent, and every passage on the page now begins and ends on the
   same two lines.

   Both edges flush, both paragraphs. The only thing that stays centred is the
   sign-off, because that is how a letter ends.
   ========================================================================== */

/*
 * THE DEFAULT ALIGNMENT IS INHERITED, NOT ASSERTED.
 *
 * This rule used to name the paragraphs as well as the container, and that one
 * decision cost Cata three separate bugs in one afternoon: the subtitle sat
 * left, "With love, Cata" sat left, and the Download Media Kit button sat
 * left. Every time, the element carried a perfectly good centring rule and
 * lost to THIS one, because a rule naming a tag is more specific than a rule
 * naming only classes, and the fix I applied each time only rescued that one
 * element.
 *
 * Setting it on the container alone ends the whole class of bug. The
 * paragraphs are not TOLD to be left-aligned; they inherit it. An inherited
 * value loses to any rule that matches the element directly, however weak, so
 * every exception below — and every alignment she picks in the editor — simply
 * works. No specificity arithmetic, and nothing to lose next time.
 *
 * DO NOT add `p`, `li` or any other tag back to this selector.
 */
.wlc-section .wlc-about .wp-block-post-content,
.wlc-section .wlc-about .wpb-content-wrapper {
	text-align: left;
}

/*
 * The sign-off, and the two lines that open the page, are not running text.
 *
 * READ THE SELECTORS BEFORE CHANGING THEM. This rule used to be written as
 * `.wlc-section .wlc-about .wlc-about-standfirst` — three classes — and the
 * paragraph rule above it is `.wlc-section .wlc-about .wp-block-post-content p`
 * — three classes AND a tag. The paragraph rule is more specific, so it won,
 * and the standfirst was justified and set in the wrong face no matter what
 * this rule said. That is exactly what Cata was looking at when she said the
 * subtitle was "all the way to the left": it was not left-aligned, it was
 * justified, which on a single short line is the same picture.
 *
 * So the exceptions carry the container in their selector too. They are now
 * at least as specific as the rule they have to beat, and they come after it.
 */
.wlc-section .wlc-about .wp-block-post-content p.wlc-about-title,
.wlc-section .wlc-about .wp-block-post-content p.wlc-about-standfirst,
.wlc-section .wlc-about .wlc-about-title,
.wlc-section .wlc-about p.wlc-about-standfirst,
.wlc-section .wlc-about .wlc-backlink-foot,
.wlc-section .wlc-about .cb-mediakit {
	text-align: center;
}

/*
 * AND WHATEVER CATA SETS IN THE EDITOR.
 *
 * 19 Sep, second time in one afternoon that this trap has been sprung. She
 * centred "With love, Cata" in the editor, the block duly came out carrying
 * has-text-align-center — and it still sat on the left, because WordPress
 * writes that class into a rule of its own that is only two classes strong,
 * and the ragged-left rule above is three classes and a tag.
 *
 * So the alignment she chooses beats the default the page sets. Anything else
 * makes the editor's alignment buttons look broken, which is worse than any
 * particular alignment being wrong.
 *
 * "With love, Cata" used to be centred by p:last-of-type instead. That stopped
 * working the moment the media-kit button arrived, because the button is a
 * paragraph too, and it is now the last one. A rule that depends on what
 * happens to come last is a rule waiting to break; this depends on what she
 * actually asked for.
 */
.wlc-section .wlc-about .wp-block-post-content p.has-text-align-center,
.wlc-section .wlc-about .wp-block-post-content .has-text-align-center {
	text-align: center;
}

.wlc-section .wlc-about .wp-block-post-content p.has-text-align-right,
.wlc-section .wlc-about .wp-block-post-content .has-text-align-right {
	text-align: right;
}

.wlc-section .wlc-about .wp-block-post-content p.has-text-align-left,
.wlc-section .wlc-about .wp-block-post-content .has-text-align-left {
	text-align: left;
}

/* And the standfirst keeps its own face and size against the same rule. */
.wlc-section .wlc-about p.wlc-about-standfirst,
.wlc-section .wlc-about .wp-block-post-content p.wlc-about-standfirst {
	font-family: var(--wlc-font-display);
	font-size: clamp(18px, 2.2vw, 26px);
	line-height: 1.4;
	color: var(--wlc-ink);
}

/* On a narrow screen justification opens rivers of white space between words,
   so below this it reverts to a normal ragged right. */
/* ==========================================================================
   THE MEDIA KIT BUTTON — 19 SEP 2026

   Cata: "the 'download media kit' button/link is unaesthetic and ugly. make
   it pretty and on brand."

   It is not the blog's button. The portfolio adds it to this page as
   <a class="cb-btn cb-mediakit-btn">, and the portfolio's stylesheet — which
   is what would give cb-btn its padding and its shape — is not what dresses
   the blog. So it arrived as white letters on a black ground with no padding
   at all: a word with a black highlighter through it.

   Rather than reach into the portfolio's plugin, the blog dresses it here, in
   the blog's own button language: the same outlined rule, label face, 11px and
   1.2px of tracking as "Read more" in the sidebar, inverting on hover. Two
   buttons on one site should not be two designs.

   The selector is deliberately narrow — .wlc-about only — so nothing on the
   portfolio's own pages is touched by this.
   ========================================================================== */

.wlc-section .wlc-about .cb-mediakit,
.wlc-section .wlc-about .wp-block-post-content p.cb-mediakit {
	margin: 3.5rem 0 0;
	text-align: center;
}

.wlc-section .wlc-about .cb-mediakit-btn,
.wlc-section .wlc-about a.cb-btn {
	display: inline-block;
	padding: 13px 30px;
	border: 1px solid var(--wlc-ink);
	border-radius: 0;
	background: var(--wlc-ground);

	font-family: var(--wlc-font-label);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.2px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wlc-ink);

	transition: background-color 0.18s ease, color 0.18s ease;
}

.wlc-section .wlc-about .cb-mediakit-btn:hover,
.wlc-section .wlc-about .cb-mediakit-btn:focus-visible,
.wlc-section .wlc-about a.cb-btn:hover,
.wlc-section .wlc-about a.cb-btn:focus-visible {
	background: var(--wlc-ink);
	color: var(--wlc-ground);
}


/* The same indent, held off in the stylesheet too, so the page is right from
   the moment the plugin is installed rather than from the next admin visit.
   Shouting is warranted here: an inline style cannot be overridden otherwise. */
.wlc-section .wlc-about .wp-block-post-content p[style],
.wlc-section .wlc-about .wpb-content-wrapper > p[style] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* ==========================================================================
   THE SINGLE POST, MEASURED OFF THE ORIGINAL
   ==========================================================================

   Everything below was taken from the live Bluehost site with a ruler rather
   than by eye. At a 1378px window the old blog lays a post out like this:

     container            1140px, centred
     column padding       27.2px each side

     With the sidebar  →  words 706px on the left, sidebar 380px on the right,
                          photograph 680px
     Full width        →  words 724px centred inside 1086px, photograph 1086px
     Framed            →  words 724px centred inside 1086px, photograph 1000px

   And the type:

     title      Playfair Display 50/62, 700, -1px, centred
     subtitle   Playfair Display 16, 400, centred
     category   Playfair Display 13, centred
     meta       Playfair Display 13, centred
     body       Work Sans 15/28, #525252, ranged left

   The body face matters more than it sounds: the posts here had been set in
   Playfair, a display serif, which is why they read as a different publication
   from the original even where the widths happened to match.
   ========================================================================== */

:root {
	--wlc-font-body: "Work Sans", "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--wlc-container: 1140px;
	--wlc-col-pad:   27.2px;
}

/* --- the frame --------------------------------------------------------- */

.wlc-section .wlc-single {
	padding: 0;
}

.wlc-section .wlc-post-row {
	display: flex;
	align-items: flex-start;
	max-width: var(--wlc-container);
	margin: 0 auto;
	padding: 0;
}

.wlc-section .wlc-post-main {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	padding: 0 var(--wlc-col-pad);
}

/* Beside the sidebar the column is two thirds of the page, exactly as the
   twelve-column grid the old theme was built on made it. */
.wlc-section.wlc-layout-sidebar .wlc-post-main {
	flex: 0 0 66.6667%;
	max-width: 66.6667%;
}

.wlc-section .wlc-post-side {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	padding: 0 var(--wlc-col-pad);
}

/* --- the photograph above the title ------------------------------------ */

.wlc-section .wlc-feat {
	margin: 0 auto 12.8px;
	padding: 0;
	text-align: center;
}

.wlc-section .wlc-feat img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Full width: the photograph fills the column. */
.wlc-section.wlc-layout-full .wlc-feat {
	max-width: 100%;
}

/* Framed: inset and centred — 1000 of the 1086. */
.wlc-section.wlc-layout-framed .wlc-feat {
	max-width: 92.08%;
}

/* Beside the sidebar: 680 of the 706. */
.wlc-section.wlc-layout-sidebar .wlc-feat {
	max-width: 96.3%;
}

.wlc-section .wlc-feat figcaption {
	margin-top: 0.6rem;
	font-family: var(--wlc-font-body);
	font-size: 12px;
	color: var(--wlc-meta);
}

/* --- the header -------------------------------------------------------- */

.wlc-section .wlc-post-header {
	padding: 40px var(--wlc-col-pad);
	text-align: center;
}

.wlc-section .wlc-post-cats {
	margin: 0 0 0.75rem;
	font-family: var(--wlc-font-display);
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--wlc-meta);
}

.wlc-section .wlc-post-cats a {
	color: inherit;
	text-decoration: none;
	border: 0;
	margin: 0 0.35em;
}

.wlc-section .wlc-post-cats a:hover,
.wlc-section .wlc-post-cats a:focus-visible {
	color: var(--wlc-ink);
}

.wlc-section .wlc-post-title {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: clamp(32px, 3.7vw, 50px);
	line-height: 1.06;
	font-weight: 400;
	letter-spacing: var(--wlc-track-headline);
	color: var(--wlc-ink);
	text-wrap: balance;
}

.wlc-section .wlc-post-subtitle {
	margin: 0.9rem 0 0;
	font-family: var(--wlc-font-display);
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--wlc-body);
}

.wlc-section .wlc-post-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.6rem;
	margin: 1.4rem 0 0;
	font-family: var(--wlc-font-display);
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--wlc-meta);
}

.wlc-section .wlc-post-meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-post-meta a:hover,
.wlc-section .wlc-post-meta a:focus-visible {
	color: var(--wlc-ink);
}

/* --- the words --------------------------------------------------------- */

.wlc-section .wlc-post-body {
	padding: 30px 0;
}

.wlc-section .wlc-post-body .wp-block-post-content {
	max-width: 724px;
	margin: 0 auto;
	padding: 0;
}

/* Beside the sidebar the words already have their column; they do not narrow
   a second time. */
.wlc-section.wlc-layout-sidebar .wlc-post-body .wp-block-post-content {
	max-width: none;
}

/*
 * THE DEFAULT ALIGNMENT IS INHERITED, NOT ASSERTED. AGAIN.
 *
 * text-align:left used to live on this rule, and it beat every alignment Cata
 * set in the editor, because a selector naming a tag outranks the class
 * WordPress writes for a centred block. She centred a list of skincare brands
 * in a letter, it came out left, and she was right to call it unacceptable.
 *
 * This is the same fault that produced three bugs on the About page earlier
 * the same day. I fixed it there and did not check whether the letters had
 * the identical rule. They did. So: on the container, inherited by everything
 * inside it, where any rule matching an element directly — including the
 * editor's own — simply wins.
 *
 * DO NOT put text-align back on this selector, or on any selector in this
 * file that names p, li or a heading inside the writing.
 */
.wlc-section .wlc-post-body {
	text-align: left;
}

.wlc-section .wlc-post-body p,
.wlc-section .wlc-post-body li,
.wlc-section .wlc-post-body .wlc-bigletter {
	font-family: var(--wlc-font-body);
	font-size: 15px;
	line-height: 28px;
	color: var(--wlc-body);
}

/*
 * And what she chooses in the editor, said out loud as well as inherited.
 *
 * The inheritance above is what makes this work, but this is the seatbelt: if
 * anything in this file ever grows a tag-bearing alignment rule again, these
 * still outrank it.
 */
.wlc-section .wlc-post-body .has-text-align-center {
	text-align: center;
}

.wlc-section .wlc-post-body .has-text-align-right {
	text-align: right;
}

.wlc-section .wlc-post-body .has-text-align-left {
	text-align: left;
}

.wlc-section .wlc-post-body p {
	margin: 0 0 32px;
}

.wlc-section .wlc-post-body img {
	max-width: 100%;
	height: auto;
}

.wlc-section .wlc-post-intro {
	max-width: 724px;
	margin: 0 auto;
	font-family: var(--wlc-font-body);
	font-size: 17px;
	line-height: 30px;
	color: var(--wlc-ink);
	text-align: center;
}

/* --- the [gallery] shortcode -------------------------------------------- */

/*
 * The heart of why the Mexico City post looked disorganised. WordPress's own
 * gallery shortcode emits .gallery / .gallery-item and leaves the styling to
 * the theme; the old theme styled it and this one never had. So a two-column
 * gallery arrived as a stack of full-width pictures.
 *
 * Measured: half the column each, 15px between, 22.5px below.
 */
.wlc-section .gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
	padding: 0;
}

.wlc-section .gallery-item {
	display: block;
	float: none;
	margin: 0 0 22.5px;
	padding: 0 15px 0 0;
	width: 100%;
	text-align: left;
}

.wlc-section .gallery-columns-2 .gallery-item { width: 50%; }
.wlc-section .gallery-columns-3 .gallery-item { width: 33.3333%; }
.wlc-section .gallery-columns-4 .gallery-item { width: 25%; }
.wlc-section .gallery-columns-5 .gallery-item { width: 20%; }
.wlc-section .gallery-columns-6 .gallery-item { width: 16.6667%; }

.wlc-section .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.wlc-section .gallery-caption {
	margin: 0.5rem 0 0;
	font-family: var(--wlc-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--wlc-meta);
}

/* --- the sidebar ------------------------------------------------------- */

.wlc-section .wlc-side-block {
	margin-bottom: 3rem;
}

.wlc-section .wlc-side-title {
	margin: 0 0 1.2rem;
	font-family: var(--wlc-font-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wlc-ink);
}

/*
 * THE SEARCH BOX — S2, "boxed field, black button", 19 Sep 2026
 *
 * Chosen by Cata from five. A field in a hairline box with the question as its
 * placeholder, and under it one solid black button. No heading over the top:
 * the placeholder says what the box is for, and a heading as well as a
 * placeholder as well as a button is the word "search" three times in one
 * corner of the page — which was the complaint that started this.
 *
 * The placeholder is styled explicitly. Browsers default it to a grey of their
 * own choosing, and since the placeholder is the only thing in this block that
 * is ever read, it cannot be left to them.
 */

.wlc-section .wlc-side-form {
	display: block;
}

.wlc-section .wlc-side-form input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	border: 1px solid var(--wlc-hairline);
	border-radius: 0;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;

	font-family: var(--wlc-font-display);
	font-size: 16px;
	font-style: italic;
	line-height: 1.3;
	color: var(--wlc-ink);
}

.wlc-section .wlc-side-form input[type="search"]::placeholder {
	color: var(--wlc-meta);
	opacity: 1;            /* Firefox dims placeholders by default. */
}

/* The box darkens while you are typing in it. */
.wlc-section .wlc-side-form input[type="search"]:focus {
	outline: none;
	border-color: var(--wlc-ink);
}

/*
 * And .screen-reader-text defined here rather than borrowed.
 *
 * It is a WordPress convention, but it is the THEME that normally provides it,
 * and this blog is not the portfolio theme's business. If the theme ever stops
 * defining it, the search button — which is meant to be inaudible furniture
 * for screen readers — appears in the middle of the sidebar. Not worth the
 * risk of a class we do not own.
 */
.wlc-section .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * The button. Solid black, the full width of the field, sitting directly
 * under it.
 *
 * Its border is drawn in the same ink as its background rather than left off,
 * so that the hover state — which swaps the two — does not add a pixel of
 * height and shove the sidebar down as the cursor crosses it.
 */
.wlc-section .wlc-side-form-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid var(--wlc-ink);
	border-radius: 0;
	background: var(--wlc-ink);
	-webkit-appearance: none;
	appearance: none;

	font-family: var(--wlc-font-label);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #fff;

	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wlc-section .wlc-side-form-btn:hover,
.wlc-section .wlc-side-form-btn:focus {
	background: transparent;
	color: var(--wlc-ink);
}

.wlc-section .wlc-side-posts,
.wlc-section .wlc-side-years {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-side-posts li {
	margin: 0 0 1.5rem;
}

.wlc-section .wlc-side-posts a {
	display: block;
	border: 0;
	text-decoration: none;
	color: inherit;
}

.wlc-section .wlc-side-thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 0.6rem;
}

.wlc-section .wlc-side-post-title {
	display: block;
	font-family: var(--wlc-font-display);
	font-size: 15px;
	line-height: 1.35;
	color: var(--wlc-ink);
}

.wlc-section .wlc-side-post-date {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--wlc-font-label);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-side-years li + li {
	border-top: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-side-years a {
	display: flex;
	justify-content: space-between;
	padding: 0.6rem 0;
	font-family: var(--wlc-font-body);
	font-size: 14px;
	color: var(--wlc-body);
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-side-count {
	color: var(--wlc-meta);
}

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 900px) {

	.wlc-section .wlc-post-row {
		display: block;
	}

	.wlc-section.wlc-layout-sidebar .wlc-post-main,
	.wlc-section .wlc-post-side {
		flex: none;
		max-width: none;
	}

	.wlc-section .wlc-post-side {
		margin-top: 3rem;
		padding-top: 3rem;
		border-top: 1px solid var(--wlc-hairline);
	}

	.wlc-section.wlc-layout-framed .wlc-feat,
	.wlc-section.wlc-layout-sidebar .wlc-feat {
		max-width: 100%;
	}

	.wlc-section .gallery-columns-3 .gallery-item,
	.wlc-section .gallery-columns-4 .gallery-item,
	.wlc-section .gallery-columns-5 .gallery-item,
	.wlc-section .gallery-columns-6 .gallery-item {
		width: 50%;
	}
}

/* The opener wrapper is now only a container; the spacing belongs to the
   figure and the header inside it. */
.wlc-section .wlc-opener {
	margin: 0;
	padding: 0;
}


/* ==========================================================================
   THE SEVEN ARRANGEMENTS, TO THE PIXEL
   ==========================================================================

   Measured on the live Bluehost blog at a 1378px window. The page is a 1140px
   container; the words sit in a 706px column when there is a sidebar and a
   724px column centred when there is not. What separates one arrangement from
   another is only how wide the title runs and how wide the photograph runs:

     plain    sidebar    title  706   photograph  706    Keto Brownie Bites
     column   sidebar    title  706   photograph  680    Mexico City
     wide     sidebar    title 1086   photograph 1086    Paris
     inset    sidebar    title 1086   photograph  851    Hermès Party
     banner   sidebar    title 1086   photograph 1136    Pandemic
     open     no sidebar title 1086   photograph 1086    Blank Canvas
     framed   no sidebar title 1086   photograph 1000    Miami Beach

   Where the title or photograph is wider than the column it sits in, it grows
   to the right across the sidebar's width — which is what the old theme's grid
   did too, since the header was a row of its own above the two columns.
   ========================================================================== */

:root {
	--wlc-cont-eff: min(1140px, 100vw);
	--wlc-side-w:   calc(var(--wlc-cont-eff) / 3);
}

/* Bootstrap's grid is border-box; without this the sidebar's own padding is
   added to its third of the page and it hangs off the edge. */
.wlc-section .wlc-post-row,
.wlc-section .wlc-post-main,
.wlc-section .wlc-post-side {
	box-sizing: border-box;
}

.wlc-section .wlc-post-row {
	overflow: hidden;
}

/* --- with the sidebar --------------------------------------------------- */

@media (min-width: 901px) {

	/* A title that runs past its column. */
	.wlc-section.wlc-layout-wide .wlc-post-header,
	.wlc-section.wlc-layout-inset .wlc-post-header,
	.wlc-section.wlc-layout-banner .wlc-post-header {
		width: calc(100% + var(--wlc-side-w));
		max-width: none;
	}

	/* plain — the photograph is simply the column. */
	.wlc-section.wlc-layout-plain .wlc-feat {
		max-width: 100%;
	}

	/* column — 680 of the 706. */
	.wlc-section.wlc-layout-column .wlc-feat {
		max-width: 96.3%;
	}

	/* wide — the photograph matches the full-width title. */
	.wlc-section.wlc-layout-wide .wlc-feat {
		width: calc(100% + var(--wlc-side-w));
		max-width: none;
	}

	/* inset — 851px, centred on the page rather than on the column. */
	.wlc-section.wlc-layout-inset .wlc-feat {
		width: min(851px, calc(100% + var(--wlc-side-w)));
		max-width: none;
		margin-left: calc(((100% + var(--wlc-side-w)) - min(851px, 100% + var(--wlc-side-w))) / 2);
	}

	/* banner — edge to edge, out past the column padding on both sides. */
	.wlc-section.wlc-layout-banner .wlc-feat {
		width: calc(100% + var(--wlc-side-w) + (2 * var(--wlc-col-pad)));
		max-width: none;
		margin-left: calc(-1 * var(--wlc-col-pad));
	}
}

/* --- without the sidebar ------------------------------------------------ */

.wlc-section.wlc-layout-open .wlc-feat {
	max-width: 100%;
}

.wlc-section.wlc-layout-framed .wlc-feat {
	max-width: 92.08%;
}

/* The words narrow to 724 and centre only when there is no sidebar; beside one
   they already have their column. */
.wlc-section.wlc-layout-open .wlc-post-body .wp-block-post-content,
.wlc-section.wlc-layout-framed .wlc-post-body .wp-block-post-content {
	max-width: 724px;
	margin: 0 auto;
}

.wlc-section .wlc-post-body .wp-block-post-content {
	max-width: none;
}

/* Only the two sidebar-less arrangements give the whole width to the main
   column; the rest leave a third for the sidebar. */
.wlc-section .wlc-post-main {
	flex: 0 0 66.6667%;
	max-width: 66.6667%;
}

.wlc-section.wlc-layout-open .wlc-post-main,
.wlc-section.wlc-layout-framed .wlc-post-main {
	flex: 1 1 100%;
	max-width: 100%;
}

@media (max-width: 900px) {

	.wlc-section .wlc-post-main {
		flex: none;
		max-width: none;
	}

	.wlc-section .wlc-feat {
		max-width: 100% !important;
		width: auto !important;
		margin-left: auto !important;
	}
}

/* The gallery's own grid is border-box too. Without this each item's 15px
   gutter is added to its half of the column and the pair is 30px too wide. */
.wlc-section .gallery,
.wlc-section .gallery-item {
	box-sizing: border-box;
}


/* ==========================================================================
   THE DROP CAP, WITHOUT TYPING ANYTHING
   ==========================================================================

   The old site needed [bigletter]...[/bigletter] wrapped around the opening
   paragraph — markup, typed into the middle of her writing, where she could see
   it every time she opened the post.

   A drop cap is typography, not content. Every letter opens with one now, and
   the switch in the sidebar turns it off for the occasional post that should
   start plainly. Nothing to type either way.

   ::first-letter is the right tool: it styles whatever character the paragraph
   begins with, so it survives rewriting the sentence.
   ========================================================================== */

.wlc-section.wlc-dropcap .wlc-post-body .wp-block-post-content > p:first-of-type::first-letter,
.wlc-section.wlc-dropcap .wlc-post-body .wp-block-post-content > .wp-block-paragraph:first-of-type::first-letter {
	float: left;
	font-family: var(--wlc-font-display);
	/*
	 * A statement rather than a large first letter.
	 *
	 * Grey, so it reads as ornament and does not compete with the headline
	 * for the darkest thing on the page; and set to hang, which is the part
	 * that makes it look drawn rather than typed.
	 *
	 * The numbers, on 15px text with a 28px line:
	 *   7em            = 105px, cap height about 73px
	 *   line-height .76 = a 79.8px box
	 *   margin-top -.07em = 7.35px above the first line's top
	 *   float height   = 79.8 - 7.35 = 72.5px, which wraps three lines (85px)
	 *   margin-left -.18em = 19px out past the left edge of the column
	 *
	 * The left margin is what makes it hang; the top margin is what lifts it
	 * off the first line. Both are in em of the cap's own size, so the whole
	 * arrangement scales together if the size is ever changed.
	 */
	font-size: 7em;
	line-height: 0.76;
	font-weight: 700;
	font-style: normal;
	color: var(--wlc-ink);
	margin: -0.07em 0.1em 0 -0.18em;
}

/* The old shortcode's span, for any post not yet converted. Same treatment,
   so the two cannot look different from each other. */
.wlc-section .wlc-bigletter::first-letter {
	font-size: 7em;
}

@media (max-width: 600px) {

	/* Narrower column, so it hangs less far out and sets a little smaller —
	   19px of overhang on a phone would put it off the side of the screen. */
	.wlc-section.wlc-dropcap .wlc-post-body .wp-block-post-content > p:first-of-type::first-letter {
		font-size: 5.4em;
		margin-left: -0.08em;
	}
}


/* ==========================================================================
   SEARCH RESULTS, AND DEAD ENDS
   ==========================================================================
   Both used to be the portfolio's pages wearing the blog's masthead. They are
   the blog's own now, set like the rest of it.
   ========================================================================== */

.wlc-section .wlc-results-head {
	max-width: var(--wlc-container);
	margin: 0 auto;
	padding: 4rem var(--wlc-col-pad) 3rem;
	text-align: center;
	border-bottom: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-results-kicker {
	margin: 0 0 1rem;
	font-family: var(--wlc-font-label);
	font-size: var(--wlc-size-meta);
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-results-title {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: clamp(32px, 4.4vw, 54px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -1px;
	color: var(--wlc-ink);
	text-wrap: balance;
}

.wlc-section .wlc-results-count {
	margin: 1rem 0 0;
	font-family: var(--wlc-font-body);
	font-size: 15px;
	color: var(--wlc-body);
}

.wlc-section .wlc-results-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 30rem;
	margin: 2.5rem auto 0;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--wlc-ink);
}

.wlc-section .wlc-results-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	font-family: var(--wlc-font-body);
	font-size: 16px;
	color: var(--wlc-ink);
}

.wlc-section .wlc-results-form input[type="search"]:focus {
	outline: none;
}

.wlc-section .wlc-results-form button {
	padding: 0.4rem 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-results-form button:hover,
.wlc-section .wlc-results-form button:focus-visible {
	color: var(--wlc-ink);
}

.wlc-section .wlc-missing .wlc-results-head,
.wlc-section .wlc-results .wlc-results-head {
	border-bottom: 0;
}

.wlc-section .wlc-missing .wlc-backlink {
	margin-top: 2.5rem;
}

.wlc-section .wlc-missing {
	min-height: 40vh;
}


/* ==========================================================================
   THE OPENER SITS ABOVE THE COLUMNS, NOT INSIDE ONE
   ==========================================================================

   This is what was making the sidebar sit on top of the photograph. On the
   original, a post whose title runs the full width has its photograph and
   title in a row of their own, above the two columns — the sidebar begins
   underneath them. The rebuild had the opener inside the left column and grew
   it rightwards to reach full width, so it ran under the sidebar and the two
   collided.

   Now the opener is its own row, and each arrangement decides how wide it is:

     plain    706, at the left    the photograph is the column
     column   706, at the left    the photograph 680, centred in it
     wide    1086                 the photograph fills it
     inset   1086                 the photograph 851, centred on the page
     banner  1086                 the photograph edge to edge
     open    1086                 no sidebar; the photograph fills it
     framed  1086                 no sidebar; the photograph 1000, centred
   ========================================================================== */

.wlc-section .wlc-opener {
	box-sizing: border-box;
	max-width: var(--wlc-container);
	margin: 0 auto;
	padding: 0 var(--wlc-col-pad);
}

/* Reset everything the previous arrangement needed. */
.wlc-section .wlc-feat,
.wlc-section.wlc-layout-wide .wlc-feat,
.wlc-section.wlc-layout-inset .wlc-feat,
.wlc-section.wlc-layout-banner .wlc-feat,
.wlc-section.wlc-layout-wide .wlc-post-header,
.wlc-section.wlc-layout-inset .wlc-post-header,
.wlc-section.wlc-layout-banner .wlc-post-header {
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wlc-section .wlc-post-header {
	width: auto;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* --- the two arrangements whose title stays in the column --------------- */

@media (min-width: 901px) {

	.wlc-section.wlc-layout-plain .wlc-opener,
	.wlc-section.wlc-layout-column .wlc-opener {
		max-width: calc(var(--wlc-container) * 0.66667);
		margin-left: max(0px, calc((100vw - var(--wlc-container)) / 2));
		margin-right: 0;
	}

	.wlc-section.wlc-layout-column .wlc-feat {
		max-width: 96.3%;
	}

	/* --- inset: the photograph is centred on the page, not on the column -- */
	.wlc-section.wlc-layout-inset .wlc-feat {
		max-width: min(851px, 100%);
	}

	/* --- banner: out past the column padding on both sides --------------- */
	.wlc-section.wlc-layout-banner .wlc-feat {
		width: calc(100% + (2 * var(--wlc-col-pad)));
		max-width: none;
		margin-left: calc(-1 * var(--wlc-col-pad));
	}

	.wlc-section.wlc-layout-framed .wlc-feat {
		max-width: 92.08%;
	}
}

/* The words keep the column they always had. */
.wlc-section .wlc-post-body {
	padding-top: 0;
}


/* ==========================================================================
   PHOTOGRAPHS INSIDE AN ARTICLE
   ==========================================================================

   One rule, applied everywhere in the blog, so a letter never has to be
   arranged by hand:

     1 photograph    the full width of the writing
     2               side by side, the same size
     3               three across -- or two and one, or one and two
     4               two rows of two
     5               two rows of two, with one across the top or the bottom
     6 or more       three across, wrapping

   Where there is a choice -- three photographs and five -- she picks it in the
   "Photograph rows" box on the editing screen, and the choice arrives here as
   a class: .wlc-photos--arr-two-one and so on.

   Every row begins where the paragraphs begin and ends where they end, and
   every photograph sharing a row is drawn at exactly the same size. The
   grouping itself is done in PHP (includes/photos.php); this is how the rows
   are drawn.
   ========================================================================== */

.wlc-section .wlc-photos {
	display: grid;
	gap: 14px;
	margin: 2.5rem 0;
}

.wlc-section .wlc-photos--1 { grid-template-columns: 1fr; }
.wlc-section .wlc-photos--2 { grid-template-columns: repeat(2, 1fr); }
.wlc-section .wlc-photos--3 { grid-template-columns: repeat(3, 1fr); }
.wlc-section .wlc-photos--4 { grid-template-columns: repeat(2, 1fr); }
.wlc-section .wlc-photos--many { grid-template-columns: repeat(3, 1fr); }

/*
 * The arrangements she can choose between.
 *
 * Three photographs and five are the only counts with more than one sensible
 * shape, so they are the only ones she is asked about. Each of these is two
 * columns with one photograph running the whole way across -- at the top or at
 * the bottom, depending on which she picked.
 */
.wlc-section .wlc-photos--arr-two-one,
.wlc-section .wlc-photos--arr-one-two,
.wlc-section .wlc-photos--arr-one-four,
.wlc-section .wlc-photos--arr-four-one {
	grid-template-columns: repeat(2, 1fr);
}

.wlc-section .wlc-photos--arr-one-two > figure:first-child,
.wlc-section .wlc-photos--arr-one-four > figure:first-child,
.wlc-section .wlc-photos--arr-two-one > figure:last-child,
.wlc-section .wlc-photos--arr-four-one > figure:last-child {
	grid-column: 1 / -1;
}

.wlc-section .wlc-photos figure {
	margin: 0;
	min-width: 0;
}

/*
 * Every picture in a row is the same shape and the same size, so the row reads
 * as a row rather than as pictures that happen to be beside each other.
 *
 * The !important is doing real work. A photograph whose file is narrower than
 * the column it sits in is marked .wlc-img--small elsewhere in this stylesheet
 * and told to keep its own width, which is right for a picture on its own and
 * wrong for one in a row -- it is what made the Paris letter show a 400px
 * photograph beside a 1920px one at two visibly different sizes. In a row, the
 * row wins.
 */
.wlc-section .wlc-photos:not(.wlc-photos--1) img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.wlc-section .wlc-photos--1 img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The one that runs the whole way across keeps its own proportions. It has
 * nothing beside it to match, and cropping a tall photograph into a letterbox
 * is how you cut somebody's head off.
 */
.wlc-section .wlc-photos--arr-one-two > figure:first-child img,
.wlc-section .wlc-photos--arr-one-four > figure:first-child img,
.wlc-section .wlc-photos--arr-two-one > figure:last-child img,
.wlc-section .wlc-photos--arr-four-one > figure:last-child img {
	aspect-ratio: auto;
	height: auto;
	object-fit: fill;
}

.wlc-section .wlc-photos figcaption {
	margin-top: 0.5rem;
	font-family: var(--wlc-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--wlc-meta);
}

/* A row of landscape photographs is squat rather than tall. */
.wlc-section .wlc-photos--landscape:not(.wlc-photos--1) img {
	aspect-ratio: 3 / 2;
}

.wlc-section .wlc-photos--landscape.wlc-photos--arr-one-two > figure:first-child img,
.wlc-section .wlc-photos--landscape.wlc-photos--arr-one-four > figure:first-child img,
.wlc-section .wlc-photos--landscape.wlc-photos--arr-two-one > figure:last-child img,
.wlc-section .wlc-photos--landscape.wlc-photos--arr-four-one > figure:last-child img {
	aspect-ratio: auto;
}

@media (max-width: 700px) {

	.wlc-section .wlc-photos--3,
	.wlc-section .wlc-photos--4,
	.wlc-section .wlc-photos--many {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * Three across will not fit on a narrow screen, so it folds to two and
	 * one -- and the one underneath runs the whole way across rather than
	 * sitting on its own in the left-hand half with a hole beside it.
	 */
	.wlc-section .wlc-photos--arr-across > figure:last-child {
		grid-column: 1 / -1;
	}

	.wlc-section .wlc-photos--arr-across > figure:last-child img {
		aspect-ratio: auto;
		height: auto;
		object-fit: fill;
	}
}

@media (max-width: 460px) {

	.wlc-section .wlc-photos {
		grid-template-columns: 1fr !important;
	}

	.wlc-section .wlc-photos img {
		aspect-ratio: auto !important;
		height: auto !important;
	}
}

/* The [gallery] rows follow the same rule, so a gallery and a run of image
   blocks with the same number of pictures look identical. */
.wlc-section .gallery {
	display: grid;
	gap: 14px;
	margin: 2.5rem 0;
}

.wlc-section .gallery-columns-1 { grid-template-columns: 1fr; }
.wlc-section .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.wlc-section .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }

.wlc-section .gallery-item {
	width: auto !important;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.wlc-section .gallery-columns-2 .gallery-item img,
.wlc-section .gallery-columns-3 .gallery-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.wlc-section .gallery-columns-1 .gallery-item img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
}

@media (max-width: 700px) {

	.wlc-section .gallery-columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {

	.wlc-section .gallery {
		grid-template-columns: 1fr !important;
	}

	.wlc-section .gallery-item img {
		aspect-ratio: auto !important;
		height: auto !important;
	}
}

/* ---- the photograph is never blown up beyond its own size -------------- */

/*
 * Measured on the live blog: the opening photograph of "Healthy Habits" is a
 * 923px file and is shown at 923px, centred — not stretched to the 1086px its
 * arrangement allows. The arrangement sets the ceiling; the file sets the size.
 */
.wlc-section .wlc-feat {
	margin-inline: auto;
}

.wlc-section .wlc-feat img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* A single photograph in an article behaves the same way. */
.wlc-section .wlc-photos--1 figure {
	margin-inline: auto;
}


/* ==========================================================================
   HIGHLIGHTED QUOTES
   ==========================================================================

   Measured from Sisterly Style's "We had a crush":

     Playfair Display, italic, 400, 27px on 30px, centred
     no rule down the side
     43.2px above and below, 30/40 inside
     quotation marks at 37.8px in #eee, one at the top left, one at the
     bottom right — they use a Font Awesome glyph for those

   The happy part: Playfair Display is already the blog's display face, the one
   the headlines and the wordmark are set in. So this is not a new typeface
   arriving from somewhere else — it is the type the blog already speaks in,
   used for one more thing.

   The quotation marks here are real typographic ones set in Playfair rather
   than an icon font, so there is nothing extra to load and they match the
   letterforms around them.

   19 SEP — AND THE ABOUT PAGE. Cata, looking at a quote she had just added
   there: "why doesn't the quote format look like in the rest of the blog?"

   Because this whole section was scoped to .wlc-post-body, which is the
   letters' column and does not exist on the About page. One design, two
   containers, so the scope is now :is(.wlc-post-body, .wlc-about). Note that
   :is() takes the specificity of its most specific argument — both are a
   single class — so nothing else in the file shifts underneath this.

   If a third place ever needs quotations, add it to that list rather than
   copying these rules. Two copies of a design are two designs eventually.
   ========================================================================== */

.wlc-section :is(.wlc-post-body, .wlc-about) blockquote,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote {
	position: relative;
	margin: 2.7rem 0;
	padding: 30px 40px;
	border: 0;
	background: none;
	text-align: center;
}

.wlc-section :is(.wlc-post-body, .wlc-about) blockquote p,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote p,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote p {
	margin: 0 0 0.6em;
	font-family: var(--wlc-font-display);
	font-size: clamp(21px, 2vw, 27px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--wlc-ink);
	text-align: center;
}

.wlc-section :is(.wlc-post-body, .wlc-about) blockquote p:last-child,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote p:last-child,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote p:last-child {
	margin-bottom: 0;
}

/* --- the marks ---------------------------------------------------------- */

.wlc-section :is(.wlc-post-body, .wlc-about) blockquote::before,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote::before,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote::before {
	content: "\201C";
	position: absolute;
	top: 0;
	left: 0;
}

.wlc-section :is(.wlc-post-body, .wlc-about) blockquote::after,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote::after,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote::after {
	content: "\201D";
	position: absolute;
	right: 0;
	bottom: 0;
}

.wlc-section :is(.wlc-post-body, .wlc-about) blockquote::before,
.wlc-section :is(.wlc-post-body, .wlc-about) blockquote::after,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote::before,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote::after,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote::before,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote::after {
	font-family: var(--wlc-font-display);
	font-size: 72px;
	font-style: normal;
	line-height: 1;
	color: #eee;
	pointer-events: none;
}

/* The attribution, when a quote has one. */
.wlc-section :is(.wlc-post-body, .wlc-about) blockquote cite,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote cite,
.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote cite {
	display: block;
	margin-top: 1.2rem;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	font-style: normal;
	letter-spacing: var(--wlc-track-label);
	text-transform: uppercase;
	color: var(--wlc-meta);
}

@media (max-width: 600px) {

	.wlc-section :is(.wlc-post-body, .wlc-about) blockquote,
	.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote,
	.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-pullquote {
		padding: 24px 22px;
	}

	.wlc-section :is(.wlc-post-body, .wlc-about) blockquote::before,
	.wlc-section :is(.wlc-post-body, .wlc-about) blockquote::after,
	.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote::before,
	.wlc-section :is(.wlc-post-body, .wlc-about) .wp-block-quote::after {
		font-size: 52px;
	}
}


/* ==========================================================================
   SUBSCRIBE

   The old blog put a quiet "Subscribe" in the top right, above the wordmark —
   12px, no button, no border, just a word. It opened a popup and collected an
   address on the site; this one goes to Substack instead, which is where the
   newsletter is actually written and sent from.
   ========================================================================== */

/*
 * The row runs the width of the window with the same 20px inset as the black
 * band above it, rather than being centred on the column of content. That puts
 * where she is directly under "the journalism" and Subscribe directly under
 * the search — one edge down the left of the page and one down the right,
 * instead of two different margins stacked on top of each other.
 */
/* Subscribe and the search, together at the right of the band. */
.wlc-section .wlc-band-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
}

.wlc-section .wlc-topband .wlc-subscribe {
	margin: 0;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	border: 0;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: opacity 0.18s ease, border-color 0.18s ease;
}

.wlc-section .wlc-topband .wlc-subscribe:hover,
.wlc-section .wlc-topband .wlc-subscribe:focus-visible {
	color: #fff;
	opacity: 0.68;
	border-bottom-color: currentColor;
}

/* The search no longer has to push itself right; the row does that. */
.wlc-section .wlc-band-actions .wlc-band-search {
	margin-left: 0;
}

/* Nothing but the location line is left in this row. */
.wlc-section .wlc-topbar {
	max-width: none;
	margin: 0;
	/* A hair in from the edge and a hair further down from the black band —
	   it was sitting hard against both. */
	padding: 30px 38px 0;
	display: flex;
	align-items: center;
	gap: 1rem;
	/* Where she is sits at the left; Subscribe keeps to the right whether or
	   not it has company, which is why this is a margin and not space-between. */
	justify-content: flex-start;
}

.wlc-section .wlc-topbar .wlc-subscribe {
	margin-left: auto;
}

.wlc-section .wlc-subscribe {
	font-family: var(--wlc-font-label);
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: normal;
	text-transform: none;
	color: #0a0a0a;
	text-decoration: none;
	border: 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.wlc-section .wlc-subscribe:hover,
.wlc-section .wlc-subscribe:focus {
	border-bottom-color: #0a0a0a;
}

@media (max-width: 700px) {

	.wlc-section .wlc-topbar {
		padding-top: 20px;
		padding-left: 20px;
	}
}


/* ==========================================================================
   DROPDOWNS THAT DO NOT SIT ON THE WORDMARK

   The panel was anchored to the menu link, and the menu links sit vertically
   centred in a row whose middle column is a 60px wordmark. So "100% of the
   link" landed halfway down "With Love, Cata" and the panel opened straight
   across her name.

   The fix is to make each menu item as tall as the row it lives in. The link
   stays exactly where it was — still centred, nothing moves — but the item's
   box now runs from the top of the masthead to the bottom of it, so dropping
   the panel from the foot of that box clears the wordmark and the tagline
   underneath it.

   Doing it this way rather than by nudging the panel down with a fixed offset
   also keeps the hover intact: the pointer never leaves the menu item on its
   way to the panel, because the item reaches all the way down to it. A panel
   pushed down by a margin would leave a dead strip in between that closes the
   menu as you cross it.
   ========================================================================== */

.wlc-section .wlc-masthead-inner > .wlc-nav {
	align-self: stretch;
}

/* The ul centres its items by default, which keeps each item only as tall as
   its own text. Stretching them is the whole point here — the link stays
   centred because the item centres it again inside itself. */
.wlc-section .wlc-nav > ul {
	height: 100%;
	align-items: stretch;
	align-content: stretch;
}

.wlc-section .wlc-nav > ul > li {
	display: flex;
	align-items: center;
}

/* The row's own bottom padding sits below the inner box, so the panel is
   nudged the rest of the way to the foot of the white bar. */
/* The item now ends where the masthead's inner box ends — below the tagline.
   The bar's own bottom padding is the remaining distance to the foot of the
   white band, which is where the panel starts. */
.wlc-section .wlc-has-mega > .wlc-subnav {
	top: calc(100% + 2.75rem);
}

/*
 * The wordmark keeps its own stacking context so that nothing else in the bar
 * can cover it — but the open panel has to sit above the page beneath it.
 */
.wlc-section .wlc-masthead-centre {
	z-index: 10;
}

.wlc-section .wlc-has-mega > .wlc-subnav {
	z-index: 60;
}

@media (max-width: 900px) {

	.wlc-section .wlc-masthead-inner > .wlc-nav {
		align-self: auto;
	}

	.wlc-section .wlc-nav > ul {
		height: auto;
	}
}


/* ==========================================================================
   FOCUS RINGS — only for the keyboard

   Nothing is outlined because it was clicked. The ring appears the moment
   somebody presses Tab (see includes/focus-ring.php, which puts .wlc-kbd on
   the html element) and disappears again as soon as they touch the mouse.

   This is deliberately broader than :focus-visible on its own. Chrome counts
   the link a reader arrived through as focus-visible when they press Back,
   which is how a headline ends up wearing a blue box on the archive page
   without anyone having touched the keyboard at all.

   !important because these have to beat the browser's own default ring and
   anything the theme sets on :focus.
   ========================================================================== */

.wlc-section :focus,
.wlc-section :focus-visible,
.wlc-section a:focus,
.wlc-section button:focus,
.wlc-section [tabindex]:focus {
	outline: none !important;
}

html.wlc-kbd .wlc-section :focus-visible {
	outline: 2px solid var(--wlc-ink) !important;
	outline-offset: 3px !important;
}

/* Text fields are the exception: a caret alone is not always obvious, so the
   field itself says it has focus, the way it already did. */
html.wlc-kbd .wlc-section input:focus-visible,
html.wlc-kbd .wlc-section textarea:focus-visible {
	outline-offset: 0 !important;
}


/* ==========================================================================
   THE FEED, MEASURED

   Everything below is read off withlovecata.com's home page rather than
   guessed. The article pages were done this way months ago; the feed never
   was, and it showed — the column was 60px too narrow, there was a 56px
   gutter the original does not have, and the excerpt and the link were
   inheriting the portfolio theme's 30px DM Sans, which is why a card read
   like a different publication to the article it opened.

   Original, at any width above 1200:

     container     1200 max-width, 27.2px side padding -> 1146 of content
     card          1146 x 700, two columns of 573, no gutter between them
     photograph    573 x 700, cover
     text column   573, centred, no padding
     sections      Heebo 10px, uppercase, #444, 26px line
     headline      Playfair Display 44/48, 700, -1px, #222, 10px 0
     meta line     Playfair Display 13/26, #707070
     excerpt       Playfair Display 15/28, #525252, 16px 0 22.5px
     VIEW the POST Playfair Display 13/26, 700, #000, 10px 0
     between cards 64px

   The full-width card: photograph 1146 x 500, and the words in a 573 column
   flush to the left edge — not centred, which is the one place the original
   breaks its own symmetry.
   ========================================================================== */

.wlc-section .wlc-feed {
	box-sizing: border-box;
	max-width: 1200px;
	padding-left: 27.2px;
	padding-right: 27.2px;
}

.wlc-section .wlc-feed-item {
	column-gap: 0;
	margin-bottom: 64px;
}

.wlc-section .wlc-feed-item:last-child {
	margin-bottom: 0;
}

.wlc-section .wlc-feed-words {
	text-align: center;
}

/* --- the line of sections above the headline --------------------------- */

.wlc-section .wlc-feed-terms {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: 13px;
	line-height: 26px;
	color: #707070;
}

.wlc-section .wlc-feed-terms a {
	font-family: "Heebo", var(--wlc-font-label);
	font-size: 10px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #444;
	text-decoration: none;
	border: 0;
}

/* --- headline ---------------------------------------------------------- */

.wlc-section .wlc-feed-title {
	margin: 10px 0;
}

/* --- the small line under it ------------------------------------------- */

.wlc-section .wlc-feed-meta,
.wlc-section .wlc-feed-meta a {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: 13px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: normal;
	text-transform: none;
	color: #707070;
}

.wlc-section .wlc-feed-meta span + span::before {
	content: "\00a0\00a0";
}

/* --- the opening of the piece ------------------------------------------ */

/*
 * Set on the wrapper and on the paragraphs inside it. The excerpt arrives
 * from wpautop as loose <p> elements, and the theme styles those at 30px DM
 * Sans — so styling only the container leaves the text exactly as wrong as
 * it was. This is the same trap the About page fell into.
 */
.wlc-section .wlc-feed-excerpt,
.wlc-section .wlc-feed-excerpt p {
	font-family: var(--wlc-font-display);
	font-size: 15px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: normal;
	color: #525252;
	text-align: center;
}

.wlc-section .wlc-feed-excerpt {
	margin: 16px 0 22.5px;
}

.wlc-section .wlc-feed-excerpt p {
	margin: 0;
}

/* --- the way in -------------------------------------------------------- */

.wlc-section .wlc-feed-more {
	margin: 10px 0;
	text-align: center;
}

.wlc-section .wlc-feed-more a {
	font-family: var(--wlc-font-display);
	font-size: 13px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-feed-more a:hover,
.wlc-section .wlc-feed-more a:focus-visible {
	text-decoration: underline;
}

/* --- the full-width card ----------------------------------------------- */

.wlc-section .wlc-feed-item--full .wlc-feed-words {
	max-width: 573px;
	margin: 0;
}

@media (max-width: 900px) {

	.wlc-section .wlc-feed-item--full .wlc-feed-words {
		max-width: none;
	}
}


/* ==========================================================================
   THE HEAD OF A SECTION PAGE

   Measured on withlovecata.com/category/travel/:

     band          30px above and below
     section name  52px, -2px tracking, #222, centred, 10px 0
     description   18px, #525252, centred, the full 1146

   The original sets that heading in a face called VogueRegular and never
   serves the file, so it lands in the browser's default serif — measured, it
   comes out as Times. That is a broken reference rather than a decision, so
   the heading here is Playfair Display, which is what the headlines below it
   are already set in.
   ========================================================================== */

.wlc-section .wlc-archive-head {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 27.2px;
	text-align: center;
}

.wlc-section .wlc-archive-title {
	margin: 10px 0;
	font-family: var(--wlc-font-display);
	font-size: 52px;
	font-weight: 400;
	line-height: 52px;
	letter-spacing: -2px;
	text-transform: none;
	color: #222;
}

/*
 * The description is set to a measure rather than the full 1146.
 *
 * Run across the whole column it came out as one very long line, which is
 * tiring to read and looks like a caption that lost its picture. 540px puts
 * roughly ten to thirteen words on a line at this size — measured against the
 * breaks Cata asked for, not guessed — and is inside the 45-75 characters that
 * is the usual comfortable measure for running text.
 *
 * text-wrap: balance then evens the lines out, so the last one is not a stub.
 * On the Lifestyle description that is the difference between 11/13/7 words
 * and 10/12/9. Browsers without it simply wrap as normal.
 */
.wlc-section .wlc-archive-desc,
.wlc-section .wlc-archive-desc p {
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: normal;
	color: #525252;
	text-align: center;
	text-wrap: balance;
}

.wlc-section .wlc-archive-desc {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.wlc-section .wlc-archive-desc p + p {
	margin-top: 14px;
}

@media (max-width: 700px) {

	.wlc-section .wlc-archive-title {
		font-size: 38px;
		line-height: 40px;
		letter-spacing: -1px;
	}
}


/* ==========================================================================
   DROPDOWNS YOU CAN ACTUALLY REACH

   Making the panel drop from the foot of the masthead left a 44px strip of
   nothing between the menu item and the panel — the bar's own bottom padding.
   Crossing that strip took the pointer off the item, and the panel closed
   before it could be used. The menu looked right and was useless.

   Two things fix it, and both are needed:

   1. A bridge. An invisible extension of the panel that reaches up to the foot
      of the menu item, so the pointer never leaves the item on its way down.
      It belongs to the panel, so it only exists while the panel is open, and
      it sits below the tagline — it covers nothing anyone can click.

   2. A pause before closing. Leaving the item no longer closes the panel at
      once; it waits a quarter of a second. That covers a diagonal path out of
      the item, and the small overshoot everyone makes reaching for the third
      thing in a list. Coming back within the pause cancels it entirely.

   Neither changes how the menu looks, open or closed.
   ========================================================================== */

.wlc-section .wlc-has-mega > .wlc-subnav::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 2.75rem;
	background: transparent;
}

/*
 * Closing is delayed; opening is not. The delay lives on the resting state,
 * so it applies on the way out, and the hover state clears it so the panel
 * still appears the moment it is asked for.
 */
.wlc-section .wlc-nav-item > .wlc-subnav {
	transition:
		opacity 0.18s ease 0.25s,
		transform 0.18s ease 0.25s,
		visibility 0s linear 0.43s;
}

.wlc-section .wlc-nav-item:hover > .wlc-subnav,
.wlc-section .wlc-nav-item:focus-within > .wlc-subnav {
	transition:
		opacity 0.18s ease 0s,
		transform 0.18s ease 0s,
		visibility 0s linear 0s;
}

/* The panel is a menu, so the pointer should say so the whole way down. */
.wlc-section .wlc-has-mega > .wlc-subnav::before {
	cursor: default;
}


/* ==========================================================================
   THE WORDMARK, THE SAME IN BOTH PLACES

   The foot of the page was setting "With Love, Cata" upright, at weight 300,
   in the mid grey used for body copy — while the masthead sets it italic, at
   400, in near-black. Two different wordmarks for one blog, a page apart.

   The masthead is the one that is right, so the footer follows it: italic,
   400, the same -0.02em tracking (proportional, so it holds at any size) and
   the same near-black.

   The footer keeps its smaller size. It is a sign-off rather than a masthead,
   and the header has already introduced the name at full scale.
   ========================================================================== */

/*
 * The name at the foot is the same mark as the one at the top.
 *
 * This has drifted apart twice already — once when the masthead moved to
 * Parisienne and the footer stayed Playfair, and it would drift again if
 * either end were set in a literal face. Both read --wlc-font-mark, so one
 * name in one face, wherever it appears.
 */
.wlc-section .wlc-foot-mark {
	font-family: var(--wlc-font-mark);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
}

.wlc-section .wlc-foot-mark a {
	font-family: var(--wlc-font-mark);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: var(--wlc-deep);
}

/*
 * And the line under it. The masthead reads "Travel, fashion, lifestyle"; the
 * footer read "Travel, fashion & lifestyle", set two sizes larger with
 * different tracking. Same line, same setting.
 */
.wlc-section .wlc-foot-tag {
	font-family: var(--wlc-font-label);
	font-size: 10px;
	font-weight: 400;
	line-height: 16.5px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}


/* ==========================================================================
   A WIDE PHOTOGRAPH WITH A SECOND ONE AGAINST IT

   The old blog called this its second-featured-image post, and it is the one
   that makes the front page feel like it was laid out rather than generated:
   a wide photograph across the whole column, and a second one standing against
   its bottom edge in one half, with the words in the other.

   Read off the original's own markup rather than eyeballed, at its 1200 step
   where the column of content is 1146 (the 1140 step below 1400px gives 1086
   and the same fixed offsets):

     wide photograph   1146 x 500, cover — this is the SECOND photograph
     standing one      533 wide: the half column less 20px each side.
                       Its own height, never cropped. position: relative with
                       top: -20px, so it stands 20px OVER the foot of the wide
                       one. That overlap is the whole effect.
                       This is the post's own photograph.
     words             the opposite half, vertically centred against the
                       standing photograph, full width, centred text

   The two pictures are the opposite way round from what it looks like: on
   withlovecata.com the wide one carries no `wp-post-image` class and the
   standing one does. That is what makes it work — the wide slot is a 500px
   crop and wants a landscape; the standing slot keeps its proportions and
   wants a portrait.

   Sides swap between duo-right and duo-left.
   ========================================================================== */

.wlc-section .wlc-feed-item--duo-right,
.wlc-section .wlc-feed-item--duo-left {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	/* The words centre against the standing photograph, as in the original. */
	align-items: center;
}

/* The wide photograph runs the whole width, above both halves. */
.wlc-section .wlc-feed-figure--wide {
	grid-column: 1 / -1;
	grid-row: 1;
}

.wlc-section .wlc-feed-figure--wide .wlc-feed-img {
	height: 500px;
	object-fit: cover;
}

/*
 * The standing photograph: its half less 20px on each side, lifted 20px so it
 * crosses the foot of the wide one. Relative rather than a negative margin, so
 * the lift is purely visual and the card's height does not change under it.
 */
/*
 * The white frame.
 *
 * Measured on the live Bluehost site, where the standing photograph's figure
 * is 503x657 around a 463x617 photograph — 20px of white on all four sides,
 * made with padding and a white background rather than a border.
 *
 * It is the frame that overlaps the wide photograph, not the photograph
 * itself: the figure sits 20px higher and carries 20px of padding, so the
 * photograph's own top edge lands flush with the bottom of the wide one and
 * the white reads as a mount the picture is laid on. Without it the two
 * photographs touch, which is what made the rebuilt card look pasted
 * together rather than arranged.
 */
.wlc-section .wlc-feed-figure--inset {
	grid-row: 2;
	margin: 0 20px;
	display: block;
	position: relative;
	top: -20px;
	z-index: 1;
	line-height: 0;
	border: 0;
	box-sizing: border-box;
	padding: 20px;
	background: var(--wlc-ground);
}

/*
 * The standing photograph is always a portrait, whatever was shot.
 *
 * It kept its own proportions before, which meant a landscape frame arrived as
 * a wide, shallow strip taped under the wide photograph — the shape that made
 * the whole card look like a mistake. A fixed 4:5 and object-fit: cover means
 * the slot is the same shape on every letter and she can photograph whichever
 * way round she likes.
 *
 * Cropping is decided by "What stays in the frame" in step 5 of the
 * letterhead: that sets object-position on this image, so the part she marked
 * is the part that survives the crop rather than whatever happened to be in
 * the middle.
 */
.wlc-section .wlc-feed-img--inset {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.wlc-section .wlc-feed-item--duo-right .wlc-feed-words,
.wlc-section .wlc-feed-item--duo-left .wlc-feed-words {
	grid-row: 2;
}

/* Photograph right, words left. */
.wlc-section .wlc-feed-item--duo-right .wlc-feed-words  { grid-column: 1; }
.wlc-section .wlc-feed-item--duo-right .wlc-feed-figure--inset { grid-column: 2; }

/* And the mirror. */
.wlc-section .wlc-feed-item--duo-left .wlc-feed-figure--inset { grid-column: 1; }
.wlc-section .wlc-feed-item--duo-left .wlc-feed-words  { grid-column: 2; }

@media (max-width: 900px) {

	.wlc-section .wlc-feed-item--duo-right,
	.wlc-section .wlc-feed-item--duo-left {
		grid-template-columns: 1fr;
	}

	.wlc-section .wlc-feed-item--duo-right .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-right .wlc-feed-figure--inset,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-figure--inset {
		grid-column: 1;
	}

	.wlc-section .wlc-feed-figure--inset {
		grid-row: 2;
		margin: 0 auto;
		max-width: 80%;
		/* Nothing to overlap when stacked, so the frame comes in a little. */
		padding: 12px;
	}

	.wlc-section .wlc-feed-item--duo-right .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-words {
		grid-row: 3;
		padding-top: 28px;
	}

	/* Stacked, there is nothing to stand against. */
	.wlc-section .wlc-feed-figure--inset {
		position: static;
		top: auto;
	}
}


/* ==========================================================================
   THE CONTAINER, AS THE ORIGINAL STEPS IT

   The old site does not hold one width: its container is 1140 from 1200px up
   and 1200 above about 1400, so the column of content is 1086 and then 1146.
   The feed was fixed at 1146, which made every card a little wider than the
   original on a 13-inch screen. This restores the step.
   ========================================================================== */

@media (max-width: 1399px) {

	.wlc-section .wlc-feed,
	.wlc-section .wlc-archive-head {
		max-width: 1140px;
	}
}


/* ==========================================================================
   AIR BETWEEN THE PHOTOGRAPH AND THE WORDS

   The original runs the two halves of a card hard against each other — no
   gutter at all — and relies on the text being centred to keep it off the
   photograph. That works until a line runs long: measured on the front page,
   the widest line of the Little Venice card cleared the photograph by 5px.

   So the words are inset 40px on each side of their half. The photograph
   keeps its measured 543, the card keeps its measured 1086, and only the
   text moves — it now clears the photograph by 42px. (The standing photograph
   in a duo is inset 20px, not 40: that figure is the original's own and is
   what puts it where it belongs against the wide photograph.)

   This is a deliberate departure from the original, at Cata's request.

   Not applied to the wide card: nothing sits beside its words, so there is
   nothing to clear, and insetting them would pull the text out of line with
   the photograph above it.
   ========================================================================== */

.wlc-section .wlc-feed-item--left .wlc-feed-words,
.wlc-section .wlc-feed-item--right .wlc-feed-words {
	box-sizing: border-box;
	padding-left: 40px;
	padding-right: 40px;
}

@media (max-width: 900px) {

	.wlc-section .wlc-feed-item--left .wlc-feed-words,
	.wlc-section .wlc-feed-item--right .wlc-feed-words {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* ==========================================================================
   THE BLACK BAND

   A black band across the top of every blog page, with the way back to the
   portfolio at the far left of it. It was a grey line above the wordmark
   before, which read as part of the blog's own furniture; on a black band it
   reads as the door out, and the blog proper starts below it.

   Static, not fixed. A fixed band would sit on top of the page as it scrolls,
   and the one thing this masthead has to keep doing is not covering things up.
   ========================================================================== */

.wlc-section .wlc-topband {
	/* The theme's constrained layout caps every child of the shell at its
	   content width; the band is furniture, not content, so it opts out. */
	width: 100%;
	max-width: none;
	background: #000;
	color: #fff;
}

/*
 * Not centred on the page's container: hard against the left edge of the
 * window, the way Negin's is. A band is the edge of the screen, not a column
 * of content, so lining it up with the column below it reads as timid.
 */
.wlc-section .wlc-topband-inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 54px;
	max-width: none;
	margin: 0;
	padding: 0 20px;
}

.wlc-section .wlc-backlink--top {
	margin: 0;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	color: #fff;
}

.wlc-section .wlc-backlink--top a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6em;
	color: #fff;
	text-decoration: none;
	border: 0;
	transition: opacity 0.18s ease;
}

.wlc-section .wlc-backlink--top a:hover,
.wlc-section .wlc-backlink--top a:focus-visible {
	color: #fff;
	opacity: 0.68;
}

/* The arrow moves, the words stay put. */
.wlc-section .wlc-backlink-arrow {
	display: inline-block;
	letter-spacing: 0;
	transition: transform 0.18s ease;
}

.wlc-section .wlc-backlink--top a:hover .wlc-backlink-arrow {
	transform: translateX(-3px);
}

/* The band is the top of the page now, so the masthead stops carrying the
   line that used to sit above the wordmark. */
.wlc-section .wlc-masthead-centre .wlc-backlink {
	display: none;
}

@media (max-width: 900px) {

	.wlc-section .wlc-topband-inner {
		min-height: 46px;
		padding: 0 16px;
	}
}


/* ==========================================================================
   THE SOCIAL RAIL, LOUDER

   It was 15px of mid grey down the left edge — present, but you had to be
   looking for it. Black, and half again as big, so it reads as a row of
   buttons rather than as texture. The hit area grows with it: 44px is the
   size a finger needs, and the icons are a link people actually aim for.
   ========================================================================== */

.wlc-section .wlc-social-rail {
	gap: 0.5rem;
}

.wlc-section .wlc-social-rail a {
	width: 44px;
	height: 44px;
	color: var(--wlc-ink);
}

.wlc-section .wlc-social-rail a:hover,
.wlc-section .wlc-social-rail a:focus-visible {
	color: var(--wlc-meta);
}

.wlc-section .wlc-social-rail svg {
	width: 23px;
	height: 23px;
}

@media (max-width: 900px) {

	.wlc-section .wlc-social-rail a {
		width: 40px;
		height: 40px;
	}

	.wlc-section .wlc-social-rail svg {
		width: 21px;
		height: 21px;
	}
}


/* ==========================================================================
   BIGGER PHOTOGRAPHS IN THE DROPDOWNS

   Two things were making them small. The obvious one is the track, now 260px
   instead of 200. The other took measuring: the card is an <a> inside the
   navigation, so it was inheriting the menu link's own 6.4px/20px padding —
   and because that padding is content-box, a 200px track was leaving the
   photograph 160px. Clearing it gives the picture the whole track, which on
   its own is most of the difference.
   ========================================================================== */

/* `.wlc-section .wlc-subnav a` is the rule that puts the padding there, and a
   class plus a type selector outweighs two classes — so this has to name the
   anchor as well to win. Measured, not guessed: with the plain selector the
   photographs came out 220 of a 260 track. */
.wlc-section .wlc-subnav a.wlc-mega-post {
	padding: 0;
}

.wlc-section .wlc-mega-posts {
	grid-auto-columns: 260px;
}

@media (max-width: 1200px) {

	.wlc-section .wlc-mega-posts {
		grid-auto-columns: minmax(0, 200px);
	}
}


/* ==========================================================================
   WHERE SHE IS

   Top left, under the black band, on every page of the blog — the line Negin
   Mirsalehi's site carries and the reason it reads as a person's site rather
   than a publication's.

   Hers is italic Garamond in mid grey with a small globe and a chevron. This
   is the same idea in the blog's own hand: Playfair italic, because that is
   what the wordmark and the sign-off are set in, and because an italic aside
   at the top of a page is a different voice from the navigation around it.
   ========================================================================== */

.wlc-section .wlc-where {
	display: flex;
	align-items: center;
	margin: 0;
	font-family: var(--wlc-font-display);
	font-size: 16px;
	font-style: italic;
	line-height: 20px;
	color: var(--wlc-meta);
}

.wlc-section .wlc-where a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: inherit;
	text-decoration: none;
	border: 0;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.wlc-section .wlc-where a:hover,
.wlc-section .wlc-where a:focus-visible {
	color: var(--wlc-ink);
	border-bottom-color: currentColor;
}

/*
 * The little world. Filled, not outlined — at this size an outline of the
 * continents is a smudge, and a silhouette still reads as the world.
 *
 * It keeps the ink of the line it sits in, so it is the same grey as the
 * words and darkens with them on hover.
 */
/*
 * Black rather than the grey of the words beside it. The words are an aside;
 * the map is the mark, and at this size a grey one disappears.
 */
.wlc-section .wlc-where-map {
	flex: 0 0 auto;
	display: block;
	width: 38px;
	height: 22px;
	max-width: none;
}

.wlc-section .wlc-where-arrow {
	font-style: normal;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* No link, no anchor — so the gap has to be put back by hand. */
.wlc-section .wlc-where > .wlc-where-map {
	margin-right: 0.5em;
}

@media (max-width: 700px) {

	.wlc-section .wlc-where {
		font-size: 14px;
		line-height: 18px;
	}

	.wlc-section .wlc-where-map {
		width: 32px;
		height: 19px;
	}
}


/* ==========================================================================
   THE TWO COLUMN-WIDTH ARRANGEMENTS, SET LIKE A MAGAZINE

   Plain and "photograph in the column" are the two where the photograph stays
   inside the column rather than running past it, and those are the two that
   read best the way Sisterly Style and Negin Mirsalehi set a post: the
   headline at the top, the photograph under it, and the sidebar starting level
   with the photograph rather than a screen further down.

   The order of the headline and the photograph is decided in PHP (see
   cb_wlc_render_opener) so the page reads the same way to a screen reader.
   What is left here is the spacing, and the column.
   ========================================================================== */

/* Headline first: no space above it, and room under it for the photograph. */
.wlc-section .wlc-opener--title-first .wlc-post-header {
	padding-top: 0;
	padding-bottom: 28px;
}

.wlc-section .wlc-opener--title-first .wlc-feat {
	margin-bottom: 0;
}

@media (min-width: 901px) {

	/*
	 * The sidebar beside the photograph.
	 *
	 * The opener and the row are siblings, so the sidebar — which lives inside
	 * the row — could only ever start below the opener. Letting the row hand
	 * its children up to a grid on the page (display: contents) puts all three
	 * in one grid, where the sidebar can span both rows and start at the top.
	 *
	 * max-width has to be cleared on both columns: they are sized as flex
	 * children at a third and two thirds, and a third of a grid area that is
	 * already a third is a very narrow sidebar.
	 */
	.wlc-section.wlc-layout-plain .wlc-single,
	.wlc-section.wlc-layout-column .wlc-single {
		display: grid;
		grid-template-columns: 66.6667% 33.3333%;
		align-items: start;
		box-sizing: border-box;
		max-width: var(--wlc-container);
		margin: 0 auto;
	}

	.wlc-section.wlc-layout-plain .wlc-post-row,
	.wlc-section.wlc-layout-column .wlc-post-row {
		display: contents;
	}

	.wlc-section.wlc-layout-plain .wlc-opener,
	.wlc-section.wlc-layout-column .wlc-opener {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
		margin: 0;
	}

	.wlc-section.wlc-layout-plain .wlc-post-main,
	.wlc-section.wlc-layout-column .wlc-post-main {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
	}

	.wlc-section.wlc-layout-plain .wlc-post-side,
	.wlc-section.wlc-layout-column .wlc-post-side {
		grid-column: 2;
		grid-row: 1 / span 2;
		max-width: none;
		/* It used to sit below the headline, where it needed clearing; level
		   with the photograph it should start exactly level. */
		margin-top: 0;
	}
}


/* ==========================================================================
   THE FOOT OF THE PAGE, IN BLACK

   Everything in it goes white, which means the greys it was built from have to
   be restated rather than left to inherit — the wordmark, the tagline, the
   navigation, the icons, the small print and the way back to the portfolio all
   had their own colour, and a black panel with six shades of grey text on it
   is not one decision, it is six accidents.
   ========================================================================== */

.wlc-section .wlc-foot {
	border-top: 0;
	background: #000;
	color: #fff;
}

.wlc-section .wlc-foot-mark,
.wlc-section .wlc-foot-mark a,
.wlc-section .wlc-foot-tag,
.wlc-section .wlc-foot-nav a,
.wlc-section .wlc-foot-socials a,
.wlc-section .wlc-foot-fine,
.wlc-section .wlc-foot-fine span,
.wlc-section .wlc-foot-portfolio,
.wlc-section .wlc-foot-credit-link,
.wlc-section .wlc-foot-legal a {
	color: #fff;
}

/* Hairlines have to lift off the black rather than sit on it. */
.wlc-section .wlc-foot-fine {
	border-top-color: rgba(255, 255, 255, 0.22);
}

.wlc-section .wlc-foot-portfolio,
.wlc-section .wlc-foot-credit-link {
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

/* On white these dimmed on hover; on black they have to brighten instead, so
   the affordance still reads as "this one". */
.wlc-section .wlc-foot-nav a:hover,
.wlc-section .wlc-foot-nav a:focus-visible,
.wlc-section .wlc-foot-socials a:hover,
.wlc-section .wlc-foot-socials a:focus-visible,
.wlc-section .wlc-foot-portfolio:hover,
.wlc-section .wlc-foot-portfolio:focus-visible,
.wlc-section .wlc-foot-credit-link:hover,
.wlc-section .wlc-foot-credit-link:focus-visible,
.wlc-section .wlc-foot-legal a:hover,
.wlc-section .wlc-foot-legal a:focus-visible {
	color: #fff;
	opacity: 0.66;
	border-bottom-color: currentColor;
}

/* The small print: privacy, cookies, terms, the affiliate disclosure. */
.wlc-section .wlc-foot-legal {
	margin: 2.5rem 0 0;
}

.wlc-section .wlc-foot-legal ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-foot-legal a {
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: opacity 0.18s ease, border-color 0.18s ease;
}


/* ==========================================================================
   THE SIDEBAR, REBUILT

   In order: the section this letter belongs to, what she is wearing, the
   search, the three letters she stands behind, and the years.
   ========================================================================== */

/* --- the section, and what it is ---------------------------------------
 *
 * THE PLATE — 19 SEP 2026
 *
 * Cata, having been shown eleven treatments of this block and then five
 * variations of the one she kept: "5C, the Plate won. But I would like the
 * word for the category to be bigger."
 *
 * A black block with a white keyline floating inside it, everything centred
 * on the line. It gives the sidebar a beginning, which the old arrangement —
 * a heading, an italic paragraph and a link, with nothing binding them — never
 * did.
 *
 * WHY TWO BOXES. The keyline has to sit inside the black with an even margin
 * all round. A border on the black block itself draws the line on its outer
 * edge, against the page, where there is nothing behind it. So the outer box
 * is the ground and .wlc-side-section-plate is the line; the outer padding is
 * the gap between them.
 *
 * THE SIZE OF THE NAME. 17px on 4px of tracking, up from 12 on 5. It is set in
 * the label face in caps, so it is measured by how many characters a category
 * can have, not by how it looks on its own: "Cute Little Spots" is the longest
 * on this blog at 17 characters, and at this setting it comes to about 236px
 * inside a 262px plate. Go much above 17px, or much above 4px of tracking, and
 * that name wraps. It wraps tolerably — it is centred — but it is no longer
 * one clean line, so the numbers are a ceiling rather than a preference.
 * -------------------------------------------------------------------------- */

.wlc-section .wlc-side-section {
	background: var(--wlc-deep);
	padding: 14px;
}

.wlc-section .wlc-side-section-plate {
	border: 1px solid rgba(255, 255, 255, 0.45);
	padding: 22px 18px 24px;
	text-align: center;
}

/* The line that says what the word underneath is. */
.wlc-section .wlc-side-section-kicker {
	display: block;
	margin: 0 0 12px;
	font-family: var(--wlc-font-label);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.wlc-section .wlc-side-section-title {
	margin: 0;
	font-family: var(--wlc-font-label);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #ffffff;
}

.wlc-section .wlc-side-section-words {
	margin: 16px 0 18px;
	font-family: var(--wlc-font-display);
	font-size: 15px;
	font-style: italic;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.wlc-section .wlc-side-section-more {
	margin: 0;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.wlc-section .wlc-side-section-more a {
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 2px;
	transition: border-color 0.18s ease;
}

.wlc-section .wlc-side-section-more a:hover,
.wlc-section .wlc-side-section-more a:focus-visible {
	border-bottom-color: #ffffff;
}

/*
 * The tracking comes in on a narrow column, where the plate is at its
 * tightest and a long category has least room to stand in.
 */
@media (max-width: 1100px) {

	.wlc-section .wlc-side-section-title {
		font-size: 16px;
		letter-spacing: 3px;
	}
}

/* --- Shop the Look ------------------------------------------------------ */

/*
 * A thumbnail, the name beside it, a rule between each — Negin Mirsalehi's
 * arrangement, which works because the pictures are small enough to scan and
 * the names are long enough to read. The thumbnail keeps its own proportions
 * inside a fixed square: a shoe and a coat photographed on a white background
 * are never the same shape, and cropping them to match would cut the heel off.
 */
.wlc-section .wlc-side-shop-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlc-section .wlc-side-shop-list li + li {
	border-top: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-side-shop-list a,
.wlc-section .wlc-side-shop-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-side-shop-img {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: contain;
	object-position: center;
}

.wlc-section .wlc-side-shop-img--none {
	display: block;
	background: #f4f4f4;
}

.wlc-section .wlc-side-shop-words {
	min-width: 0;
}

.wlc-section .wlc-side-shop-name {
	display: block;
	font-family: var(--wlc-font-display);
	font-size: 15px;
	line-height: 22px;
	color: var(--wlc-deep);
}

.wlc-section .wlc-side-shop-list a:hover .wlc-side-shop-name,
.wlc-section .wlc-side-shop-list a:focus-visible .wlc-side-shop-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wlc-section .wlc-side-shop-price {
	display: block;
	margin-top: 2px;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--wlc-meta);
}

.wlc-section .wlc-side-shop-note {
	margin: 1rem 0 0;
	font-family: var(--wlc-font-body);
	font-size: 11px;
	line-height: 17px;
	color: var(--wlc-meta);
}

/* --- the years ---------------------------------------------------------- */

/*
 * A list of years with a tally beside each read as a filing cabinet. One
 * dropdown, the years and nothing else. The arrow is drawn rather than left to
 * the browser, because the browser's is a different shape on every machine and
 * this one has to match the search box beside it.
 */
.wlc-section .wlc-year-form {
	margin: 0;
}

.wlc-section .wlc-year-field {
	position: relative;
}

.wlc-section .wlc-year-select {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 12px 40px 12px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wlc-hairline);
	border-radius: 0;
	font-family: var(--wlc-font-display);
	font-size: 15px;
	line-height: 22px;
	color: var(--wlc-deep);
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.wlc-section .wlc-year-select:hover {
	border-bottom-color: var(--wlc-ink);
}

.wlc-section .wlc-year-select:focus {
	outline: none;
	border-bottom-color: var(--wlc-ink);
}

.wlc-section .wlc-kbd .wlc-year-select:focus-visible {
	outline: 2px solid var(--wlc-ink);
	outline-offset: 3px;
}

.wlc-section .wlc-year-caret {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1px solid var(--wlc-meta);
	border-bottom: 1px solid var(--wlc-meta);
	transform: rotate(45deg);
	pointer-events: none;
}

.wlc-section .wlc-year-go {
	margin-top: 0.75rem;
}


/* ==========================================================================
   THE CARD THAT SLIDES IN NEAR THE END

   Bottom right, a quarter of the way from the end of the letter: "Previous",
   the title before this one, and its photograph. The rules about when it may
   appear are in includes/previous.php; this is what it looks like.

   It is fixed to the window, which is exactly why it has to be told to get out
   of the way — a fixed card does not know the sidebar is underneath it.
   ========================================================================== */

.wlc-section .wlc-prev {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 40;
	display: flex;
	align-items: stretch;
	max-width: 380px;
	background: #fff;
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.13);
	opacity: 0;
	/* Parked off the right edge — 100% of its own width plus the 24px it is
	   inset by, so none of it is left showing. It slides in from there and
	   slides back out the same way when the footer arrives, rather than
	   fading out where it stands. */
	transform: translateX(calc(100% + 24px));
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.wlc-section .wlc-prev.is-here {
	opacity: 1;
	transform: translateX(0);
}

.wlc-section .wlc-prev-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1rem 1rem 1.25rem;
	color: inherit;
	text-decoration: none;
	border: 0;
}

.wlc-section .wlc-prev-words {
	text-align: right;
}

.wlc-section .wlc-prev-label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-prev-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--wlc-font-display);
	font-size: 17px;
	line-height: 23px;
	font-weight: 700;
	color: var(--wlc-deep);
}

.wlc-section .wlc-prev-link:hover .wlc-prev-title,
.wlc-section .wlc-prev-link:focus-visible .wlc-prev-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wlc-section .wlc-prev-img {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	object-fit: cover;
	display: block;
}

/* Small, grey and out of the way until it is wanted. */
.wlc-section .wlc-prev-shut {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 17px;
	line-height: 1;
	color: var(--wlc-meta);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.18s ease, color 0.18s ease;
}

.wlc-section .wlc-prev:hover .wlc-prev-shut,
.wlc-section .wlc-prev-shut:focus-visible {
	opacity: 1;
}

.wlc-section .wlc-prev-shut:hover {
	color: var(--wlc-ink);
}

@media (max-width: 700px) {

	.wlc-section .wlc-prev {
		right: 12px;
		bottom: 12px;
		left: 12px;
		max-width: none;
	}

	.wlc-section .wlc-prev-link {
		flex: 1 1 auto;
		padding: 0.85rem 0.85rem 0.85rem 1rem;
	}

	.wlc-section .wlc-prev-title {
		font-size: 15px;
		line-height: 21px;
	}

	.wlc-section .wlc-prev-img {
		width: 76px;
		height: 76px;
	}
}

/* It animates in; anyone who has asked for less motion just gets it. */
@media (prefers-reduced-motion: reduce) {

	.wlc-section .wlc-prev {
		transition: opacity 0.2s ease;
		transform: none;
	}
}


/* ==========================================================================
   THE SEARCH IN THE BLACK BAND

   A magnifying glass at the far right. Clicking it opens a field that grows
   out of the glass rather than dropping a panel over the page — the band is
   54px tall and there is room in it, so nothing needs to be covered up.

   Without JavaScript the field is simply open and the glass is its submit
   button, which is why the form is real markup rather than something built on
   the first click.
   ========================================================================== */

.wlc-section .wlc-band-search {
	display: flex;
	align-items: center;
	margin: 0 0 0 auto;
}

.wlc-section .wlc-band-input {
	box-sizing: border-box;
	width: 190px;
	height: 30px;
	margin: 0;
	padding: 0 10px 0 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
	transition: width 0.24s ease, opacity 0.18s ease, border-color 0.18s ease;
	appearance: none;
	-webkit-appearance: none;
}

.wlc-section .wlc-band-input::placeholder {
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 1.4px;
}

.wlc-section .wlc-band-input:focus {
	outline: none;
	border-bottom-color: #fff;
}

/* Chrome's own clear button is a grey cross on black. */
.wlc-section .wlc-band-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.wlc-section .wlc-band-go {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin-left: 4px;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.wlc-section .wlc-band-go:hover {
	opacity: 0.66;
}

.wlc-section .wlc-band-go:focus {
	outline: none;
}

.wlc-section .wlc-kbd .wlc-band-go:focus-visible,
.wlc-section .wlc-kbd .wlc-band-input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wlc-section .wlc-band-glass {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* --- shut until asked for ----------------------------------------------- */

/*
 * The field is open in the markup so the search still works with JavaScript
 * off. When there is JavaScript, .wlc-js is on the html element before the
 * page is painted (see includes/focus-ring.php), so this collapses it in the
 * first paint — rather than the field being drawn open and then snapping shut,
 * which is a flash of a search box on every page load.
 */
.wlc-js .wlc-section .wlc-band-search .wlc-band-input,
.wlc-section .wlc-band-search.is-shut .wlc-band-input {
	width: 0;
	padding-right: 0;
	border-bottom-color: transparent;
	opacity: 0;
	pointer-events: none;
}

.wlc-js .wlc-section .wlc-band-search.is-open .wlc-band-input {
	width: 190px;
	padding-right: 10px;
	border-bottom-color: rgba(255, 255, 255, 0.4);
	opacity: 1;
	pointer-events: auto;
}

.wlc-js .wlc-section .wlc-band-search.is-open .wlc-band-input:focus {
	border-bottom-color: #fff;
}

@media (max-width: 700px) {

	.wlc-js .wlc-section .wlc-band-search.is-open .wlc-band-input,
	.wlc-section .wlc-band-search.is-open .wlc-band-input {
		width: 44vw;
	}
}


/* ==========================================================================
   SHARE

   Under the sign-off and the tags, as the old blog had it. Measured off
   withlovecata.com: the word in Work Sans 12/28 at #525252, a 1px #eee rule
   either side filling the column, 16px of air, then the icons — 27px tall,
   black, two pixels apart, centred.

   The original used an icon font; these are drawn inline, so there is no font
   file to fetch, no flash of nothing while it loads, and nothing to 404 in
   five years. And no script from Facebook or anyone else: each one is a plain
   link to that service's own share address, so nobody is tracked before they
   have chosen to share.
   ========================================================================== */

.wlc-section .wlc-share {
	margin: 3rem 0 0;
	text-align: center;
}

/* The word with a hairline running out of both sides of it. */
.wlc-section .wlc-share-label {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 16px;
	font-family: var(--wlc-font-body);
	font-size: 12px;
	line-height: 28px;
	color: #525252;
}

.wlc-section .wlc-share-label::before,
.wlc-section .wlc-share-label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #eee;
}

.wlc-section .wlc-share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.wlc-section .wlc-share-to {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	padding: 0;
	background: none;
	border: 0;
	color: #000;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.wlc-section .wlc-share-to:hover,
.wlc-section .wlc-share-to:focus-visible {
	color: #000;
	opacity: 0.55;
}

.wlc-section .wlc-share-to svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* The mail and link marks are drawn as strokes, so they must not be filled. */
.wlc-section .wlc-share-to--mail svg,
.wlc-section .wlc-share-copy svg {
	fill: none;
}

/* "Copied", said where the reader is already looking. */
.wlc-section .wlc-share-copy {
	position: relative;
}

.wlc-section .wlc-share-said {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 8px;
	background: #000;
	color: #fff;
	font-family: var(--wlc-font-label);
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.wlc-section .wlc-share-copy.has-said .wlc-share-said {
	opacity: 1;
}


/* ==========================================================================
   AIR UNDER THE MASTHEAD

   Everywhere except the front page of the blog, the masthead ends in a
   hairline and then a clear 56px before anything begins. Before this the
   wordmark, the tagline and the first line of a letter were touching — the
   masthead ended at 316 and the content started at 316, with nothing between
   them at all.

   Sisterly Style does the same thing and it is measured off them: a 1px #eee
   rule at the foot of the header, then 30px, then the columns start together.
   Ours takes a little more air, because our tagline sits lower than theirs.

   The front page is left alone deliberately — she asked for that, and it is
   right: the feed opens with a photograph the width of the page, and a rule
   above it would be a lid on it.
   ========================================================================== */

.wlc-section:not(.post-type-archive-withlovecata) .wlc-masthead-bar {
	border-bottom: 1px solid #eee;
	margin-bottom: 56px;
}

@media (max-width: 700px) {

	.wlc-section:not(.post-type-archive-withlovecata) .wlc-masthead-bar {
		margin-bottom: 32px;
	}
}


/* ==========================================================================
   THE PHOTOGRAPHS IN A LETTER

   Edge to edge of the measure, centred, by default — the left of the picture
   on the left of the paragraphs and the right on the right.

   They were sitting at whatever size the old markup asked for, which was often
   300px in a 706px column, so a photograph floated in the middle of the text
   lining up with nothing. The width comes from here; the src and the width and
   height attributes are put right in includes/content-images.php, because a
   width attribute beats any stylesheet.

   Anything she has deliberately aligned — left, right, wide, full — is left
   exactly as she set it. This is the default, not a rule.
   ========================================================================== */

.wlc-section .wlc-post-body .wp-block-image,
.wlc-section .wlc-post-body figure.wp-caption {
	margin-left: auto;
	margin-right: auto;
}

.wlc-section .wlc-post-body .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) img,
.wlc-section .wlc-post-body figure.wp-caption:not(.alignleft):not(.alignright) img,
.wlc-section .wlc-post-body > p > img,
.wlc-section .wlc-post-body > p > a > img {
	display: block;
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Except the ones there is not enough picture for. Stretching a 400px
 * photograph across a 706px column is a blurry photograph; better a small
 * sharp one, centred. The class is put on in PHP, where the real size of the
 * file is known.
 */
.wlc-section .wlc-post-body img.wlc-img--small {
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Captions keep to the picture they belong to. */
.wlc-section .wlc-post-body .wp-block-image figcaption,
.wlc-section .wlc-post-body .wp-caption-text {
	text-align: center;
}

/* The galleries arrange themselves by count and are not touched by any of
   this — their own rules already give each photograph its share of the row. */
.wlc-section .wlc-post-body .wlc-gallery img {
	width: 100%;
}


/* ==========================================================================
   THE INTRO, SET APART

   The standfirst above the photograph is not the article — it is a line or two
   of context so a reader knows what they are about to be told. It is set in
   the same hand as the sign-off at the foot of the letter: Playfair italic,
   the display face rather than the body one.

   That pairing is the point. The letter opens and closes in her own voice, in
   the same italic, with the article held between them — so the two ends of the
   page answer each other and neither can be mistaken for the piece itself.
   ========================================================================== */

.wlc-section .wlc-post-intro,
.wlc-section .wlc-post-intro p {
	font-family: var(--wlc-font-display);
	font-style: italic;
	font-size: 19px;
	line-height: 32px;
	color: var(--wlc-body);
}

/* Anything she has deliberately emphasised inside it turns the other way, so
   the emphasis is still visible rather than disappearing into the italic. */
.wlc-section .wlc-post-intro em,
.wlc-section .wlc-post-intro i {
	font-style: normal;
}


/* ==========================================================================
   THE HEADINGS INSIDE A LETTER — h1 TO h6, ONE FAMILY

   Measured on the live site before this was written. What was there:

     h1  DM Sans          30px   grey #525252   400
     h2  Playfair Display 30px   ink  #222222   700
     h3  Playfair Display 22px   ink  #222222   700
     h4  DM Sans          17px   grey #525252   400
     h5  DM Sans          12px   grey #525252   400
     h6  DM Sans          12px   grey #525252   400

   Two typefaces, two colours and no rhythm — because only h2 and h3 had ever
   been given a setting and the other four were falling through to the
   portfolio theme, which is set in DM Sans. Nothing about that was chosen.

   All six are Playfair Display now, in the ink of the headline, on one scale
   that steps down cleanly, with the space above each heading always larger
   than the space below it so a heading belongs to the text it introduces
   rather than floating between two blocks.

   For reference, sisterlystyle.com sets every heading on the page in Playfair
   Display at weight 400 — the same family this blog already uses.
   ========================================================================== */

.wlc-section .wlc-post-body h1,
.wlc-section .wlc-post-body h2,
.wlc-section .wlc-post-body h3,
.wlc-section .wlc-post-body h4,
.wlc-section .wlc-post-body h5,
.wlc-section .wlc-post-body h6 {
	font-family: var(--wlc-font-display);
	color: var(--wlc-ink);
	/* Regular weight, like the headline above them and like every heading on
	   sisterlystyle.com. Playfair has the contrast to hold a heading without
	   being made bold, and bold at these sizes is what made them shout. */
	font-weight: 400;
	font-style: normal;
	text-transform: none;
	text-wrap: balance;
	clear: none;
}

/* The two smallest are set at the size of the running text, or near it, so
   they need the weight to be told apart from it. The four above them don't. */
.wlc-section .wlc-post-body h5,
.wlc-section .wlc-post-body h6 {
	font-weight: 700;
}

.wlc-section .wlc-post-body h1 {
	font-size: 36px;
	line-height: 1.16;
	letter-spacing: -0.03em;
	margin: 3.2rem 0 1.1rem;
}

.wlc-section .wlc-post-body h2 {
	font-size: 29px;
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin: 3rem 0 1rem;
}

.wlc-section .wlc-post-body h3 {
	font-size: 23px;
	line-height: 1.26;
	letter-spacing: -0.015em;
	margin: 2.6rem 0 0.85rem;
}

.wlc-section .wlc-post-body h4 {
	font-size: 19px;
	line-height: 1.34;
	letter-spacing: -0.005em;
	margin: 2.2rem 0 0.7rem;
}

.wlc-section .wlc-post-body h5 {
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 2rem 0 0.6rem;
}

/* The smallest one is the same size as the running text, so it is told apart
   by the italic rather than by the size — which is what italic is for. */
.wlc-section .wlc-post-body h6 {
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 0;
	font-style: italic;
	margin: 1.9rem 0 0.55rem;
}

/* A heading is never the thing that opens a letter, so it should not carry
   the three centimetres of air that belong above one mid-article. */
.wlc-section .wlc-post-body h1:first-child,
.wlc-section .wlc-post-body h2:first-child,
.wlc-section .wlc-post-body h3:first-child,
.wlc-section .wlc-post-body h4:first-child,
.wlc-section .wlc-post-body h5:first-child,
.wlc-section .wlc-post-body h6:first-child {
	margin-top: 0;
}

@media (max-width: 600px) {

	.wlc-section .wlc-post-body h1 { font-size: 29px; margin-top: 2.4rem; }
	.wlc-section .wlc-post-body h2 { font-size: 25px; margin-top: 2.2rem; }
	.wlc-section .wlc-post-body h3 { font-size: 21px; margin-top: 2rem; }
	.wlc-section .wlc-post-body h4 { font-size: 18px; margin-top: 1.8rem; }
	.wlc-section .wlc-post-body h5 { font-size: 16px; }
	.wlc-section .wlc-post-body h6 { font-size: 15px; }
}


/* ==========================================================================
   AN INSTAGRAM POST INSIDE A LETTER

   Instagram's own embed, which arrives as a blockquote and is replaced by
   their script. Before that script runs — and for a reader whose browser
   blocks it, which is a reasonable thing for a browser to do — the blockquote
   is all there is, so it is given a shape of its own rather than being left
   as an unstyled quotation in the middle of the writing.
   ========================================================================== */

.wlc-section .wlc-post-body .wlc-instagram {
	display: block;
	max-width: 540px;
	margin: 2.4rem auto;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--wlc-hairline);
	border-radius: 3px;
	background: #fff;
	font-family: var(--wlc-font-label);
	font-size: 13px;
	text-align: center;
	quotes: none;
}

.wlc-section .wlc-post-body .wlc-instagram::before,
.wlc-section .wlc-post-body .wlc-instagram::after {
	content: none;
}

.wlc-section .wlc-post-body .wlc-instagram a {
	color: var(--wlc-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wlc-hairline);
}


/* ==========================================================================
   THE WHITE CUTOUT THE LETTER BEGINS ON

   Copied from sisterlystyle.com, measured rather than guessed. There, the
   opening photograph is 750px wide and everything below it sits in a white
   box 713px wide — 18px inside the photograph on each side — pulled up 80px
   with 30px of padding, so the first words of the article sit on white laid
   over the bottom of the picture.

   Here the same idea has to survive a sidebar and a rule about not stretching
   photographs, so it is built the other way round:

     - the photograph gives up the column's side padding and runs the full
       760px of its grid column, instead of the 706px the text uses;
     - the writing keeps a box of 706px, centred, which is therefore inset
       27px inside the photograph on each side;
     - that box is white, sits above the photograph, and is pulled up 88px
       with 34px of padding over it.

   Only Plain and "photograph in the column" get this, and only when the
   photograph is genuinely wide enough — see cb_wlc_cutout(). Everything else
   is untouched.

   Below 901px the sidebar stacks and the column is the width of the screen,
   so there is nothing to inset against and the whole thing is switched off.
   ========================================================================== */

@media (min-width: 901px) {

	/* The photograph, out to the edges of its column. */
	.wlc-section.wlc-cutout .wlc-feat--edge {
		margin-inline: calc(var(--wlc-col-pad) * -1);
		margin-bottom: 0;
		width: auto;
	}

	/*
	 * The card the writing sits on.
	 *
	 * .wlc-post-main is a grid item in row two; a negative top margin lifts
	 * its border box above the row and over the photograph, exactly as the
	 * "You might also like" cards are lifted over theirs.
	 *
	 * The side padding is left alone — it is what holds the text 27px in from
	 * the card's edge, which is the white margin that makes it read as a card
	 * rather than as a column that happens to be narrower.
	 */
	.wlc-section.wlc-cutout .wlc-post-main {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: calc(100% - (2 * var(--wlc-col-pad)));
		margin-inline: auto;
		margin-top: -88px;
		padding-top: 34px;
		background: var(--wlc-ground);
	}

	/*
	 * Nothing above the first paragraph.
	 *
	 * The card's own padding is the space over the drop cap; a paragraph's
	 * top margin on top of that would drop the writing below the photograph
	 * again and the overlap would be an empty white ledge.
	 */
	.wlc-section.wlc-cutout .wlc-post-body > .wp-block-post-content > *:first-child {
		margin-top: 0;
	}
}


/* ==========================================================================
   THE INSTAGRAM ROW ABOVE THE FOOTER

   Six square photographs, edge to edge, sitting on top of the black footer —
   the arrangement Sisterly Style uses.

   Every selector here is prefixed with #sb_instagram, and that is the whole
   trick. The first attempt used three classes and !important and still lost:
   Smash Balloon writes its rules as `#sb_instagram .sbi_photo_wrap`, and an id
   outranks any number of classes no matter who shouts !important. The tiles
   came out 250x334 with an aspect-ratio of 1/1 sitting on them, ignored,
   because their height won on specificity. Matching their id fixes it.

   The rest is undoing a sidebar widget: their heading, follow button, tile
   padding and inline widths all have to go for this to read as a strip rather
   than a box.

   Written against Smash Balloon v6. If they rename their insides the row
   loses its shape rather than disappearing — the photographs stay, laid out
   their way instead of ours.
   ========================================================================== */

.wlc-section .wlc-ig-row {
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	background: #000;
}

.wlc-section .wlc-ig-row #sb_instagram {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* Their grid, re-laid as six equal columns with nothing between them. */
.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

/*
 * Six, however many Smash Balloon was asked for.
 *
 * The shortcode carries num=6, and v6 ignores it in favour of whatever is set
 * on the feed itself — the live row came back with twelve. Rather than depend
 * on a number in their screen matching a number here, anything past the sixth
 * is simply not drawn.
 */
.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item:nth-child(n+7) {
	display: none !important;
}

/*
 * Square, whatever shape it was posted in.
 *
 * A reel is 9:16 and a portrait post is 4:5; left alone, a row of six mixed
 * shapes is a row of six different heights. height: auto is what lets the
 * aspect-ratio decide — without it their height stands and the ratio is
 * quietly ignored.
 *
 * Reels can also be switched off at source: Smash Balloon put the Photos /
 * Videos / Reels toggles into the free version in 6.11.4, and that is the
 * better fix when a reel's square crop loses the shot. This is the safety net.
 */
.wlc-section .wlc-ig-row #sb_instagram .sbi_photo_wrap,
.wlc-section .wlc-ig-row #sb_instagram .sbi_photo,
.wlc-section .wlc-ig-row #sb_instagram .sbi_link,
.wlc-section .wlc-ig-row #sb_instagram .sbi_imgLiquid_bgSize {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: 1 / 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	background-size: cover !important;
	background-position: center !important;
}

.wlc-section .wlc-ig-row #sb_instagram .sbi_photo img,
.wlc-section .wlc-ig-row #sb_instagram .sbi_item img:not(.emoji),
.wlc-section .wlc-ig-row #sb_instagram .sbi_item video {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* The furniture a sidebar widget needs and a footer strip does not. */
.wlc-section .wlc-ig-row #sb_instagram #sbi_header,
.wlc-section .wlc-ig-row #sb_instagram .sbi_header,
.wlc-section .wlc-ig-row #sb_instagram #sbi_load,
.wlc-section .wlc-ig-row #sb_instagram .sbi_follow_btn,
.wlc-section .wlc-ig-row #sb_instagram .sbi_info,
.wlc-section .wlc-ig-row #sb_instagram .sb_instagram_header {
	display: none !important;
}

.wlc-section .wlc-ig-row #sb_instagram .sbi_photo_wrap {
	transition: opacity 0.25s ease;
}

.wlc-section .wlc-ig-row #sb_instagram .sbi_item:hover .sbi_photo_wrap {
	opacity: 0.82;
}

@media (max-width: 900px) {

	.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* Three across, so six is two rows — still six. */
	.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item:nth-child(n+7) {
		display: none !important;
	}
}


/* ==========================================================================
   THE INSTAGRAM ROW MARKS WHERE THE FOOTER BEGINS

   Measured on sisterlystyle.com: their feed's top and their footer's top are
   the same pixel — the strip *is* the edge, there is no black above it — and
   there are 101px between the bottom of the strip and their wordmark.

   Ours had it the other way round: 64px of black above the row, because the
   footer carries 4rem of top padding, and nothing at all below it, so the
   blog's name started the instant the photographs stopped.

   The row cancels that padding with negative margins rather than the footer
   switching it off, so this works without :has() and without the footer
   needing to know whether there is a row inside it today.

   The two negative values are tied to `.wlc-foot`'s own padding — 4rem top,
   var(--wlc-gutter) sides, and 3rem top under 600px. If that padding is ever
   changed, these have to change with it.
   ========================================================================== */

.wlc-section .wlc-ig-row {
	margin-top: calc(4rem * -1);
	margin-inline: calc(var(--wlc-gutter) * -1);
	margin-bottom: 100px;
}

@media (max-width: 600px) {

	.wlc-section .wlc-ig-row {
		margin-top: calc(3rem * -1);
		margin-bottom: 64px;
	}
}


/* The rail gets out of the way of the footer — see cb_wlc_rail_script(). */
.wlc-section .wlc-social-rail {
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wlc-section .wlc-social-rail.is-away {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


/* ==========================================================================
   THE WRITING ON A CARD, LAID OVER THE PHOTOGRAPH

   Everything in the card that is words — the section, the headline, the
   postmark, the opening, "Read the Letter" — is drawn inside a 3px rule, and
   that box laps 5px onto the photograph beside it.

   Two things make the overlap read as an overlap rather than as a box that
   happens to touch:

     - the box is opaque. Without a background of its own the 5px would be
       transparent and the photograph would show through the rule.
     - it sits above. z-index, because the photograph is a later sibling in
       one card and an earlier one in the next.

   ONLY the two single-photograph arrangements get this.

   The two-photograph cards are left exactly as they were, and deliberately:
   they already have an overlap of their own — the standing photograph laid
   over the wide one in its white mount — and a second framed overlap
   underneath it is one idea too many in one card.

   align-self: center is what makes it a box around the writing rather than a
   tall panel: the words are a grid item, and a grid item stretches to the
   height of its row unless told not to.
   ========================================================================== */

.wlc-section .wlc-feed-item--left .wlc-feed-words,
.wlc-section .wlc-feed-item--right .wlc-feed-words {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	align-self: center;
	border: 3px solid var(--wlc-ink);
	background: var(--wlc-ground);
	/*
	 * A white band outside the black rule, the same 20px as the mount around
	 * the standing photograph on a two-photograph card — so the two overlaps
	 * on the page are cut from the same cloth.
	 *
	 * box-shadow rather than a second border or an outline: a spread shadow
	 * paints outside the border box without occupying any space, so the band
	 * can lie over the photograph without moving the writing or changing the
	 * height of the row.
	 */
	box-shadow: 0 0 0 20px var(--wlc-ground);
	/* 40px was the side padding before; the same all round keeps the writing
	   off its own frame. */
	padding: 40px;
}

@media (min-width: 901px) {

	/*
	 * How far it laps. The margin places the black rule; the white band
	 * reaches 20px further still, so the photograph is covered from 36px in.
	 */

	/* Photograph on the left, so the box reaches back over its right edge. */
	.wlc-section .wlc-feed-item--left .wlc-feed-words {
		margin-left: -16px;
	}

	/* Photograph on the right. */
	.wlc-section .wlc-feed-item--right .wlc-feed-words {
		margin-right: -16px;
	}
}

@media (max-width: 900px) {

	/* Stacked, the photograph is above the writing, so the box laps upwards
	   and the frame comes in off the screen edge. */
	.wlc-section .wlc-feed-item--left .wlc-feed-words,
	.wlc-section .wlc-feed-item--right .wlc-feed-words {
		margin: -16px 30px 0;
		padding: 28px 22px;
		/* Narrower screen, narrower band — 20px each side would eat the page. */
		box-shadow: 0 0 0 12px var(--wlc-ground);
	}
}


/* ==========================================================================
   THE POSTMARK, AND THE WAY IN

   Restored. This section and the one below it were destroyed by a careless
   edit on 15 September: two later rewrites replaced everything from a marker
   to the end of the file instead of replacing one block, and took these with
   them. The markup had gone on being printed, so the words were still there —
   unstyled, which is why the rules either side of the section vanished and
   "Read the Letter" went back to 13px without anyone saying so.

   The card's small type used to be one line — date, place, reading time, all
   equal. They are not equal: where a letter was written from is the part
   worth reading, and the other two are housekeeping.
   ========================================================================== */

.wlc-section .wlc-feed-meta--where {
	margin: 1.1rem 0 0;
}

.wlc-section .wlc-feed-meta--when {
	margin: 0.35rem 0 0;
	color: var(--wlc-meta);
}

/* On a card with no place on it, the housekeeping line takes the postmark's
   place rather than sitting tight under the headline. */
.wlc-section .wlc-feed-meta--when:first-of-type {
	margin-top: 1.1rem;
}

.wlc-section .wlc-feed-more a {
	font-size: 16px;
	line-height: 28px;
}

/* The one word in it that is not the thing itself. */
.wlc-section .wlc-feed-more em {
	font-style: italic;
	font-weight: 400;
}


/* ==========================================================================
   ONE SECTION ABOVE THE HEADLINE, RULED EITHER SIDE

   Also restored — see above.

   Measured on sisterlystyle.com's home page rather than eyeballed. Their
   kicker is a `display: table` element whose ::before and ::after are each a
   50px box with a 1px top border, with the section name between them at
   12px/600/3px tracking, uppercase.

   The same thing here, built with flex instead of a table — same result, and
   it keeps the rules vertically centred on the word rather than on its line
   box, which is what stops them sitting slightly high.
   ========================================================================== */

.wlc-section .wlc-feed-terms {
	text-align: center;
}

.wlc-section .wlc-feed-kicker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 100%;
}

.wlc-section .wlc-feed-kicker::before,
.wlc-section .wlc-feed-kicker::after {
	content: "";
	flex: 0 0 auto;
	width: 50px;
	height: 0;
	border-top: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-feed-kicker a {
	letter-spacing: 3px;
	/* The tracking is added after every letter including the last, which pushes
	   the word off its own centre. Half of it back on the left evens it up. */
	padding-left: 3px;
}

@media (max-width: 600px) {

	.wlc-section .wlc-feed-kicker {
		gap: 10px;
	}

	.wlc-section .wlc-feed-kicker::before,
	.wlc-section .wlc-feed-kicker::after {
		width: 32px;
	}
}


/* ==========================================================================
   THE CUTOUT ON THE FIVE ARRANGEMENTS WITH THE HEADLINE UNDER THE PHOTOGRAPH

   Wide, inset, banner, and the two without a sidebar all put the headline
   directly beneath the photograph — so here the thing that laps up onto it is
   the headline block itself, not the writing. On Plain and "photograph in the
   column" the headline is above the photograph, which is why those lap with
   .wlc-post-main instead. Same effect, opposite piece.

   Measured on the live page before writing: the opener's two children are the
   figure and the header, both 1086px wide and flush, with the header's own
   40px of vertical padding between them. So the panel is inset 27px inside
   that 1086 — the same inset the column arrangements use — pulled up 88px,
   with 34px of padding over the first line.

   Only on a screen wide enough to have a margin to inset against.
   ========================================================================== */

@media (min-width: 901px) {

	.wlc-section.wlc-cutout-head .wlc-post-header {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: calc(100% - 54px);
		margin-inline: auto;
		margin-top: -88px;
		padding: 34px 32px 40px;
		background: var(--wlc-ground);
	}

	/*
	 * The banner runs edge to edge across the whole page rather than inside
	 * the opener's padding, so its panel is inset from the page instead —
	 * otherwise it would be a narrow card adrift on a very wide photograph.
	 */
	.wlc-section.wlc-layout-banner.wlc-cutout-head .wlc-post-header {
		max-width: var(--wlc-wide);
	}
}


/* ==========================================================================
   MOBILE AND TABLET

   Measured 17 Sep 2026 at 360, 390, 430, 768 and 1024, on the homepage, a
   letter, an archive and the footer.

   Two things were already right and are deliberately not touched: nothing
   scrolled sideways at any width, and the photographs were already being
   served at the correct size through srcset. Two more that looked wrong from
   a distance turned out to be handled — the white cutout is already gated to
   min-width 901px, and the Previous card already has its own phone layout as
   a bar along the bottom.

   What follows is only what was actually broken. It is appended at the end of
   the file so it wins on order rather than on !important; every selector here
   matches the specificity of the rule it corrects.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE MENU BEHIND A BUTTON

   At 390px the header ran 340px deep before a reader reached a photograph:
   black band, location, wordmark, tagline, then seven links wrapped onto two
   rows. Cata chose the button on 17 Sep over the alternatives (leave it
   wrapping, a side-scrolling row, or fewer links) knowing the trade — the
   sections are a tap away rather than in sight.
   -------------------------------------------------------------------------- */

.wlc-section .wlc-burger { display: none; }

/* `hidden` is the source of truth, so it has to outrank the display:block
   below. Class + attribute beats class + class. */
.wlc-section .wlc-menu-panel[hidden] { display: none; }

@media (min-width: 901px) {

	/* Belt and braces: above 900px the panel cannot appear even if something
	   left it open. */
	.wlc-section .wlc-menu-panel { display: none; }
}

@media (max-width: 900px) {

	.wlc-section .wlc-masthead-inner { position: relative; }

	/* Absolute, so the wordmark stays optically centred in the row rather
	   than being pushed off by the button's width. */
	.wlc-section .wlc-burger {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wlc-ink);
		cursor: pointer;
	}

	.wlc-section .wlc-burger-lines { display: block; width: 22px; }

	.wlc-section .wlc-burger-lines i {
		display: block;
		height: 1.5px;
		background: currentColor;
		transition: transform 0.22s ease, opacity 0.18s ease;
	}

	.wlc-section .wlc-burger-lines i + i { margin-top: 5px; }

	.wlc-section .wlc-burger.is-open .wlc-burger-lines i:nth-child(1) {
		transform: translateY(6.5px) rotate(45deg);
	}
	.wlc-section .wlc-burger.is-open .wlc-burger-lines i:nth-child(2) { opacity: 0; }
	.wlc-section .wlc-burger.is-open .wlc-burger-lines i:nth-child(3) {
		transform: translateY(-6.5px) rotate(-45deg);
	}

	/* The two half-menus either side of the wordmark are what the button
	   replaces. */
	.wlc-section .wlc-nav { display: none; }

	.wlc-section .wlc-menu-panel {
		display: block;
		border-top: 1px solid var(--wlc-hairline);
		background: var(--wlc-ground);
	}

	.wlc-section .wlc-panel-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wlc-section .wlc-panel-nav a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 0 var(--wlc-gutter);
		border: 0;
		border-bottom: 1px solid var(--wlc-hairline);
		font-family: var(--wlc-font-label);
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--wlc-ink);
	}

	/* Sub-sections indented rather than nested behind another tap. A phone
	   panel with its own dropdowns is a scroll inside a scroll. */
	.wlc-section .wlc-panel-kids a {
		min-height: 46px;
		padding-left: calc(var(--wlc-gutter) + 22px);
		font-size: 12px;
		letter-spacing: 1.6px;
		color: var(--wlc-meta);
	}

	.wlc-section .wlc-panel-socials {
		display: flex;
		justify-content: center;
		gap: 0.25rem;
		padding: 1.25rem 0 1.5rem;
	}

	.wlc-section .wlc-panel-socials a {
		width: 48px;
		height: 48px;
		color: var(--wlc-ink);
	}
}

@media (prefers-reduced-motion: reduce) {

	.wlc-section .wlc-burger-lines i { transition: none; }
}


/* --------------------------------------------------------------------------
   2. WHAT A THUMB CAN HIT

   Ten targets under 44px at every width tested, identical at 360 and at 1024.
   The worst was the way back to the portfolio at 145 x 11px. Every menu link
   was 18px tall.

   All of this is padding, never font-size. The type is the right size; it was
   the touchable area around it that did not exist. Apple asks for 44px and
   Google for 48; 44 is the floor used here, 48 where there was room.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.wlc-section .wlc-backlink--top a,
	.wlc-section .wlc-subscribe,
	.wlc-section .wlc-topbar a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.wlc-section .wlc-band-go {
		width: 44px;
		height: 44px;
	}

	.wlc-section .wlc-foot-nav a,
	.wlc-section .wlc-foot-legal a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.wlc-section .wlc-foot-socials a {
		width: 48px;
		height: 48px;
	}

	.wlc-section .wlc-feed-more a,
	.wlc-section .wlc-feed-terms a,
	.wlc-section .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	/* The rows those links sit in have to give the padding somewhere to go,
	   or two 44px links land on top of one another. */
	.wlc-section .wlc-foot-nav ul,
	.wlc-section .wlc-foot-legal ul {
		row-gap: 0;
	}
}


/* --------------------------------------------------------------------------
   3. THE SMALL-TEXT FLOOR

   Eight things were set at 10 or 11px, and every one of them is tracked
   capitals — the hardest possible setting to read at that size, on a screen
   held at arm's length in daylight.

   The sizes go up and the tracking comes down to pay for the width, so the
   lines still fit where they fitted before.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

	.wlc-section .wlc-tagline {
		font-size: 12.5px;
		letter-spacing: 1.6px;
	}

	.wlc-section .wlc-foot-tag {
		font-size: 12px;
		letter-spacing: 1.6px;
	}

	.wlc-section .wlc-feed-terms a {
		font-size: 12px;
		letter-spacing: 1.4px;
	}

	.wlc-section .wlc-subscribe,
	.wlc-section .wlc-backlink--top a {
		font-size: 12px;
		letter-spacing: 1.6px;
	}

	.wlc-section .wlc-foot-legal a,
	.wlc-section .wlc-foot-fine,
	.wlc-section .wlc-foot-fine span,
	.wlc-section .wlc-foot-credit,
	.wlc-section .wlc-foot-portfolio {
		font-size: 12px;
		letter-spacing: 1px;
	}
}


/* --------------------------------------------------------------------------
   4. THE DROP CAP ON A PHONE

   Measured at 390px: 105px on a 79.8px line-height, against body text of
   15px on a 28px line. The rule this blog has always followed is that
   (font-size x line-height) + margin-top must stay under two body lines —
   56px — or a third line wraps around empty space and the whole opening
   paragraph goes ragged.

   There WAS a max-width:600px rule meant to handle this. It missed, for two
   reasons worth recording:

     1. It listed only `> p:first-of-type::first-letter`, while the base rule
        also matches `> .wp-block-paragraph:first-of-type::first-letter` and
        `.wlc-bigletter::first-letter`. Posts matching the other two kept the
        full 7em.
     2. Its own value was over budget anyway: 5.4em x 0.76 = 61.6px, still
        past 56.

   So this rule restates all three selectors and lands at 4.8em x 0.72 =
   51.8px, inside two lines with room to spare.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

	.wlc-section.wlc-dropcap .wlc-post-body .wp-block-post-content > p:first-of-type::first-letter,
	.wlc-section.wlc-dropcap .wlc-post-body .wp-block-post-content > .wp-block-paragraph:first-of-type::first-letter,
	.wlc-section .wlc-bigletter::first-letter {
		font-size: 4.8em;
		line-height: 0.72;
		/* Less overhang than the desktop 19px: on a 390px screen that much
		   would put the letter's left edge off the side of the page. */
		margin: -0.05em 0.09em 0 -0.07em;
	}
}


/* --------------------------------------------------------------------------
   5. THE FEED CARD'S MEASURE

   At 390px the card put its intro inside the black rule, the 12px white band
   and 22px of padding, centred, at about 22 characters a line. Comfortable
   reading is 35 to 45. The frame was taking a third of the screen's width to
   produce an overlap that does not even happen at this size, because the
   photograph and the words are stacked rather than side by side.

   The frame stays — it is the look Cata asked for — but it stops charging so
   much for itself.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

	.wlc-section .wlc-feed-item--left .wlc-feed-words,
	.wlc-section .wlc-feed-item--right .wlc-feed-words {
		margin: -14px 10px 0;
		padding: 26px 16px 28px;
		box-shadow: 0 0 0 8px var(--wlc-ground);
	}
}


/* --------------------------------------------------------------------------
   6. CORRECTIONS, AFTER MEASURING v1.68.0 ON THE LIVE SITE

   Everything above was written from the first round of measurements. These
   are what the second round found — which is the whole argument for measuring
   after installing rather than before.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

	/*
	 * THE SIDEWAYS SCROLL.
	 *
	 * .wlc-foot is a full-bleed block: width 100vw, 20px of padding each
	 * side, and box-sizing left at content-box — so it lays out 40px wider
	 * than the screen and drags the whole document with it. At 390px the
	 * footer measured 430px.
	 *
	 * border-box puts the padding inside the width. One line, and it is the
	 * only thing that was making the blog scroll sideways at 360, 390 and 430.
	 */
	.wlc-section .wlc-foot {
		box-sizing: border-box;
	}

	/* Five targets the first pass missed. Found by measuring every anchor on
	   the page rather than by reading the markup and guessing which ones
	   mattered. */
	.wlc-section .wlc-social-rail a {
		width: 44px;
		height: 44px;
	}

	.wlc-section .wlc-foot-mark a,
	.wlc-section .wlc-foot-portfolio,
	.wlc-section .wlc-foot-credit-link,
	.wlc-section .wlc-where a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

@media (max-width: 700px) {

	/*
	 * These two ignored section 3 entirely, and the reason is specificity,
	 * not the media query: both are set with three classes elsewhere in this
	 * file, and section 3 asked for them with two. Same trap as the drop cap,
	 * different mechanism — worth remembering that a rule appearing later in
	 * the file only wins when the specificity already matches.
	 */
	.wlc-section .wlc-masthead-bar .wlc-tagline {
		font-size: 12.5px;
		letter-spacing: 1.6px;
	}

	.wlc-section .wlc-topband .wlc-subscribe {
		font-size: 12px;
		letter-spacing: 1.6px;
	}
}


/* --------------------------------------------------------------------------
   7. THIRD PASS — WHAT MEASURING v1.68.1 FOUND

   The phones came back clean: no sideways scroll, nothing under 12px, the
   drop cap at a 51.8px box inside its 56px budget. Three things left.
   -------------------------------------------------------------------------- */

/*
 * THE FOOTER, AT EVERY WIDTH.
 *
 * v1.68.1 gave .wlc-foot border-box sizing below 900px only, because that was
 * where the sideways scroll had been measured. Measuring the desktop
 * afterwards showed the same fault there and always had: at a 1344px viewport
 * the footer lays out at 1392 — 100vw plus its own 24px of padding each side.
 *
 * So this is NOT a mobile fix and never was. It is a long-standing bug that
 * only came to light because the mobile pass was the first time anything on
 * this blog was checked for horizontal overflow at all. Unscoped, deliberately.
 */
.wlc-section .wlc-foot {
	box-sizing: border-box;
}

@media (max-width: 900px) {

	/*
	 * "Written from: Miami" on a feed card — the last target under 44px on the
	 * homepage. It is not in .wlc-where (that is the masthead's location line);
	 * it lives in .wlc-feed-meta, which is why the earlier rule missed it.
	 */
	.wlc-section .wlc-feed-meta a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/*
	 * The small-text floor now reaches 900px rather than 700px.
	 *
	 * 900 is where the menu already becomes a button, so it is where the blog
	 * already stops being a desktop and starts being something held in a hand.
	 * Having the type change at a different width from the navigation was an
	 * arbitrary seam, and it left an iPad in portrait reading 10px tracked
	 * capitals in the footer.
	 */
	.wlc-section .wlc-masthead-bar .wlc-tagline {
		font-size: 12.5px;
		letter-spacing: 1.6px;
	}

	.wlc-section .wlc-topband .wlc-subscribe {
		font-size: 12px;
		letter-spacing: 1.6px;
	}

	.wlc-section .wlc-foot-tag {
		font-size: 12px;
		letter-spacing: 1.6px;
	}

	.wlc-section .wlc-feed-terms a {
		font-size: 12px;
		letter-spacing: 1.4px;
	}

	.wlc-section .wlc-foot-legal a,
	.wlc-section .wlc-foot-fine,
	.wlc-section .wlc-foot-fine span,
	.wlc-section .wlc-foot-credit,
	.wlc-section .wlc-foot-credit-link,
	.wlc-section .wlc-foot-portfolio {
		font-size: 12px;
		letter-spacing: 1px;
	}
}

/*
 * NOT CHANGED, ON PURPOSE: the links inside the writing.
 *
 * A letter measures 16 targets under 44px, and almost all of them are links
 * inside sentences — a shop name, a place, a hotel. WCAG 2.5.8 exempts links
 * in a block of text from the target-size rule precisely because padding them
 * to 44px would tear the paragraph apart. They are left alone.
 */


/* --------------------------------------------------------------------------
   8. THE MENU BUTTON MOVES, AND THE LETTER'S OWN FURNITURE

   18 Sep 2026. Cata: "hamburger menu doesn't work."

   It worked — a click removed `hidden`, set aria-expanded and rendered the
   panel, every time, measured. What it did not do was exist anywhere a person
   would look for it: left-hand side, vertically centred in the masthead row,
   sitting against the wordmark. A menu nobody can find is broken whatever the
   DOM says, and "it works, you're looking in the wrong place" is not a fix.

   It now sits at the right-hand end of the row under the black band, which is
   where she asked for it and where a thumb reaches on a phone held in one hand.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {

	/* The row exists only to carry the button when there is no location line.
	   On a desktop, with no button, it would be an empty band of padding. */
	.wlc-section .wlc-topbar--bare {
		display: none;
	}
}

@media (max-width: 900px) {

	.wlc-section .wlc-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	/* Undo the absolute placement from section 1: it is an ordinary item in
	   this row now, pushed to the right by the margin. */
	.wlc-section .wlc-burger {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		margin-left: auto;
		flex: 0 0 auto;
	}

	/* The masthead row no longer has anything positioned inside it. */
	.wlc-section .wlc-masthead-inner {
		position: static;
	}

	/*
	 * A LETTER'S OWN FURNITURE.
	 *
	 * The homepage came back clean at 360, 390 and 768, but a letter has meta
	 * the homepage does not: the section above the headline, the place in the
	 * dateline, the sign-off, the tag list at the foot and the share buttons.
	 * Fourteen targets, none of them links inside sentences, so none of them
	 * covered by the running-text exemption.
	 */
	.wlc-section .wlc-post-cats a,
	.wlc-section .wlc-post-meta a,
	.wlc-section .wlc-post-place a,
	.wlc-section .wlc-signoff-line a,
	.wlc-section .taxonomy-wlc_tag a,
	.wlc-section .wp-block-post-terms a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.wlc-section .wlc-share-to {
		width: 44px;
		height: 44px;
	}

	.wlc-section .wp-block-post-terms,
	.wlc-section .wp-block-post-terms__prefix,
	.wlc-section .taxonomy-wlc_tag,
	.wlc-section .taxonomy-wlc_tag a {
		font-size: 12px;
	}
}


/* ==========================================================================
   9. THE MOBILE REDESIGN — 18 SEP 2026

   Cata's brief, in full. Everything below 900px unless marked otherwise.
   ========================================================================== */

/* --- 9a. the panel: fixed, locked, ending at the social icons ----------- */

@media (max-width: 900px) {

	/*
	 * Fixed rather than in the flow.
	 *
	 * The first version pushed the page down and the letter behind carried on
	 * scrolling under the open menu, which reads as two pages fighting each
	 * other. Fixed, with the body locked, means the panel ends where its own
	 * content ends — at the social icons — and nothing moves behind it.
	 *
	 * --wlc-panel-top is written by the script from the measured bottom edge
	 * of the row above; dvh rather than vh so iOS's address bar sliding away
	 * does not leave the last row of the menu under the chrome.
	 */
	.wlc-section .wlc-menu-panel {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--wlc-panel-top, 120px);
		z-index: 40;
		display: block;
		/*
		 * vh first, dvh second, deliberately in that order.
		 *
		 * dvh is Safari 15.4+, Chrome 108+, Firefox 101+. A browser older than
		 * that cannot parse the second line, drops it, and keeps the first —
		 * so the panel still gets a height limit instead of no limit at all,
		 * which is what a bare dvh would have left it with. Newer browsers
		 * parse both and the later one wins, so iOS's address bar sliding away
		 * does not put the last row of the menu under the chrome.
		 */
		max-height: calc(100vh - var(--wlc-panel-top, 120px));
		max-height: calc(100dvh - var(--wlc-panel-top, 120px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid var(--wlc-hairline);
		background: var(--wlc-ground);
		box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
	}

	/* The body is frozen at the scroll position the reader was at; the script
	   puts that position back on close, because position:fixed forgets it. */
	body.wlc-locked {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}

	.wlc-section .wlc-panel-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wlc-section .wlc-panel-row {
		border-bottom: 1px solid var(--wlc-hairline);
	}

	/* A section with children is two controls on one line: the word goes to
	   the section, the arrow opens what is inside it. */
	.wlc-section .wlc-panel-line {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
	}

	.wlc-section .wlc-panel-nav a {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-height: 54px;
		padding: 0 var(--wlc-gutter);
		border: 0;
		font-family: var(--wlc-font-label);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--wlc-ink);
	}

	.wlc-section .wlc-panel-more {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 56px;
		min-height: 54px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wlc-ink);
		cursor: pointer;
	}

	/* The arrow. A rotated corner rather than a glyph, so it is the same
	   weight as the hairlines it sits among and turns when it opens. */
	.wlc-section .wlc-panel-chev {
		display: block;
		width: 8px;
		height: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.wlc-section .wlc-panel-more[aria-expanded="true"] .wlc-panel-chev {
		transform: translateY(2px) rotate(-135deg);
	}

	.wlc-section .wlc-panel-kids {
		border-top: 1px solid var(--wlc-hairline);
		background: rgba(0, 0, 0, 0.018);
	}

	.wlc-section .wlc-panel-kids li + li {
		border-top: 1px solid var(--wlc-hairline);
	}

	.wlc-section .wlc-panel-kids a {
		min-height: 48px;
		padding-left: calc(var(--wlc-gutter) + 22px);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 1.6px;
		color: var(--wlc-meta);
	}

	.wlc-section .wlc-panel-socials {
		display: flex;
		justify-content: center;
		gap: 0.25rem;
		padding: 1.5rem 0 1.75rem;
	}

	.wlc-section .wlc-panel-socials a {
		width: 48px;
		height: 48px;
		color: var(--wlc-ink);
	}

	/* --- 9b. the social rail leaves the mobile header ------------------- */

	/*
	 * Cata, 18 Sep: everything in the mobile header was right except the six
	 * icons sitting directly on top of the first photograph. Neither blog she
	 * measures herself against — Sisterly Style, Negin Mirsalehi — carries
	 * social icons in a mobile header. They remain in the menu panel and in
	 * the footer, so nothing is actually lost.
	 */
	.wlc-section .wlc-social-rail {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wlc-section .wlc-panel-chev { transition: none; }
}


/* --- 9c. the homepage card: one portrait photograph, box lapping over --- */

@media (max-width: 900px) {

	/* One photograph, in portrait. The two-photograph cards show their first
	   only — a hover swap has no meaning on a touch screen anyway. */
	.wlc-section .wlc-feed-img--second {
		display: none;
	}

	/*
	 * height:auto is not decoration here. aspect-ratio is ignored the moment
	 * a definite height is also set, and WordPress writes height on the img.
	 */
	.wlc-section .wlc-feed-img,
	.wlc-section .wlc-feed-item--full .wlc-feed-img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}
}

@media (max-width: 600px) {

	/*
	 * The lap. -56px puts the black rule over the photograph, and the 8px
	 * white band reaches 8px further, so the picture is covered from 48px in —
	 * the arrangement in the Sisterly Style screenshot Cata sent.
	 *
	 * The top padding is the part she asked for by name: 30px between the top
	 * edge of the box and the first thing printed in it.
	 */
	.wlc-section .wlc-feed-item--left .wlc-feed-words,
	.wlc-section .wlc-feed-item--right .wlc-feed-words,
	.wlc-section .wlc-feed-item--full .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-right .wlc-feed-words {
		position: relative;
		z-index: 2;
		margin: -56px 14px 0;
		padding: 30px 18px 32px;
		box-shadow: 0 0 0 8px var(--wlc-ground);
	}
}


/* --- 9d. the same lap on the opening photograph of a letter ------------- */

@media (max-width: 900px) {

	/*
	 * Both cutout families, which until now were gated to min-width 901px and
	 * so never reached a phone at all. Same idea, smaller numbers: the panel
	 * is inset 12px each side and lifted 44px, with 26px of padding over the
	 * first line so the writing is not pressed against the box's own edge.
	 */
	.wlc-section.wlc-cutout .wlc-feat--edge {
		margin-bottom: 0;
	}

	.wlc-section.wlc-cutout .wlc-post-main,
	.wlc-section.wlc-cutout-head .wlc-post-header {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: calc(100% - 24px);
		margin-inline: auto;
		margin-top: -44px;
		background: var(--wlc-ground);
	}

	.wlc-section.wlc-cutout .wlc-post-main {
		padding-top: 26px;
	}

	.wlc-section.wlc-cutout-head .wlc-post-header {
		padding: 26px 18px 28px;
	}

	/* Nothing above the first paragraph — the box's own padding is the space
	   over the drop cap, and a paragraph margin on top of it would drop the
	   writing clear of the photograph and leave an empty white ledge. */
	.wlc-section.wlc-cutout .wlc-post-body > .wp-block-post-content > *:first-child {
		margin-top: 0;
	}
}


/* --- 9e. "You might also like": four, two by two ------------------------ */

@media (min-width: 901px) {

	/* The block fetches four so a phone can show two rows of two. A desktop
	   still shows three across, so the fourth is hidden rather than the count
	   being different per device — PHP cannot see a viewport. */
	.wlc-section .wlc-related-item:nth-child(4) {
		display: none;
	}
}

@media (max-width: 700px) {

	/* The phone gap matches the desktop one — Cata asked for less air between
	   the photographs, and 18px here would have quietly put it back. */
	.wlc-section .wlc-related-items {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* This was hidden to leave two on a phone. Cata wants all four. */
	.wlc-section .wlc-related-item:nth-child(3),
	.wlc-section .wlc-related-item:nth-child(4) {
		display: block;
	}
}


/* --- 9f. the footer ---------------------------------------------------- */

/*
 * The wordmark, larger — and this one is every width, phone, tablet and
 * desktop, which Cata asked for explicitly.
 */
.wlc-section .wlc-foot-mark {
	font-size: clamp(34px, 5vw, 52px);
}

@media (max-width: 900px) {

	/*
	 * The Instagram strip, edge to edge.
	 *
	 * Smash Balloon lays its own grid out and writes ids, so every selector
	 * here has to carry #sb_instagram to outrank it — three classes plus
	 * !important lost to it once already and the lesson is recorded.
	 */
	.wlc-section .wlc-ig-row {
		width: 100%;
		margin-inline: 0;
		padding: 0;
	}

	.wlc-section .wlc-ig-row #sb_instagram,
	.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}

	.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/*
	 * MOBILE ONLY, confirmed with Cata on 18 Sep — the desktop footer keeps
	 * all of this, because the desktop has no hamburger and these are the only
	 * place those sections appear down there.
	 */
	.wlc-section .wlc-foot-nav,
	.wlc-section .wlc-foot-portfolio {
		display: none;
	}

	/* What is left of the bottom line is the copyright and the credit, sitting
	   under Privacy / Cookies / Terms. */
	.wlc-section .wlc-foot-fine {
		flex-direction: column;
		gap: 0.75rem;
		margin-top: 2rem;
		padding-top: 1.5rem;
	}
}


/* ==========================================================================
   10. ONE CARD SHAPE BELOW 900px — 18 SEP 2026

   Two corrections to section 9, both found by measuring rather than looking.

   THE TWO-PHOTOGRAPH CARDS. Section 9 hid `.wlc-feed-img--second`, which is
   the hover-swap photograph on an ordinary card. The standing photograph on a
   two-photograph card is a different thing: its own `.wlc-feed-figure--inset`,
   with `.wlc-feed-img--inset` inside it. So the rule missed the cards it was
   written for, and at 390px and 768px they still came out as two pictures
   stacked with the writing adrift beneath them.

   THE OVERLAP STOPPED AT 600px. The lap was written at max-width 600, so at
   768 the box measured twelve pixels BELOW the photograph rather than over it
   — an iPad got neither the desktop arrangement nor the phone one.

   Both are now settled the same way: below 900px every card is the same card,
   whatever shape it carries. Above 900px nothing here applies and the desktop
   keeps the overlapping pair Cata likes on a big screen.
   ========================================================================== */

@media (max-width: 900px) {

	/* One column, figure then words, for every variant. */
	.wlc-section .wlc-feed-item,
	.wlc-section .wlc-feed-item--left,
	.wlc-section .wlc-feed-item--right,
	.wlc-section .wlc-feed-item--full,
	.wlc-section .wlc-feed-item--duo-left,
	.wlc-section .wlc-feed-item--duo-right {
		display: block;
	}

	/* The standing photograph and the hover swap both go. A hover swap has no
	   meaning on a touch screen, and the pair needs width it does not have. */
	.wlc-section .wlc-feed-figure--inset,
	.wlc-section .wlc-feed-img--inset,
	.wlc-section .wlc-feed-img--second {
		display: none;
	}

	.wlc-section .wlc-feed-figure,
	.wlc-section .wlc-feed-figure--wide,
	.wlc-section .wlc-feed-figure--swap {
		display: block;
		width: 100%;
		margin: 0;
	}

	/* Portrait, and stated for every variant because the wide figure carries
	   its own ratio. height:auto is load-bearing: aspect-ratio is ignored the
	   moment a definite height is set, and WordPress writes one on the img. */
	.wlc-section .wlc-feed-img,
	.wlc-section .wlc-feed-img--first,
	.wlc-section .wlc-feed-figure--wide .wlc-feed-img,
	.wlc-section .wlc-feed-item--full .wlc-feed-img,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-img,
	.wlc-section .wlc-feed-item--duo-right .wlc-feed-img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}

	/*
	 * The lap, now from 900px down rather than 600px down, and on every
	 * variant including the two-photograph ones.
	 */
	.wlc-section .wlc-feed-item .wlc-feed-words,
	.wlc-section .wlc-feed-item--left .wlc-feed-words,
	.wlc-section .wlc-feed-item--right .wlc-feed-words,
	.wlc-section .wlc-feed-item--full .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-right .wlc-feed-words {
		position: relative;
		z-index: 2;
		grid-column: auto;
		width: auto;
		max-width: none;
		margin: -56px 14px 0;
		padding: 24px 18px 26px;
		box-shadow: 0 0 0 8px var(--wlc-ground);
	}

	/* --- the lines inside, tightened -----------------------------------
	 *
	 * Cata, 18 Sep: everything is too spaced out and eats the screen. She is
	 * right, and a good part of it was my own doing — the 44px tap targets
	 * from the accessibility pass turned the category into a 44px row and
	 * "Written from" into a 45px one, most of it empty.
	 *
	 * These two are links inside a card, not navigation, so they come down to
	 * 32–34px. WCAG 2.5.8 asks for 24px; 44 is Apple's house style for
	 * controls, and applying it to a one-word category line cost about 120px
	 * of every card for no gain a thumb can feel.
	 */
	.wlc-section .wlc-feed-words .wlc-feed-terms {
		margin: 0;
		line-height: 1.2;
	}

	.wlc-section .wlc-feed-words .wlc-feed-terms a {
		min-height: 34px;
	}

	.wlc-section .wlc-feed-words .wlc-feed-title {
		margin: 4px 0 6px;
	}

	.wlc-section .wlc-feed-words .wlc-feed-meta--where {
		margin-top: 4px;
		line-height: 1.3;
	}

	.wlc-section .wlc-feed-words .wlc-feed-meta--when {
		margin-top: 2px;
		line-height: 1.3;
	}

	.wlc-section .wlc-feed-words .wlc-feed-meta a {
		min-height: 32px;
	}

	.wlc-section .wlc-feed-words .wlc-feed-excerpt {
		margin: 10px 0 12px;
	}

	.wlc-section .wlc-feed-words .wlc-feed-excerpt p {
		margin: 0;
		line-height: 1.55;
	}

	.wlc-section .wlc-feed-words .wlc-feed-more {
		margin: 6px 0 0;
		line-height: 1.2;
	}

	.wlc-section .wlc-feed-words .wlc-feed-more a {
		min-height: 40px;
	}
}


/* --------------------------------------------------------------------------
   11. THE MOBILE MASTHEAD — NAME UP, TAGLINE DOWN, THE TWO ALIGNED

   Cata, 18 Sep: the name should be bigger, the tagline smaller, and the two
   should line up as a block rather than the tagline running wider than the
   name it belongs to.

   The arithmetic, since "aligned" is a width and not a feeling:
   TRAVEL, FASHION, LIFESTYLE BY CATA BALZANO is 41 characters, so its width is
   41 x (about 0.62 of its size, plus its tracking). "With Love, Cata" in
   Playfair italic runs about 0.47 of its size per character over 15. Setting
   the name near 48px and the tagline near 11.3px with 0.09em brings both to
   roughly 330px at a 390px screen — near enough to read as one block.

   Both are in vw so they hold that relationship from 360 up rather than only
   at the width they were tuned on.

   Note the tagline goes back under the 12px floor from section 3. That floor
   was mine and it was about legibility; this is Cata's call on her own name,
   the type is still well above the 10px it started at, and the two now read
   as one object, which is worth more here than half a pixel of x-height.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

	.wlc-section .wlc-masthead-bar .wlc-wordmark--type {
		font-size: clamp(42px, 12.4vw, 52px);
		line-height: 1.08;
	}

	.wlc-section .wlc-masthead-bar .wlc-tagline {
		font-size: clamp(10.5px, 2.9vw, 12px);
		letter-spacing: 0.09em;
		margin-top: 0.35rem;
	}
}


/* ==========================================================================
   12. THE LETTER, ON A PHONE — THE TITLING GOES TO THE TOP

   Cata, 18 Sep: on mobile she wants the category, headline, sub-head, date and
   "Written from" at the very top of the page, the reading time gone, and the
   writing starting in a white box that laps the bottom of the photograph.

   The markup is:

       main.wlc-single
         div.wlc-opener          figure.wlc-feat  then  header.wlc-post-header
         div.wlc-post-row        div.wlc-post-main   <- the writing

   So two moves. The opener becomes a flex column and the header is ordered
   above the figure — which is the arrangement the "photograph in the column"
   layouts have always had, now applied to every layout on a phone. And the
   lap transfers from the header (which no longer has anything to lap, being
   at the top) to .wlc-post-main.

   The gap between the two rows has to be closed first or the negative margin
   is spent crossing it and never reaches the picture.
   ========================================================================== */

@media (max-width: 900px) {

	/* 1. The titling above the photograph, for every layout. */
	.wlc-section .wlc-opener,
	.wlc-section .wlc-opener--wide,
	.wlc-section .wlc-opener--inset,
	.wlc-section .wlc-opener--banner {
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
	}

	.wlc-section .wlc-post-header {
		order: -1;
	}

	/*
	 * It is at the top of the page now, with nothing above it to lap, so it
	 * goes back to being a plain block — this undoes the lift section 9d gave
	 * it while it still sat under the picture.
	 */
	.wlc-section.wlc-cutout-head .wlc-post-header {
		width: auto;
		margin-inline: 0;
		margin-top: 0;
		padding: 0 var(--wlc-gutter) 20px;
		background: none;
	}

	/* 2. The reading time goes. Date and place only. */
	.wlc-section .wlc-post-read {
		display: none;
	}

	/* Stacked and centred, so the two remaining pieces sit under one another
	   instead of drifting apart across a line that used to hold three. */
	.wlc-section .wlc-post-meta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	/* 3. Close the gap between the opener and the row that follows it, or the
	      negative margin below is spent crossing it. */
	.wlc-section .wlc-post-row {
		margin-top: 0;
		padding-top: 0;
	}

	/*
	 * 4. The lap moves to the writing. Both families, because on a phone they
	 * are now the same shape: titling, photograph, then the words coming up
	 * over the foot of it.
	 *
	 * 26px of padding over the first line — the drop cap needs air above it or
	 * it presses against the box's own edge.
	 */
	.wlc-section.wlc-cutout .wlc-post-main,
	.wlc-section.wlc-cutout-head .wlc-post-main {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: calc(100% - 24px);
		margin-inline: auto;
		margin-top: -44px;
		padding-top: 26px;
		background: var(--wlc-ground);
	}

	.wlc-section.wlc-cutout .wlc-post-body > .wp-block-post-content > *:first-child,
	.wlc-section.wlc-cutout-head .wlc-post-body > .wp-block-post-content > *:first-child {
		margin-top: 0;
	}
}


/* ==========================================================================
   13. TWO MORE, 18 SEP
   ========================================================================== */

@media (max-width: 700px) {

	/*
	 * THE PREVIOUS CARD.
	 *
	 * It was pinned left:12 AND right:12, so it spanned the whole screen: the
	 * title ran off the left edge while a slab of empty white sat to the right
	 * of the thumbnail. It slides in from the right, so it should be anchored
	 * there and only as wide as it needs to be.
	 */
	.wlc-section .wlc-prev {
		left: auto;
		right: 12px;
		width: auto;
		max-width: calc(100% - 24px);
	}

	.wlc-section .wlc-prev-link {
		padding: 0.75rem 1rem;
		gap: 0.75rem;
	}

	/* A flex item will not shrink below its content unless told it may, which
	   is why the title was overflowing instead of wrapping. */
	.wlc-section .wlc-prev-words {
		min-width: 0;
	}

	.wlc-section .wlc-prev-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
		line-height: 19px;
	}

	.wlc-section .wlc-prev-img {
		width: 62px;
		height: 62px;
		flex: 0 0 auto;
	}
}

@media (max-width: 900px) {

	/*
	 * THE TAGS.
	 *
	 * This one is my own doing. The accessibility pass gave every tag link
	 * `display: inline-flex; min-height: 44px`, which is right for a control
	 * and wrong for a word in a comma-separated sentence: each tag became a
	 * 44px-tall block and the list grew to four deep rows of large tracked
	 * capitals.
	 *
	 * They are running text, not buttons. Back to inline, smaller, and with
	 * the tracking reduced so a long tag no longer takes a line to itself.
	 * WCAG exempts links in a block of text from the target-size rule for
	 * exactly this reason.
	 */
	.wlc-section .taxonomy-wlc_tag a,
	.wlc-section .wp-block-post-terms a {
		display: inline;
		align-items: initial;
		min-height: 0;
	}

	.wlc-section .taxonomy-wlc_tag,
	.wlc-section .taxonomy-wlc_tag a,
	.wlc-section .wp-block-post-terms,
	.wlc-section .wp-block-post-terms a,
	.wlc-section .wp-block-post-terms__prefix {
		font-size: 11px;
		letter-spacing: 0.06em;
		line-height: 1.9;
	}
}


/* ==========================================================================
   14. THE FOOTER STRIP, AGAIN — 18 SEP
   ========================================================================== */

@media (max-width: 900px) {

	/*
	 * EDGE TO EDGE, PROPERLY.
	 *
	 * My fault, and worth writing down because the mechanism is not obvious:
	 * .wlc-foot carries `padding: 4rem var(--wlc-gutter) 3rem`, so anything
	 * inside it is inset by a gutter on each side no matter what width it is
	 * given. The desktop rule escaped that with negative inline margins;
	 * section 9f set `margin-inline: 0` and `width: 100%`, which looks like
	 * "full width" and is in fact "full width of the padded box" — the gutter
	 * came straight back.
	 *
	 * Negative margins equal to the gutter cancel the footer's padding exactly,
	 * so the strip reaches both screen edges.
	 */
	.wlc-section .wlc-ig-row {
		width: auto;
		margin-left: calc(var(--wlc-gutter) * -1);
		margin-right: calc(var(--wlc-gutter) * -1);
		padding: 0;
	}

	/* The grid itself must not re-introduce one. */
	.wlc-section .wlc-ig-row #sb_instagram,
	.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	/*
	 * THE SOCIAL ICONS, CLOSER.
	 *
	 * They were spread right across the footer because the 48px tap targets
	 * from the accessibility pass were sitting in a row with a gap on top.
	 * The touchable area stays 44px — that one is a control, not running text
	 * — but the boxes now sit against one another, so the six read as a group
	 * rather than as six separate things pinned across the width.
	 */
	.wlc-section .wlc-foot-socials {
		justify-content: center;
		gap: 0;
	}

	.wlc-section .wlc-foot-socials a {
		width: 44px;
		height: 44px;
	}

	.wlc-section .wlc-foot-socials svg {
		width: 19px;
		height: 19px;
	}
}


/* ==========================================================================
   15. THE INSTAGRAM STRIP, AT EVERY WIDTH — 18 SEP

   Reported on desktop Safari: the strip reaches the left edge and stops about
   70px short of the right.

   Not a padding problem, an arithmetic one. Smash Balloon lays its own six
   tiles out at a fixed width; six of those do not add up to the width of the
   row, and the remainder lands at the right-hand end as a strip of black.
   Adding or removing padding was never going to close it.

   Six equal `1fr` columns divide whatever width they are given exactly, so
   the remainder cannot exist. Unscoped: the same treatment at every width,
   with the column count dropping to three on a phone in section 9f.
   ========================================================================== */

.wlc-section .wlc-ig-row {
	width: auto;
	margin-left: calc(var(--wlc-gutter) * -1);
	margin-right: calc(var(--wlc-gutter) * -1);
	padding: 0;
}

.wlc-section .wlc-ig-row #sb_instagram,
.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
}

.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* The tiles must fill their column, or a square photograph in a wider cell
   leaves the same gap the fixed widths did, just distributed. */
.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap,
.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item .sbi_photo,
.wlc-section .wlc-ig-row #sb_instagram #sbi_images .sbi_item a {
	width: 100%;
	max-width: none;
}

/* Below 900px it is three across, restated here so this section cannot be
   read as the whole story. */
@media (max-width: 900px) {

	.wlc-section .wlc-ig-row #sb_instagram #sbi_images {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ==========================================================================
   16. THE WHITE BOX ON A PHONE — THE SLICE, AND THE OVERLAP THAT NEVER WAS

   Cata, 17 Sep, with a screenshot: the first line of the letter and the top of
   the drop cap are sliced off, and the white box she asked for is nowhere.

   Two faults, both mine, both introduced by section 12.

   1. THE SLICE.

      .wlc-post-row carries overflow:hidden — it is set unconditionally around
      line 3036, put there so the sidebar's border-box padding could not hang
      off the side of the page. Section 12 then lifted .wlc-post-main with
      margin-top:-44px.

      A negative margin moves the child. It does not move the parent's clip.
      So the top 44px of the writing — white ground, first line, the head of
      the drop cap — was lifted straight out of the clipping box and thrown
      away. That is the whole of the "deforming": not an overlap, a haircut.

      The same trick is correct on a desktop only by accident. The two
      arrangements that use it set .wlc-post-row to display:contents, which
      removes the box from the tree and its overflow with it. On a phone the
      row is display:block, so the clip is real. Measured at 390px: the row's
      border box began at y=686 and .wlc-post-main's at y=642.

      The lift therefore moves off the writing and onto the row itself. The box
      moves, its clip travels with it, and nothing is ever outside it.

   2. NO OVERLAP TO SEE.

      .wlc-opener has 27.2px of side padding, so the photograph measured 436px
      wide in a 490px window. The box was calc(100% - 24px) of the ROW, which
      has no padding — 466px. The white box was fifteen pixels WIDER than the
      photograph down each side. There was nothing to lap over: it was a white
      band sitting under a picture, which is exactly how it reads.

      So the photograph goes out to both edges — negative margins cancelling
      the opener's padding, the same move .wlc-feat--edge makes on a desktop —
      and the box is inset 14px. That 14px is the homepage cards' inset, and
      the 56px lift and 30px of padding over the first line are the homepage
      cards' numbers too, so the two overlaps on the site are cut from one
      cloth.

   No border and no white halo here, deliberately. On a feed card the halo is
   the mount outside a 3px black rule; the letter's box has no rule, so a white
   band around a white box would be eight pixels of nothing — and eight pixels
   of nothing that the row's overflow would clip at the top anyway.
   ========================================================================== */

@media (max-width: 900px) {

	/*
	 * The photograph, out to both edges.
	 *
	 * width:auto with DEFINITE margins is what lets a flex item stretch to its
	 * line; margin-inline:auto — which is what it had — switches stretching off
	 * and sizes the figure to its contents instead. !important because the
	 * rule being overridden (around line 3125) uses it.
	 */
	.wlc-section.wlc-cutout .wlc-feat,
	.wlc-section.wlc-cutout-head .wlc-feat {
		width: auto !important;
		max-width: none !important;
		margin-left: calc(var(--wlc-col-pad) * -1) !important;
		margin-right: calc(var(--wlc-col-pad) * -1) !important;
		margin-bottom: 0;
	}

	/* height:auto is load-bearing: WordPress writes height on the img, and a
	   definite height makes the browser ignore the aspect ratio. */
	.wlc-section.wlc-cutout .wlc-feat img,
	.wlc-section.wlc-cutout-head .wlc-feat img {
		width: 100%;
		height: auto;
	}

	/* The lift, on the row that holds the writing rather than on the writing,
	   so that it happens inside the clip instead of across it. */
	.wlc-section.wlc-cutout .wlc-post-row,
	.wlc-section.wlc-cutout-head .wlc-post-row {
		margin-top: -56px;
	}

	/*
	 * The box. It keeps the z-index:1 and the white ground section 12 gave it;
	 * what changes is that it no longer lifts itself, it is inset 14px so the
	 * photograph shows down both sides of it, and there is 30px of air over the
	 * drop cap instead of 26px.
	 */
	.wlc-section.wlc-cutout .wlc-post-main,
	.wlc-section.wlc-cutout-head .wlc-post-main {
		margin-top: 0;
		width: calc(100% - 28px);
		padding-top: 30px;
	}
}


/* ==========================================================================
   17. TWO THINGS THE 17 SEPTEMBER AUDIT FOUND

   A sweep of every blog URL at six widths. Two faults in the stylesheet, both
   invisible unless you go looking for them, both real.
   ========================================================================== */

/* --- 17a. the dropdown pushed the page sideways ------------------------- */

/*
 * Between 901px and roughly 1000px the page scrolled sideways by 69px, on
 * EVERY page of the blog, and nothing visible was out of place.
 *
 * The mega-menu panel is the right width — it is calc(100vw - 4rem), anchored
 * to the masthead. Its CONTENTS are not. Three 200px thumbnails plus their
 * gaps come to 656px, the category column is a fixed 216px, the gap between
 * them is 40px: 912px of content inside a panel whose content box is 787px at
 * that window width. Both children are flex: 0 0 auto, so neither gives, and
 * the category list hangs 125px off the end of the panel and 69px off the end
 * of the window.
 *
 * It is invisible because the panel is visibility:hidden until you hover — and
 * a hidden element still takes part in layout, and still lengthens the page's
 * scrollable width. The scrollbar was the only symptom.
 *
 * The thumbnails are already declared minmax(0, 200px) below 1200px, so they
 * are allowed to be narrower; they were simply never asked to be. Letting the
 * grid shrink brings the tracks to 158px at 901px and the row fits.
 *
 * box-sizing on the panel is the second half. calc(100vw - 4rem) was written
 * to mean "2rem of air each side", but with content-box the 2rem of padding is
 * added on top, so the panel is 4rem wider than intended and the air is gone.
 */
.wlc-section .wlc-subnav {
	box-sizing: border-box;
}

@media (min-width: 901px) and (max-width: 1200px) {

	.wlc-section .wlc-has-mega > .wlc-subnav .wlc-mega-posts {
		flex: 1 1 auto;
		min-width: 0;
	}
}


/* --- 17b. the pagination numbers were 8px wide -------------------------- */

/*
 * "1  2  3  Older →" under the feed. The tap-target pass in v1.68 gave these
 * min-height: 44px and stopped there, so they measured 8 x 44 — the width of
 * a single digit with no padding either side. A 44px-tall target you cannot
 * hit sideways is not a target.
 *
 * min-width rather than padding, because padding would also stretch "Older →"
 * (66px wide, and fine as it is) into something the row cannot hold on a
 * 360px screen.
 */
.wlc-section .wlc-pagination .page-numbers {
	min-width: 44px;
	justify-content: center;
}

/* The words at either end already earn their width from their own text. */
.wlc-section .wlc-pagination .prev.page-numbers,
.wlc-section .wlc-pagination .next.page-numbers {
	min-width: 0;
}


/* ==========================================================================
   18. TWO TEASER LENGTHS, ONE CARD

   Cata, 18 Sep: the card's opening text should be two or three sentences —
   about 42 to 45 words — on a desktop and on a tablet, and stay the single
   short sentence on a phone.

   PHP renders a page once, for every device that will ever ask for it, and it
   cannot see a viewport. So the card carries both strings (see
   cb_wlc_card_words()) and this is where the choice actually happens.

   THE LINE IS AT 701px, and that is a judgement, not a standard:

     - a phone in portrait is at most about 440px, so every phone she named,
       including the duo, keeps the short sentence;
     - an iPad in portrait is 768px and gets the long one, which is what she
       asked for — "tablet" is on the long side of the line;
     - a phone turned sideways (a Pro Max is 932px) also gets the long one.
       That is the one case the line gets arguably wrong, and it is worth it:
       a 932px-wide card with one sentence in it looks like a bug.

   Note this is NOT the 900px line the rest of the mobile work uses. The card's
   SHAPE changes at 900 — one photograph instead of two. How much text it holds
   is a different question with a different answer, and forcing them to share a
   number would have put an iPad on the short sentence.
   ========================================================================== */

/* The phone's sentence. Default on, so a browser that somehow evaluates no
   media query at all gets the short one rather than both. */
.wlc-section .wlc-feed-excerpt--long {
	display: none;
}

@media (min-width: 701px) {

	.wlc-section .wlc-feed-excerpt--short {
		display: none;
	}

	.wlc-section .wlc-feed-excerpt--long {
		display: block;
	}
}


/* ==========================================================================
   19. ONE PHOTOGRAPH PER CARD ON A PHONE — THE RULE THAT UNDID ITSELF

   Cata, 18 Sep, with screenshots, and she is right to be annoyed: she asked
   for one photograph per card on a phone on 18 September, I said it was done
   in v1.68, and it was never done. Measured at 390px just now, seven of the
   ten cards on the front page were still showing two.

   Section 10 hides them:

       .wlc-section .wlc-feed-figure--inset,
       .wlc-section .wlc-feed-img--inset,
       .wlc-section .wlc-feed-img--second { display: none }

   and then, EIGHT LINES FURTHER DOWN IN THE SAME MEDIA BLOCK, the rule that
   makes every photograph portrait says:

       .wlc-section .wlc-feed-img,
       ...
       .wlc-section .wlc-feed-item--duo-right .wlc-feed-img { display: block }

   Both extra photographs carry the class `wlc-feed-img` as well as their own,
   so the second rule matches them too. It has the same two-class weight and it
   comes later, so `display: block` wins — and the duo selector has three
   classes, so on those cards it was not even close. I hid the pictures and
   then turned them back on, in the same breath, in the same file.

   Two lessons, both already in this stylesheet's history and both ignored:
   later wins at equal weight, and a "make everything X" rule will happily
   include the things another rule just switched off. When a rule hides
   something, it belongs AFTER the rules that shape what is left.

   Hence this, at the very end of the stylesheet, at three classes: nothing
   later can match it, nothing earlier can outweigh it. Verified at 390px —
   all ten cards, one photograph each, 336x420.
   ========================================================================== */

@media (max-width: 900px) {

	.wlc-section .wlc-feed-item .wlc-feed-figure--inset,
	.wlc-section .wlc-feed-item .wlc-feed-img--inset,
	.wlc-section .wlc-feed-item .wlc-feed-img--second,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-figure--inset,
	.wlc-section .wlc-feed-item--duo-right .wlc-feed-figure--inset,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-img--inset,
	.wlc-section .wlc-feed-item--duo-right .wlc-feed-img--inset {
		display: none;
	}
}


/* ==========================================================================
   20. THE BOX, ON EVERY CARD SHAPE — 18 SEP 2026

   Cata, with a Safari screenshot: on some cards the photograph appeared to
   carry on THROUGH the words underneath it, with the kicker floating on top of
   the picture. It reads as a second photograph badly cropped, which is what
   she has been describing all along.

   It is not a second photograph. It is a box with no walls.

   The white card behind the writing was only ever declared for two of the five
   shapes:

       .wlc-feed-item--left  .wlc-feed-words,
       .wlc-feed-item--right .wlc-feed-words { border: 3px solid …; background: … }

   `--duo-left`, `--duo-right` and `--full` never got it. On a desktop that was
   invisible, because those shapes lay their writing out beside the photograph
   rather than over it, so there was nothing behind the box to show through.
   The moment section 9 lifted the words 56px UP ONTO the photograph on a
   phone, the missing background became a hole: measured on the duo cards,
   background-color was rgba(0, 0, 0, 0) and border-width 0.

   The 8px white halo was declared for all five, which is why the top edge came
   out as a thin white frame with the photograph inside it — the one part of
   the box that was painting.

   So: every shape gets the same box on a phone, which is also what Cata asked
   for in her own words — all of them with the black square outline. Listed one
   shape per line rather than leaning on `.wlc-feed-item` alone, because the
   shape classes are three-class selectors and a one-class rule would lose to
   the desktop declarations above.

   Verified at 390px: all ten cards, white ground, 3px rule, 308px wide, 41px
   from the left, no horizontal overflow.
   ========================================================================== */

@media (max-width: 900px) {

	.wlc-section .wlc-feed-item .wlc-feed-words,
	.wlc-section .wlc-feed-item--left .wlc-feed-words,
	.wlc-section .wlc-feed-item--right .wlc-feed-words,
	.wlc-section .wlc-feed-item--full .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-left .wlc-feed-words,
	.wlc-section .wlc-feed-item--duo-right .wlc-feed-words {
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		margin: -56px 14px 0;
		padding: 30px 18px 32px;
		border: 3px solid var(--wlc-ink);
		background: var(--wlc-ground);
		/* The mount outside the rule, so the black line lands ON the
		   photograph and the white reaches 8px further still. */
		box-shadow: 0 0 0 8px var(--wlc-ground);
	}
}


/* ==========================================================================
   21. THE TWO-PHOTOGRAPH CARD, UNFROZEN — 18 SEP 2026

   Until now the duo card made three decisions for her, all of them read off
   the old blog's markup and then hard-coded: the second photograph runs wide
   across the top, this letter's own stands against it, and a phone is shown
   the wide one cut to 4:5.

   They were sensible defaults and they are still the defaults. But they are a
   guess about every photograph she will ever file, and the letters where the
   guess is wrong are exactly the ones she has been sending me screenshots of.

   So section 6 of the letterhead now asks, and this is where the answers land.
   Every rule below is inert unless a class is present, which means nothing
   published before today moves.

   Specificity note, because this has bitten three times in this file already:
   the shape class and the new class sit on the SAME element, so
   `.wlc-feed-item.wlc-crop-square .wlc-feed-img` is four classes and beats the
   three-class rules in sections 10 and 19 outright. Being at the end of the
   file as well is belt and braces.
   ========================================================================== */

@media (max-width: 900px) {

	/* --- 21a. a phone shows the standing photograph instead ------------- */

	.wlc-section .wlc-feed-item.wlc-phone-standing .wlc-feed-figure--wide,
	.wlc-section .wlc-feed-item.wlc-phone-standing .wlc-feed-img--first {
		display: none;
	}

	/*
	 * The standing photograph takes over the slot the wide one had: full
	 * width, no offset, none of the overlap geometry it carries on a desktop.
	 *
	 * padding:0 and background:none are the part I missed first time, and Cata
	 * found it within the hour — her card came out 312 x 390 where every other
	 * card on the page was 336 x 420, sitting 12px in from both edges with no
	 * overlap left for the words to make.
	 *
	 * The figure is border-box with 12px of padding and a white ground: on a
	 * desktop that is the white mount that makes the standing photograph read
	 * as a framed print laid over the wide one. Setting width:100% therefore
	 * sized the FIGURE correctly and left the picture inside it 24px narrower.
	 * A mount is only a mount when there is something behind it to be mounted
	 * on; alone on a phone it is just a card that does not line up.
	 */
	.wlc-section .wlc-feed-item.wlc-phone-standing .wlc-feed-figure--inset {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
	}

	.wlc-section .wlc-feed-item.wlc-phone-standing .wlc-feed-img--inset {
		display: block;
		width: 100%;
		/* height:auto before aspect-ratio can mean anything — WordPress writes
		   a height attribute on the img and a definite height wins. */
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}


	/* --- 21b. the shape it is cut to ------------------------------------ */

	.wlc-section .wlc-feed-item.wlc-crop-square .wlc-feed-img,
	.wlc-section .wlc-feed-item.wlc-crop-square .wlc-feed-img--first,
	.wlc-section .wlc-feed-item.wlc-crop-square .wlc-feed-img--inset {
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	.wlc-section .wlc-feed-item.wlc-crop-wide .wlc-feed-img,
	.wlc-section .wlc-feed-item.wlc-crop-wide .wlc-feed-img--first,
	.wlc-section .wlc-feed-item.wlc-crop-wide .wlc-feed-img--inset {
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	/*
	 * No crop at all. object-fit goes back to fill rather than cover, because
	 * with the frame the same shape as the picture there is nothing to cover —
	 * and if the two ever disagree by a pixel, fill stretches by that pixel
	 * where cover would silently shave a strip off an edge.
	 */
	.wlc-section .wlc-feed-item.wlc-crop-native .wlc-feed-img,
	.wlc-section .wlc-feed-item.wlc-crop-native .wlc-feed-img--first,
	.wlc-section .wlc-feed-item.wlc-crop-native .wlc-feed-img--inset {
		height: auto;
		aspect-ratio: auto;
		object-fit: fill;
	}
}


/* ==========================================================================
   22. STORIES PEOPLE LOVE — THE STANDING PHOTOGRAPH AND THE RULE

   This panel has been rebuilt twice in one day and the second version is the
   one that matters.

   FIRST: a small square with the name beside it, after Negin Mirsalehi's
   "Shop" list. 64px, then 80px when Cata looked at it and wanted them bigger.

   THEN, 19 Sep, she sent the "Related" panel from the same blog and said she
   liked that style. It is a different thing from the Shop list: the pictures
   are STANDING, not square; they are the height of the row rather than an inch
   of it; the rule runs the full width under each; and there is no date.

   WHAT ACTUALLY MAKES IT READ THAT WAY, in order of how much it matters:

   1. The crop. 86 x 104 is a portrait, and a portrait beside a line of type
      reads as a photograph. A square the same height reads as an icon. This is
      the whole difference, and it is one aspect ratio.

   2. The date going. It was the thing making each row look like a database
      record. Negin's has none. See the note in includes/sidebar.php.

   3. The picture touching the rules. The photograph is the full height of the
      row with no padding above or below it, so the rules meet its edges and
      the list reads as one ruled column rather than three cards in a stack.
      The padding lives on the TITLE instead — which is why the anchor is not
      the flex row here; the row is, and the title pads itself.

   4. The heading in display italic at 27px, like a section title rather than
      a label, which is what stops the panel reading as a widget.
   ========================================================================== */

.wlc-section .wlc-side-loved-title {
	margin: 0 0 18px;
	font-family: var(--wlc-font-display);
	font-size: 27px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wlc-ink);
}

.wlc-section .wlc-side-recommended .wlc-side-posts li {
	margin: 0;
	border-top: 1px solid var(--wlc-hairline);
}

.wlc-section .wlc-side-recommended .wlc-side-posts li:last-child {
	border-bottom: 1px solid var(--wlc-hairline);
}

/*
 * The row. align-items:center so a one-line title sits against the middle of
 * the photograph rather than its top edge.
 */
.wlc-section .wlc-side-recommended .wlc-side-posts a {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0;
}

/*
 * The standing photograph.
 *
 * flex:0 0 auto or a long title squashes it — a flex item's default min-width
 * is its content, and an image's content can be scaled, so without this the
 * browser is free to shrink it and quietly make one row's picture narrower
 * than the next.
 *
 * height stated as well as width, because aspect-ratio is ignored the moment
 * WordPress's own height attribute is honoured — the same trap as the feed
 * cards, written out for the fourth time in this file.
 */
.wlc-section .wlc-side-recommended .wlc-side-thumb {
	flex: 0 0 auto;
	display: block;
	width: 86px;
	height: 104px;
	aspect-ratio: 86 / 104;
	object-fit: cover;
	margin: 0;
}

/* min-width:0 so a long unbroken title wraps instead of pushing the row wide.
   The padding is here and not on the row, so the picture meets the rules. */
.wlc-section .wlc-side-recommended .wlc-side-post-title {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	padding: 14px 0;
	font-family: var(--wlc-font-display);
	font-size: 17px;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--wlc-ink);
}


/* ==========================================================================
   23. SHOP THE LOOK — THE ROW DECIDED BY THE COUNT, NOT BY THE WINDOW

   Cata, 19 Sep: three items should sit in one row of three; four should make
   two rows of two; six should make two rows of three.

   The old rule was:

       grid-template-columns: repeat(auto-fit, minmax(160px, 200px));

   auto-fit fits as many as the container happens to allow, which is the right
   answer when the browser knows something PHP does not — and here it is the
   other way round. Three items in a column about 600px wide came out two and
   then one, stranded, which is what she was looking at.

   So PHP counts the items, decides the columns (cb_wlc_shop_columns) and
   writes the number onto the list as --wlc-shop-cols. The stylesheet does as
   it is told.

   minmax(0, 200px) rather than 1fr: the tiles keep their ceiling, so one item
   is a 200px picture rather than a 600px one, and they still shrink when the
   column is narrow. justify-content:center then holds the row in the middle.
   ========================================================================== */

.wlc-section .wlc-shop-items {
	grid-template-columns: repeat(var(--wlc-shop-cols, 3), minmax(0, 200px));
}

/*
 * On a phone the count is overruled. Three 200px tiles cannot fit in 390px —
 * they would come down to about 105px each and the retailer line under them
 * would wrap to three lines. Two across is what this strip has always done on
 * a phone and it stays that way, except where there is only one item.
 */
@media (max-width: 600px) {

	.wlc-section .wlc-shop-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}

	.wlc-section .wlc-shop-items--1 {
		grid-template-columns: minmax(0, 200px);
	}
}


/* ==========================================================================
   24. "WHO THE F*CK IS CATA BALZANO?!" — 19 SEP 2026

   A portrait of her in the sidebar under Shop the Look, linking to the About
   page. It took five passes in one afternoon and the last one is the only one
   that matters, so the earlier four are recorded in one line each rather than
   in full: a caption under the photograph; a white box lapping the foot of it;
   the same box holding a button; the line above and the button standing on the
   picture. She did not like any of them, asked for five ideas, chose the print
   — and then chose its handwriting from ten scripts set on the real panel.

   WHAT IT IS NOW. The photograph, the foot of it darkening into a gradient,
   the line written across that in white in Homemade Apple, crooked, and a Read
   more button underneath.

   The gradient was chosen over plain white writing deliberately, and the
   reason should outlive whoever reads this: white reads only where a
   photograph is dark, and which part of a photograph is dark changes every
   time the photograph changes. Plain white looked marginally cleaner on the
   picture in front of us and would have broken silently on the next one. The
   gradient costs the foot of every photograph and buys a panel nobody has to
   check again.

   Nothing in the picture is a link. The button is the only way out — a link
   wrapped round a photograph with handwriting on it would underline the
   handwriting every time the cursor crossed the picture.

   No heading above it, deliberately. Every other panel in this column
   announces itself — Shop the Look, Stories People Love, Looking for
   something? — and a fourth label above a photograph of her would make it read
   as one more list. The line on the print IS the heading here.

   TWO THINGS KEPT FROM THE PASSES THAT FAILED, because they are the traps this
   file fell into and will fall into again:

   1. A negative top margin moves a box in SPACE, not in PAINT ORDER. An <img>
      is a replaced element and paints above every block background, so an
      unpositioned white box with a negative margin slides underneath the
      photograph and vanishes. It needs position:relative to exist at all.

   2. A line kept to one line by white-space:nowrap keeps the promise on a wide
      sidebar and breaks the layout on a narrow one — the words simply run out
      of the column. Size the type to the column instead, or store the break.
      This panel stores it: see CB_WLC_WHOAMI_TITLE in includes/whoami.php.
   ========================================================================== */

.wlc-section .wlc-side-whoami {
	--wlc-whoami-ratio: 4 / 5;
}

/*
 * The picture, and everything written on it.
 *
 * overflow:hidden is not decoration. The writing is rotated, and a rotated
 * block is wider and taller than its own text — about sin(angle) × its height
 * over each edge. On a long line, or a longer one she writes later, that is
 * what would otherwise hang off the side of the photograph.
 */
.wlc-section .wlc-side-whoami-frame {
	position: relative;
	overflow: hidden;
}

/*
 * height:auto before the ratio can mean anything — WordPress writes a height
 * attribute on the img and a definite height makes aspect-ratio irrelevant.
 * This file has been caught by that three times; it is written out every time.
 */
.wlc-section .wlc-side-whoami-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wlc-whoami-ratio);
	object-fit: cover;
}

/*
 * The gradient the writing sits on.
 *
 * A pseudo-element rather than a div, because it is not content — nothing in
 * the markup should exist only to be dark.
 *
 * 46% of the height, fading to nothing at the top of that. It is deliberately
 * taller than the writing: a band that stops just above the letters reads as a
 * bar laid over the picture, and a gradient that starts halfway up reads as
 * the photograph getting darker, which is the whole idea.
 */
.wlc-section .wlc-side-whoami-frame::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/*
 * The handwriting.
 *
 * 23px looks small written down and is not: Homemade Apple has a very small
 * x-height for its em, so this sets at about the apparent size of 40px of
 * Playfair. Do not "fix" it upwards by eye against the other rules in this
 * file — it is measured against the face, not against the numbers.
 *
 * The tilt is -4deg. Negative is counter-clockwise, which drops the left end
 * and lifts the right: "tilted down to the left", her words. It is on the
 * writing alone — the photograph stays square, because a crooked frame is a
 * mistake and crooked writing is a hand.
 *
 * left:0 and right:0 with text-align:center keep it centred in the picture
 * while it leans. Rotating alone never moves it sideways: transform-origin
 * defaults to the centre of the box, and the box is the full width of the
 * frame. She asked for the lean without the drift, and this is what gives her
 * both — setting a left offset instead would do exactly what she did not want.
 *
 * z-index because the gradient is a ::after on the same parent and would
 * otherwise paint over the words: a positioned element with no z-index sits in
 * document order, and ::after comes last.
 */
.wlc-section .wlc-side-whoami-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	z-index: 1;

	margin: 0;
	padding: 0 16px;
	font-family: var(--wlc-font-hand);
	font-size: 23px;
	font-style: normal;
	line-height: 1.5;
	text-align: center;
	color: #ffffff;
	transform: rotate(-4deg);
}

.wlc-section .wlc-side-whoami-foot {
	margin: 1.1rem 0 0;
	text-align: center;
}

/*
 * The button, under the picture.
 *
 * White ground, black rule, black letters; black ground and white letters on
 * hover — her specification, word for word. Set in the blog's label face at
 * the sidebar's own 11px and 1.2px of tracking, the setting "Everything in
 * Lifestyle" already uses, so it belongs to this column rather than to a theme.
 */
.wlc-section .wlc-side-whoami-more {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid var(--wlc-ink);
	background: var(--wlc-ground);

	font-family: var(--wlc-font-label);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wlc-ink);

	transition: background-color 0.18s ease, color 0.18s ease;
}

.wlc-section .wlc-side-whoami-more:hover,
.wlc-section .wlc-side-whoami-more:focus-visible {
	background: var(--wlc-ink);
	color: var(--wlc-ground);
}

@media (max-width: 900px) {

	/*
	 * A gentler lean on a wide column.
	 *
	 * The sidebar runs the full width of the page here, so the same angle is a
	 * much longer drop across a much longer line — 4deg over 700px puts the
	 * first word 49px below the last one.
	 */
	.wlc-section .wlc-side-whoami-title {
		transform: rotate(-2.6deg);
	}
}


/* ==========================================================================
   "WHAT I'M JAMMIN' OUT TO LATELY" — the Spotify panel

   Cata, 19 Sep: the playlist under the portrait, the full player with the
   track list, on the black.

   The panel is black for a reason beyond taste. Spotify's player draws itself
   with rounded corners inside a square frame, so on a white sidebar it sits in
   a box with four pale notches at the corners that nothing on this page can
   reach into and fix. On black, those corners are the panel — they disappear.
   ========================================================================== */

.wlc-section .wlc-side-jam--black {
	padding: 18px 16px 16px;
	background: var(--wlc-deep);
}

.wlc-section .wlc-side-jam-title {
	margin: 0 0 14px;
	font-family: var(--wlc-font-display);
	font-size: 21px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	color: var(--wlc-ink);
}

.wlc-section .wlc-side-jam--black .wlc-side-jam-title {
	color: #fff;
}

.wlc-section .wlc-side-jam-player {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
}

/* --- the facade: her own markup, until somebody presses play ------------ */

.wlc-section .wlc-side-jam-facade {
	text-align: center;
}

.wlc-section .wlc-side-jam-cover {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* No cover — a drawn record rather than a flat grey hole. This is the panel
   with the cover switched off, and the panel's fallback if Spotify's oEmbed
   does not answer. */
.wlc-section .wlc-side-jam-cover--none {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1c1c1c;
}

.wlc-section .wlc-side-jam-disc {
	display: block;
	width: 42%;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	position: relative;
}

.wlc-section .wlc-side-jam-disc::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16%;
	height: 16%;
	margin: -8% 0 0 -8%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
}

.wlc-section .wlc-side-jam--plain .wlc-side-jam-disc,
.wlc-section .wlc-side-jam--colour .wlc-side-jam-disc {
	border-color: rgba(0, 0, 0, 0.32);
}

.wlc-section .wlc-side-jam--plain .wlc-side-jam-disc::after,
.wlc-section .wlc-side-jam--colour .wlc-side-jam-disc::after {
	background: rgba(0, 0, 0, 0.32);
}

.wlc-section .wlc-side-jam--plain .wlc-side-jam-cover--none,
.wlc-section .wlc-side-jam--colour .wlc-side-jam-cover--none {
	background: #f2f2f2;
}

.wlc-section .wlc-side-jam-name {
	margin: 14px 0 12px;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-side-jam--black .wlc-side-jam-name {
	color: rgba(255, 255, 255, 0.72);
}

/*
 * "Press play" — the blog's outlined button, in reverse on the black panel.
 *
 * It is an <a> to the playlist on Spotify, promoted to a button by the script
 * in the footer. Underlined links are the blog's default, so the underline is
 * taken off here rather than relied upon to be absent.
 */
.wlc-section .wlc-side-jam-play {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid var(--wlc-ink);
	background: transparent;
	text-decoration: none;
	font-family: var(--wlc-font-label);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--wlc-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wlc-section .wlc-side-jam-play:hover,
.wlc-section .wlc-side-jam-play:focus-visible {
	background: var(--wlc-ink);
	color: var(--wlc-ground);
}

.wlc-section .wlc-side-jam--black .wlc-side-jam-play {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.wlc-section .wlc-side-jam--black .wlc-side-jam-play:hover,
.wlc-section .wlc-side-jam--black .wlc-side-jam-play:focus-visible {
	background: #fff;
	color: var(--wlc-deep);
}

.wlc-section .wlc-side-jam-note {
	margin: 10px 0 0;
	font-family: var(--wlc-font-label);
	font-size: 9px;
	line-height: 1.5;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

.wlc-section .wlc-side-jam--black .wlc-side-jam-note {
	color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 900px) {

	/*
	 * The sidebar is the full width of the page here, and a cover stretched
	 * across 700px of it would be a billboard. It keeps a record's proportions
	 * and stays the size it is in the column.
	 */
	.wlc-section .wlc-side-jam-facade {
		max-width: 320px;
		margin-inline: auto;
	}

	.wlc-section .wlc-side-jam-player {
		max-width: 520px;
		margin-inline: auto;
	}
}


/* ==========================================================================
   THE MASTHEAD ON A LAPTOP — keeping the menu on one line

   Cata, 19 Sep: "Home, About, Lifestyle, Beauty on the left. Travel, Wellness,
   Reach Out on the right." About moved across from the right-hand side, which
   makes the left four items and the right three.

   That is the arrangement she wants, and it is fine at full width. Between the
   phone breakpoint and about 1200px it is not automatic: the masthead is a
   three-column grid, 1fr for each menu and the wordmark in the middle at its
   own size, so the two menus share whatever the 345px wordmark leaves. Below
   about 1150px that is not enough for four items and the row wraps.

   Measured on the live page rather than guessed — the width at which each side
   folds, with the real words in the real face:

       arrangement      right folds at     left folds at
       old (3 / 4)      1200px             901px
       new (4 / 3)      —                  1150px

   So the change was already an improvement at the top of this band, and these
   three steps carry it the rest of the way. Each one takes a little out of the
   gaps and the tracking and a little off the wordmark; at 901px the wordmark
   is 208px against 345px, which is a good deal smaller but still the largest
   thing in the row and still obviously the name of the blog.

   Every step is bounded below by min-width: 901px. Under that the masthead is
   a single column with the hamburger and none of this applies.
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

	.wlc-section .wlc-masthead-inner {
		gap: 1.25rem;
	}

	.wlc-section .wlc-nav > ul {
		gap: 1.05rem;
	}

	.wlc-section .wlc-nav > ul > li > a {
		font-size: 11px;
		letter-spacing: 0.9px;
	}

	.wlc-section .wlc-wordmark-img {
		width: 272px;
	}
}

@media (min-width: 901px) and (max-width: 1000px) {

	.wlc-section .wlc-masthead-inner {
		gap: 1rem;
	}

	.wlc-section .wlc-nav > ul {
		gap: 0.8rem;
	}

	.wlc-section .wlc-nav > ul > li > a {
		letter-spacing: 0.6px;
	}

	.wlc-section .wlc-wordmark-img {
		width: 236px;
	}
}

@media (min-width: 901px) and (max-width: 940px) {

	.wlc-section .wlc-masthead-inner {
		gap: 0.9rem;
	}

	.wlc-section .wlc-nav > ul {
		gap: 0.62rem;
	}

	.wlc-section .wlc-nav > ul > li > a {
		font-size: 10.5px;
		letter-spacing: 0.4px;
	}

	.wlc-section .wlc-wordmark-img {
		width: 208px;
	}
}


/* ==========================================================================
   THE INSTAGRAM POST IN A LETTER

   Instagram's own embed is an iframe on their origin, sized by their script,
   and it has been arriving 65 pixels tall — a black sliver at the foot of the
   Hermès letter. Nothing in this stylesheet can reach inside it to fix that.

   So includes/instagram-still.php copies the photograph into the media library
   and the letter shows that instead: an ordinary picture at the width of the
   column, the caption as she wrote it, and a line saying where it came from.
   It reads as part of the letter rather than a panel bolted to the end of it,
   which is the point — the post is hers, not a quotation from elsewhere.

   No iframe, so nothing to collapse. No embed.js, so no trackers on a page
   that otherwise loads none.
   ========================================================================== */

.wlc-section .wlc-post-body .wlc-ig-still {
	margin: 44px auto;
	max-width: 100%;
}

.wlc-section .wlc-post-body .wlc-ig-still-frame {
	position: relative;
	display: block;
	overflow: hidden;
	border-bottom: none;   /* the letter underlines its links; a photograph is not one */
}

.wlc-section .wlc-post-body .wlc-ig-still-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	transition: opacity 240ms ease;
}

.wlc-section .wlc-post-body .wlc-ig-still-frame:hover .wlc-ig-still-img,
.wlc-section .wlc-post-body .wlc-ig-still-frame:focus-visible .wlc-ig-still-img {
	opacity: 0.88;
}

/* The badge is a confirmation, not an advertisement: it waits for the cursor.
   The line under the photograph is what tells a reader where this came from. */
.wlc-section .wlc-post-body .wlc-ig-still-badge {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 7px 12px;
	background: var(--wlc-ground);
	color: var(--wlc-ink);
	font-family: var(--wlc-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 240ms ease, transform 240ms ease;
	pointer-events: none;
}

.wlc-section .wlc-post-body .wlc-ig-still-frame:hover .wlc-ig-still-badge,
.wlc-section .wlc-post-body .wlc-ig-still-frame:focus-visible .wlc-ig-still-badge {
	opacity: 1;
	transform: none;
}

.wlc-section .wlc-post-body .wlc-ig-still-cap {
	margin: 14px auto 0;
	text-align: center;
	color: var(--wlc-meta);
}

.wlc-section .wlc-post-body .wlc-ig-still-words {
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.55;
	color: var(--wlc-body);
}

.wlc-section .wlc-post-body .wlc-ig-still-who {
	display: block;
	margin-top: 8px;
	font-family: var(--wlc-font-body);
	font-size: 10px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--wlc-meta);
}

@media (max-width: 900px) {

	.wlc-section .wlc-post-body .wlc-ig-still {
		margin: 32px auto;
	}

	.wlc-section .wlc-post-body .wlc-ig-still-words {
		font-size: 15px;
	}

	/* A finger has no hover, so the badge would never show. Sit it down at the
	   foot of the photograph and leave it there. */
	.wlc-section .wlc-post-body .wlc-ig-still-badge {
		opacity: 1;
		transform: none;
		right: 10px;
		bottom: 10px;
		padding: 6px 10px;
		font-size: 9px;
		letter-spacing: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wlc-section .wlc-post-body .wlc-ig-still-img,
	.wlc-section .wlc-post-body .wlc-ig-still-badge {
		transition: none;
	}
}