/*
Theme Name: Commons Press
Theme URI: https://example.com/commons-press
Author: Commons Press
Author URI: https://example.com
Description: Custom theme for Commons Press, an independent academic publisher. Static HTML/CSS/PHP, no build step required.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: commons-press
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  GLOBAL SIZE CONTROL  <- make the whole site bigger or smaller here
   2.  Design tokens (colors, fonts, type scale, spacing)
   3.  Base / reset
   4.  Layout helpers (container, section, section heading)
   4b. Section height and spacing (how to make a module taller or shorter)
   5.  Utility classes (hide on mobile / hide on desktop)
   6.  Buttons, links and hover states
   7.  Sticky top bar + announcement bar (social icons, language switcher)
   8.  Site header + navigation
   9.  Hero section
   10. Feature cards (grid of 2)
   11. Quote card
   12. Numbered cards (grid of 3)
   13. Media cards (image + text)
   14. Post cards (the whole card is clickable)
   15. Dark quote band
   16. Site footer
   17. Generic page + blog styles
   17b. Block-built pages
   18. Block editor compatibility
   18b. Automatic post cards (Query Loop block)
   18c. Separator block styles
   19. Responsive rules (tablet and mobile)
   20. Page intro (the title block at the top of a page)
   21. Media card, stacked (cover on top) + .section-note
   22. Media card, horizontal (cover beside the text)
   23. Detail header (cover, specifications and purchase panel)
   24. Back bar + .chip (the strip under the header)
   25. Single post (header, body, footer, further reading)
   26. Tabs (switchable panels, two looks)
   27. Reviews (highlighted panel and the grid of cards)
   28. Contact (direct channels and the form panel)
   ========================================================================== */


/* ==========================================================================
   WHERE THE RESPONSIVE RULES LIVE

   There are three screen sizes in this theme, and only three:

     desktop   the default. Everything above 1024px.
     tablet    1024px and below   -> @media (max-width: 64rem)
     mobile    782px and below    -> @media (max-width: 48.875rem)

   ONE PROBLEM, ONE PLACE. A rule that changes how the WHOLE SITE behaves at
   a screen size lives in section 19. A rule that fixes one module's own
   quirk lives at the END of that module's own section, so everything about
   a module stays together. Both kinds are always inside one of the two
   media queries above: no new breakpoints.

   Sections that carry their own small responsive block at the end:
     8  header and navigation      (tablet: the menu is tightened so it fits)
     9  hero                       (tablet: the cover is kept to a sane size)
     14 post cards                 (tablet: an optional two-column layout)
     20 page intro
     21 media card, stacked
     22 media card, horizontal
     23 detail header
     24 back bar
     25 single post
     26 tabs                       (mobile: the label row scrolls sideways)
     27 reviews
     28 contact

   HIDING SOMETHING INSTEAD OF RESTYLING IT. Some things are right on a
   large screen and simply not worth the space on a phone: a decorative
   cover, a secondary column, a long aside. Rather than deciding that here,
   the theme gives you two classes to apply per page, from the editor,
   under Advanced > Additional CSS class:

     hide-on-mobile    visible on desktop and tablet, gone on phones
     hide-on-desktop   the opposite

   Every module that has an obvious candidate says so in a comment, both in
   its CSS section and in its file in block-patterns/. The decision is left
   to you, page by page.
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL SIZE CONTROL

   Every size in this theme is written in "rem", which means "a multiple of
   the number below". Change this one value and the ENTIRE site scales in
   proportion: text, padding, spacing, buttons, cards, everything.

     87.5%   = 14px base -> noticeably smaller
     93.75%  = 15px base -> slightly smaller
     100%    = 16px base -> current setting
     106.25% = 17px base -> slightly bigger

   Try this first. Only touch the individual sizes in section 2 if one
   specific element still looks wrong afterwards.
   ========================================================================== */

html {
	font-size: 100%;

	/* Leaves room for the sticky bar when jumping to an anchor link, so the
	   target is not hidden underneath it. */
	scroll-padding-top: 7rem;
}


/* ==========================================================================
   2. DESIGN TOKENS

   --- HOW TO CHANGE COLORS ---
   There are two layers. The first is the raw brand palette, the same names
   and values used in the site's design system. The second gives each color
   a job. Change a hex in the palette to restyle the whole brand at once, or
   reassign a role below to move one element to a different color.

   --- HOW TO CHANGE FONTS ---
   Four families are defined. Whatever you set here is used everywhere:
     --font-sans     Inter, all body text and buttons
     --font-serif    Newsreader, long-form serif text
     --font-display  Newsreader, every heading on the site
     --font-label    small uppercase labels and footer headings
   To load different fonts, also update the Google Fonts URL in functions.php.

   --- HOW TO CHANGE INDIVIDUAL SIZES ---
   The type scale controls text sizes. 1rem = the base from section 1.
   Sizes written as clamp(min, preferred, max) grow with the screen: the
   first number applies on phones, the last one on wide monitors.
   ========================================================================== */

:root {
	/* --- Brand palette (raw values, from the design system) --- */
	--brand-950: #1b100b;
	--brand-900: #291811;
	--brand-850: #351f16;
	--brand-800: #42271c;
	--brand-700: #573325;
	--brand-600: #734533;
	--brand-500: #935b44;
	--brand-400: #b77a60;
	--brand-200: #dfbfaf;
	--brand-100: #f1e2da;
	--brand-50:  #faf4f0;

	--canvas:        #faf8f5;
	--canvas-subtle: #f3efea;
	--canvas-card:   #ffffff;

	--accent:      #c2933c;
	--accent-dark: #9e7429;

	/* --- Color roles ---
	   Each line below lists EVERYTHING that changes if you edit that value,
	   so you can tell in advance how far a change will travel. */

	/* Page background, and the text color of anything sitting on a dark
	   background: dark buttons, the announcement bar, the footer. */
	--color-cream:       var(--canvas);

	/* Background of the alternating sections. Also the hover background of
	   the mobile menu button, the language dropdown and pagination links. */
	--color-cream-alt:   var(--canvas-subtle);

	/* Background of the two-column feature cards. */
	--color-card:        var(--canvas-card);

	/* Background of the white cards (numbered, media, post cards). */
	--color-white:       #ffffff;

	/* The workhorse. Every heading, the announcement bar background, the
	   footer background, the dark closing band, dark buttons, the active
	   menu item underline, the current page number in the pagination.
	   Changing this repaints most of the site. */
	--color-ink:         var(--brand-900);

	/* Paragraph text. Card text inherits it, so this is most of the reading
	   on the site. */
	--color-body:        #443831;

	/* Secondary text: the note under the hero buttons, post dates, quote
	   attributions, footer small print, bullet separators, list markers. */
	--color-muted:       #7b6c63;

	/* The accent. Small uppercase labels, text links, the numbers on the
	   numbered cards, arrow links, the hero image caption, card meta lines,
	   and the outlined brown button. Second most visible color after ink. */
	--color-brown:       var(--brand-600);

	/* Gold. Only ever used on dark backgrounds: the announcement bar link,
	   footer column headings, footer link hovers, the gold button, and the
	   language switcher on hover. */
	--color-gold:        var(--accent);

	/* Every thin line: card outlines, dividers inside cards, the header
	   bottom border, pagination borders, the hero image border. */
	--color-border:      #e6dad1;

	/* Note on --color-muted: it was #8a7b70, which reads nicely but only
	   reaches 3.8:1 against the cream background. Small text needs 4.5:1 to
	   meet WCAG AA, and this color is used for dates, captions and the
	   footer small print. #7b6c63 reaches 4.8:1 and looks almost identical.
	   If you lighten it again, check the contrast first. */
	/* The warmer border a card takes on hover. This is the color that tells
	   people a card is interactive, so keep it distinct from --color-border. */
	--color-border-gold: var(--brand-200);

	/* Thin rule drawn between one section and the next.
	   Raise the last number for a stronger line, lower it for a softer one. */
	--color-rule: rgba(27, 16, 11, 0.10);

	/* --- Hover colors ---
	   What a color turns into while the mouse is over it. If you change a
	   base color above, move its hover twin in the same direction. --- */
	--color-ink-hover:   var(--brand-800); /* dark buttons on hover */
	--color-gold-hover:  var(--accent-dark); /* gold buttons, social icons */
	--color-brown-hover: var(--brand-700); /* text links on hover */

	/* --- Fonts --- */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-serif: 'Newsreader', 'EB Garamond', Georgia, serif;
	--font-display: 'Newsreader', 'Playfair Display', Georgia, serif;
	--font-body: var(--font-sans); /* alias used across the stylesheet */

	/* Small uppercase labels: the little brown captions above a heading
	   ("Label - Detail"), and the footer column headings. A serif in Roman
	   capitals looked handsome but was hard to read at 12px, so these use
	   the sans face with extra letter spacing instead. Point this at
	   var(--font-display) for a serif label, or load another family in
	   functions.php and name it here. */
	--font-label: var(--font-sans);

	/* --- Type scale --- */
	--text-xs:    0.75rem;   /* 12px: badges, tiny meta */
	--text-sm:    0.8125rem; /* 13px: buttons and labels */
	--text-md:    0.875rem;  /* 14px: small copy */
	--text-base:  0.9375rem; /* 15px: card paragraphs */
	--text-lg:    1rem;      /* 16px: default body text */
	--text-xl:    1.0625rem; /* 17px: hero paragraph */

	--size-h1:       clamp(2.25rem, 5vw, 3.5rem);      /* hero title */
	--size-h2:       clamp(1.625rem, 3.2vw, 2.375rem); /* section titles */
	--size-h3:       1.375rem;  /* volume and book card titles */
	--size-h4:       1.125rem;  /* finding and article card titles */
	--size-subtitle: clamp(1.125rem, 1.9vw, 1.5rem);   /* hero subtitle */
	--size-quote:    clamp(1rem, 1.4vw, 1.25rem);      /* review quote */
	--size-band:     clamp(1.125rem, 1.7vw, 1.5rem);   /* dark band quote */

	/* --- Layout --- */
	--container-width: 70rem;   /* 1120px: max width of the content */
	--container-padding: 1.25rem;
	--radius: 0.625rem;         /* cards */
	--radius-lg: 0.875rem;      /* large cards */
	--radius-sm: 0.3125rem;     /* buttons and badges */
	/* --- Vertical space of every module (see section 4 for the full
	   explanation of how to control the height of a single block) --- */
	--section-space: 4.5rem;        /* the base value */
	--section-space-top: var(--section-space);    /* space above the content */
	--section-space-bottom: var(--section-space); /* space below the content */

	/* The two extra steps used by the spacing utility classes in section 4b.
	   They are multiples of --section-space, so changing the value above (or
	   the smaller value phones get) moves all three together. */
	--section-space-tight: calc(var(--section-space) * 0.45);
	--section-space-roomy: calc(var(--section-space) * 1.6);
	--card-padding: 2rem;       /* inner padding of every card */

	/* --- Motion --- */
	--transition: 0.18s ease;
}


/* ==========================================================================
   3. BASE / RESET
   ========================================================================== */

/* The "skip to content" link in header.php. It sits off the top of the
   screen and slides in only when a keyboard user tabs to it, which is the
   first thing they reach on the page. */
.skip-link {
	position: absolute;
	top: -4rem;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background-color: var(--color-ink);
	color: var(--color-cream);
	border-radius: var(--radius-sm);
	font-size: var(--text-md);
	transition: top var(--transition);
}

.skip-link:focus {
	top: 1rem;
}

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

body {
	margin: 0;
	background-color: var(--color-cream);
	color: var(--color-body);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--color-ink);
	font-weight: 600;
	line-height: 1.18;
	margin: 0;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--color-brown);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-brown-hover);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

blockquote {
	margin: 0;
}

/* Visible keyboard focus, required for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.post-card:focus-within {
	outline: 2px solid var(--color-brown);
	outline-offset: 3px;
}

/* Hides text visually but keeps it for screen readers */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */

/* Centers content and keeps it away from the screen edges */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* Every full-width band of the page is a .section.
   Its height, and the gap it leaves for the next module, are explained in
   full in section 4b just below, which also lists the utility classes. */
.section {
	padding-top: var(--section-space-top);
	padding-bottom: var(--section-space-bottom);
}


.section--alt {
	background-color: var(--color-cream-alt);
}

/* A background picked in the editor wins over the two defaults above.
   WordPress writes palette colors as .has-{name}-background-color with
   !important, and custom colors as an inline style, so both override these
   rules on their own. The only thing needed here is to not set a background
   on the inner .container, which would hide the chosen color. */
.section.has-background > .container {
	background-color: transparent;
}

