/*
Theme Name: Life and Letters 2026
Template: twentytwentyfive
Theme URI: https://lifeandlettersdev.la.utexas.edu/
Author: UT Austin College of Liberal Arts
Description: Rebuilt Life & Letters theme — child theme of Twenty Twenty-Five. Replaces the previous
  life-and-letters child theme, whose actual design lived only in database-stored Site Editor
  customizations rather than in theme files. This theme bakes the real, current design directly
  into version-controlled files.
Version: 1.0.1
Requires PHP: 8.1
Text Domain: life-and-letters-2026
*/

/* ==========================================================================
   Provenance note
   --------------------------------------------------------------------------
   The rules below were previously stored in the database rather than in the
   theme, across two separate mechanisms:

     - "Life & Letters Child Theme CSS"  (custom-css-js plugin, post 23659)
     - "archive styles"                  (custom-css-js plugin, post 23591)

   A third database record, the Customizer's "Additional CSS" (core custom_css,
   post 17658), was NOT carried over: it targets Genesis framework classes
   (.genesis-nav-menu, .site-inner, .entry-header, .posts-num-1, etc.) left
   over from the site's pre-block-theme build. None of those classes appear in
   any current template, part, or page. Verified dead — intentionally dropped.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Makes the linked logo images in the header collapse to their image box
   rather than inheriting inline line-height. Used by the header's UT branding
   bar image (class: image-display-block). */
