@charset "UTF-8";
/*
Theme Name: Stoat
Theme URI: https://owldraft.com/themes/stoat
Author: Owldraft
Author URI: https://owldraft.com
Description: Stoat is a personal & blog WordPress theme with minimalist style, almost no JavaScript, and ultra-fast load. Live preview at https://stoat.owldraft.com
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stoat
Tags: blog, one-column, custom-colors, editor-style, theme-options, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
/* =============================================================================
   _mixins.scss — Breakpoints in plain English
   =============================================================================
   Mobile-first. Three mixins, named after what they do.

   USAGE:
     @include from(tablet)            { ... }   // applies on tablet AND wider
     @include below(tablet)           { ... }   // applies on phones only
     @include between(tablet, laptop) { ... }   // tablet to just-under-laptop

   Size names (pick the device, not a t-shirt letter):
     phone    — 480px
     tablet   — 768px
     laptop   — 1024px
     desktop  — 1280px
   ============================================================================= */
/* from(name) — applies at this size AND larger.
   This is the mobile-first default — use it for desktop tweaks on top of
   a mobile base. Example: @include from(tablet) { ... }. */
/* below(name) — applies UNDER this size only.
   The -0.02px shave prevents a 1px overlap when from() and below() share
   a size name (and dodges Safari's sub-pixel rounding bug). */
/* between(from, to) — applies from `from` up to just under `to`. */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*
TABLE OF CONTENTS
--------------------------------------------
1. general        - box-sizing, body, headings, img, links
    1.1 form      - labels
    1.2 input     - text inputs, select, textarea
    1.3 button    - submit/button/reset, Button block
    1.4 media     - image alignment, caption, [gallery] (classic & gutenberg)
2. layout         - .container, .reading widths
3. header         - layout, branding, menu, button, mobile icons, off-canvas
4. footer         - copyright, footer menu
5. blog - archive - layout, header, loop, pagination
    5.1 query loop - core Query Loop / Post Template blocks
    5.2 editorial blocks - spacing between Editorial Blocks sections
6. single         - post body, tags, comments (list + reply form)
7. modals         - the overlay mechanism: search, menu drawer, sign-in, custom
*/
:root {
  --container-width: 1170px;
  --reading: 640px;
  --wide: 900px; /* alignwide width, between reading and full */
  /* page gutter - the strip between the content column and the screen edge.
     One token for the whole theme: .container measures its cap against it and
     so does every element that breaks out of the reading column, so they can
     never disagree about where the page ends. It narrows on a phone with the
     rest of the spacing scale below - a small screen cannot afford a desktop
     margin, but it still needs the text off the bezel. */
  --gutter: 24px;
  /* content column - overridable from the customizer Layout section. Narrow
     is the reading column; full is 100% of the .container these elements
     already sit in, so it fills the page without repeating that width here.
     One value per request: the archive wrap, the single article, and the
     footer inner all read it, so they always line up. */
  --content-width: var(--reading);
  /* type - the three roles the customizer Typography section drives, one
     grouped control each. Every value here is what the stylesheet would do
     anyway, so a field left empty emits nothing and this stands. */
  --body-font: sans-serif;
  --body-size: 16px;
  --body-line-height: 1.5;
  --heading-font: sans-serif;
  --heading-weight: 600;
  --heading-transform: none;
  --heading-spacing: normal;
  --heading-line-height: 1.2;
  --nav-font: var(--heading-font); /* nav follows the headings unless overridden */
  --nav-size: 1em;
  --nav-weight: inherit; /* inherit, not 400 - the menu takes the body's weight */
  --nav-spacing: normal;
  --nav-transform: none;
  --logo-font: var(--heading-font); /* the site title follows the headings unless overridden */
  --logo-size: 1.2em;
  --logo-weight: 600;
  --logo-spacing: normal;
  --logo-transform: none;
  /* buttons - the corner every button rounds by, overridable from the
     customizer Style section. One token so the form buttons, the Button
     block, and the header CTA can never drift apart. */
  --button-radius: 0px;
  /* archive thumbnail - overridable from the customizer Blog / Archive section.
     --thumb-ratio is an aspect-ratio value; auto = the image's own ratio. */
  --thumb-width: 100px;
  --thumb-ratio: 1/1;
  /* query loop featured image - one ratio for every card so the cards line
     up. auto = each image's own ratio (no crop). */
  --loop-thumb-ratio: 3/2;
  /* newspaper navy - the ink blue a broadsheet sets its links in, rather than
     the browser's default violet-blue. 6:1 on white (AA at any size) and 3.2:1
     against the body's --dark, so a link still reads as a link in a paragraph
     that carries no underline until hover - a deeper navy stops passing that
     second test. */
  --accent: #326891;
  --gray: #767676; /* AA contrast (4.5:1) on white - used only as muted text */
  --dark-gray: #555;
  --dark: #111;
  /* themeable colors - overridable from the customizer Style section.
     (Selection colors aren't tokens: the customizer emits a ::selection
     rule only when they're set, so there's no default highlight override.) */
  --text: var(--dark); /* body text */
  --bg: white; /* page background */
  --meta: var(--gray); /* entry meta: date, categories, comment count */
  --border: rgba(0,0,0,.1);
  /* header - overridable from the customizer Header section. Defaults follow
     the page, so an untouched header looks exactly like the body. The skin
     (light/dark) presets all four; the two color pickers then win over it.
     Covers the off-canvas panel + desktop dropdowns too - they're header. */
  --header-bg: var(--bg);
  --header-text: var(--text);
  --header-meta: var(--gray); /* tagline */
  --header-border: var(--border); /* dropdown + off-canvas hairlines */
  /* header bar depth - one value, used for BOTH top and bottom. Mobile halves
     whatever this is, so a custom value keeps the default's 1em -> 0.5em
     relationship instead of pinning a size. */
  --header-padding: 1em;
  /* spacing scale - adjust here to retune rhythm everywhere (e.g. on mobile) */
  --spacing: 1.4em; /* default gap between flowing elements */
  --spacing-md: 2em; /* heading rhythm */
  --spacing-lg: 2.8em; /* between minor sections */
  --spacing-xl: 3.4em; /* between major sections */
  --spacing-2xl: 4.8em; /* page-level breathing room */
  /* footer depth - one value, used for BOTH top and bottom. It points at the
     spacing scale rather than a size, so the customizer's choices ride the
     mobile retune above instead of pinning an em value. */
  --footer-padding: var(--spacing-2xl);
}

/* tablet & phone - tighten the whole spacing scale in one place */
@media (max-width: 767.98px) {
  :root {
    --gutter: 16px;
    --spacing: 1.5em;
    --spacing-md: 1.75em;
    --spacing-lg: 2em;
    --spacing-xl: 2.5em;
    --spacing-2xl: 3.5em;
  }
}
/* reduced motion - honor the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 1. general
-------------------------------------------- */
html {
  box-sizing: border-box;
  overflow-y: scroll;
}
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-spacing);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-transform);
}

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

/* spacing - consistent vertical rhythm on common elements */
p,
ul,
ol,
blockquote,
figure,
pre,
table {
  margin-top: 0;
  margin-bottom: var(--spacing);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* h2-h6 take extra space above so they group with the text below. Kept at
   element-level specificity on purpose, so a block class (.wp-block-post-title,
   say) can override it. h1 is left at 0 - it's a page/post title, not a
   section break. */
h2, h3, h4, h5, h6 {
  margin-top: var(--spacing-md);
}

/* lists - indent and space their items */
ul, ol {
  padding-left: 1.5em;
}

li + li {
  margin-top: 0.5em;
}

/* nav menus lay themselves out with flex + gap, so they opt out of the
   item spacing above. The .menu class covers header, footer, and off-canvas. */
.menu li + li {
  margin-top: 0;
}

a {
  color: var(--accent);
}

hr {
  border-top: 1px solid var(--border);
}

/* visible keyboard focus on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* screen-reader-text - visible to assistive tech only (standard WP class) */
.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;
}

/* but reveal it when focused - so skip links work for keyboard users */
.screen-reader-text:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  clip: auto;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent);
}

/* 1.1 form
------------------- */
label {
  display: inline-block;
  margin-bottom: 4px;
}

/* search form - core's html5 markup (get_search_form), used by the header
   panel, the off-canvas panel, and the archive header. Core wraps the field in
   the <label> that carries the screen-reader text, so the label is the flexible
   half of the row and has to drop the margin the rule above gives it. */
.search-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  /* A search box is a control, not a column — past ~400px the field just
     gets longer without getting more usable. Every panel it sits in is
     narrower than this already, so the cap only bites in the page flow
     (the search results and 404 headers). */
  max-width: 400px;
}
.search-form label {
  flex: 1;
  min-width: 0; /* a flex item won't shrink below its input's default size */
  margin: 0;
}