.section--dark {
	background-color: var(--color-ink);
}

/* --- SECTION DIVIDERS ---
   Sections draw no line of their own. A line between two modules is
   inserted on the page like any other block, with the pattern
   "Divider: thin line", so you decide exactly where one appears and where
   it does not. The line takes its color from --color-rule in section 2.

   (Earlier versions drew a hairline automatically between every pair of
   sections, with a class to switch it off. That is gone: the class
   section--no-rule now does nothing and can be removed from any page where
   it was used.) */

/* Standalone divider for the PHP templates, where there is no block editor:
   <hr class="section-rule"> */
.section-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background-color: var(--color-rule);
}

/* Centered heading with an intro line under it */
.section-heading {
	max-width: 44rem;
	margin: 0 auto 2.75rem;
	text-align: center;
}

.section-heading__title {
	font-size: var(--size-h2);
}

.section-heading__intro {
	margin-top: 0.875rem;
	margin-bottom: 0;
	font-size: var(--text-lg);
}

/* Puts the right hand side of a split heading level with the top of the
   title instead of the bottom of the intro. Used when the right hand side
   is a button rather than a link. */
.section-heading--top {
	align-items: flex-start;
}

/* A small label above the title of any section heading */
.section-heading .eyebrow {
	display: block;
	margin: 0 0 0.625rem;
}

/* Left-aligned heading with a link on the far right */
.section-heading--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	max-width: none;
	margin-bottom: 2.5rem;
	text-align: left;
}

.section-heading--split .section-heading__intro {
	margin-top: 0.5rem;
	font-size: var(--text-base);
}

/* Thin horizontal divider inside cards */
.divider {
	height: 1px;
	border: 0;
	background-color: var(--color-border);
	margin: 1.25rem 0;
}


/* ==========================================================================
   4b. SECTION HEIGHT AND SPACING

   Every module is a .section, and its height comes from three things: the
   padding above the content, the padding below it, and the content itself.
   The space you see between two modules is simply the bottom padding of one
   plus the top padding of the next.

   There are three ways to change it, from broadest to narrowest.

   1. ALL SECTIONS AT ONCE
      Edit --section-space in section 2. Every module gets taller or shorter
      in proportion, on every page. Phones already use a smaller value.

      To move only one side everywhere, use the two tokens next to it:
        --section-space-top     the space above the content of every module
        --section-space-bottom  the space below it, which is also the space
                                left before the next module starts
      Example: more air above than below ->
        --section-space-top: 6rem;
        --section-space-bottom: 3rem;

   2. ONE MODULE, FROM THE EDITOR (no code)
      Select the module's outer section and open Styles > Dimensions >
      Padding. Set the top and bottom independently. WordPress writes that
      as an inline style, so it overrides everything below.

   3. ONE MODULE, FROM CODE
      Add one of the classes below to the section, either in its pattern
      file (class="section section--top-none") or in the editor under
      Advanced > Additional CSS class.

        section--top-none      no space above at all
        section--top-tight     about half the normal space above
        section--top-roomy     about 1.6x the normal space above

        section--bottom-none   no space below (module sits on the next one)
        section--bottom-tight  about half the normal space below
        section--bottom-roomy  about 1.6x the normal space below

        section--tight         half the space above AND below
        section--roomy         1.6x the space above and below
        section--flush         no vertical space at all

   Typical uses: two modules that belong together read as one block if the
   first gets section--bottom-none and the second section--top-none. A hero
   usually wants section--top-tight, because the header already provides
   space above it.
   ========================================================================== */

.section--top-none    { padding-top: 0; }
.section--top-tight   { padding-top: var(--section-space-tight); }
.section--top-roomy   { padding-top: var(--section-space-roomy); }

.section--bottom-none  { padding-bottom: 0; }
.section--bottom-tight { padding-bottom: var(--section-space-tight); }
.section--bottom-roomy { padding-bottom: var(--section-space-roomy); }

.section--tight {
	padding-top: var(--section-space-tight);
	padding-bottom: var(--section-space-tight);
}

.section--roomy {
	padding-top: var(--section-space-roomy);
	padding-bottom: var(--section-space-roomy);
}

.section--flush {
	padding-top: 0;
	padding-bottom: 0;
}


/* ==========================================================================
   5. UTILITY CLASSES

   HOW TO HIDE SOMETHING ON MOBILE:
   add class="hide-on-mobile" to any element in the PHP files. Example:

       <p class="hero__note hide-on-mobile">Available in Clothbound ...</p>

   The element stays on desktop and disappears on phones, which keeps the
   mobile page short and clean. Use "hide-on-desktop" for the opposite.

   THE SAME THING WITHOUT TOUCHING CODE: select the block in the editor,
   open Advanced > Additional CSS class, and type hide-on-mobile there. It
   works on any block, so the choice can be made page by page instead of
   being fixed once for every page that uses the module.

   "Mobile" here means 782px and below, the same line every other rule in
   this theme uses. There is deliberately no hide-on-tablet: adding a third
   state would mean three versions of every page to keep in your head.

   The rules themselves are in section 19, inside the mobile block.
   ========================================================================== */

.hide-on-desktop {
	display: none;
}


/* ==========================================================================
   6. BUTTONS, LINKS AND HOVER STATES

   Everything clickable changes appearance when the mouse is over it, so
   people can tell what is a link. Hover rules are wrapped in
   @media (hover: hover) so the effect does not get stuck on touch screens.
   ========================================================================== */

/* IMPORTANT: every modifier below is written as .btn.btn--x, not .btn--x on
   its own. Reason: in the block editor a button is two elements, a wrapper
   <div class="wp-block-button btn--outline"> around the real
   <a class="wp-block-button__link">. A bare .btn--outline rule matches that
   wrapper as well, so the wrapper got its own background, padding and hover
   and you ended up with a button drawn inside a button: on hover the wrapper
   filled dark behind the white link, and its extra padding squeezed the
   label until it wrapped onto two lines.
   Requiring .btn keeps these rules on hand-written links only
   (<a class="btn btn--dark">). The block editor versions are styled
   separately in section 18, on the link itself. */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.375rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition),
	            border-color var(--transition), transform var(--transition),
	            box-shadow var(--transition);
}

/* Dark solid button: the primary action */
.btn.btn--dark {
	background-color: var(--color-ink);
	color: var(--color-cream);
}

/* Outlined button: the secondary action */
.btn.btn--outline {
	background-color: var(--color-white);
	border-color: var(--color-ink);
	color: var(--color-ink);
}

/* Gold button: used only on dark backgrounds */
.btn.btn--gold {
	background-color: var(--color-gold);
	color: var(--color-ink);
}

/* Outlined button in brown, used inside the review card */
.btn.btn--outline-brown {
	background-color: transparent;
	border-color: var(--color-brown);
	color: var(--color-brown);
}

/* Smaller button used inside cards, in sentence case */
.btn.btn--small {
	padding: 0.625rem 1rem;
	font-size: var(--text-md);
	letter-spacing: 0.01em;
	text-transform: none;
}

/* --- Button hover states ---
   The lift and shadow are shared; each style also changes its colors. */
@media (hover: hover) {
	.btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 0.375rem 0.875rem rgba(36, 26, 20, 0.16);
	}

	.btn.btn--dark:hover {
		background-color: var(--color-ink-hover);
		color: var(--color-white);
	}

	/* The outlined button fills in with dark on hover */
	.btn.btn--outline:hover {
		background-color: var(--color-ink);
		color: var(--color-cream);
	}

	.btn.btn--gold:hover {
		background-color: var(--color-gold-hover);
	}

	.btn.btn--outline-brown:hover {
		background-color: var(--color-brown);
		color: var(--color-white);
	}
}

/* Pressed state: the button sinks back down */
.btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Text-only link with an underline, e.g. "Sample excerpt" */
.link-underline {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-brown);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

/* Accent link with an arrow, e.g. "View all books" */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-brown);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The arrow slides forward on hover to signal "this goes somewhere" */
.icon-arrow {
	font-size: 1.05em;
	line-height: 1;
	transition: transform var(--transition);
}

@media (hover: hover) {
	.link-underline:hover,
	.link-arrow:hover {
		color: var(--color-brown-hover);
	}

	.link-arrow:hover .icon-arrow,
	.link-underline:hover .icon-arrow,
	.btn:hover .icon-arrow {
		transform: translateX(0.2rem);
	}
}

/* Small brown label above a heading */
.eyebrow {
	font-family: var(--font-label);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-brown);
}


/* ==========================================================================
   7. STICKY TOP BAR + ANNOUNCEMENT BAR

   .site-top wraps the announcement bar and the header, and is what stays
   pinned to the top of the screen while scrolling. To make only the header
   sticky, move the announcement bar outside that wrapper in header.php.
   To switch stickiness off completely, change position to static below.
   ========================================================================== */

.site-top {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* When logged in, WordPress pins its own toolbar to the top; these two
   rules stop our bar from hiding underneath it. */
body.admin-bar .site-top {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-top {
		top: 46px;
	}
}

/* Below 600px the WordPress toolbar scrolls away with the page */
@media screen and (max-width: 600px) {
	body.admin-bar .site-top {
		top: 0;
	}
}

.announcement {
	background-color: var(--color-ink);
	color: var(--color-cream);
	padding: 0.6rem 0;
	font-size: var(--text-md);
	text-align: center;
}

.announcement__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	text-align: left;
}

/* Right-hand group: social icons, then the language switcher */
.announcement__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.announcement__text {
	margin: 0;
}

.announcement__text em {
	font-family: var(--font-display);
	font-style: italic;
}

.announcement__separator {
	color: var(--color-muted);
}