.image-display-block a {
	display: block;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Homepage — Current Issue spotlight
   -------------------------------------------------------------------------- */

/* A 2-column grid: cover art left, issue details right. Core's grid layout
   would otherwise split it evenly. */
.current-issue-spotlight.wp-block-group-is-layout-grid {
	display: grid;
	grid-template-columns: 40% 60%;
}

/* The cover art deliberately overlaps the top edge of the band. Expressed as a
   negative margin so the overlap participates in layout flow. The previous
   build did this with `position: relative; top: -50px`, which moved the image
   visually but left its original space reserved, leaving a gap underneath. The
   net offset is equivalent: the old rule combined a `spacing|30` (20px) top
   margin with a -50px nudge.

   NOTE: needs a visual check the first time this pattern is placed — a negative
   margin participates in grid sizing where the old positional nudge did not. */
.current-issue-spotlight__cover {
	margin-top: -30px;
}

/* "Read Full Story" — right-aligned in the frame, sans, uppercase, light, and
   followed by a ▶ (added 2026-09-28).

   The frame fills that triangle with #f8971f, the lighter orange the user
   declined to add to the palette. The site orange cannot stand in for it:
   #aa4209 on the teal band is 1.8:1 and all but disappears. `gold` is already in
   the palette (it is the Extra Credit button) and reaches 5.6:1 — slightly
   stronger than the frame's own 4.8:1 — so no new value is needed. */
.current-issue-spotlight__more {
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-weight: 300;
	text-transform: uppercase;
}

.current-issue-spotlight__more a {
	color: inherit;
	text-decoration: none;
}

.current-issue-spotlight__more a::after {
	content: "\00a0\25B6";
	color: var(--wp--preset--color--gold);
}

.current-issue-spotlight__more a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Meta-line links — category and date (2026-09-28)

   No underline at rest, an underline on hover. The date was already without
   one; it gains the same hover so the two halves of a single meta line behave
   alike rather than one reacting and the other not.

   `:focus-visible` is not optional here. Taking the underline off a link removes
   the one cue a keyboard user has for which link they are on, so the underline
   comes back on keyboard focus as well as on mouse hover.
   -------------------------------------------------------------------------- */
.wp-block-post-terms a,
.wp-block-post-date a {
	text-decoration: none;
}

.wp-block-post-terms a:is(:hover, :focus-visible),
.wp-block-post-date a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Deprecated — still required by existing Page content
   --------------------------------------------------------------------------
   The Home page record still carries the old class names from the previous
   build. These rules keep that content rendering unchanged until the page is
   migrated onto the patterns above, at which point this whole block can go.

   `.picture-adjust-vert` and `.button-adjust-vert` are the nudge hacks called
   out in the rebuild-rather-than-port principle: hard-coded pixel offsets
   faking an alignment the layout should produce itself. Reproduced verbatim on
   purpose — not endorsed, just kept alive for the un-migrated page.
   -------------------------------------------------------------------------- */

.current-issue-grid.wp-block-group-is-layout-grid {
	display: grid;
	grid-template-columns: 40% 60%;
}

.picture-adjust-vert {
	position: relative;
	top: -50px;
}

.button-adjust-vert {
	position: relative;
	top: 40px;
}

/* --------------------------------------------------------------------------
   Post subtitle (Pods "subtitle" field)
   --------------------------------------------------------------------------
   Colour and alignment only. Size is set per placement using the theme's font
   size presets, so the scale stays in theme.json rather than being hard-coded
   here. Per the Figma measurements taken 2026-09-16 the two placements differ:
   the FEATURE frame's article dek is 50px (`feature-title`) while the HOME
   frame's hero-card dek is 25px (`card-title`). The colour below, #aa4209,
   matches the design's dek colour in both.

   NOTE: the previous database CSS defined .post-subtitle with a hard-coded
   50px, but the class was never actually applied to any markup — the live
   implementation used inline styles on a wrapper group instead. This theme
   applies the class properly.
   -------------------------------------------------------------------------- */
.post-subtitle {
	color: var(--wp--preset--color--custom-orange);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Navigation (Max Mega Menu plugin)
   -------------------------------------------------------------------------- */
li.mega-image-right {
	border-left: black 1px solid;
}

.mega-image-right a img {
	max-width: 80%;
	float: right;
}

/* --------------------------------------------------------------------------
   Homepage — past issues teaser
   --------------------------------------------------------------------------
   The four-across row of recent issue covers on the homepage, rendered by a
   [pods name="issue"] shortcode inside an HTML block. Previously this carried
   its grid rules as inline styles on a bare <div>; they live here instead so
   the layout is stylable and can respond to viewport width.

   Distinct from .archive-page-list (the Archive page's full three-across
   gallery) — different column count and no issue titles.

   Five across as of 2026-09-18, at editorial's request (was four). The column
   count and the shortcode's `limit` must stay in step, or the last cover wraps
   onto a row of its own.
   -------------------------------------------------------------------------- */

.archive-teaser-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
}

.archive-teaser-grid a {
	display: block;
}

.archive-teaser-grid img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.archive-teaser-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Past Issues archive gallery
   --------------------------------------------------------------------------
   Styles the issue-cover grid rendered by the [pods name="issue"] shortcodes
   on the Archive page. The markup (article.issue, .issue-header, .issue-title,
   .current-issue) is produced by those shortcode templates, not by blocks.
   -------------------------------------------------------------------------- */

/* Gaps widened 2026-09-24 at the user's request, accepting smaller covers.
   The column gap is a PERCENTAGE on purpose: at 7% the three 1fr columns
   resolve to 28.67% each, which is exactly the frame's proportion (cover 482.3
   in a 1682.7 grid = 28.66%). Expressing it as a percentage means the
   relationship holds at any width instead of only at the one I measured. */
.archive-page-list {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: center;
	column-gap: 7%;
	row-gap: var(--wp--preset--spacing--70);
}

.issue a {
	display: block;
}

.issue img {
	max-width: 100%;
	height: auto;
}

/* The ISSUES frame rules each row off in #707070, the same grey as every other
   divider on the site, so this takes `accent-4` rather than the hardcoded #999
   it carried over. The frame draws one unbroken rule across the row; ours stays
   segmented by the grid gap, which the user kept deliberately (2026-09-24). */
.archive-page-list .issue {
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
	padding: 0;
	text-align: center;
}

.archive-page-list .issue img {
	box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.3);
}

/* Frame: 30px, weight 600, #333f48. `body-large` is the 30px step and
   `ut-charcoal` is that exact colour, so neither is a new value. */
.archive-page-list .issue .issue-title {
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 600;
	color: var(--wp--preset--color--ut-charcoal);
	margin: 5px;
}

.archive-page-list .issue .issue-title a {
	text-decoration: none;
}

/* The fixed `height: 90px` became a `min-height` 2026-09-24. The height existed
   to keep the issue titles level across a row: only the current issue carries a
   "CURRENT ISSUE" line, so without it that one cell's header is a line taller
   and its title sits ~24px lower than its neighbours. A fixed height solved
   that but would clip once the title grew from 18px to 30px.

   The min-height is derived from the two presets rather than being a magic
   number, so it tracks the fluid type: one line of each label at the global
   1.37, plus the title's own 5px margins. */