.search-form .search-submit {
  flex: none;
}

/* 1.2 input
------------------- */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
select,
textarea {
  width: 100%;
  padding: 0 12px;
  /* One control height across the theme: fields, buttons and the Button
     block all measure 48px, so a field with a button beside it lines up
     without either being nudged. A height rather than padding, so a larger
     font or a different line-height cannot change it. */
  height: 48px;
  font-family: inherit;
  font-size: inherit;
  color: var(--dark);
  background: var(--bg);
  border: 1px solid var(--border);
  border: 0;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=date]::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--gray);
}

/* Touch devices only: never let a field's text fall under 16px. iOS Safari
   zooms the whole page in when you focus a control smaller than that, and it
   does not zoom back out - the reader is left scrolled sideways on a page they
   now have to pinch. The fields inherit their size, so any of them that lands
   inside quieter type (a footer widget, the bottom strip) is a candidate; max()
   raises only those and leaves a larger inherited size alone.

   Scoped to a coarse pointer rather than a width, because this is a property of
   the input device, not of the screen: a phone in landscape is wider than the
   tablet breakpoint and still zooms. */
@media (pointer: coarse) {
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=tel],
  input[type=date],
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}
/* The one control that is not 48px: it is a box to write in, not a field. */
textarea {
  height: auto;
  min-height: 120px;
  padding: 12px;
  resize: vertical;
}

/* 1.3 button
------------------- */
button,
input[type=submit],
input[type=button],
input[type=reset] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  /* 48px, the same as the fields in 1.2 above. min-height rather than
     height: a button that wraps on a narrow screen still has to grow. */
  min-height: 48px;
  font-family: inherit;
  font-size: inherit;
  color: white;
  background: var(--accent);
  border: 0;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: opacity 0.2s;
}
button:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover {
  opacity: 0.85;
}

/* Button block - wears the same look as the form buttons above.
   Core dresses this block from four places (the block's own style.css,
   classic-theme-styles, global styles, and the outline variation), each at one
   class of specificity and all of them loaded after this sheet - so every
   selector below carries two classes to win on the cascade. */
.wp-block-button > .wp-block-button__link {
  font-family: inherit;
  font-size: inherit; /* classic-theme-styles pushes 1.125em */
  line-height: 1.15; /* the anchor would inherit the body's 1.5 and stand
   taller than a real button, which normalize sets
   to 1.15 along with the other form elements */
  border-radius: var(--button-radius);
  transition: opacity 0.2s;
}
.wp-block-button > .wp-block-button__link:hover {
  opacity: 0.85;
}
.wp-block-button {
  /* filled - the default */
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  color: white;
  background: var(--accent);
  border: 0;
}
.wp-block-button {
  /* outline variation - the same box drawn rather than filled. The 2px
     border comes out of the padding so both variations measure the same. */
}
.wp-block-button.is-style-outline > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* border-box, so the 2px border is inside the 48 */
  padding: 0 16px;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
}

/* 1.4 media
------------------- */
/* alignment - classic editor & gutenberg use the same classes */
.alignleft {
  float: left;
  max-width: 50%;
  margin: 0.5em 1.5em 1em 0;
}

.alignright {
  float: right;
  max-width: 50%;
  margin: 0.5em 0 1em 1.5em;
}

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

.alignnone {
  margin: 1em 0;
}

p .alignnone {
  margin: 0;
}

/* caption - classic .wp-caption & gutenberg figcaption */
.wp-caption {
  max-width: 100%;
}

.wp-caption img {
  display: block;
}

.wp-caption-text,
figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: var(--gray);
}

/* gallery - classic [gallery] shortcode, columns set the grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* shortcode default */
  gap: 10px;
  margin: var(--spacing) 0;
}

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

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

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

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-item {
  margin: 0;
  text-align: center;
}

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

.gallery-caption {
  display: block;
  margin-top: 0.5em;
  font-size: 0.85em;
  color: var(--gray);
}