.announcement__link {
	color: var(--color-gold);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

@media (hover: hover) {
	.announcement__link:hover {
		color: var(--color-gold-hover);
		text-decoration: underline;
		text-underline-offset: 0.25rem;
	}
}


/* --- Social icons --------------------------------------------------------
   The list itself is built in functions.php (commons_press_social_links).
   Add or remove entries there; the styling below adapts on its own. */

.social-links {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	color: var(--color-cream);
	transition: color var(--transition), background-color var(--transition);
}

@media (hover: hover) {
	.social-links a:hover {
		color: var(--color-gold);
		background-color: rgba(255, 255, 255, 0.08);
	}
}


/* --- Language switcher ---------------------------------------------------
   Shows the current language; the other languages appear on hover, or when
   the button receives keyboard focus (which is also what happens when it is
   tapped on a phone). No JavaScript involved. */

.lang-switcher {
	position: relative;
}

.lang-switcher__current {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color var(--transition), color var(--transition);
}

.lang-switcher__caret {
	font-size: 0.7em;
	transition: transform var(--transition);
}

/* The panel with the other languages */
.lang-switcher__list {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	min-width: 8rem;
	padding: 0.35rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	box-shadow: 0 0.5rem 1.25rem rgba(27, 16, 11, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity var(--transition), transform var(--transition),
	            visibility var(--transition);
}

/* An invisible bridge so the panel does not close while the mouse travels
   from the button down to it */
.lang-switcher::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 0.5rem;
}

.lang-switcher:hover .lang-switcher__list,
.lang-switcher:focus-within .lang-switcher__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lang-switcher:hover .lang-switcher__caret,
.lang-switcher:focus-within .lang-switcher__caret {
	transform: rotate(180deg);
}

.lang-switcher:hover .lang-switcher__current,
.lang-switcher:focus-within .lang-switcher__current {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.lang-switcher__list a {
	display: block;
	padding: 0.4rem 0.6rem;
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	font-size: var(--text-md);
	transition: background-color var(--transition), color var(--transition);
}

@media (hover: hover) {
	.lang-switcher__list a:hover {
		background-color: var(--color-cream-alt);
		color: var(--color-brown);
	}
}


/* ==========================================================================
   8. SITE HEADER + NAVIGATION
   ========================================================================== */

.site-header {
	background-color: var(--color-cream);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--color-ink);
}

.site-brand__logo {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
}

.site-brand__name {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: color var(--transition);
}

@media (hover: hover) {
	.site-brand:hover .site-brand__name {
		color: var(--color-brown);
	}
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.site-nav__menu a {
	color: var(--color-ink);
	font-size: var(--text-base);
	padding-bottom: 0.25rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--transition), color var(--transition);
}

/* Hovering a menu item draws its underline */
@media (hover: hover) {
	.site-nav__menu a:hover {
		color: var(--color-brown);
		border-bottom-color: var(--color-brown);
	}
}

/* WordPress adds these classes to the item of the page you are on */
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a {
	font-weight: 600;
	border-bottom-color: var(--color-ink);
}

/* Vertical line before the order button */
.site-nav__cta {
	padding-left: 1.75rem;
	border-left: 1px solid var(--color-border);
}

/* Hamburger button: only visible on small screens (see section 18) */
.nav-toggle {
	display: none;
}

.nav-toggle__button {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	cursor: pointer;
	font-size: 1.125rem;
	color: var(--color-ink);
	transition: background-color var(--transition);
}

/* Wrapped like every other hover in the theme, so the highlight does not
   stay stuck on the button after a tap on a touch screen. */
@media (hover: hover) {
	.nav-toggle__button:hover {
		background-color: var(--color-cream-alt);
	}
}


/* --- Tablet: 1024px and below ---
   THE PROBLEM THIS SOLVES. The hamburger button only appears at 782px, but
   the full menu needs roughly 900px to fit: the logo and site name, five or
   six menu items at a 1.75rem gap, and the order button behind a vertical
   line. Between those two numbers the row ran out of room and the order
   button was pushed off the right edge of the screen.

   The fix is in two halves. The first tightens the gaps and drops the site
   name one step, which buys back about 150px. The second lets the menu wrap
   onto a second line if the site ever has more items than fit: it is the
   safety net, so adding a seventh page to the menu can never push anything
   off the screen again. */
@media (max-width: 64rem) {
	.site-header__inner {
		gap: 1.25rem;
	}

	.site-brand__name {
		font-size: 1.125rem;
	}

	.site-nav {
		gap: 1rem;
		min-width: 0;
	}

	.site-nav__menu {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.5rem 1.125rem;
	}

	.site-nav__cta {
		padding-left: 1rem;
	}
}


/* ==========================================================================
   9. HERO SECTION
   ========================================================================== */

/* The hero used to carry its own padding, which meant it ignored the
   spacing tokens and had to be edited separately. It now uses the same
   system as every other module, so there are no exceptions to learn. */
.hero {
	padding-top: var(--section-space-top);
	padding-bottom: var(--section-space-bottom);
}

.hero__inner {
	display: grid;
	/* Text 65%, cover image 35%. Change these two numbers to rebalance. */
	grid-template-columns: 55fr 45fr;
	gap: 3.5rem;
	align-items: center;
}

.hero__title {
	font-size: var(--size-h1);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.hero__subtitle {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--size-subtitle);
	line-height: 1.3;
	color: var(--color-brown);
	margin: 0.875rem 0 0;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.7rem;
	margin-top: 1.25rem;
	font-size: var(--text-base);
}

.hero__meta strong {
	color: var(--color-ink);
	font-weight: 600;
}

.hero__meta-dot {
	color: var(--color-muted);
}

.hero__description {
	max-width: 46ch;
	margin-top: 1.25rem;
	font-size: var(--text-xl);
	line-height: 1.6;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin-top: 1.75rem;
}

.hero__note {
	margin-top: 1.75rem;
	margin-bottom: 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* The cover column: keeps the image and its caption centered whatever
   size the image is set to in the editor. */
.hero__cover {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero__cover-image {
	width: 100%;
}

/* Optional white frame around a cover. Available in the editor as
   Image block > Styles > "Cover frame". */
.hero__cover-frame,
.wp-block-image.is-style-cover-frame {
	display: block;
	background-color: var(--color-white);
	padding: 1.25rem;
	box-shadow: 0 0.75rem 1.75rem rgba(36, 26, 20, 0.08);
	transition: transform var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
	.hero__cover-frame:hover,
	.wp-block-image.is-style-cover-frame:hover {
		transform: translateY(-0.25rem);
		box-shadow: 0 1.25rem 2.25rem rgba(36, 26, 20, 0.16);
	}
}

.hero__cover-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1rem;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-brown);
}

@media (hover: hover) {
	.hero__cover-caption:hover .icon-arrow {
		transform: translateX(0.2rem);
	}
}


/* --- Tablet and mobile ---

   THE PROBLEM THIS SOLVES. Section 19 flattens the hero to one column at
   1024px, and it already keeps .hero__cover-frame to 26rem. But the frame
   is optional: the pattern ships a plain image with the class
   hero__cover-image, which is set to width: 100%. On one column that 100%
   became the whole content width, so a book cover meant to be 350px wide
   was drawn nearly 1000px wide and pushed everything else off the screen.

   Constraining the column itself, rather than one of the two images that
   can sit in it, fixes both cases at once and needs no new class.

   WORTH KNOWING ON PHONES: the cover is usually decoration, and on a phone
   it costs a full screen of scrolling before the reader reaches anything
   else. It is left visible on purpose, but it is a good candidate for
   hide-on-mobile: select the hero__cover group in the editor and add that
   class under Advanced > Additional CSS class. The same goes for
   .hero__note, the small line under the buttons. */
@media (max-width: 64rem) {
	.hero__cover {
		max-width: 26rem;
		margin-inline: auto;
	}
}


/* ==========================================================================
   10. FEATURE CARDS (GRID OF 2)
   ========================================================================== */

.grid-2 {
	display: grid;
	/* minmax(0, 1fr) instead of plain 1fr: without it, a long word or a wide
	   image inside one card can make its column wider than the others. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.75rem;
}

/* To change how ALL cards feel, edit --card-padding and --radius above. */
.feature-card {
	height: 100%;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--card-padding);
	display: flex;
	flex-direction: column;
	transition: border-color var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
	.feature-card:hover {
		border-color: var(--color-border-gold);
		box-shadow: 0 0.5rem 1.25rem rgba(36, 26, 20, 0.07);
	}
}

/* flex-wrap is the safety valve: the badge never shrinks (it is set to
   white-space: nowrap just below), so without it a long label beside a long
   badge pushed the pair wider than the card on a narrow screen. Wrapping
   drops the badge onto its own line instead. */
.feature-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.feature-card__badge {
	background-color: #eae3d8;
	border-radius: var(--radius-sm);
	padding: 0.25rem 0.6rem;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-ink);
	white-space: nowrap;
}

.feature-card__title {
	font-size: var(--size-h3);
	margin-bottom: 0.75rem;
}

.feature-card__text {
	margin: 0;
	font-size: var(--text-base);
}

.feature-card__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 1.25rem;
	font-size: var(--text-md);
}

.feature-card__list li::before {
	content: "\2022";
	margin-right: 0.4rem;
	color: var(--color-muted);
}

.feature-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.875rem;
	margin-top: auto;
}


/* ==========================================================================
   11. QUOTE

   A centered pull quote with no frame: a small decorative mark on top, the
   quotation in the display serif, and one attribution line underneath.
   Wrap any part of the quote in <strong> in the editor to highlight it.
   ========================================================================== */

.quote-card {
	max-width: 65rem;
	margin: 0 auto;
	text-align: center;
}

/* Decorative quotation mark above the quote. Drawn by CSS, so there is no
   extra element to keep in the markup. Set content: "" to remove it. */
.quote-card::before {
	content: "\201D";
	display: block;
	font-family: var(--font-display);
	font-size: 3.5rem;
	line-height: 0.6;
	color: var(--brand-200);
	margin-bottom: 1.25rem;
}

.quote-card__text {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
	line-height: 1.5;
	color: var(--color-ink);
	text-wrap: balance;
}

/* Bold text inside the quote becomes the highlighted phrase */
.quote-card__text strong {
	font-weight: 700;
	color: var(--color-brown);
}

/* Attribution row: name, source and link separated by bullets. The muted
   color is inherited by the bullets, which is what keeps them discreet. */
.quote-card__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.875rem;
	margin: 1.5rem 0 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

.quote-card__footer strong {
	color: var(--color-ink);
	font-weight: 700;
}

/* The link is styled by position rather than by a class: a class added to
   an inline element inside a paragraph block can be stripped by the editor
   when the page is saved, and the styling would silently disappear. */
.quote-card__footer a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-brown);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

.quote-card__footer a::after {
	content: "\2192";
	transition: transform var(--transition);
}

@media (hover: hover) {
	.quote-card__footer a:hover {
		color: var(--color-brown-hover);
	}

	.quote-card__footer a:hover::after {
		transform: translateX(0.2rem);
	}
}


/* ==========================================================================
   12. NUMBERED CARDS (GRID OF 3)
   ========================================================================== */

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.5rem;
}

.numbered-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--card-padding);
}

.numbered-card__number {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-brown);
}

.numbered-card__title {
	font-size: var(--size-h4);
	margin: 0.6rem 0;
}

.numbered-card__text {
	margin: 0;
	font-size: var(--text-base);
}


/* ==========================================================================
   13. MEDIA CARDS (IMAGE + TEXT)
   ========================================================================== */

.media-card {
	height: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--card-padding);
	display: flex;
	flex-direction: column;
	transition: border-color var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
	.media-card:hover {
		border-color: var(--color-border-gold);
		box-shadow: 0 0.5rem 1.25rem rgba(36, 26, 20, 0.07);
	}
}

.media-card__head {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.media-card__image {
	width: 5.5rem;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
}

.media-card__meta {
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--color-brown);
}

.media-card__title {
	font-size: var(--size-h3);
	margin: 0.35rem 0 0.4rem;
}

.media-card__subtitle {
	margin: 0;
	font-size: var(--text-base);
}

.media-card__text {
	margin: 1.25rem 0 0;
	font-size: var(--text-base);
}

.media-card__actions {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: auto;
}

.media-card__actions .link-underline {
	margin-left: auto;
}


/* ==========================================================================
   14. POST CARDS

   The whole card is clickable. How it works: the card is position:relative
   and the "Read full essay" link stretches an invisible layer over it
   (see .post-card__link::after). The heading stays a real heading, so
   search engines and screen readers still read the page correctly.
   ========================================================================== */

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.5rem;
}

.post-card {
	height: 100%;
	position: relative;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: border-color var(--transition), box-shadow var(--transition),
	            transform var(--transition);
}

/* Hover: the card lifts, the border warms up, the title and arrow react */
@media (hover: hover) {
	.post-card:hover {
		border-color: var(--color-border-gold);
		box-shadow: 0 0.625rem 1.5rem rgba(36, 26, 20, 0.1);
		transform: translateY(-0.1875rem);
	}

	.post-card:hover .post-card__title {
		color: var(--color-brown);
	}

	.post-card:hover .icon-arrow {
		transform: translateX(0.25rem);
	}

	/* The picture zooms very slightly. Remove this rule for a still one. */
	.post-card:hover .post-card__image img {
		transform: scale(1.04);
	}
}

/* THE PICTURE AT THE TOP OF THE CARD
   Only drawn when the post has a featured image; a post without one simply
   starts at the category row. --card-image-height is the one value to
   change to make these pictures taller or shorter. */
.post-card__image {
	--card-image-height: 9rem;

	margin: 0 0 1.25rem;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--color-cream-alt);
}

.post-card__image img {
	display: block;
	width: 100%;
	height: var(--card-image-height);
	object-fit: cover; /* fills the box without squashing the picture */
	transition: transform var(--transition);
}

/* Category chip on the left, reading time on the right, on the same
   baseline. Their margins are reset in section 18, otherwise the block
   editor pushes the second one 24px down and they stop lining up. */
.post-card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.875rem;
}

/* The date at the bottom of the card and the reading time at the top read
   the same: small, quiet, sentence case. */
.post-card__date,
.post-card__readtime {
	font-size: var(--text-md);
	color: var(--color-muted);
	white-space: nowrap;
}

.post-card__title {
	font-size: var(--size-h4);
	line-height: 1.3;
	transition: color var(--transition);
}

/* The excerpt is cut to a fixed number of lines, so every card in a row
   shows the same amount of text and the divider below sits at the same
   height. min-height reserves the lines, line-clamp cuts anything longer
   and adds the ellipsis. To show more or fewer lines, change the number in
   --excerpt-lines: nothing else needs touching.
   Kept in step with the Query Loop version in section 18b. The selector
   starts with p. on purpose: in the block editor the same class lands on a
   wrapper <div> that holds the text in a <p> of its own, and only the <p>
   should be cut. */
p.post-card__excerpt {
	--excerpt-lines: 4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--excerpt-lines);
	line-clamp: var(--excerpt-lines);
	overflow: hidden;
	margin: 0.75rem 0 1.5rem;
	font-size: var(--text-base);
	line-height: 1.6;
	min-height: calc(var(--excerpt-lines) * 1.6em);
}

/* THE BOTTOM ROW: date on the left, "read article" on the right, with a
   hairline above it. margin-top: auto is what pins it to the bottom of the
   card, so the rows line up across a whole grid however long the titles
   are. The same row is described for the Query Loop version in section 18b:
   change both if you want them to keep matching. */
.post-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.125rem;
	border-top: 1px solid var(--color-border);
}

/* The link itself: small, uppercase and brown, like the arrow links used in
   section headings. */