.archive-page-list .issue-header {
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	min-height: calc(
		(var(--wp--preset--font-size--body-large) + var(--wp--preset--font-size--meta)) * 1.37 + 10px
	);
	margin-bottom: 10px;
}

/* Frame: 20px, weight 500, #333f48, Source Sans 3 — a meta label, and meta
   labels are sans everywhere else on the site. Was 16px/800/#000 in the
   body serif. */
.archive-page-list .issue-header .current-issue {
	font-size: var(--wp--preset--font-size--meta);
	font-family: var(--wp--preset--font-family--source-sans-3);
	color: var(--wp--preset--color--ut-charcoal);
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 450px) {
	.archive-page-list {
		grid-template-columns: 1fr 1fr;
		grid-gap: 1rem;
	}

	.archive-page-list .issue-header .current-issue {
		font-size: 12px;
	}

	.archive-page-list .issue {
		border-bottom: none;
	}
}

/* --------------------------------------------------------------------------
   Site header — masthead & utility bar

   Added 2026-09-16 during the responsive QA pass. The header previously used a
   `wp:columns` block with `isStackedOnMobile:false` plus a hardcoded 75px of
   left/right padding. On a 375px viewport that padding alone ate 40% of the
   width, and because core enforces `flex-wrap: nowrap !important` on
   `.is-not-stacked-on-mobile`, the wordmark was squeezed to 85x13px — the
   brand mark, effectively illegible.

   Rather than fight the core class with `!important`, the markup now uses a
   plain flex group that is allowed to wrap. The wordmark asks for 320px; when
   the viewport can't give it that alongside the menu/search, it wraps onto its
   own full-width line instead of being crushed. No media queries and no core
   block classes are overridden — the layout adapts intrinsically.
   -------------------------------------------------------------------------- */
.ll-utility-bar,
.ll-masthead {
	/* Was a hardcoded 75px; now scales down on narrow screens. The gutter is
	   named in theme.json (settings.custom.gutter) and shared with .ll-section
	   and .ll-rule, so header, page and footer land on one edge. Its 30px floor
	   matches the parent theme's minimum root padding, so on phones the header
	   lines up with body text instead of sitting 11px outside it. */
	padding-left: var(--wp--custom--gutter);
	padding-right: var(--wp--custom--gutter);
}

.ll-masthead__utilities {
	/* Menu toggle + search stay side by side at every size. */
	flex: 0 0 auto;
}

/* Search form — the theme default for every search block (the 404 page, or
   one an editor adds). Replaces the parent theme's pill shape with the site's
   own button: the Extra Credit "Subscribe" button's gold, charcoal, bold
   Source Sans 3 and square corners, with the field squared to match. One step
   below body text (card-title), set on the 404 page's text alongside it. Plain class
   selectors, enough to beat the parent's zero-specificity global styles;
   the header's toggle below still overrides what it needs. */
/* A percentage width (the block's own Width setting) that suits a desktop
   column leaves no room on a phone: 50% of 315px gave a 48px field with the
   button spilling out of the form. Never narrower than 20rem, unless the
   container itself is. The header's icon-only toggle is unaffected — core
   pins its wrapper with min-width: 0 !important. */
.wp-block-search__inside-wrapper {
	min-width: min(100%, 20rem);
}

.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 0;
	padding: 0.5em 0.75em;
	font-size: var(--wp--preset--font-size--card-title);
}

.wp-block-search__button {
	border-radius: 0;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ut-charcoal);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	text-transform: uppercase;
}

/* Header search: an icon-only toggle whose field slides out beside it.

   Moved here 2026-09-29 from theme.json styles.blocks["core/search"].css,
   where it applied to EVERY search block — it absolutely positioned the input
   4rem to the right, so the 404 page's ordinary search form had its input
   drawn on top of its own Search button. Scoped to the masthead, other search
   blocks get core's default form. Values unchanged. */
.ll-masthead .wp-block-search {
	position: relative;
}

.ll-masthead .wp-block-search__input {
	min-width: 200px;
	position: absolute;
	top: 0.75rem;
	left: 4rem;
	/* Keeps the slide-out field compact beside the 64px toggle, rather than
	   the body-text size the page's search form default uses. Its square
	   corners and border follow that default. */
	font-size: var(--wp--preset--font-size--medium);
}

.ll-masthead .wp-block-search__button {
	width: auto;
	background-color: white;
	color: black;
	padding: 0.75rem;
}