/* phone - too many columns get cramped, drop to two */
@media (max-width: 479.98px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 2. layout
-------------------------------------------- */
.container {
  width: var(--container-width);
  /* The cap is the screen less a gutter on each side, so the column stops
     short of the edge at every width instead of only under the 1170 cap. */
  max-width: calc(100% - var(--gutter) * 2);
  margin: 0 auto;
}

.reading {
  width: var(--reading);
  max-width: 100%;
  margin: 0 auto;
}

/* 3. header
-------------------------------------------- */
/* header layout
------------------- */
.site-header {
  background: var(--header-bg);
  color: var(--header-text);
  /* One token for both of the bar's hairlines - the edge under it and the
     divider "Nav below" draws between its two rows. The border option only has
     to move this and the two lines stay in step; set on each border shorthand
     they drift the moment one variant forgets the other. */
  --header-line: var(--header-border);
  /* The dropdowns hang out of the bar and over the page. Every entry down the
     page is position: relative, so without a stacking order of its own the
     header loses to whatever comes after it in the DOM and the submenu gets
     painted over. */
  position: relative;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  position: relative; /* the centred layouts pin their side runs to this */
  column-gap: 1.5rem;
  padding: var(--header-padding) 0;
  /* Halve the chosen depth rather than pinning an em value, so a taller bar
     still tightens up on mobile. Default 1em -> 0.5em, as before. */
}
@media (max-width: 767.98px) {
  .site-header .container {
    padding: calc(var(--header-padding) * 0.5) 0;
  }
}

.header-nav-row {
  padding: 8px 0;
}

/* header border - the edge between the bar and the page
------------------- */
/* Every choice applies at every width, and one of them is always on the bar -
   'light' is the default, so a hairline is what an untouched site draws. Class
   from stoat_header_classes(). */
.site-header.header-border-light {
  border-bottom: 1px solid var(--header-line);
}

.site-header.header-border-none {
  border-bottom: 0;
}

/* "None" clears Nav below's row divider too - otherwise the bar loses its outer
   edge but keeps an internal line, which reads as a stray rule rather than a
   borderless header. */
.site-header.header-border-none .header-nav-row {
  border-top: 0;
}

/* A shadow instead of a line. The row divider is left alone: the shadow
   separates the bar from the page, it does nothing between two rows inside the
   bar, and dropping that line too would fuse them into one tall block. */
.site-header.header-border-shadow {
  border-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* header layouts
------------------- */
/* Three arrangements of the same three pieces (branding, menu, actions), chosen
   in the customizer Header section and hung on .site-header as
   .header-layout-{default|logo-center|nav-below}.

   Every rule below is scoped .site-header.header-layout-* - both classes on ONE
   element. .container and .stoat-branding are generic, so a bare
   .header-layout-* descendant selector would reach the content and footer
   containers as well.

   All of it is desktop-only: below the tablet breakpoint the menu and the button
   both hide, so every layout is already the same branding + hamburger bar. */
/* Default - logo left, everything else (menu, then the icons and buttons) in one
   run hard right. branding's auto margin does the split; an auto margin on the
   actions would strand the menu in the middle of the bar once a button is set.

   Keeping that run reading as ONE block is a question of who gives way when the
   bar runs out of room, and the answer only holds from the desktop width up -
   see the block below. */
.site-header.header-layout-default .stoat-branding {
  margin-right: auto;
}

/* Whatever the width, a menu that has to wrap stacks its lines against the
   actions rather than trailing off toward the logo, so the run keeps one right
   edge instead of drifting back toward the middle of the bar. */
.site-header.header-layout-default .primary-nav .menu {
  justify-content: flex-end;
}

/* From the desktop width up the container has reached its cap, so the bar stops
   narrowing and the branding's own slack - the tagline onto a second line, then
   the title - is enough to seat the whole run on one line. Spend that slack
   first: every piece shrinks by default, so a full bar squeezes the menu as
   readily as the tagline and drops the nav onto a second line while the branding
   still had room to give, which lands it mid-bar, exactly where this layout does
   not want it. Weighting the branding heavily and freezing the other two makes
   it the only piece that gives.

   Below that width it stays a fair fight. The bar is still narrowing toward the
   tablet breakpoint, where no branding slack could seat a full menu, so the menu
   keeps its own shrink and wraps - the graceful end - rather than holding its
   width and pushing the bar into a horizontal overflow. */
@media (min-width: 1280px) {
  .site-header.header-layout-default .stoat-branding {
    flex-shrink: 20;
  }
  .site-header.header-layout-default > .container > .primary-nav,
  .site-header.header-layout-default > .container > .header-actions {
    flex-shrink: 0;
  }
}
/* Both centred bars keep the branding as the only item left in flow and take
   the side runs out of it, pinned to the container's edges. That is what makes
   the logo TRULY centred - centred on the bar itself, not on whatever gap the
   heavier side leaves behind, which is all a three-column grid can manage once
   one side outweighs the other. The .container is already position: relative
   (section 3), so the runs pin to the content column rather than the viewport.
   The trade is the one absolute runs always make: a menu wide enough to reach
   the middle rides over the branding instead of pushing it aside.

   The child combinator matters on Nav below - its second row has a .container
   of its own, and that one stays a plain flex row. */
.site-header.header-layout-logo-center > .container,
.site-header.header-layout-nav-below > .container {
  justify-content: center;
}

/* Logo center - menu pinned left, actions pinned right, logo between them.
   Nav below's top row carries no menu (it rides on the strip underneath), so
   only its actions run is pinned. */
.site-header.header-layout-logo-center > .container > .primary-nav {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.site-header.header-layout-logo-center > .container > .header-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Nav below - two rows. Top row: icons left, logo centred, buttons right, no
   menu. Bottom row: .header-nav-row, a strip spanning the whole bar with the
   menu centred in it. The two are separate elements rather than one wrapped row
   because the divider belongs to the strip: drawn on a child of .container it
   would stop at the content width while the bar's own edge runs to the
   viewport. */
/* This is the only layout that splits .header-actions: with the menu gone from
   the top row there is empty bar on both sides of the logo, so the icons take
   the left and the call-to-action keeps the right instead of the whole group
   crowding one end. The box itself steps out of the way (display: contents) so
   the two runs pin to .container - the positioned ancestor - directly. Pinning
   one full-width box and spacing the runs apart inside it would lay a
   transparent sheet over the centred branding and swallow clicks on the logo. */
.site-header.header-layout-nav-below > .container > .header-actions {
  display: contents;
}

.site-header.header-layout-nav-below .header-actions__start,
.site-header.header-layout-nav-below .header-actions__end {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.site-header.header-layout-nav-below .header-actions__start {
  left: 0;
}

.site-header.header-layout-nav-below .header-actions__end {
  right: 0;
}

.site-header.header-layout-nav-below .header-nav-row {
  border-top: 1px solid var(--header-line);
}

/* The strip's own row: no bar padding (the menu links bring their own height),
   and the menu centred on the content grid. */
.site-header.header-layout-nav-below .header-nav-row .container {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Both centred layouts stack the branding - logo over title over tagline, all
   centred - instead of the default bar's side-by-side row. */
.site-header.header-layout-logo-center .stoat-branding,
.site-header.header-layout-nav-below .stoat-branding {
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.site-header.header-layout-logo-center .site-identity,
.site-header.header-layout-nav-below .site-identity {
  align-items: center;
}

/* Mobile - every layout is the same plain bar: branding left, hamburger right.
   Undo the desktop placement so a centred or two-row bar doesn't leak down. */
@media (max-width: 767.98px) {
  .site-header.header-layout-logo-center > .container,
  .site-header.header-layout-nav-below > .container {
    justify-content: flex-start;
  }
  /* The side runs go back in flow - the menu is hidden here anyway, but the
     actions box is not, and left absolute it would sit on top of the
     hamburger. */
  .site-header.header-layout-logo-center > .container > .primary-nav,
  .site-header.header-layout-logo-center > .container > .header-actions {
    position: static;
    transform: none;
  }
  /* Nav below's split collapses back into the one flat row every other layout
     carries here - otherwise its two runs would sit pinned to the container's
     edges with the hamburger underneath them. */
  .site-header.header-layout-nav-below > .container > .header-actions {
    display: flex;
  }
  .site-header.header-layout-nav-below .header-actions__start,
  .site-header.header-layout-nav-below .header-actions__end {
    display: contents;
  }
  .site-header.header-layout-logo-center .stoat-branding,
  .site-header.header-layout-nav-below .stoat-branding {
    flex-direction: row;
    gap: 10px;
    text-align: left;
    margin-right: auto;
  }
  /* The strip goes with the menu it holds - hiding only the nav inside would
     leave an empty band and its divider under the mobile bar. */
  .site-header.header-layout-nav-below .header-nav-row {
    display: none;
  }
}
/* header actions (menu + button) - the right-hand group of the bar */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* The icons run (social + search) and the buttons run (the CTA and anything
   hooked after it). They exist for Nav below, which pins them to opposite ends
   of the bar; everywhere else they dissolve, leaving the flat row of items the
   markup used to hold - same gap, same order, and a run with nothing in it
   takes no space and adds no gap of its own. */
.header-actions__start,
.header-actions__end {
  display: contents;
}

/* header button - the optional CTA from the customizer Header section.
------------------- */
/* Every variant carries the 2px border and the same padding, so switching style
   never changes the button's size - only the outline one shows its border.
   36px, not the 48px of the theme's real buttons (section 1.3): this one lives
   in the bar next to the menu, where a full-size button would set the height of
   the whole header. */
.header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--nav-font);
  font-size: 0.9em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap; /* the bar is a single row - never wrap the label */
  cursor: pointer;
  transition: opacity 0.2s;
}
.header-button:hover {
  opacity: 0.85;
}
.header-button {
  /* the bar has no room for it on mobile - the off-canvas panel shows it
     instead, so the CTA survives the breakpoint rather than disappearing. */
}
@media (max-width: 767.98px) {
  .header-button {
    display: none;
  }
}

.header-button--primary {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}

.header-button--black {
  color: white;
  background: var(--dark);
  border-color: var(--dark);
}

.header-button--white {
  color: var(--dark);
  background: white;
  border-color: white;
}

/* outline follows the header text rather than naming a color, so it stays
   legible on the light skin, the dark skin, and any custom header color. */
.header-button--outline {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}

/* the off-canvas copy - full width under the stacked menu, and exempt from the
   mobile hide above (the panel only ever opens on mobile). Flex rather than
   block so the centring the base rule sets still applies: as a block the label
   sat at the top of the box instead of in the middle of it. Taller too - in the
   panel it is a thumb target with room around it, not a button squeezed into
   the height of the bar. */
.header-button--block {
  display: flex;
  min-height: 48px;
  margin-top: 1.5em;
  white-space: normal;
}
@media (max-width: 767.98px) {
  .header-button--block {
    display: flex;
  }
}

/* social links (Social Menu) - brand marks in the bar, panel, and footer
------------------- */
/* One nav, three places (stoat_social_nav). Everything shared lives here; each
   place only says where it sits and how big its marks are. */
.social-nav .menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-nav .menu > li {
  margin: 0;
}

.social-nav a {
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.social-nav a:hover {
  opacity: 0.7;
}

/* The brand marks are filled logos, not the stroked UI set of inc/icons.php -
   they carry no stroke and take their color from the fill. Set on the path
   rather than the <svg>, since a couple of the marks (reddit, weibo) draw more
   than one and a fill on the parent alone would leave the rest black. */
.stoat-social-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.stoat-social-icon path {
  fill: currentColor;
}

/* In the bar the row is one item in .header-actions, so the group's gap spaces
   it; the links' own 6px padding is pulled back out so the marks land on that
   gap rather than 12px past it. */
.header-actions .social-nav {
  flex: none;
  margin: 0 -6px;
  /* No room on the mobile bar - the hamburger takes the right end and the
     off-canvas panel carries the same links instead. */
}
@media (max-width: 767.98px) {
  .header-actions .social-nav {
    display: none;
  }
}

/* header search - the icon that opens the search modal
------------------- */
/* The icon is the whole feature now: the form lives in the 'search' modal
   (section 7), so there is no panel to position and nothing to hide on a phone
   - unlike the social row, this one is just as usable at 360px as at 1400px.
   It wears .header-icon for its hit area; the negative margin pulls that
   padding back out of the row so the glyph sits flush with the container edge
   when it comes last. */
.header-actions .header-search__toggle {
  flex: none;
  margin: 0 -0.5em;
}

/* mobile icons (the hamburger) - hidden on desktop */
.header-icons {
  display: none;
  align-items: center;
  gap: 0.25em;
}
@media (max-width: 767.98px) {
  .header-icons {
    display: flex;
  }
}

/* On a phone the actions box holds nothing but the search icon - the social
   row, the button and the member links all move into the drawer. Close the
   bar's 1.5rem column gap so the two icons read as one control group rather
   than two. Harmless with the search off: the gap it closes is empty. */
@media (max-width: 767.98px) {
  .header-actions + .header-icons {
    margin-left: -1.25rem;
  }
}
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.header-icon svg {
  width: 20px;
  height: 20px;
}

/* branding (logo | title + tagline)
------------------- */
.stoat-branding {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-identity {
  display: flex;
  flex-direction: column; /* title above, tagline below */
}

.site-title {
  margin: 0;
  font-size: var(--logo-size);
  font-weight: var(--logo-weight);
  font-family: var(--logo-font);
  letter-spacing: var(--logo-spacing);
  text-transform: var(--logo-transform);
  line-height: 1.1;
  display: inline;
}
.site-title a {
  text-decoration: none;
  color: inherit;
}

.site-tagline {
  display: inline;
  margin: 0;
  font-size: 0.85em;
  color: var(--header-meta);
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .site-identity {
    display: block;
  }
  .site-title,
  .site-tagline {
    display: block;
  }
  .site-tagline:before {
    display: none;
  }
}
.site-header .custom-logo-link img {
  display: block;
  width: 32px;
  height: 32px;
}

/* header menu
------------------- */
/* desktop nav - hidden on mobile, the off-canvas takes over */
@media (max-width: 767.98px) {
  .site-header .primary-nav {
    display: none;
  }
}

.site-header .primary-nav .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--nav-font);
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-spacing);
  text-transform: var(--nav-transform);
}
.site-header .primary-nav .menu > li {
  display: block;
  position: relative;
}
.site-header .primary-nav .menu a {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 1.5;
  padding: 4px 0;
  line-height: 20px;
  transition: all 0.2s;
}
.site-header .primary-nav .menu {
  /* The page you are on: dimmed a little, so it reads as "you are here"
     without going as quiet as a hovered item. */
}
.site-header .primary-nav .menu > li.current-menu-item > a,
.site-header .primary-nav .menu > li.current-menu-ancestor > a {
  opacity: 0.8;
}
.site-header .primary-nav .menu > li:hover > a {
  opacity: 0.5;
}
.site-header .primary-nav .menu {
  /* caret on items that have a submenu */
}
.site-header .primary-nav .menu > .menu-item-has-children > a:after {
  content: "▾"; /* ▾ */
  margin-left: 2px;
  font-size: 1.1em;
  opacity: 0.3;
}
.site-header .primary-nav .menu ul {
  display: none;
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 0;
  width: 160px;
  background: var(--header-bg);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--header-border);
  padding: 0.5em 1em;
}
.site-header .primary-nav .menu ul > li + li > a {
  border-top: 1px solid var(--header-border);
}
.site-header .primary-nav .menu ul ul {
  left: 100%;
  top: -1px;
}
.site-header .primary-nav .menu ul a {
  display: block;
  padding: 6px 0;
  line-height: 20px;
}
.site-header .primary-nav .menu ul > li.current-menu-item > a,
.site-header .primary-nav .menu ul > li.current-menu-ancestor > a {
  opacity: 0.8;
}
.site-header .primary-nav .menu ul > li:hover > a {
  opacity: 0.5;
}
.site-header .primary-nav .menu li:hover > ul,
.site-header .primary-nav .menu li:focus-within > ul {
  display: block;
}

/* menu drawer (mobile, opened by the hamburger)
------------------- */
/* The panel itself is the 'menu' modal, a drawer variant - everything about
   opening, closing, Escape, and the focus trap is in section 7. What is left
   here is only what the menu puts INSIDE it. */
/* stacked nav inside the panel */
.offcanvas-nav .menu,
.offcanvas-nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--nav-font);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-spacing);
  text-transform: var(--nav-transform);
}