.post-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-brown);
	line-height: 1.3;
	white-space: nowrap;
}

/* This invisible layer is what makes the entire card clickable. It works
   whether the link is the element itself (PHP template) or an <a> inside it
   (block editor, where the text is an editable paragraph).
   It has to be ::before, not ::after: ::after is where the arrow goes, and
   one element cannot have two of the same pseudo-element. Using ::after for
   both is what put a stray arrow in the top left corner of every card. */
.post-card__link::before,
.post-card__link > a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
}

/* When the link sits inside the paragraph rather than being the paragraph */
.post-card__link > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	color: inherit;
}

/* Shown instead of the grid when no post has been published yet */
.post-empty {
	grid-column: 1 / -1;
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--color-muted);
	font-size: var(--text-base);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
}

/* Pagination at the bottom of the Articles page (the_posts_pagination) */
.navigation.pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

/* flex-wrap matters once a listing runs to many pages: without it the row
   of page numbers kept growing sideways past the edge of a phone screen
   instead of folding onto a second line. */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	font-size: var(--text-base);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.pagination .page-numbers.current {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-white);
}

@media (hover: hover) {
	.pagination a.page-numbers:hover {
		border-color: var(--color-ink);
		background-color: var(--color-cream-alt);
	}
}


/* --- Tablet: an optional second column ---

   Section 19 takes every three-column grid straight down to ONE column at
   1024px. Nothing breaks, but on a tablet held sideways it leaves a lot of
   empty space on either side of a single tall column of cards.

   Two columns there is a matter of taste, not a fault, so it ships switched
   off. The switch is in SECTION 19, at the end of the tablet block, marked
   "OPTIONAL: TWO COLUMNS ON TABLET".

   It has to live there rather than here: section 19 turns these grids into
   one column with a rule of exactly the same strength as anything written
   here, and when two rules are equally strong the one further down the file
   wins. A rule written in this section would simply be ignored. */


/* ==========================================================================
   15. DARK QUOTE BAND
   ========================================================================== */

.quote-band {
	text-align: center;
}

.quote-band__text {
	max-width: 30ch;
	margin: 0 auto;
	font-size: var(--size-band);
	font-style: italic;
	line-height: 1.55;
	color: #f5efe6;
}

.quote-band__source {
	margin: 1.5rem 0 2rem;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #a2968a;
}


/* ==========================================================================
   16. SITE FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--color-ink);
	color: #d9d0c6;
	padding-top: 3.5rem;
	padding-bottom: 2rem;
	font-size: var(--text-base);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 3rem;
}

.site-footer a {
	color: #e8e1d8;
}

@media (hover: hover) {
	.site-footer a:hover {
		color: var(--color-gold);
	}
}

/* The logo and site name are white inside the dark footer */
.site-footer .site-brand,
.site-footer .site-brand__name {
	color: var(--color-white);
}

@media (hover: hover) {
	.site-footer .site-brand:hover .site-brand__name {
		color: var(--color-gold);
	}
}

.site-footer__about {
	max-width: 40ch;
	margin: 1.25rem 0 0;
}

.site-footer__credit {
	margin: 1rem 0 0;
	color: #a2968a;
}

.site-footer__credit strong {
	color: var(--color-white);
	font-weight: 600;
}

.site-footer__heading {
	font-family: var(--font-label);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 1.125rem;
}

.site-footer__menu li {
	margin-bottom: 0.7rem;
}

.site-footer__publications {
	margin: 0 0 1.25rem;
}

.site-footer__publications em {
	font-family: var(--font-display);
	font-style: italic;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--text-md);
	color: #a2968a;
}

/* Wraps rather than overflowing: the number of legal links is set in
   footer.php, and a third one, or a long German label, would otherwise run
   past the edge of a small phone. */
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.875rem;
}

.site-footer__legal a {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}


/* ==========================================================================
   17. GENERIC PAGE + BLOG STYLES
   ========================================================================== */

.entry {
	max-width: 68ch;
	margin: 0 auto;
}

.entry__title {
	font-size: var(--size-h2);
	margin-bottom: 1.5rem;
}

.entry__content h2 {
	font-size: var(--size-h3);
	margin: 2rem 0 0.75rem;
}

.entry__content h3 {
	font-size: var(--size-h4);
	margin: 1.5rem 0 0.5rem;
}

.entry__content img {
	border-radius: var(--radius);
	margin: 1.25rem 0;
}

.entry + .entry {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   17b. BLOCK-BUILT PAGES

   Pages composed in the editor print their blocks straight into <main>.
   Our section patterns are full-width and bring their own .container, so
   they are left alone; any loose block (a stray paragraph, a heading, an
   image) is centered inside the normal content width instead.
   ========================================================================== */

.page-content > * {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* Full-width sections ignore that wrapper */
.page-content > .section,
.page-content > .wp-block-group.section,
.page-content > .back-bar,
.page-content > .wp-block-group.back-bar,
.page-content > .section-rule-wrap {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Loose blocks keep a little breathing room from the header and footer */
.page-content > *:first-child:not(.section):not(.back-bar) {
	margin-top: var(--section-space);
}

.page-content > *:last-child:not(.section) {
	margin-bottom: var(--section-space);
}


/* ==========================================================================
   18. BLOCK EDITOR COMPATIBILITY

   These rules exist only so the sections built with WordPress blocks (the
   "Commons Press" patterns) look identical to the hand-written ones. You do
   not normally need to touch this section.
   ========================================================================== */

/* WordPress adds an automatic 24px gap between blocks. Our own spacing is
   defined per element, so we switch that default off inside our sections.

   The whole selector is wrapped in :where() on purpose: that gives it zero
   specificity, so it still beats WordPress's own default (also zero, and
   loaded before this file) while every spacing rule written earlier in this
   stylesheet keeps winning. Without the :where(), this single line would
   flatten the spacing of the hero, the cards and every other section. */
:where(.section) :where(.is-layout-flow) > *,
:where(.section) :where(.is-layout-constrained) > * {
	margin-block-start: 0;
}

/* --- WHY THE NEXT RULE LOOKS SO HEAVY-HANDED ---------------------------
   WordPress gives every group block a "block gap": a 24px margin on top of
   each child except the first. In a card grid that pushes cards 2 and 3
   down by 24px while card 1 stays put, so the first card looks higher than
   the rest.

   The rule it uses is:      .wp-block-group.is-layout-flow > *
   which has specificity     (0,2,0)

   Anything weaker loses no matter where it sits in this file. A previous
   attempt used .grid-3 > * -> (0,1,0) -> WordPress kept winning.

   So the selector below names the grid together with .wp-block-group, which
   reaches (0,3,0), and adds !important as a guarantee against the extra
   layout rules WordPress emits for flex and grid layouts. This is the one
   place in the stylesheet where !important is justified: it is undoing a
   spacing rule the editor injects, not overriding a design decision.

   If you add a new card grid, add its class to this list. */
.section .wp-block-group.grid-2 > *,
.section .wp-block-group.grid-3 > *,
.section .wp-block-group.post-grid > *,
.section .wp-block-post-template.post-grid > *,
.section .wp-block-group.hero__inner > *,
.section .wp-block-group.section-heading--split > *,
.section .wp-block-group.media-card__top > *,
.section .wp-block-group.post-card__top > *,
.section .wp-block-group.post-card__foot > *,
.section .wp-block-group.post-footer__inner > *,
.section .wp-block-group.tabs__nav > *,
.section .wp-block-group.review-card__top > *,
.section .wp-block-group.review-card__foot > *,
.section .wp-block-group.quote-card__top > *,
.section .wp-block-group.channel-list > *,
.section .wp-block-group.media-card--horizontal > *,
.section .wp-block-group.detail__aside > *,
.section .wp-block-group.spec-card__top > *,
.section .wp-block-group.spec-row > *,
.section .wp-block-group.choice-panel__top > *,
.section .wp-block-group.choice-grid > *,
.section .wp-block-group.detail__covers > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Cards fill their cell so every one in a row starts and ends level.
   Note: section-heading--split is deliberately NOT in this list. Its two
   halves are meant to line up along their bottom edge, and stretching them
   to full height would push the right-hand side back up to the top. */
.section .wp-block-group.grid-2 > *,
.section .wp-block-group.grid-3 > *,
.section .wp-block-group.post-grid > *,
.section .wp-block-post-template.post-grid > * {
	align-self: stretch;
	height: 100%;
}

/* NOTE: do not add a blanket "margin: 0" for .wp-block-group here.
   .container and .section-heading are group blocks too, and they rely on
   "margin: 0 auto" to stay centered; a blanket reset wins on specificity
   and pushes every section flush against the left edge of the screen.
   The rule above already removes the editor's automatic block spacing.

   Belt and braces: whatever else happens, these two stay centered. */
.section .wp-block-group.container,
.section .wp-block-group.section-heading {
	margin-left: auto;
	margin-right: auto;
}

/* Headings and images inside blocks keep our own spacing.
   Wrapped in :where() for the same reason as above: our own rules, such as
   the bottom margin on .feature-card__title, must stay in charge. */
:where(.section .wp-block-heading) {
	margin: 0;
}

/* Same idea for images: vertical margins only, so figures that are meant
   to be centered (the hero cover on tablets) keep their auto margins. */
:where(.section .wp-block-image) {
	margin-block: 0;
}

/* Images never get a forced width: whatever size is set on the block in the
   editor (drag its handles, or Settings > Image size) is respected. */
:where(.section .wp-block-image img) {
	max-width: 100%;
	height: auto;
}

/* Card grids: the group block that holds the cards may pick up a layout
   class from the editor (is-layout-flow / is-layout-constrained). These
   rules restate our own layout with enough specificity to stay in charge. */
.section .grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.75rem;
}

.section .grid-3,
.section .post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 1.5rem;
}

/* Every card fills its cell from top to bottom */
.section .feature-card,
.section .media-card,
.section .numbered-card,
.section .post-card,
.section .post-grid > .wp-block-post {
	height: 100%;
	margin: 0;
}


/* Core button blocks: make them look exactly like our .btn styles.
   In the editor the modifier class (btn--dark, btn--outline, btn--gold)
   is set on the button block; the styles land on the link inside it. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin: 0;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.375rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background-color: var(--color-ink);
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background-color var(--transition), color var(--transition),
	            border-color var(--transition), transform var(--transition),
	            box-shadow var(--transition);
}

/* Belt and braces against the problem described in section 6: the wrapper
   of a button block is only a box that holds the link. It never carries a
   background, a border or padding of its own, so a button can never be
   drawn inside another button. */
.wp-block-button {
	padding: 0;
	border: 0;
	background: none;
}

.btn--outline > .wp-block-button__link {
	background-color: var(--color-white);
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.btn--gold > .wp-block-button__link {
	background-color: var(--color-gold);
	color: var(--color-ink);
}

.btn--outline-brown > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--color-brown);
	color: var(--color-brown);
}

.btn--small > .wp-block-button__link {
	padding: 0.625rem 1rem;
	font-size: var(--text-md);
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Arrows on button blocks. Add "btn--arrow" (right arrow) or
   "btn--arrow-out" (diagonal arrow, for actions that leave the site) to a
   button block's Advanced > Additional CSS class to get the same arrows the
   hand-written buttons use. */
.btn--arrow > .wp-block-button__link::after {
	content: "\2192";
	transition: transform var(--transition);
}

.btn--arrow-out > .wp-block-button__link::after {
	content: "\2197";
	transition: transform var(--transition);
}

@media (hover: hover) {
	.btn--arrow > .wp-block-button__link:hover::after,
	.btn--arrow-out > .wp-block-button__link:hover::after {
		transform: translateX(0.2rem);
	}
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		background-color: var(--color-ink-hover);
		color: var(--color-white);
		transform: translateY(-1px);
		box-shadow: 0 0.375rem 0.875rem rgba(27, 16, 11, 0.16);
	}

	.btn--outline > .wp-block-button__link:hover {
		background-color: var(--color-ink);
		color: var(--color-cream);
	}

	.btn--gold > .wp-block-button__link:hover {
		background-color: var(--color-gold-hover);
		color: var(--color-white);
	}

	.btn--outline-brown > .wp-block-button__link:hover {
		background-color: var(--color-brown);
		color: var(--color-white);
	}
}


/* Core separator blocks used as our card dividers */
.wp-block-separator.divider {
	border: 0;
	width: 100%;
	height: 1px;
	opacity: 1;
}

/* Lists inside our cards keep the theme's own layout */
:where(.section .wp-block-list) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Paragraphs that act as layout rows carry no bottom margin */
.hero__meta,
.hero__description,
.hero__cover-caption,
.numbered-card__number,
.media-card__meta,
.post-card__link,
.quote-card__footer {
	margin-bottom: 0;
}