.ll-masthead .wp-block-search__button svg {
	height: 2.5rem !important;
	width: 2.5rem !important;
}

.ll-masthead > .ll-wordmark {
	/* Grows to fill the space beside the utilities on wide screens; drops to its
	   own row below roughly 600px. Core's `max-width: 100%` on block images keeps
	   the inline 829px width from overflowing once it wraps. */
	flex: 1 1 320px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Homepage hero — column order

   Added 2026-09-16 during the responsive QA pass. The three columns are
   secondary / lead / news left-to-right on desktop, but WordPress stacks
   columns in DOM order below 782px, which put the lead story roughly 700px
   down the page on mobile — behind two secondary cards.

   The DOM now leads with the lead story, which is the correct reading order on
   a narrow screen and the honest content hierarchy for assistive tech and
   search engines alike. Desktop restores the visual arrangement with `order`,
   applied only above core's own 782px column-stacking breakpoint so the mobile
   stack keeps source order.
   -------------------------------------------------------------------------- */
@media (min-width: 782px) {

	.ll-hero-row > .ll-hero-col--secondary {
		order: 1;
	}

	.ll-hero-row > .ll-hero-col--lead {
		order: 2;
	}

	.ll-hero-row > .ll-hero-col--news {
		order: 3;
	}
}

/* --------------------------------------------------------------------------
   Legacy classic-editor content

   Added 2026-09-16 during the responsive QA pass. Most of the 1,080 published
   posts predate the block editor and carry classic markup: `.wp-caption`
   wrappers and raw `<img>`/`<iframe>` elements with hardcoded pixel widths
   (600px captions, 500px embeds were both found on the search results page).
   Core's responsive image rules only cover block images, so this legacy markup
   overflowed a 375px viewport and forced horizontal scroll.

   `max-width` beats a `width` attribute or inline width, so no `!important` is
   needed here.
   -------------------------------------------------------------------------- */
.wp-block-post-content img,
.wp-block-post-content iframe,
.wp-block-post-content object,
.wp-block-post-content embed,
.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content img {
	height: auto;
}

/* --------------------------------------------------------------------------
   Article card — ONE card design, used everywhere

   Renamed from `.ll-related-card` to `.ll-card` on 2026-09-24. The user's
   point, and it is the right one: the "You Might Also Enjoy" cards and the
   Alumni featured cards carry the same information — image, title, dek,
   byline — so they should not be two designs. They are now one class.

   The two differ only in where the content comes from, which the markup
   handles rather than the styling: the related cards are a Query Loop of
   `core/post-*` blocks, while the Alumni cards are hand-picked static blocks
   in a pattern. Hence the heading rule below, which has to catch both.

   Added 2026-09-18 at editorial's request (fix the vertical sizing, add
   categories).

   The title previously carried `height: 62px` plus a `-webkit-line-clamp: 2`
   declaration. The clamp never worked — `-webkit-line-clamp` requires
   `display: -webkit-box`, which the rendering engine rejects outright (forcing
   it inline still computes to `flow-root`). So the fixed height was doing all
   the truncation, and once the line height moved to 1.37 two lines needed
   82.2px and the second line was being sliced through.

   Rather than restore a magic pixel height — which cannot work against fluid
   type anyway — the card becomes a flex column and the meta row is pushed to
   its foot. Titles may then run to two or three lines without being clipped,
   and the category/date rows still line up across all three cards.
   -------------------------------------------------------------------------- */
.ll-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Card titles are weight 600. theme.json already sets that for
   `core/post-title`, which covers the Query Loop cards, but a static
   `core/heading` in a pattern picks up the global heading weight of 300
   instead. One rule here rather than an inline override per card keeps the two
   sources looking identical. */
.ll-card :is(h2, h3, .wp-block-post-title) {
	font-weight: 600;
}

/* Core centres a separator with auto side margins. The card is a flex column,
   where an auto side margin absorbs the free space and collapses an empty <hr>
   to zero width — the rule was invisible rather than missing. The design draws
   it across the whole card between the byline and the meta row.

   `margin-top: auto` sits on the RULE rather than on the meta row (where it was
   until 2026-09-23): the rule and the meta line are a footer pair, so pushing
   the pair down keeps a fixed gap between them while still aligning the meta
   rows across cards of differing title length. Pushing the meta alone left the
   rule attached to the byline, and the gap below it was whatever space happened
   to be left over — zero on the tallest card. The minimum gap ABOVE the rule is
   the byline's own margin-bottom, set in the template. */
.ll-card .wp-block-separator {
	width: 100%;
	margin-top: auto;
	margin-left: 0;
	margin-right: 0;
}

/* --------------------------------------------------------------------------
   Section gutter

   Added 2026-09-18 with the move to contentSize: 960px.

   960px is the *article reading measure* — about 72 characters at 30px, inside
   the 45–75 comfort range. It is deliberately too narrow for the multi-column
   homepage and About sections, which therefore declare `align: wide` to opt out
   of it and pick up wideSize (1920px) instead.

   At 1920px a wide section would otherwise run edge to edge, so this restores
   the gutter the design actually uses: measured on the Figma frames, the
   container runs x=75 to x=1847, i.e. 75px each side. Same gutter as the
   header (settings.custom.gutter), so the whole page lines up on one edge.
   -------------------------------------------------------------------------- */
.ll-section {
	padding-left: var(--wp--custom--gutter);
	padding-right: var(--wp--custom--gutter);
}

/* Inside the page, a section already sits within the parent theme's root
   padding (clamp(30px, 5vw, 50px) on main), so the full gutter stacked on top
   of it put page content one gutter further in than the header and footer —
   50px extra on desktop, 30px of a 375px phone. Here the section adds only the
   part of the gutter the root padding does not already supply, so both land on
   the same edge: 75 at 1920, nothing extra on phones. Outside the root padding
   (the footer) the full gutter above still applies.

   Assumes nothing between main and the section escapes the root padding. An
   alignfull block without has-global-padding would; none contains one today. */
.has-global-padding .ll-section {
	padding-left: max(0px, var(--wp--custom--gutter) - var(--wp--style--root--padding-left));
	padding-right: max(0px, var(--wp--custom--gutter) - var(--wp--style--root--padding-right));
}

/* --------------------------------------------------------------------------
   Listing measure

   Added 2026-09-24 from the Figma fidelity pass against the ARCHIVES frame.

   The archive listings are narrower than the page container: the frame keeps
   the page TITLE out at the 75px gutter but insets the list itself, running its
   rules from x=425.5 to x=1578 on the 1920 artboard. The frame gives two widths
   for the same element — 1152.5px on the first three rules and 1103.8px on the
   rest — so 1150 is the round number in that range rather than a measured
   constant.

   This is a NAMED width (theme.json settings.custom.listingMeasure) rather than
   a literal in each template, because archive, author and search all need it
   and per-template literals are exactly how those templates ended up carrying a
   hardcoded 1000px before this theme existed.

   It is not `contentSize`: that is the 960px article READING measure and must
   stay put. A listing is not body copy.

   `width: min(...)` rather than max-width plus padding, so the measure is the
   content width exactly, with a 1rem gutter appearing only once the viewport
   is narrower than it.
   -------------------------------------------------------------------------- */
.ll-listing {
	width: min(100% - 2rem, var(--wp--custom--listing-measure));
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Full-container rule

   Added 2026-09-24 for the section rules on the About page.

   Every frame draws its section rules at the container: x=75 to x=1847, the
   same 75px gutter `.ll-section` uses. A separator cannot simply take
   `.ll-section`, because padding on an <hr> does not inset the border — the
   border is drawn across the whole border box. So the width is set directly,
   subtracting the same gutter `.ll-section` applies.

   Pair it with `align: wide` on the separator: alignwide takes the rule out to
   wideSize, and this brings it back in to the container.
   -------------------------------------------------------------------------- */
.ll-rule {
	width: calc(100% - 2 * var(--wp--custom--gutter));
	margin-left: auto;
	margin-right: auto;
}

/* Same correction as .ll-section inside the root padding, so rules and
   sections keep sharing one edge. */
.has-global-padding .ll-rule {
	width: calc(100% - 2 * max(0px, var(--wp--custom--gutter) - var(--wp--style--root--padding-left)));
}

/* --------------------------------------------------------------------------
   About — Writers section

   Added 2026-09-25 with the rebuild of patterns/about-writers.php.

   The frame stacks four writers down a narrow left column, each a 140px square
   portrait beside a name and recent article, with a 1px #707070 vertical rule
   separating them from the spotlight column. The previous build ran the four
   across the full width instead.

   The divider is a `border-right` on the left column rather than a separate
   element, so it needs no markup of its own and cannot drift out of step with
   the columns. One deliberate difference from the frame: there the rule starts
   below the two headings, whereas this runs the full column height. Matching
   that exactly would need the rule to be a separate absolutely-positioned
   element, which is a lot of fragility to buy a detail that reads the same.
   -------------------------------------------------------------------------- */
.ll-writers__list {
	border-right: 1px solid var(--wp--preset--color--accent-4);
	padding-right: var(--wp--preset--spacing--50);
}

/* Portrait beside text. The gap is the frame's 31px between the portrait's
   right edge and the name. */
.ll-writer {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

/* 140px square, cropped rather than squashed, and not allowed to shrink when
   a long name pushes against it. */
.ll-writer__portrait {
	flex: 0 0 auto;
}

.ll-writer__portrait img {
	width: 140px;
	height: 140px;
	object-fit: cover;
}

/* Core stacks columns at 781px. Below that the two sit one above the other, so
   a rule on the right edge would float mid-page pointing at nothing. */
@media (max-width: 781px) {
	.ll-writers__list {
		border-right: none;
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   Long unbroken strings

   Found 2026-09-25 during the About pass, and pre-existing rather than new: the
   masthead's contact address, colapublicaffairs@austin.utexas.edu, is 35
   characters with no space, hyphen or other break opportunity, so it cannot
   wrap and pushed 9px past a 375px viewport.

   `break-word` only ever acts on a word that would otherwise overflow, so
   ordinary text is untouched. Applies to any bare email or URL an editor
   pastes in, not just this one.
   -------------------------------------------------------------------------- */
main :is(p, li, figcaption) {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Article — meta row, hero caption, pull quotes

   Added 2026-09-23 from the Figma fidelity pass against the FEATURE frame.
   -------------------------------------------------------------------------- */

/* The design rules the meta line off below only (no rule above) and pushes the
   category and date to opposite edges of the article column, rather than
   centring them together mid-page. Corrected 2026-09-23: an earlier pass added
   a top rule too, but the FEATURE frame's node tree has only one divider line,
   sitting just under the text. */
.ll-article-meta {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

/* Related cards' own meta row: the design keeps "CURRENT ISSUE | date" as one
   tight, left-aligned group rather than spreading the two across the card. The
   pipe is not separate content in the design (its date node's text is the
   whole "| February 26, 2025" string) — added here via ::before since our
   category and date are separate blocks. */
/* The pipe appears only when a category actually renders before the date — the
   `+` adjacent-sibling combinator, not a bare descendant selector (changed
   2026-09-28). Several meta rows are date-only by design: the hero centre, In
   the News and College News never show their own category, and a hero-left
   card whose only categories are the hidden Features/Cover Story has nothing
   left to show (201 of 314 Features posts). core/post-terms renders NO element
   when it has no terms, so `+` cannot match and no stray "| " is left dangling
   in front of the date. */
.ll-card-meta .wp-block-post-terms + .wp-block-post-date::before {
	content: "| ";
}

/* `core/post-featured-image` cannot render a caption, so inc/block-filters.php
   appends one. Matched to the design's 15px caption, which is `small` here. */
.ll-hero-image__caption {
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ut-charcoal);
}

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

   Nothing styled quotes before this, so they inherited Twenty Twenty-Five and
   rendered at 22px against 30px body copy — a pull quote SMALLER than the
   paragraph it was pulled from, which inverts the emphasis entirely.

   114 published posts use <blockquote> and 102 use wp:quote, so this is not a
   rare case. The design sets 70px; editorial chose 50px (2026-09-23), which is
   `feature-title` here. Line height follows the design's quote ratio of 1.20
   rather than the 1.37 used for body copy.
   -------------------------------------------------------------------------- */
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote,
.wp-block-post-content .wp-block-pullquote {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
	color: var(--wp--preset--color--custom-orange);
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--feature-title);
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
}

.wp-block-post-content blockquote p,
.wp-block-post-content .wp-block-quote p,
.wp-block-post-content .wp-block-pullquote p {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* The attribution stays at reading size — it is a credit, not part of the quote. */
.wp-block-post-content blockquote cite,
.wp-block-post-content .wp-block-quote cite,
.wp-block-post-content .wp-block-pullquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--quote-attribution);
	font-style: normal;
	font-weight: 300;
}