/* size only on the top-level list - the .sub-menu rule below scales itself off
   its parent, so setting it on `ul` too would compound the override. */
.offcanvas-nav > .menu {
  font-size: var(--nav-size);
}

.offcanvas-nav a {
  display: block;
  padding: 0.6em 0;
  text-decoration: none;
  color: inherit;
}

/* hairline between top-level items */
.offcanvas-nav > .menu > .menu-item + .menu-item {
  border-top: 1px solid var(--header-border);
}

/* sub-menus indent under their parent */
.offcanvas-nav .sub-menu {
  padding-left: 1em;
  font-size: 0.95em;
}

/* the bar's social row - bigger marks here, where they're thumb targets
   rather than a quiet row of glyphs */
.offcanvas-social {
  margin-top: 1.5em;
}

.offcanvas-social .menu {
  margin: 0 -6px; /* pull the links' padding back to the panel's edge */
}

.offcanvas-social .stoat-social-icon {
  width: 20px;
  height: 20px;
}

.offcanvas-social a {
  padding: 6px;
}

/* 4. footer
-------------------------------------------- */
.site-footer {
  margin-top: var(--spacing-2xl);
}

/* The widget row. Its own hairline, and like the bottom strip below it the
   rule runs edge to edge of the screen - only the .container inside keeps
   the content aligned with the rest of the page. */
.footer-widgets {
  border-top: 1px solid var(--border);
  padding: var(--footer-padding) 0;
}

.footer-widgets .container {
  display: grid;
  /* auto-fit + a floor means the column count follows the room available
     rather than a breakpoint: four across on a laptop, two on a tablet, one
     on a phone, with no width named anywhere. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* Two gaps, because the two directions are different problems. Sideways it
     is a gutter, so a long link in one column cannot run into the next. Down
     the page it is the space between two widgets that have stopped being
     columns and become sections stacked on a phone - without it they read as
     one long undivided list. */
  gap: var(--spacing-lg) var(--spacing-md);
  /* The floor above holds two columns down to a 480px screen and then gives
     up, and one column of four stacked link lists turns the footer into
     several screens of scrolling. So on a phone the grid is named outright
     instead: two columns, no floor, which halves the height at a width the
     lists still read fine in. */
}
@media (max-width: 479.98px) {
  .footer-widgets .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md) var(--spacing);
  }
}

/* Two narrow columns are only safe for short link lists. Everything else - a
   form, a search box, a paragraph, an image, post titles - takes the full width
   back, so the split is opt-in per widget type rather than imposed on whatever
   the site owner drops in here. */
@media (max-width: 479.98px) {
  .footer-widgets .widget {
    grid-column: 1/-1;
  }
  .footer-widgets .widget_nav_menu,
  .footer-widgets .widget_categories,
  .footer-widgets .widget_archive,
  .footer-widgets .widget_pages,
  .footer-widgets .widget_meta {
    grid-column: auto;
  }
}
.footer-widgets .widget {
  min-width: 0; /* let long words wrap instead of stretching the column */
}
.footer-widgets .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-widgets .widget li {
  margin-bottom: 0.35em;
}

/* A block widget has no title of its own: the editor's answer is a Group with
   a Heading at the top of it, which arrives as .wp-block-heading and nothing
   else. It is the widget title in every way that matters to a reader, so it is
   given the widget title's type rather than a heading's. */
.footer-widgets .widget-title,
.footer-widgets .widget .wp-block-group .wp-block-heading {
  margin: 0 0 0.75em;
  font-size: 1rem;
}

/* Widget links read as navigation, not body copy: they take the surrounding
   colour and drop the underline wherever a widget lives, footer or not. */
.widget a {
  color: inherit;
  text-decoration: none;
}
.widget a:hover {
  text-decoration: underline;
}

/* The page you are on, wherever a widget lists it: greyed and inert, the same
   "you are here" the footer nav uses. Core emits a different class per widget
   type, hence the three. */
.widget .current-menu-item > a,
.widget .current_page_item > a,
.widget .current-cat > a {
  color: var(--gray);
  cursor: default;
}
.widget .current-menu-item > a:hover,
.widget .current_page_item > a:hover,
.widget .current-cat > a:hover {
  text-decoration: none;
}

/* The list widgets - menus, categories, archives, pages, recent posts - are
   link lists rather than prose, so they sit a notch below body size. */
.widget_nav_menu,
.widget_categories,
.widget_archive,
.widget_pages,
.widget_meta,
.widget_recent_entries,
.widget_recent_comments {
  font-size: 0.95em;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  /* Shallower than the widget row above it - it's one short line, not a
     block of content. */
  padding: var(--spacing-lg) 0;
}