/* Button row inside the dark closing band is centered */
.quote-band__actions {
	justify-content: center;
}

/* The split heading wraps its title and intro in a group */
.section-heading--split > .wp-block-group {
	flex: 1;
}


/* ==========================================================================
   18b. AUTOMATIC POST CARDS (QUERY LOOP BLOCK)

   These rules make the cards produced by the WordPress Query Loop block
   look exactly like the hand-written article cards. They apply to the
   patterns "Articles: 3 latest posts" and "Articles: full listing".
   ========================================================================== */

/* The Query Loop wrapper adds nothing visual */
.post-query {
	margin: 0;
}

/* Each post is one <li>: give it the card look */
.post-grid > .wp-block-post {
	height: 100%;
	position: relative;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: border-color var(--transition), box-shadow var(--transition),
	            transform var(--transition);
}

@media (hover: hover) {
	.post-grid > .wp-block-post:hover {
		border-color: var(--color-border-gold);
		box-shadow: 0 0.625rem 1.5rem rgba(27, 16, 11, 0.1);
		transform: translateY(-0.1875rem);
	}

	.post-grid > .wp-block-post:hover .wp-block-post-title a {
		color: var(--color-brown);
	}

	.post-grid > .wp-block-post:hover .wp-block-read-more::after {
		transform: translateX(0.25rem);
	}
}

/* The featured image block at the top of the card. It disappears on its own
   for posts that do not have one. */
.post-grid .wp-block-post-featured-image {
	--card-image-height: 9rem;

	margin: 0 0 1.25rem;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--color-cream-alt);
}

.post-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: var(--card-image-height);
	object-fit: cover;
	transition: transform var(--transition);
}

@media (hover: hover) {
	.post-grid > .wp-block-post:hover .wp-block-post-featured-image img {
		transform: scale(1.04);
	}
}

/* The category, drawn as a chip (section 24) */
.post-grid .wp-block-post-terms a {
	position: relative;
	z-index: 2; /* stays clickable above the card-wide link */
	color: inherit;
	text-decoration: none;
}

/* The date, sitting in the bottom row */
.post-grid .wp-block-post-date {
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* Post title: this link is what makes the whole card clickable */
.post-grid .wp-block-post-title {
	font-family: var(--font-display);
	font-size: var(--size-h4);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.post-grid .wp-block-post-title a {
	color: var(--color-ink);
	transition: color var(--transition);
}

.post-grid .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
}

/* Wrapper of the excerpt block: spacing only, the text inside is cut below */
.post-grid .wp-block-post-excerpt,
.post-grid .post-card__excerpt {
	margin: 0.75rem 0 1.5rem;
}

/* Same fixed number of lines as .post-card__excerpt in section 14: the text
   is cut by the browser, not by a word count, so all three cards show the
   same block of text and the divider below them lines up. Change the number
   in --excerpt-lines to show more or fewer lines. */
.post-grid .wp-block-post-excerpt__excerpt {
	--excerpt-lines: 4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--excerpt-lines);
	line-clamp: var(--excerpt-lines);
	overflow: hidden;
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.6;
	min-height: calc(var(--excerpt-lines) * 1.6em);
	color: var(--color-body);
}

/* The bottom row of the card: a group holding the date and the read link.
   Kept in step with .post-card__foot in section 14. */
.post-grid .post-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.125rem;
	border-top: 1px solid var(--color-border);
}

/* The "read article" link. width: auto is not optional: WordPress ships
   this block as a shrink-to-fit element and we want exactly that here, but
   the rule is spelled out so nothing else changes it. */
.post-grid .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	width: auto;
	margin: 0;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-brown);
	text-decoration: none;
	line-height: 1.3;
	white-space: nowrap;
}

/* The arrow sits right after the text, and slides on hover */
.post-grid .wp-block-read-more::after {
	content: "\2192"; /* right arrow */
	transition: transform var(--transition);
}

/* Pagination under the full listing */
/* Kept in step with .pagination in section 14, including the wrapping: a
   listing with many pages folds onto a second line instead of running past
   the edge of a phone screen. */
.post-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.75rem;
	margin-top: 2.5rem;
	font-size: var(--text-base);
}

.post-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.post-pagination a,
.post-pagination .page-numbers {
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-brown);
	transition: background-color var(--transition), color var(--transition),
	            border-color var(--transition);
}

.post-pagination .page-numbers.current {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-cream);
}

@media (hover: hover) {
	.post-pagination a:hover {
		background-color: var(--color-ink);
		border-color: var(--color-ink);
		color: var(--color-cream);
	}
}


/* ==========================================================================
   18c. SEPARATOR BLOCK STYLES

   Two looks are added to the WordPress Separator block, selectable under
   Styles in the block sidebar. Both take their color from the block's own
   color panel, so any palette or custom color can be used; the values here
   are only the defaults.
   ========================================================================== */

/* WordPress core gives every Separator block a fixed width of 100px unless
   it uses its own "Wide" style. The three rules below are written with an
   extra :not() so they are strong enough to beat that default, otherwise
   every line in the theme comes out as a short stub. */
.wp-block-separator.divider:not(.is-style-dots),
.wp-block-separator.is-style-section-rule:not(.is-style-dots),
.wp-block-separator.is-style-card-divider:not(.is-style-dots) {
	width: 100%;
	max-width: none;
}

/* "Section rule": the hairline used between two sections */
.wp-block-separator.is-style-section-rule {
	border: 0;
	width: 100%;
	height: 1px;
	margin: 0;
	opacity: 1;
	background-color: var(--color-rule);
}

/* "Card divider": the lighter line used inside cards */
.wp-block-separator.is-style-card-divider {
	border: 0;
	width: 100%;
	height: 1px;
	margin: 1.25rem 0;
	opacity: 1;
	background-color: var(--color-border);
}

/* Wrapper of the "Divider: thin line" pattern. It adds nothing at all: no
   padding, no margin. The line takes exactly one pixel of the page, so the
   space around it is whatever the modules above and below already have. */
.section-rule-wrap {
	margin: 0;
	padding: 0;
}


/* ==========================================================================
   19. RESPONSIVE RULES
   Everything above describes the desktop layout; these blocks adapt it.

   WHAT BELONGS HERE, AND WHAT DOES NOT. This section is only for rules that
   change how the WHOLE SITE behaves at a screen size: the spacing tokens,
   the header menu turning into a hamburger, every card grid dropping to one
   column, the show and hide utilities.

   A rule that fixes ONE module's own quirk belongs at the end of that
   module's own section instead, so that everything about a module can be
   read in one place. Twelve sections already do this; the list is in the
   "WHERE THE RESPONSIVE RULES LIVE" block at the top of this file.
   ========================================================================== */

/* --- Tablet: 1024px and below --- */
@media (max-width: 64rem) {
	:root {
		--section-space: 3.5rem;
		--card-padding: 1.75rem;
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.hero__cover-frame {
		max-width: 26rem;
		margin: 0 auto;
	}

	/* Note the .section prefix: it matches the specificity of the card-grid
	   rules in section 18, which would otherwise keep three columns here. */
	.section .grid-3,
	.section .post-grid,
	.section .grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}

	/* --- OPTIONAL: TWO COLUMNS ON TABLET ---
	   The rule just above takes every card grid down to one column here.
	   Nothing breaks, but on a tablet held sideways it leaves a lot of
	   empty space on either side of one tall column of cards.

	   Two columns there is a matter of taste, so it ships switched off.
	   TO TURN IT ON: delete the line below that says REMOVE THIS LINE and
	   the line that says TO HERE. Nothing else needs changing; the cards
	   already stretch to match each other, whatever the column count.

	   As written it moves the article cards only. Add .grid-3 to the list
	   to move the numbered and catalogue cards with them, or .grid-2 to
	   keep the two-column modules at two columns instead of one. */

	/* REMOVE THIS LINE
	.section .post-grid,
	.section .wp-block-post-template.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	TO HERE */
}

/* --- Mobile: 782px and below --- */
@media (max-width: 48.875rem) {

	/* A slightly smaller base on phones, applied on top of section 1.

	   scroll-padding-top is raised to match: on a phone the sticky bar is
	   taller than on desktop, because the announcement message drops onto
	   its own line above the icons. At the desktop value of 7rem, jumping
	   to an anchor link landed with the target hidden underneath the bar. */
	html {
		font-size: 93.75%;
		scroll-padding-top: 10rem;
	}

	:root {
		--section-space: 2.75rem;
		--card-padding: 1.25rem;
	}

	/* --- Show / hide utilities ---
	   Add class="hide-on-mobile" to any element, either in the PHP files or
	   from the editor under Advanced > Additional CSS class, and it
	   disappears here.

	   Good candidates, all of them a judgement call per page rather than
	   something this theme decides for you:
	     - the hero cover image (.hero__cover), which costs a full screen of
	       scrolling before the reader reaches anything else
	     - .hero__note, the small line under the buttons
	     - the announcement paragraph (.announcement__text in header.php),
	       which keeps the icons and the language switcher but gives the
	       sticky bar back about a third of its height
	     - .page-intro__aside, the short detail on the right of a page title
	     - long subtitles and secondary buttons

	   Use hide-on-desktop for the opposite: something written for a phone
	   and not wanted on a large screen. */
	.hide-on-mobile {
		display: none !important;
	}

	.hide-on-desktop {
		display: revert;
	}

	/* Show the hamburger button and hide the menu until it is checked */
	.nav-toggle__button {
		display: inline-flex;
	}

	/* The checkbox stays invisible but reachable with the keyboard */
	.nav-toggle {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	.nav-toggle:focus-visible + .nav-toggle__button {
		outline: 2px solid var(--color-brown);
		outline-offset: 3px;
	}

	.site-header__inner {
		flex-wrap: wrap;
	}

	.site-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding: 1rem 0 0.5rem;
	}

	.nav-toggle:checked ~ .site-nav {
		display: flex;
	}

	.site-nav__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
	}

	.site-nav__cta {
		padding-left: 0;
		border-left: 0;
	}

	.site-nav__cta .btn {
		width: 100%;
		justify-content: center;
	}

	/* Top bar on phones: the message goes on its own line, the icons and
	   the language switcher sit centered underneath.
	   To hide the message on phones and keep only the icons, add the class
	   hide-on-mobile to the paragraph in header.php. */
	.announcement {
		font-size: var(--text-xs);
	}

	.announcement__inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 0.5rem;
	}

	.announcement__actions {
		gap: 0.75rem;
	}

	/* The open menu scrolls instead of pushing the sticky bar off-screen */
	.nav-toggle:checked ~ .site-nav {
		max-height: calc(100vh - 10rem);
		overflow-y: auto;
	}

	/* Full-width buttons are much easier to tap with a thumb */
	.hero__actions .btn,
	.feature-card__actions .btn,
	.media-card__actions .btn,
	.quote-band .btn {
		width: 100%;
		justify-content: center;
	}

	.hero__actions,
	.feature-card__actions,
	.media-card__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.media-card__actions .link-underline {
		margin-left: 0;
		justify-content: center;
	}

	.section-heading--split {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
	}

	/* The attribution line simply wraps on phones; it stays centered */
	.quote-card__footer {
		gap: 0.4rem 0.625rem;
	}

	.quote-card::before {
		font-size: 2.25rem;
		margin-bottom: 1.25rem;
	}

	.feature-card__list {
		grid-template-columns: 1fr;
	}

	.media-card__head {
		flex-direction: column;
		gap: 0.875rem;
	}

	.media-card__image {
		width: 4.5rem;
	}

	.post-card__top {
		flex-wrap: wrap;
		gap: 0.35rem 0.75rem;
	}

	.site-footer__columns {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
	}
}

/* Respect the "reduce motion" setting of the operating system */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}


/* ==========================================================================
   20. PAGE INTRO

   The block at the very top of a page: a small label, the page title, a lead
   paragraph, and one short line of detail on the right.

   It reuses .section-heading--split from section 4, which already provides
   the two-column layout, the bottom alignment, the gap and the stacking on
   phones. Only what a page opener needs differently is set below, so there
   is no second layout to keep in sync.

   The responsive tweak for this module sits at the end of this section
   instead of in section 19, so everything about the module is in one place.
   ========================================================================== */

/* This title is the h1 of the page, not a section heading, so it takes the
   largest step of the type scale. */