.footer-bottom .container {
  /* Two halves: copyright left, menu right. They stack and centre once the
     row gets too narrow to split evenly. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em var(--spacing-lg);
  font-size: 0.9em;
  /* The strip is fine print, and on a phone it is fine print that has just
     become two stacked full-width rows. Stepping it down again is what keeps
     it reading as the footer's last line rather than as content - and it is
     the cheapest way to fit five menu items on fewer lines, since the gap
     below is set in em and closes with the type. */
}
@media (max-width: 767.98px) {
  .footer-bottom .container {
    font-size: 0.8em;
  }
}
.footer-bottom .container {
  /* A basis of half the row can always fit two per line, so the halves would
     never wrap however narrow the screen got - they would just keep splitting
     a phone into two 130px columns, each shredding one line into three. An
     auto basis asks for the room the line of text actually takes, and only
     shares out what is left over, so neither half is squeezed below its own
     content while the other still has slack. */
}
.footer-bottom .container > * {
  flex: 1 1 auto;
  min-width: 0;
}
.footer-bottom .container {
  /* Once they are stacked, "left half" and "right half" mean nothing: both
     rows run the full width, so both centre. */
}
@media (max-width: 767.98px) {
  .footer-bottom .container {
    text-align: center;
  }
  .footer-bottom .container > * {
    flex-basis: 100%;
  }
}

.footer-bottom .footer-nav {
  text-align: right;
}
@media (max-width: 767.98px) {
  .footer-bottom .footer-nav {
    text-align: center;
  }
}

.copyright a {
  text-decoration: none;
}
.copyright a:hover {
  text-decoration: underline;
}
.copyright {
  /* The credit link reads as part of the line: same colour, and the same
     soft fade the post titles use instead of an underline. */
}
.copyright .stoat-credit {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.copyright .stoat-credit:hover {
  text-decoration: none;
  opacity: 0.9;
}
.copyright p {
  margin: 0;
}
.footer-nav .menu {
  display: flex;
  flex-wrap: wrap;
  /* em, not rem: the gap between two menu items is a property of the type
     they are set in, so it closes with the type when the strip steps down on
     a phone instead of holding a desktop gutter around smaller words. */
  justify-content: flex-end;
  gap: 0.5em 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Nested, not a separate block further up: this rule and the mobile one
     carry the same specificity, so whichever is written last wins - a media
     query does not add any. Keeping the override inside the rule it
     overrides is what makes that impossible to get wrong. */
}
@media (max-width: 767.98px) {
  .footer-nav .menu {
    justify-content: center;
    /* Centred and wrapped, the row reads as one run of words rather than a
       line of separate destinations, so the space between them can come in
       further than the desktop gutter without them running together. */
    gap: 0.4em 1.1em;
  }
}
.footer-nav .menu a {
  color: inherit;
  text-decoration: none;
}
.footer-nav .menu a:hover {
  text-decoration: underline;
}
.footer-nav .menu .current-menu-item > a {
  color: var(--gray);
  text-decoration: none;
  cursor: default;
}

/* 5. blog - archive
-------------------------------------------- */
/* archive layout
------------------- */
.archive-wrap {
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
}

/* featured first post — the hero above the listing (Archive > "Feature the
   first post"). Printed outside .archive-wrap, so it takes the width of the
   .container header.php already opened rather than the narrower column the
   Layout section may give the listing. The archive header joins it out there,
   so the two line up. The wrapper itself carries no styling — the spacing under
   the hero comes from the listing below it.
------------------- */
/* Hero half: the image beside the text, half each — the split hero of Owldraft
   Editorial Blocks, in theme markup, so a lead here and a lead in a block read
   alike. Overrides the small square thumbnail an ordinary entry gets. */
.stoat-hero-half {
  /* The image is tall here and the text short, so the two columns read
     better centred against each other than top-aligned (the listing rows
     below keep the default top alignment). */
}
.stoat-hero-half .entry-body {
  align-items: center;
  gap: 2rem;
}
.stoat-hero-half {
  /* Half the row for the image, half for the text; --thumb-width and its
     mobile shrink don't apply here, the half is the point. Which half it
     takes is the .thumb-left / .thumb-right rule's job, same as an ordinary
     entry. */
}
.stoat-hero-half .entry-thumbnail {
  flex: 0 0 50%;
  width: 50%;
  max-width: none; /* the row ceiling below is for small thumbnails, not a lead */
}
@media (max-width: 767.98px) {
  .stoat-hero-half .entry-thumbnail {
    width: 100%;
  }
}
.stoat-hero-half .entry-thumbnail img {
  /* Uncropped: the lead runs at the picture's own height, whatever
     ratio the listing thumbnails are cropped to. */
  aspect-ratio: auto;
  object-fit: fill;
}
.stoat-hero-half {
  /* The lead story, so its type steps up — gently, since the title only has
     half the width to work with. */
}
.stoat-hero-half .entry-title {
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem);
  line-height: 1.15;
}
.stoat-hero-half .entry-summary {
  font-size: 1.1em;
}
.stoat-hero-half {
  /* No room for two columns on a phone: the image goes back above the text.
     Stacked, "left" and "right" mean nothing, so the order is pinned — a lead
     story that opened with its image shouldn't bury it under the excerpt. */
}
@media (max-width: 767.98px) {
  .stoat-hero-half .entry-body {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .stoat-hero-half {
    /* Stacked, the title has the whole screen instead of half a row, so the
       desktop step-up turns into a shout — a headline that fills the phone
       before the story starts. It steps back down to a size a lead can wear
       at full width, and the excerpt drops to body size for the same
       reason. */
  }
  .stoat-hero-half .entry-title {
    font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.7rem);
    line-height: 1.2;
  }
  .stoat-hero-half .entry-summary {
    font-size: 1em;
  }
  .stoat-hero-half {
    /* Out-specifies .stoat-entry.thumb-* below, which would otherwise win
       on source order. */
  }
  .stoat-hero-half.stoat-entry.thumb-left .entry-thumbnail, .stoat-hero-half.stoat-entry.thumb-right .entry-thumbnail {
    order: 0;
  }
}

/* archive header
------------------- */
.archive-header {
  padding: var(--spacing-md) 0 var(--spacing-md);
}
.archive-header h1 {
  margin: 0;
}
.archive-header form {
  margin-top: var(--spacing);
}

/* With no featured post the header sits inside .archive-wrap, at the listing's
   own width — so it gets a hairline to close it off, ruled to exactly that
   column. With a hero the header is printed outside the wrap (see index.php)
   and the lead story does the separating, so no line there. */
.archive-wrap > .archive-header {
  border-bottom: 1px solid var(--border);
}

/* A 404 is a whole page made of one short header, so it gets page-level air
   above and below instead of an archive header's tight padding — and no rule
   underneath, since it is a separator with nothing left to separate. */
.error404 .archive-wrap > .archive-header {
  border-bottom: 0;
  padding: var(--spacing-2xl) 0;
}
.error404 .archive-wrap > .archive-header form {
  margin-top: var(--spacing-lg);
}

/* On the results page the title is a caption for the query — "Search results
   for: x" is a sentence, not a headline — so it drops to body size and body
   weight and lets the results below carry the page. Archives keep the h1. */
.search .archive-header h1 {
  font-size: 1em;
  font-weight: 400;
}

.archive-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between; /* title left, page number right */
  gap: 10px;
}

/* Author archive: avatar, then name, then bio — stacked, capped at the reading
   width and centred in the column. It's a byline standing above the author's
   posts, not a page headline, so the name sits well below h1 size and the bio
   drops to small muted text: the listing underneath stays the loudest thing on
   the page. Sizes are scoped to this modifier so every other archive header
   keeps the h1 it has always had. */
.archive-header--author {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--spacing-xl) 0; /* the author box gets more air than a plain archive title */
  max-width: var(--reading); /* a bio reads at the same width a post does */
  margin: 0 auto; /* the box itself sits in the middle of the column */
}
.archive-header--author .archive-title {
  font-size: 1.5em;
}
@media (max-width: 767.98px) {
  .archive-header--author .archive-title {
    font-size: 1.3em;
  }
}
.archive-header--author .archive-description {
  font-size: 0.9em;
  line-height: 1.5;
  margin-top: 6px;
  color: var(--dark-gray);
}

.archive-header__text {
  min-width: 0;
}

.archive-avatar {
  display: block;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .archive-avatar {
    width: 64px;
    height: 64px;
  }
}

.archive-page {
  color: var(--gray);
  font-size: 0.9em;
}

.archive-description {
  line-height: 1.3;
  margin-top: 0.2em;
}
.archive-description p {
  margin: 0;
}

/* archive loop
------------------- */
.entry-list:first-child {
  margin-top: var(--spacing-xl);
}

/* The empty archive's one line. It stands where the listing would, so it opens
   on the same gap the listing does, and closes on page-level room of its own —
   otherwise the footer creeps up under a page with almost nothing on it. */
.no-results {
  margin: var(--spacing-xl) 0 var(--spacing-2xl);
}

.stoat-entry + .stoat-entry {
  margin-top: var(--spacing-2xl);
}

.stoat-entry {
  align-items: flex-start;
  gap: 20px;
  position: relative;
}
.stoat-entry.sticky {
  padding: var(--spacing);
  background: rgba(0, 0, 0, 0.03);
}

.entry-body {
  display: flex;
  gap: 20px;
  position: relative;
}

.entry-text {
  flex: 1 1 auto;
}

.entry-title {
  margin: 0;
  font-size: 1.3em;
  /* Break a very long single word so it can't overflow the column. */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
.entry-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.entry-title a:hover {
  opacity: 0.9;
}

/* subtitle — one line under the title. Single posts print it with the
   .single-subtitle class below; this is the default class of stoat_subtitle(),
   kept for anything else that calls the tag. Sized between the title and the
   body so it reads as a deck, not as a second title. */
.entry-subtitle {
  color: var(--dark-gray);
  font-size: 1.05em;
  line-height: 1.35;
  margin: 0.35em 0 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.entry-summary {
  margin-top: 0.4em;
  overflow-wrap: break-word; /* break long URLs so they don't overflow */
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.entry-summary p {
  margin: 0;
}
.entry-summary a {
  text-decoration: none;
  white-space: nowrap;
}
.entry-summary a:hover {
  text-decoration: underline;
}

.entry-meta {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  margin-top: 0.5em;
  font-size: 0.9em;
}
.entry-meta > * + *:before {
  content: "·";
  margin: 0 6px;
  opacity: 0.5;
}
.entry-meta {
  color: var(--meta);
}
.entry-meta a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.entry-meta a:hover {
  color: var(--dark-gray);
}

/* author avatar + name inside the meta row */
/* Avatar, "By" and name as one unit, so the middot the meta row draws between
   its pieces lands to the left of the whole byline rather than inside it. The
   gap — not a literal space in the markup — is what spaces the three, so hiding
   the "By" closes its gap with it. Matches the byline of the Editorial Blocks
   post cards. */
.entry-author {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  /* Its own link, so it must not add its own spacing around the image. */
}
.entry-author .entry-author__avatar-link {
  display: inline-flex;
  flex: none;
}
.entry-author {
  /* A small round mark that keeps its size whatever the meta row's font size
     is doing, and never stretches if the source image is not square. */
}
.entry-author .entry-author__avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.entry-author {
  /* The name reads a step stronger than the rest of the meta row — heavier
     and darker — so the byline is the piece the eye lands on, as it is on an
     Editorial Blocks card. */
}
.entry-author .entry-author__name {
  color: var(--dark-gray);
  font-weight: 600;
}

/* comment icon + count inside the meta row */
.entry-comments {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.entry-comments .stoat-icon {
  /* nudge the bubble to sit on the text baseline */
}

.entry-categories {
  /* It's a flex item in .entry-meta; min-width:0 lets a long category
     list wrap onto more lines instead of overflowing the row. */
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.entry-categories .entry-categories-sep {
  margin: 0 4px;
  opacity: 0.5;
}
.entry-categories a {
  white-space: nowrap;
}

/* Width is set here; height comes from the img's aspect-ratio below, so the
   box follows the chosen ratio instead of being locked to a square. */
.entry-thumbnail {
  flex: 0 0 auto;
  display: block;
  width: var(--thumb-width);
  margin: 0;
  /* Two ceilings, whichever is lower at the width the row happens to be —
     the pair Owldraft Editorial Blocks puts on a list row, so a theme row and
     a block row run out of width the same way. The ratio keeps the picture
     from taking over the row; the second one is what matters on a phone,
     where 60% of a 340px screen leaves the headline two words a line. So the
     text is given a floor instead - 13rem, about twenty characters - and the
     picture takes what is left, down to a 4rem floor of its own. Not a
     breakpoint, because it is not really about phones: it is about a row that
     has run out of width, which happens in a narrow column too. */
  max-width: max(4rem, min(60%, 100% - 13rem));
  /* Scale the chosen width rather than pinning a px value, so a % width
     stays a % here. Default 100px -> 70px. */
}
@media (max-width: 767.98px) {
  .entry-thumbnail {
    width: calc(var(--thumb-width) * 0.7);
  }
}
.entry-thumbnail {
  /* The link wraps the image inside the figure, so it has to be a block box
     for the image to fill — an inline <a> leaves a baseline gap under it. */
}
.entry-thumbnail a {
  display: block;
}
.entry-thumbnail img {
  width: 100%;
  height: auto;
  /* auto = the image's own ratio (no crop); any other value crops to it */
  aspect-ratio: var(--thumb-ratio);
  object-fit: cover; /* fill the box without distortion */
  object-position: center center;
  display: block;
}

/* The listing row on a phone. The same retune Owldraft Editorial Blocks gives
   its cards, so a theme row and a block card tighten alike: the gaps close, and
   the small type - the excerpt, the byline - steps down a notch under a headline
   that has stepped down itself, so the headline stays the loudest thing in the
   row. The lead is exempt: .stoat-hero-half above already sizes itself for a
   phone, and it is a lead precisely because it is not one of these rows. */
@media (max-width: 767.98px) {
  .stoat-entry + .stoat-entry {
    margin-top: 2rem;
  }
  .stoat-entry:not(.stoat-hero-half) {
    gap: 0.75rem;
  }
  .stoat-entry:not(.stoat-hero-half) .entry-body {
    gap: 0.75rem;
  }
  .stoat-entry:not(.stoat-hero-half) .entry-title {
    font-size: 1.15em;
  }
  .stoat-entry:not(.stoat-hero-half) .entry-summary {
    margin-top: 0.35em;
    font-size: 0.9em;
  }
  .stoat-entry:not(.stoat-hero-half) .entry-meta {
    margin-top: 0.2em;
    font-size: 0.8em;
  }
}
/* Which side the image takes — Archive > Thumbnail side, a class on the article
   (.thumb-right is the default). The text is flexed, so only the image needs an
   order. Two classes deep so it also outranks .stoat-hero-half's own rules and
   the lead flips with the rest of the listing. */
.stoat-entry.thumb-right .entry-thumbnail {
  order: 2;
}

.stoat-entry.thumb-left .entry-thumbnail {
  order: 0;
}

/* pagination
------------------- */
.pagination {
  padding: var(--spacing-xl) 0 0;
}
.pagination a {
  text-decoration: none;
}
.pagination a:hover {
  text-decoration: underline;
}
.pagination .nav-links > * + * {
  margin-left: 1em;
}
@media (max-width: 767.98px) {
  .pagination .nav-links > * + * {
    margin-left: 0.5em;
  }
}

/* 5.1 query loop
------------------- */
/* Core's Query Loop renders inside .entry-content, so it already picks up the
   prose flow. What's left is to make the block markup read like the theme's
   own archive loop above: title in body colour, meta quiet, thumbnails on one
   ratio. Core owns the grid/flex layout and the gap between cards - we don't
   touch either. Sizes and colours are left to the editor's own block controls
   wherever core emits a class for them. */
/* title - the general h2-h6 rhythm from section 1 is too much inside a card */
.wp-block-post-title {
  margin-top: 0;
  margin-bottom: 0.4em;
  /* Break a very long single word so it can't overflow the column. */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
.wp-block-post-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.wp-block-post-title a:hover {
  opacity: 0.9;
}

/* featured image - cropped to --loop-thumb-ratio so every card's title starts
   at the same height, however tall the original image is */
.wp-block-post-featured-image {
  margin: 0 0 0.75em;
}
.wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--loop-thumb-ratio);
  object-fit: cover;
  object-position: center center;
}

/* meta - date, terms, author. Quiet, like .entry-meta */
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author-name {
  color: var(--meta);
  font-size: 0.9em;
}
.wp-block-post-date a,
.wp-block-post-terms a,
.wp-block-post-author-name a {
  color: inherit;
  text-decoration: none;
}
.wp-block-post-date a:hover,
.wp-block-post-terms a:hover,
.wp-block-post-author-name a:hover {
  color: var(--dark-gray);
}

.wp-block-post-excerpt {
  margin-top: 0.6em;
}
.wp-block-post-excerpt .wp-block-post-excerpt__more-link {
  text-decoration: none;
}
.wp-block-post-excerpt .wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
}

/* pagination - match .pagination above */
.wp-block-query-pagination {
  margin-top: var(--spacing-xl);
}
.wp-block-query-pagination a {
  text-decoration: none;
}
.wp-block-query-pagination a:hover {
  text-decoration: underline;
}

/* 5.2 editorial blocks
------------------- */
/* The Editorial Blocks plugin ships its own layout and spacing; the only thing
   it can't know is how far apart this theme wants its major sections. Stacked
   blocks on a front page read as separate sections, so they get the same gap
   the rest of the theme uses between those. The layout blocks a front page is
   built from (columns, group, separator) count as sections too, so any two
   adjacent ones get the same gap. Adjacent-sibling only, so the first block
   keeps whatever spacing the template above it set. */
.owldraft-block + .owldraft-block,
.owldraft-block + .wp-block-columns,
.owldraft-block + .wp-block-group,
.owldraft-block + .wp-block-separator,
.wp-block-columns + .owldraft-block,
.wp-block-columns + .wp-block-columns,
.wp-block-columns + .wp-block-group,
.wp-block-columns + .wp-block-separator,
.wp-block-group + .owldraft-block,
.wp-block-group + .wp-block-columns,
.wp-block-group + .wp-block-group,
.wp-block-group + .wp-block-separator,
.wp-block-separator + .owldraft-block,
.wp-block-separator + .wp-block-columns,
.wp-block-separator + .wp-block-group,
.wp-block-separator + .wp-block-separator {
  margin-top: var(--spacing-xl);
}

/* 6. single
-------------------------------------------- */
.stoat-single {
  margin: 0 auto;
  width: var(--content-width);
  max-width: 100%;
}

.single-title {
  margin: 0;
  /* Break a very long single word so it can't overflow the column. */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.single-subtitle {
  color: var(--dark-gray);
  font-size: 1.2em;
  line-height: 1.35;
  margin: 0.4em 0 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
@media (max-width: 767.98px) {
  .single-subtitle {
    font-size: 1.1em;
  }
}

/* categories on their own line above the title (the Archive and Single Post
   "Category position" options both print this block). An eyebrow, not a meta
   line — same treatment as the category above a card title in Owldraft
   Editorial Blocks (.owldraft-entry-categories), so a post, an archive entry
   and the cards linking to them read alike. */
.single-categories {
  margin: 0 0 0.5em;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  /* No colour of its own: the link takes the accent, like every other link
     and like the same eyebrow in the blocks. */
}
.single-categories a {
  font-weight: 600;
  text-decoration: none;
  transition: all 0.1s;
}
.single-categories a:hover {
  opacity: 0.8;
}
.single-categories .entry-categories-sep {
  margin: 0 4px;
  opacity: 0.5;
}

.single-header {
  padding: var(--spacing-lg) 0 var(--spacing-lg);
}
@media (max-width: 767.98px) {
  .single-header {
    padding-top: var(--spacing-lg);
  }
}
.single-header {
  /* The meta row sits under a big title (and sometimes a subtitle) here, so
     it needs more air than the tighter card version. */
}
.single-header .entry-meta {
  margin-top: 1em;
}

/* featured image above the content (Single Post customizer option, off by
   default). The header already pads below itself, so this only spaces the
   content that follows. */
.single-thumbnail {
  margin: 0 0 var(--spacing-lg);
}
.single-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}
.single-thumbnail figcaption {
  text-align: center;
}

/* The two wider settings (Single Post > Featured image width). Both break out
   of the reading column: the figure takes the image's own natural width,
   max-width caps how far that may run, and the margin-left/translate pair
   re-centres a box that ends up wider than its parent. So these are ceilings,
   never a stretch: a narrow image stays its own size, centred, instead of
   being blown up.

   max-content, not fit-content: fit-content clamps to the space available,
   and margin-left:50% leaves only half the column, which would shrink every
   image to that. max-content ignores available space - max-width is what
   bounds it.

   The ceilings can't exceed .container, which is
   min(--container-width, viewport - a gutter each side); 100vw stands in for
   the viewport, and the gutter is read from the same token .container uses, so
   a wider gutter moves both together. */
.single-thumbnail--wide,
.single-thumbnail--container {
  width: -webkit-max-content; /* Safari < 11 */
  width: max-content;
  margin-left: 50%;
  transform: translateX(-50%);
}
.single-thumbnail--wide img,
.single-thumbnail--container img {
  width: auto;
  max-width: 100%;
}
.single-thumbnail--wide,
.single-thumbnail--container {
  /* Keep the caption out of that max-content measurement - a long caption
     would otherwise decide the width and leave the image floating in a box
     wider than itself. width:0 contributes nothing; min-width fills the
     width the image settled on. */
}
.single-thumbnail--wide figcaption,
.single-thumbnail--container figcaption {
  width: 0;
  min-width: 100%;
}

/* 100px past the content column on each side. */
.single-thumbnail--wide {
  max-width: min(100% + 200px, var(--container-width), 100vw - var(--gutter) * 2);
}

.single-thumbnail--container {
  max-width: min(var(--container-width), 100vw - var(--gutter) * 2);
}

.wp-block-group__inner-container > *:last-child,
.wp-block-cover__inner-container > *:last-child {
  margin-bottom: 0;
}

/* details block - a run of them reads as one list, so they sit closer together
   than the flow gap below would put them. Two classes, so it outranks that gap
   without needing to live inside .entry-content. */
.wp-block-details + .wp-block-details {
  margin-top: 0.5em;
}

.wp-block-details summary {
  font-weight: 600;
}

.entry-content {
  overflow-wrap: break-word; /* break long URLs so they don't overflow */
}
.entry-content:first-child {
  padding-top: 2em;
}
.entry-content a:hover {
  text-decoration: none;
}
.entry-content {
  /* flow - even gap between every block, no gap before the first.
     Headings sit out the gap and keep the general h2-h6 rhythm from
     section 1 instead - without the :not(), this rule would outrank it. */
}
.entry-content > * {
  margin-bottom: 0;
}
.entry-content > *:not(h2, h3, h4, h5, h6) {
  margin-top: var(--spacing);
}
.entry-content > .wp-block-image {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.entry-content > *:first-child {
  margin-top: 0;
}
.entry-content {
  /* separator block - a single hairline rule, darker than --border and
     written out rather than pointed at it: every other hairline the theme
     draws is incidental and wants to disappear, and this one was typed by the
     writer to be seen. editor.scss says the same, and the two have to move
     together. */
}
.entry-content .wp-block-separator {
  border: 0;
  border-top: 1px solid #ccc;
}
.entry-content {
  /* alignwide / alignfull - the two breakout alignments, and the only place a
     block is allowed out of the reading column.

     Same shape as .single-thumbnail--wide above: width names the target,
     max-width stops it at the page edge, and the margin-left/transform pair
     re-centres a box that ended up wider than its parent. The caps read
     --gutter, the token .container measures itself against, so a breakout can
     never disagree with the page about where the edge is.

     The `max(..., 100%)` floor is what keeps the two names honest when
     Layout > Content width is "Full": the column is then the whole
     .container, already wider than --wide, and a flat 900px would render a
     "wide" image NARROWER than the text beside it. With the floor, alignwide
     is simply the column in that mode and only alignfull still breaks out.

     Both class names on the caption, because both are in the wild: blocks
     emit .wp-element-caption, the classic editor and the legacy gallery emit
     a bare figcaption. The legacy gallery is named in full because core's own
     `:not(.has-nested-images)` rules are two classes deep and would otherwise
     take the margin back.

     Below 900px the column is already most of the screen, so there is nothing
     to break out of and neither rule applies. */
}
@media (min-width: 900px) {
  .entry-content .alignwide,
  .entry-content .alignfull,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignwide,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignfull {
    margin-left: 50%;
    transform: translateX(-50%);
    /* The caption stays at reading width. A caption is prose, and a
       single line of it set across a 1200px image is unreadable - so
       the image breaks out and the words about it do not. Direct
       children only: a gallery's per-image captions are absolutely
       positioned over their own tile by core and are not this block's
       caption. */
  }
  .entry-content .alignwide > figcaption,
  .entry-content .alignwide > .wp-element-caption,
  .entry-content .alignfull > figcaption,
  .entry-content .alignfull > .wp-element-caption,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignwide > figcaption,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignwide > .wp-element-caption,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignfull > figcaption,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignfull > .wp-element-caption {
    max-width: var(--reading);
    margin-inline: auto;
  }
  .entry-content .alignwide,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignwide {
    width: max(var(--wide), 100%);
    max-width: calc(100vw - var(--gutter) * 2);
  }
  .entry-content .alignfull,
  .entry-content .wp-block-gallery:not(.has-nested-images).alignfull {
    width: max(100vw - var(--gutter) * 2, 100%);
  }
}
.entry-content {
  /* inline code - a word or phrase set in monospace */
}
.entry-content code {
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}
.entry-content {
  /* code block - scrollable, no double background on the inner code */
}
.entry-content pre {
  font-family: monospace;
  font-size: 0.9em;
  line-height: 1.5;
  padding: 1em 1.2em;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}
.entry-content pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}
.entry-content {
  /* blockquote - set off from the body */
}
.entry-content blockquote {
  margin-left: 0;
  padding-left: 1em;
  border-left: 2px solid var(--border);
  color: var(--gray);
}
.entry-content blockquote p {
  margin: 0;
}
.entry-content blockquote cite {
  font-style: normal;
  display: block;
  margin-top: 1em;
}

.entry-tags {
  margin-top: var(--spacing-lg);
  color: var(--gray);
  border-top: 1px solid var(--border);
  padding-top: var(--spacing-lg);
  word-wrap: break-word;
  word-break: break-word;
}
.entry-tags a {
  text-decoration: none;
  white-space: nowrap;
}
.entry-tags a:hover {
  text-decoration: underline;
}
.entry-tags a {
  margin-left: 1em;
}

/* comments
------------------- */
#comments {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
}
#comments #respond:first-child {
  padding-top: 0;
}

.comments-title {
  font-size: 1.3em;
  margin-top: 0; /* #comments already supplies the space above */
  margin-bottom: var(--spacing);
}

/* the threaded list */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list ol.children {
  list-style: none;
  margin: 0;
  padding-left: 1.5em; /* indent replies */
  /* The indent compounds - WordPress threads five deep by default, so the
     deepest reply starts 7.5em in. That is most of a phone's column spent on
     showing nesting, leaving two or three words a line for the reply itself.
     Half the step still reads as nesting and gives the text back its width. */
}
@media (max-width: 767.98px) {
  .comment-list ol.children {
    padding-left: 0.75em;
  }
}

.comment-list li.comment {
  margin-top: var(--spacing);
}

.comment-body {
  padding-bottom: var(--spacing);
  border-bottom: 1px solid var(--border);
}

/* author row - [ avatar | name above, date below ]
   WP nests .avatar+.fn inside .comment-author, with .comment-metadata as a
   sibling. `display: contents` flattens .comment-author so the avatar, name,
   and date all land in this one grid: avatar spans both rows on the left. */
.comment-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  font-size: 0.85em;
}
.comment-meta a {
  color: inherit;
  text-decoration: none;
}
.comment-meta a:hover {
  text-decoration: underline;
}

.comment-author {
  display: contents;
}

.comment-author .avatar {
  grid-row: 1/3; /* avatar spans name + date rows */
  display: block;
}

.comment-author .fn {
  align-self: end;
  font-weight: 600;
  font-style: normal;
  font-size: 1.1em;
}

.comment-author .says {
  display: none;
}

.comment-metadata {
  align-self: start;
  color: var(--gray);
}

.comment-content {
  margin-top: 0.75em;
  overflow-wrap: break-word;
}
.comment-content p {
  margin: 0 0 0.75em;
}

/* reply + edit links */
.comment-body .reply {
  margin-top: 0.5em;
  font-size: 0.85em;
}
.comment-body .reply a {
  text-decoration: none;
}
.comment-body .reply a:hover {
  text-decoration: underline;
}

.bypostauthor > .comment-body {
  /* a subtle cue that the author replied */
  border-left: 2px solid var(--accent);
  padding-left: 1em;
}

/* comment pagination */
.comment-navigation {
  margin-top: var(--spacing);
  font-size: 0.9em;
}
.comment-navigation a {
  text-decoration: none;
}
.comment-navigation a:hover {
  text-decoration: underline;
}
.comment-navigation .nav-previous {
  margin-right: 1em;
}

.no-comments {
  color: var(--gray);
  font-style: italic;
}

/* the reply form */
#respond {
  padding-top: var(--spacing);
}