.page-intro .section-heading__title {
	font-size: var(--size-h1);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

/* The lead paragraph reads at the same size as the hero paragraph: one step
   above the intro line of an ordinary section heading. */
.page-intro .section-heading__intro {
	max-width: 46ch;
	margin-top: 1.25rem;
	font-size: var(--text-xl);
	line-height: 1.6;
}

/* The short detail on the right. It sits level with the bottom of the lead
   paragraph, which is what .section-heading--split does for its second
   child. Text wrapped in <strong> is picked out in the dark ink color. */
.page-intro__aside {
	margin: 0;
	font-size: var(--text-base);
	color: var(--color-muted);
	text-align: right;
}

.page-intro__aside strong {
	color: var(--color-ink);
	font-weight: 700;
}

/* Mobile: the two halves already stack and align left (section 19). The
   detail line only needs to follow them and drop one size step. */
@media (max-width: 48.875rem) {
	.page-intro__aside {
		font-size: var(--text-md);
		text-align: left;
	}
}


/* ==========================================================================
   21. MEDIA CARD, STACKED (cover on top)

   A second shape for the media card of section 13. The base .media-card
   already gives the frame, the padding, the hover and the button row pinned
   to the bottom of the card; this variant only changes where the image
   goes: a tinted panel across the top of the card instead of a small
   thumbnail beside the title.

   Use it inside .grid-3 for a row of three, or inside .grid-2 for two wider
   cards. Nothing else about the card changes.

   HOW TO MAKE THESE CARDS BIGGER OR SMALLER
   Two knobs, both in the first rule below:
     --cover-height   height of the tinted panel that holds the cover
     padding          inner padding of the card, written as a share of the
                      global --card-padding so it keeps following the rest
                      of the theme
   The text inside is one step down the type scale compared with the wide
   two-column media card, because three cards in a row are narrower.

   Also defined here: .section-note, a small muted line of context (a count,
   a "showing X of Y") that can sit above or below any module.

   The mobile rules for this variant are at the end of this section, so
   everything about the module is in one place.
   ========================================================================== */

.media-card--stacked {
	/* Height of the cover panel. The image inside is kept shorter than the
	   panel so it never touches the edges. This is the one value to change
	   to make the covers taller or shorter. */
	--cover-height: 11rem;

	/* Three quarters of the padding a full-width card gets */
	padding: calc(var(--card-padding) * 0.75);
}

/* The tinted panel that holds the cover. It centers whatever image is put
   inside it, so covers of different proportions still look deliberate. */
.media-card__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cover-height);
	margin: 0 0 1.25rem;
	padding: 1.25rem;
	background-color: var(--color-cream-alt);
	border-radius: var(--radius-sm);
}

.media-card__cover img {
	width: auto;
	max-height: calc(var(--cover-height) - 2.5rem);
}

/* The panels ship empty, so the image block saves an <img> with no source
   until a real image is chosen. Hiding it keeps the empty panel looking
   deliberate on the front end instead of showing a broken image. */
.media-card__cover img:not([src]) {
	display: none;
}

/* Label on the left, year and length on the right, on one line */
.media-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 0.875rem;
	margin: 0;
}

.media-card__detail {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-muted);
	white-space: nowrap;
}

/* Narrower cards, so the title drops one step of the scale and the meta
   line above it supplies the spacing a thumbnail used to. */
.media-card--stacked .media-card__title {
	font-size: var(--size-h4);
	margin: 0.75rem 0 0.5rem;
}

/* The subtitle becomes the italic serif line under the title, the same
   treatment the hero subtitle gets. */
.media-card--stacked .media-card__subtitle {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-base);
	line-height: 1.4;
	color: var(--color-brown);
}

.media-card--stacked .media-card__text {
	margin-top: 1rem;
	font-size: var(--text-md);
}

/* The divider above the button row sits a little tighter in these cards */
.media-card--stacked .wp-block-separator.divider {
	margin: 1rem 0;
}

/* --- The button row ---
   The two buttons are exactly the same size and stay on one line.
     flex: 1 1 0      gives both the same width, whatever their labels say
     align-items      stretch, so both are as tall as the taller one
     min-width: 0     lets a long label shrink its button instead of
                      pushing the row wider than the card
   Together these mean an arrow, or one label being longer than the other,
   can no longer make one button bigger than its neighbour. */
.media-card--stacked .media-card__actions {
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.625rem;
}

.media-card--stacked .media-card__actions .wp-block-button {
	flex: 1 1 0;
	min-width: 0;
}

/* Shorter buttons than the theme default, with the label centered. Change
   the first number of the padding to make them taller or shorter. */
.media-card--stacked .media-card__actions .wp-block-button__link {
	width: 100%;
	height: 100%;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	text-align: center;
}

/* Hover: color only. The lift and the drop shadow the theme gives buttons
   elsewhere are switched off here, because in a row of two stretched
   buttons they make the pair look like it is resizing under the mouse.
   The outlined button also keeps its outline and takes a light tint
   instead of filling with dark, so hovering it does not turn it into a
   copy of the dark button beside it. */
@media (hover: hover) {
	.media-card--stacked .media-card__actions .wp-block-button__link:hover {
		transform: none;
		box-shadow: none;
	}

	.media-card--stacked .media-card__actions .btn--dark > .wp-block-button__link:hover {
		background-color: var(--color-ink-hover);
		color: var(--color-white);
	}

	.media-card--stacked .media-card__actions .btn--outline > .wp-block-button__link:hover {
		background-color: var(--color-cream-alt);
		border-color: var(--color-ink);
		color: var(--color-ink);
	}
}

/* "By Author name". The name is picked out with bold in the editor. */
.media-card__byline {
	margin: 0.75rem 0 0;
	font-size: var(--text-md);
}

.media-card__byline strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* A small muted line of context for any module: a count, a date range, a
   "showing X of Y". Generic on purpose, so it can be reused anywhere. */
.section-note {
	margin: 0 0 1.25rem;
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* --- Mobile ---
   The grid is already one column from tablet down (section 19), so the card
   is wide here: the cover panel gives back a little height, and the button
   row keeps its two buttons on one line. */
@media (max-width: 48.875rem) {
	.media-card--stacked {
		--cover-height: 10rem;
	}

	.media-card__detail {
		white-space: normal;
	}

	/* Section 19 stacks the button row of the wide media card on phones.
	   Here the card is full width, so the two buttons still fit side by
	   side and the row reads as one unit.

	   KEEP THE LABELS SHORT. The two buttons share the width of the card
	   equally, so on the narrowest phones each one has roughly 9 characters
	   of room. A longer label does not break anything, it simply wraps onto
	   a second line and makes both buttons taller. "Order" and "Details"
	   are the right length; "Order the hardcover edition" is not. */
	.media-card--stacked .media-card__actions {
		flex-direction: row;
		align-items: center;
	}
}


/* ==========================================================================
   22. MEDIA CARD, HORIZONTAL (cover beside the text)

   A third shape for the media card of section 13. The cover sits in a
   panel down the left side of the card and all the text is to its right,
   with a divider and a link pinned to the bottom.

   It reuses the tinted cover panel of section 21, so a cover looks the same
   whether it is on top of a card or beside it. Use it inside .grid-2.

   HOW TO CHANGE THE PROPORTIONS
   Two knobs in the first rule below:
     --cover-width    how wide the cover column is
     --cover-height   the shortest the card can be, and what the cover
                      height is measured against
   The text is one step down the type scale, like the stacked variant,
   because half a row is still a narrow card.

   The mobile rules are at the end of this section, so everything about the
   module is in one place.
   ========================================================================== */

.media-card--horizontal {
	--cover-width: 8.5rem;
	--cover-height: 13rem;

	flex-direction: row;
	gap: 1.5rem;
	padding: calc(var(--card-padding) * 0.75);
}

/* The cover panel becomes a full height column on the left. It keeps the
   background, the rounded corners and the centering from section 21. */
.media-card--horizontal .media-card__cover {
	flex: 0 0 var(--cover-width);
	align-self: stretch;
	margin: 0;
}

/* Everything to the right of the cover */
.media-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0; /* lets long words wrap instead of widening the card */
}

.media-card--horizontal .media-card__title {
	font-size: var(--size-h4);
	margin: 0 0 0.625rem;
}

/* Every card shows the same two lines of text, cut by the browser rather
   than by a word count, the same way the post card excerpt works in
   section 14. Change the number to show more or fewer lines. */
.media-card--horizontal .media-card__text {
	--excerpt-lines: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--excerpt-lines);
	line-clamp: var(--excerpt-lines);
	overflow: hidden;
	margin: 0;
	line-height: 1.6;
}

/* The divider swallows the leftover space, which pins it and the link under
   it to the bottom of the card however short the text is. */
.media-card--horizontal .divider {
	margin-top: auto;
	margin-bottom: 1rem;
}

/* The link at the bottom of the card: sentence case and dark, unlike the
   uppercase .link-arrow used in section headings. */
.media-card__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-ink);
	transition: color var(--transition);
}

.media-card__link .icon-arrow {
	color: var(--color-brown);
}

@media (hover: hover) {
	.media-card__link:hover {
		color: var(--color-brown);
	}

	/* Hovering anywhere on the card slides the arrow forward */
	.media-card--horizontal:hover .icon-arrow {
		transform: translateX(0.25rem);
	}
}

/* A hairline closing a section heading. The heading carries its own bottom
   margin, so the line only needs room underneath it. No extra class: this
   applies to any Separator placed directly after a section heading. */
.section-heading + .wp-block-separator.is-style-section-rule,
.section-heading + .section-rule {
	margin-bottom: 2.5rem;
}

/* --- Mobile ---
   Side by side does not work on a phone: the cover goes back on top, at the
   full width of the card. */
@media (max-width: 48.875rem) {
	.media-card--horizontal {
		flex-direction: column;
	}

	.media-card--horizontal .media-card__cover {
		flex: 0 0 auto;
		align-self: auto;
	}
}


/* ==========================================================================
   23. DETAIL HEADER (cover, specifications and purchase panel)

   The opening block of a single item page: the cover down the left with a
   button and a specifications panel under it, and on the right the title,
   the subtitle, a meta line, the description and a panel where the reader
   picks a format and orders.

   Most of it is the hero of section 9 with the two columns swapped, so the
   title, subtitle, meta line, description, button row and small note are
   the same classes used there. What is new here are three generic pieces,
   all reusable in other modules:
     .detail__aside   the narrow left column
     .spec-card       a panel of label and value rows
     .choice-panel    a panel of options with a price and an action row

   Each option is a link: clicking one goes straight to the page that sells
   that format. There is nothing to select first and nothing to confirm, so
   buying is one click. The link is written on the name of the option with
   the link tool in the editor, and an invisible layer stretches it over the
   whole option so the entire box is the target.

   The covers on the left become a slider when the group holds more than one
   image, which is the only piece of JavaScript in the theme. See
   assets/js/covers.js.

   The mobile rules are at the end of this section.
   ========================================================================== */

/* The hero grid with the cover first and narrower. Columns start at the top
   instead of being centered, because this column is tall. */
.hero__inner--cover-first {
	grid-template-columns: 35fr 65fr;
	align-items: start;
}

/* The left column: the cover, a full width button and the panel below it */
.detail__aside {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.detail__aside img {
	width: 100%;
	border-radius: var(--radius-sm);
}

/* Holds one cover or several: front and back, or a set of volumes. Add
   another Image block inside this group to add a cover.

   With one image this is just the image. With two or more, the script in
   assets/js/covers.js adds the class is-slider and a row of controls, and
   the covers are shown one at a time at full size. The grid below is what
   the group looks like before the script runs, and what it stays as if the
   script never loads: every cover visible, side by side. */
.detail__covers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 0.75rem;
	align-items: start;
}

.detail__covers.is-slider {
	display: block;
}

.detail__covers.is-slider .wp-block-image {
	display: none;
}

.detail__covers.is-slider .wp-block-image.is-current {
	display: block;
}

/* The controls under the covers: an arrow on each side, one dot per cover.
   Their space is padding rather than a margin, because the block gap reset
   in section 18 clears the margins of everything inside this group. */
.covers-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding-top: 0.875rem;
}

.covers-nav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-ink);
	font-size: var(--text-base);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--transition), color var(--transition);
}

.covers-nav__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.covers-nav__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	background-color: var(--color-border);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--transition);
}

.covers-nav__dot.is-current {
	background-color: var(--color-brown);
}

@media (hover: hover) {
	.covers-nav__arrow:hover {
		border-color: var(--color-ink);
		color: var(--color-brown);
	}

	.covers-nav__dot:hover {
		background-color: var(--color-muted);
	}
}

/* Buttons in this column always run the full width of it */
.detail__aside .wp-block-button,
.detail__aside .wp-block-button__link {
	width: 100%;
	justify-content: center;
}

/* The top meta line sits right at the top of the text column */
.hero--detail .hero__text > .hero__meta:first-child {
	margin-top: 0;
}

/* The description fills the column here, rather than the narrower measure
   it takes when a cover sits beside it in the normal hero. */
.hero--detail .hero__description {
	max-width: none;
}

/* The rule under the meta line */
.hero--detail .divider {
	margin: 1.75rem 0;
}

/* --- Specifications panel --- */

.spec-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.25rem;
}

.spec-card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

.spec-card__source {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* One label and value pair. Copy a row in the editor to add a line,
   delete one to remove it: the hairlines follow on their own. */
.spec-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border);
}

.spec-card > .spec-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.spec-row__label {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

.spec-row__value {
	margin: 0;
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--color-ink);
	text-align: right;
}

/* --- Purchase panel --- */

.choice-panel {
	margin-top: 1.75rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--card-padding);
}

.choice-panel__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
}

.choice-panel__price {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-ink);
}

.choice-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
}

/* An option is chosen by clicking anywhere on it, so the whole box behaves
   like one target. See .choice-card__name below for how that works. */
.choice-card {
	position: relative;
	cursor: pointer;
	background-color: var(--color-cream-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.875rem 1rem;
	transition: background-color var(--transition), border-color var(--transition),
		box-shadow var(--transition), transform var(--transition);
}

.choice-card__name {
	margin: 0;
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--color-ink);
}

/* The name of an option is a normal link, written with the link tool in the
   editor. It does not look like one, and this invisible layer stretches it
   over the whole option so the entire box is clickable. The same trick is
   used by the post cards in section 14. */
.choice-card__name a {
	color: inherit;
	text-decoration: none;
}

.choice-card__name a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
}



/* The price row, with the arrow on the right showing that the option leads
   somewhere. Same arrow as the outward buttons in section 6. */
.choice-card__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--color-ink);
}

.choice-card__price::after {
	content: "\2197"; /* arrow pointing out */
	flex-shrink: 0;
	font-size: 0.9em;
	color: var(--color-brown);
	transition: transform var(--transition), color var(--transition);
}

/* Hovering an option turns it into the dark buy button the rest of the
   theme uses for its main action: dark background, light name, gold price
   and arrow. The point is that it should be obvious, before clicking, that
   this leads out to a shop rather than to another page of the site. */
@media (hover: hover) {
	.choice-card:hover {
		background-color: var(--color-ink);
		border-color: var(--color-ink);
		box-shadow: 0 0.5rem 1.25rem rgba(36, 26, 20, 0.18);
		transform: translateY(-0.125rem);
	}

	.choice-card:hover .choice-card__name,
	.choice-card:hover .choice-card__name a {
		color: var(--color-white);
	}

	.choice-card:hover .choice-card__price {
		color: var(--color-gold);
	}

	.choice-card:hover .choice-card__price::after {
		color: var(--color-gold);
		transform: translate(0.15rem, -0.15rem);
	}
}

/* Keyboard users get the same treatment as the mouse */
.choice-card:focus-within {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
}

.choice-card:focus-within .choice-card__name,
.choice-card:focus-within .choice-card__name a {
	color: var(--color-white);
}

.choice-card:focus-within .choice-card__price,
.choice-card:focus-within .choice-card__price::after {
	color: var(--color-gold);
}

.choice-panel .hero__note {
	margin-top: 1.25rem;
	text-align: center;
}

/* --- Tablet and mobile ---
   Section 19 flattens .hero__inner to one column, but the variant above is
   written later in the file, so the collapse has to be repeated here to
   stay in charge. */
@media (max-width: 64rem) {
	.hero__inner--cover-first {
		grid-template-columns: 1fr;
	}

	/* On one column the cover would run the full width of the page, which
	   is far too big for a book cover: keep the column narrow and centered. */
	.detail__aside {
		max-width: 22rem;
		margin-inline: auto;
	}
}

@media (max-width: 48.875rem) {
	.choice-grid {
		grid-template-columns: 1fr;
	}

	/* --- The slider controls, made big enough to tap ---
	   On desktop these are aimed at with a mouse pointer, so 2rem arrows
	   and half-rem dots are fine. A fingertip is about 9mm across, and the
	   accessibility guidelines ask for a target of at least 24px, which
	   neither of them met.

	   The arrows simply get bigger. The dots keep their size on screen: the
	   padding grows the button while background-clip: content-box keeps the
	   colored circle at its original half-rem, so the target is large and
	   the design is unchanged. */
	.covers-nav__arrow {
		width: 2.75rem;
		height: 2.75rem;
	}

	.covers-nav__dot {
		width: 1.75rem;
		height: 1.75rem;
		padding: 0.625rem;
		background-clip: content-box;
	}

	.covers-nav__dots {
		gap: 0;
	}
}


/* ==========================================================================
   24. BACK BAR + CHIP

   The narrow strip that sits under the site header on a post or a book
   page: a link back to the listing on the left, and on the right a quiet
   line of context with a chip.

   It is used two ways, and both produce the same markup:
     - automatically, by single.php, through commons_press_back_bar()
     - by hand, with the pattern "Back bar: return to a listing"

   .chip is generic: a small rounded label. The post cards use it for the
   category, and it can be used anywhere a short tag is needed.
   ========================================================================== */

/* A small rounded label. TO CHANGE ITS LOOK: the background, the border and
   the text color are the three lines below, nothing else refers to them. */
.chip {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background-color: var(--color-cream-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-brown);
	white-space: nowrap;
}

/* The strip itself. It is not a .section: it is a thin band with its own
   small padding, sitting tight under the header. */
.back-bar {
	background-color: var(--color-cream);
	border-bottom: 1px solid var(--color-rule);
	padding-top: 1.125rem;
	padding-bottom: 1.125rem;
}

.back-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* When the strip is inserted as a pattern, the editor wants to put a 24px
   gap between its blocks. The strip is a flex row, so that gap would push
   the right hand side out of line: it is cleared here. Same idea as the
   list in section 18, which only covers blocks inside a .section. */
.back-bar > *,
.back-bar .wp-block-group > *,
.back-bar p {
	margin-block: 0;
}

/* The link back to the listing: uppercase and brown, like the arrow links
   in section headings, but with the arrow pointing back. */
.back-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-brown);
	transition: color var(--transition);
}

.back-bar__right {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.back-bar__context {
	font-size: var(--text-md);
	color: var(--color-muted);
}

@media (hover: hover) {
	.back-bar__link:hover {
		color: var(--color-ink);
	}

	/* The arrow slides backwards, the direction the link goes */
	.back-bar__link:hover .icon-arrow {
		transform: translateX(-0.25rem);
	}
}

@media (max-width: 48.875rem) {
	/* On a phone the context line is dropped and only the link and the chip
	   are kept, so the strip stays one line. */
	.back-bar__context {
		display: none;
	}
}


/* ==========================================================================
   25. SINGLE POST

   The layout every post gets automatically, from single.php. Nothing has to
   be built by hand when an article is published: the template puts the
   pieces together and these rules dress them.

   The pieces, in order down the page:
     .post-header      date, reading time, title, subtitle, author
     .post-hero-image  the featured image, if the post has one
     .post-body        the text the author writes in the editor
     .post-footer      the author line and the link back to the listing
     and then the "further reading" section, which is the ordinary article
     card grid of section 14.

   THE TWO NUMBERS MOST WORTH KNOWING
     --post-measure  how wide the column of text is. Lower it for a
                     narrower, more book-like column.
     --post-text     the size of the article text itself.
   Both are set on .post-body and .post-header below.
   ========================================================================== */

/* Everything in a post is measured against this width, so the header, the
   text and the footer all line up down the page. */
.post-header,
.post-body,
.post-footer {
	--post-measure: 44rem;
}

/* --- The header --- */

/* The hairline under the header is what separates it from the article.
   Delete this border to run the two together. */
.post-header {
	text-align: center;
	border-bottom: 1px solid var(--color-rule);
}

.post-header__inner {
	max-width: var(--post-measure);
	margin: 0 auto;
}

/* Date and reading time, separated by a dot */
.post-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.7rem;
	margin: 0 0 1.5rem;
	font-size: var(--text-md);
	color: var(--color-muted);
}

.post-header__meta-dot {
	color: var(--color-border);
}

.post-header__title {
	font-size: var(--size-h1);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0;
}

/* The italic serif line under the title, the same treatment the hero
   subtitle gets. Written in the post's own "excerpt" field. */
.post-header__subtitle {
	max-width: 34ch;
	margin: 1.5rem auto 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--size-subtitle);
	line-height: 1.35;
	color: var(--color-brown);
}

.post-header__byline {
	margin: 1.75rem 0 0;
	font-size: var(--text-base);
	color: var(--color-muted);
}

.post-header__byline strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* The 404 page uses the same centred block, on its own */
.section > .container > .post-header__inner {
	max-width: var(--post-measure, 44rem);
	margin: 0 auto;
	text-align: center;
}

.section > .container > .post-header__inner .hero__actions {
	justify-content: center;
	margin-top: 2rem;
}

/* --- The featured image, shown full width of the text column --- */

.post-hero-image {
	max-width: var(--post-measure);
	margin: 0 auto;
}

.post-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

/* Space between the picture and the first line of the article */
.post-hero-image + .post-body {
	margin-top: 2.5rem;
}

/* --- The article text ---
   Set in the serif face, unlike the rest of the site: long reading is
   easier in it, and it separates the article from the interface around it.
   To use the sans face instead, change font-family below to var(--font-body). */

.post-body {
	--post-text: 1.1875rem;

	max-width: var(--post-measure);
	margin: 0 auto;
	font-family: var(--font-display);
	font-size: var(--post-text);
	line-height: 1.75;
	color: var(--color-ink);

	/* The one line in this file that protects the page from its own
	   contents. An article is written by a person, not by this theme, and a
	   pasted web address or a long German compound has no spaces in it to
	   break at. Without this the browser refuses to break the word, the
	   column grows to fit it, and the whole page can be scrolled sideways
	   on a phone. */
	overflow-wrap: break-word;
}

/* Same idea for a table. Tables have a minimum width of their own and no
   amount of wrapping makes a six-column table fit a phone, so the table is
   allowed to scroll sideways inside its own box while the page around it
   stays still. Both selectors are needed: the first is the Table block, the
   second a table pasted in as plain HTML. */
.post-body .wp-block-table,
.post-body > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Wide embedded content (a map, a video, a code sample) gets the same
   treatment rather than widening the column. */
.post-body pre {
	max-width: 100%;
	overflow-x: auto;
}

.post-body > * {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.post-body > *:last-child {
	margin-bottom: 0;
}

.post-body h2 {
	font-size: var(--size-h3);
	margin-top: 2.5rem;
	margin-bottom: 0.875rem;
}

.post-body h3 {
	font-size: var(--size-h4);
	margin-top: 2rem;
	margin-bottom: 0.625rem;
}

/* A quotation: the brown line down the left is the whole decoration */
.post-body blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.75rem;
	border-left: 3px solid var(--color-brown);
	font-style: italic;
	color: var(--color-brown);
}

.post-body blockquote p:last-child {
	margin-bottom: 0;
}

.post-body ul,
.post-body ol {
	padding-left: 1.5rem;
}

.post-body li {
	margin-bottom: 0.5rem;
}

.post-body a {
	color: var(--color-brown);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Images the author drops into the article */
.post-body img {
	border-radius: var(--radius);
}

.post-body figure {
	margin: 2rem 0;
}

.post-body figcaption {
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: var(--text-md);
	color: var(--color-muted);
	text-align: center;
}

@media (hover: hover) {
	.post-body a:hover {
		color: var(--color-ink);
	}
}

/* --- The footer of the article --- */

.post-footer {
	max-width: var(--post-measure);
	margin: 3rem auto 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-border);
}

.post-footer__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.post-footer__name {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-ink);
}

.post-footer__about {
	margin: 0.35rem 0 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

.post-footer__about em {
	font-family: var(--font-display);
	font-style: italic;
}

/* The back link reuses the underlined arrow link of the top strip */
.post-footer .back-bar__link {
	flex-shrink: 0;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

@media (max-width: 48.875rem) {
	.post-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
}


/* ==========================================================================
   26. TABS

   A row of labels that switches between panels of content. Used twice: for
   the tabbed information block on a book page, and for the filter row above
   the reviews. Both are the same mechanism with a different look.

   HOW IT IS PUT TOGETHER
     .tabs           wraps everything
       .tabs__nav    the row of labels, each one a paragraph .tabs__tab
       .tabs__panel  one panel per label, in the same order

   The first label shows the first panel, the second the second, and so on:
   the order in the page is the only link between them. Adding a tab means
   adding a label and a panel in matching positions.

   The switching is done by assets/js/tabs.js. If JavaScript is off or fails
   to load, every panel is shown one under the other, so nothing is ever
   hidden from a reader who cannot switch.

   TWO LOOKS
     .tabs__nav            underlined labels, for sections of text
     .tabs__nav--pills     rounded buttons, for a filter row
   ========================================================================== */

/* --- The row of labels --- */

.tabs__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2rem;
	margin: 0 0 2.25rem;
	border-bottom: 1px solid var(--color-rule);
}

.tabs__tab {
	margin: 0 0 -1px; /* sits on the line below the row */
	padding: 0 0 0.875rem;
	border-bottom: 2px solid transparent;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-muted);
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
}