.comment-respond {
  margin-top: var(--spacing-lg);
}

.comment-reply-title {
  font-size: 1.2em;
  margin-top: 0; /* #respond already supplies the space above */
  margin-bottom: 0.75em;
}
.comment-reply-title small {
  margin-left: 1em;
  font-size: 0.7em;
  font-weight: 400;
}

.comment-form p {
  margin-bottom: 1em;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-form-cookies-consent input {
  width: auto;
}

.form-submit {
  margin-bottom: 0;
}

/* 7. modals
-------------------------------------------- */
/* Every overlay in the theme is one of these: the search form, the mobile menu,
   the sign-in dialog, a page pulled into a panel behind the header button. The
   markup comes from stoat_render_modals() (inc/modal.php) and the behaviour
   from js/modal.js; what follows is the whole visual half.

   Hiding is visibility, not display - which is what lets the open and close
   transitions run without the script having to wait a frame first, and still
   keeps the closed dialog out of the tab order and the accessibility tree. The
   delayed transition on visibility itself holds the panel on screen long enough
   to slide or fade out before it disappears. */
.stoat-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}

.stoat-modal.is-open {
  visibility: visible;
  transition-delay: 0s;
}

/* The backdrop is a sibling covering the viewport, not a padded wrapper around
   the dialog - so "click outside to close" is one hit test on one element,
   however the variant below places the panel. */