.tabs__tab.is-current {
	color: var(--color-ink);
	border-bottom-color: var(--color-ink);
}

/* --- The filter row look --- */

.tabs__nav--pills {
	gap: 0.625rem;
	padding-bottom: 1.5rem;
}

.tabs__nav--pills .tabs__tab {
	margin: 0;
	padding: 0.5rem 0.9rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-ink);
	transition: background-color var(--transition), border-color var(--transition),
		color var(--transition);
}

.tabs__nav--pills .tabs__tab.is-current {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-white);
}

@media (hover: hover) {
	.tabs__tab:hover {
		color: var(--color-ink);
	}

	.tabs__nav--pills .tabs__tab:hover {
		border-color: var(--color-ink);
	}

	.tabs__nav--pills .tabs__tab.is-current:hover {
		color: var(--color-white);
	}
}

/* Keyboard users can reach and use the labels */
.tabs__tab:focus-visible {
	outline: 2px solid var(--color-brown);
	outline-offset: 3px;
}

/* --- The panels ---
   Only hidden once the script has taken over, which is what the class
   is-ready means. Until then, and forever if the script never loads, the
   panels simply follow one another down the page. */

.tabs.is-ready .tabs__panel {
	display: none;
}

.tabs.is-ready .tabs__panel.is-current {
	display: block;
}

.tabs:not(.is-ready) .tabs__panel + .tabs__panel {
	margin-top: 2.5rem;
}

/* The text inside a panel is set like an article: same serif face, same
   quotation style, same spacing. See section 25. The only change is that it
   starts at the left edge instead of being centered. */
.tabs .post-body {
	margin-left: 0;
	max-width: 52rem;
}

/* A small label above a paragraph inside a panel */
.tabs .eyebrow {
	display: block;
	margin: 0 0 0.75rem;
}

/* --- Mobile ---
   This module had no rules of its own, and it was the one place in the
   theme that genuinely came apart on a phone. Two separate problems:

   1. THE UNDERLINED ROW BROKE IN HALF. The labels were allowed to wrap, and
      the row draws a single hairline along its bottom edge with each label
      sitting on that line. Once the labels ran onto two lines, only the
      bottom row still met the hairline: the labels above it had their 2px
      underline hanging in mid-air with nothing under it.

      The fix is to stop the row wrapping and let it scroll sideways
      instead, which is what a row of tabs does on a phone everywhere else.
      The hairline stays intact, and no label is ever out of reach.

      If you would rather the labels wrapped onto several lines, delete this
      block and remove the border-bottom from .tabs__nav above: without the
      shared line there is nothing left to break.

   2. THE LABELS WERE SMALL TARGETS. A little more padding brings each one
      up to a comfortable size for a fingertip.

   The pill row is left wrapping on purpose. Each pill is a closed box with
   its own border, so a second line looks deliberate rather than broken. */
@media (max-width: 48.875rem) {
	.tabs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 1.5rem;

		/* Stops a phone from bouncing the whole page sideways when the
		   reader swipes the row past its last label. */
		overscroll-behavior-x: contain;
	}

	.tabs__tab {
		white-space: nowrap;
		padding-bottom: 1rem;
	}

	/* The pills stay as they are: they wrap neatly, so they keep the
	   normal behaviour rather than the scrolling row above. */
	.tabs__nav--pills {
		flex-wrap: wrap;
		overflow-x: visible;
		gap: 0.625rem;
	}

	.tabs__nav--pills .tabs__tab {
		white-space: normal;
		padding: 0.625rem 0.9rem;
	}
}


/* ==========================================================================
   27. REVIEWS

   Two pieces, both built on things that already exist:

   .quote-card--panel  the highlighted review. It is the quote card of
                       section 12 turned into a framed white panel, aligned
                       left, with a row above the quote and a row below it.

   .review-card        one review in the grid: who said it and when, the
                       quotation, and where it was published.

   .grid-2--natural    a two column grid whose cards keep their own height
                       instead of stretching to match the tallest in the
                       row. Generic: usable for any grid of cards of very
                       different lengths.
   ========================================================================== */

/* --- The highlighted review --- */

.quote-card--panel {
	max-width: none;
	margin: 0;
	text-align: left;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--card-padding);
}

/* The quotation mark moves from the top of the card to just above the
   quote, so the label row can come first. */
.quote-card--panel::before {
	content: none;
}

.quote-card--panel .quote-card__text::before {
	content: "\201D";
	display: block;
	font-family: var(--font-display);
	font-size: 2.5rem;
	line-height: 0.6;
	color: var(--brand-200);
	margin-bottom: 1.5rem;
}

/* Label on the left, date on the right */
.quote-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 1.75rem;
}

.quote-card__date {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* The attribution row of the panel runs edge to edge, under a hairline */
.quote-card--panel .quote-card__footer {
	justify-content: space-between;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
	text-align: left;
}

/* --- The grid --- */

/* Cards keep their own height. Both rules are needed: the second undoes the
   stretch the block editor rules in section 18 apply to every grid. */
.grid-2--natural,
.section .wp-block-group.grid-2--natural {
	align-items: start;
}

.section .wp-block-group.grid-2--natural > * {
	align-self: start;
	height: auto;
}

/* --- One review --- */

.review-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--card-padding);
	transition: border-color var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
	.review-card:hover {
		border-color: var(--color-border-gold);
		box-shadow: 0 0.5rem 1.25rem rgba(36, 26, 20, 0.07);
	}
}

/* Who said it on the left, when on the right */
.review-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.25rem;
}

.review-card__name {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-ink);
}

.review-card__role {
	margin: 0.2rem 0 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

.review-card__year {
	margin: 0;
	flex-shrink: 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* The quotation itself, in the serif italic used for every quote */
.review-card__text {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--color-ink);
}

/* Where it was published on the left, which edition on the right */
.review-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 1.75rem 0 0;
}

.review-card__source {
	margin: 0;
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--color-brown);
}

.review-card__format {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* --- Mobile --- */

@media (max-width: 48.875rem) {
	.quote-card--panel .quote-card__footer,
	.review-card__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}


/* ==========================================================================
   28. CONTACT

   The contact block: a column of direct channels on the left and a form
   panel on the right.

   THE FORM ITSELF IS NOT PART OF THE THEME. WordPress has no form of its
   own, so the panel is a styled shell and the fields come from a form
   plugin, usually Contact Form 7. Everything below is written against plain
   form elements - label, input, select, textarea, submit - so whichever
   plugin produces them, they come out looking like the rest of the site.
   The few rules named .wpcf7-* at the end tidy up the extra markup Contact
   Form 7 adds; they do nothing if another plugin is used.

   Also defined here: .grid-2--sidebar, a two column grid with a narrow left
   column. Generic, usable by any module that needs a sidebar.
   ========================================================================== */

/* A two column grid, narrow on the left. The second selector is needed to
   beat the equal-columns rule the block editor section applies to .grid-2.
   Change the two numbers to rebalance the columns. */
.grid-2--sidebar,
.section .wp-block-group.grid-2--sidebar {
	grid-template-columns: 40fr 60fr;
	align-items: start;
	gap: 2.5rem;
}

/* --- Direct channels --- */

.channel-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

/* One channel. The whole box is clickable: the title carries the link and
   an invisible layer stretches it over the card, the same way the article
   cards work in section 14. */
.channel-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background-color: var(--color-cream-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), background-color var(--transition),
		box-shadow var(--transition);
}

.channel-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-brown);
}

.channel-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.channel-card__title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-ink);
}

.channel-card__title a {
	color: inherit;
}

.channel-card__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
}

.channel-card__text {
	margin: 0.15rem 0 0;
	font-size: var(--text-md);
	color: var(--color-muted);
	overflow-wrap: anywhere;
}

/* The arrow on the right of a card that leads off the site */
.channel-card__arrow {
	flex-shrink: 0;
	color: var(--color-muted);
	font-size: var(--text-base);
	transition: transform var(--transition), color var(--transition);
}

/* The small button on the right of a card. z-index puts it above the
   invisible layer, otherwise the card link would swallow the click. */
.channel-card__action {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	padding: 0.4rem 0.7rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-md);
	color: var(--color-ink);
	cursor: pointer;
	transition: border-color var(--transition), color var(--transition);
}

@media (hover: hover) {
	.channel-card:hover {
		background-color: var(--color-white);
		border-color: var(--color-border-gold);
		box-shadow: 0 0.375rem 1rem rgba(36, 26, 20, 0.06);
	}

	.channel-card:hover .channel-card__arrow {
		color: var(--color-brown);
		transform: translate(0.15rem, -0.15rem);
	}

	.channel-card__action:hover {
		border-color: var(--color-ink);
		color: var(--color-brown);
	}
}

/* --- The form panel --- */

.form-panel {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--card-padding);
}

.form-panel__title {
	margin: 0;
	font-size: var(--size-h2);
	line-height: 1.1;
}

.form-panel__intro {
	margin: 0.75rem 0 0;
	font-size: var(--text-base);
	color: var(--color-muted);
}

/* The hairline under the heading of the panel */
.form-panel .wp-block-separator,
.form-panel .divider {
	margin: 1.75rem 0;
}

/* Shown until a real form is put in the panel. Delete this block once the
   form shortcode is in place. */
.form-placeholder {
	margin: 0;
	padding: 2rem 1.5rem;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
	font-size: var(--text-md);
	color: var(--color-muted);
}

/* --- The form fields ---
   Written against plain HTML elements, so any form plugin inherits them. */

.form-panel label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-ink);
}

/* The star marking a required field */
.form-panel label .required {
	color: var(--color-brown);
}

.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="tel"],
.form-panel input[type="url"],
.form-panel select,
.form-panel textarea {
	display: block;
	width: 100%;
	padding: 0.875rem 1rem;
	background-color: var(--color-cream-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-ink);
	transition: border-color var(--transition), background-color var(--transition);
}

.form-panel textarea {
	min-height: 11rem;
	resize: vertical;
	line-height: 1.6;
}

.form-panel ::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus {
	outline: none;
	background-color: var(--color-white);
	border-color: var(--color-ink);
}

/* One field, and a row that holds two of them side by side. Both classes
   are written into the form itself; see the README. */
.form-field {
	margin-bottom: 1.25rem;
}

.form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

/* The submit button, styled like the dark buttons of section 6 */
.form-panel input[type="submit"],
.form-panel button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.75rem;
	padding: 1rem 1.5rem;
	background-color: var(--color-ink);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-cream);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

@media (hover: hover) {
	.form-panel input[type="submit"]:hover,
	.form-panel button[type="submit"]:hover {
		background-color: var(--color-ink-hover);
		color: var(--color-white);
	}
}

/* --- Contact Form 7 tidying ---
   Only relevant if that plugin is the one used. It wraps every field in an
   extra span and adds its own messages; these rules make both behave. */

.form-panel .wpcf7-form-control-wrap {
	display: block;
}

.form-panel .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-size: var(--text-md);
	color: var(--color-brown);
}

.form-panel .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-md);
	color: var(--color-ink);
}

.form-panel .wpcf7-spinner {
	margin: 0 auto;
}

/* --- Tablet and mobile --- */

@media (max-width: 64rem) {
	/* Repeated here because the sidebar rule above is written later in the
	   file than the general collapse in section 19. */
	.grid-2--sidebar,
	.section .wp-block-group.grid-2--sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 48.875rem) {
	.form-row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A channel card holds an icon, a title, a line of text and a button,
	   all on one line. On the narrowest phones that left the address about
	   150px of room and it broke across three or four lines while the
	   button sat beside it. Allowing the row to wrap lets the button drop
	   underneath when it no longer fits, and nothing else changes. */
	.channel-card {
		flex-wrap: wrap;
	}

	/* The copy button is the smallest thing anyone has to press on the
	   contact page. This brings it up to a comfortable size for a
	   fingertip without changing how it looks on a desktop. */
	.channel-card__action {
		min-height: 2.75rem;
		padding: 0.5rem 1rem;
	}
}