.stoat-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.stoat-modal.is-open .stoat-modal__backdrop {
  opacity: 1;
}

/* The panel. Colors are named, not inherited: it is a sibling of the header,
   the main and the footer, so there is nothing above it to take them from.
   overscroll-behavior stops a flick at the end of a scrollable dialog from
   carrying on into the page underneath. */
.stoat-modal__dialog {
  position: absolute;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--text);
}

/* Absolute in both variants so the panel's own padding doesn't have to leave a
   hole for it, and it stays put when the body scrolls. */
.stoat-modal__close {
  position: absolute;
  z-index: 1;
  top: 0.4rem;
  right: 0.5rem;
}

.stoat-modal__title {
  margin: 0 0 1.2rem;
  font-size: 1.2em;
  line-height: 1.2;
  /* Clear of the close button, which sits in the same corner. */
  padding-right: 2rem;
}

/* The body carries whatever was registered - a search form, a login form, a
   whole page of blocks. Collapse the outer margins so the panel's padding is
   the only spacing that shows. */
.stoat-modal__body > :first-child {
  margin-top: 0;
}

.stoat-modal__body > :last-child {
  margin-bottom: 0;
}

/* The account / lost-password lines under the sign-in form. */
.stoat-modal__note {
  margin-bottom: 1em;
}

.stoat-modal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  margin: 1.2em 0 0;
  font-size: 0.9em;
}

/* centre - the ordinary dialog
------------------- */
/* Held near the top rather than truly centred: a dialog that grows downward
   from a fixed point doesn't jump around as its content changes height, and a
   search box belongs where the eye already is. */
.stoat-modal--center .stoat-modal__dialog {
  top: clamp(1rem, 10vh, 6rem);
  left: 50%;
  width: min(100vw - var(--gutter) * 2, var(--modal-width));
  /* Two declarations, not one: 100vh on a phone is the height the page would
     have with the browser's toolbars hidden, so a dialog measured against it
     runs under a toolbar that is still on screen and the last thing in it -
     the sign-in button, the bottom of a form - cannot be reached. dvh is the
     height actually visible. The vh line stays underneath as the fallback for
     anything that doesn't know the unit. */
  max-height: calc(100vh - clamp(1rem, 10vh, 6rem) - 2rem);
  max-height: calc(100dvh - clamp(1rem, 10vh, 6rem) - 2rem);
  padding: 2.6rem 1.6rem 1.6rem;
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, -0.6rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.stoat-modal--center.is-open .stoat-modal__dialog {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Three widths, set as a token so the variant rule above stays one line.
   Ignored by the drawer, which is sized by the edge it hangs off. */
.stoat-modal--sm {
  --modal-width: 420px;
}

.stoat-modal--md {
  --modal-width: 560px;
}

.stoat-modal--lg {
  --modal-width: 820px;
}

/* The search field is the reason the search modal exists, so give it the room.
   16px keeps iOS from zooming the page when it takes focus. */
#stoat-modal-search .search-field {
  width: 100%;
  font-size: 16px;
}

/* drawer - the menu panel
------------------- */
/* Slides in from the right. This is the mobile menu and, so far, nothing else;
   what goes inside it is styled back in section 3 with the rest of the header,
   because that is what it is - the header's own nav, stacked. */
.stoat-modal--drawer .stoat-modal__dialog {
  top: 0;
  bottom: 0;
  right: 0;
  width: min(80vw, 320px);
  padding: 3.2em 1.5em 1.5em;
  /* The drawer belongs to the header, so it wears the header's skin rather
     than the page's - the same colors the bar it slid out of is using. */
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.stoat-modal--drawer.is-open .stoat-modal__dialog {
  transform: none;
}

/* lock background scroll while any modal is open */
.has-modal-open {
  overflow: hidden;
}

/*# sourceMappingURL=style.css.map */