@charset "UTF-8";
/*
Theme Name: Stoat
Theme URI: https://withemes.com/themes/stoat
Author: WiThemes
Author URI: https://withemes.com
Description: Stoat is a personal & blog WordPress theme with minimalist style, almost no JavaScript, and ultra-fast load.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.3
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 */
  -webkit-text-decoration: underline dotted;
          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
6. single         - post body, tags, comments (list + reply form)
*/
:root {
  --container-width: 1170px;
  --reading: 640px;
  --wide: 900px; /* alignwide width, between reading and full */
  /* 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);
  --body-font: sans-serif;
  --heading-font: sans-serif;
  --nav-font: var(--heading-font); /* nav follows the headings unless overridden */
  /* heading style - overridable from the customizer Typography section */
  --heading-weight: 600;
  --heading-transform: none;
  /* 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;
  --accent: rgb(0, 0, 238);
  --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,.07);
  /* 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 {
    --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;
}
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  line-height: 1.2;
  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;
}

/* 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: 10px 12px;
  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]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=date]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--gray);
}
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);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* 1.3 button
------------------- */
button,
input[type=submit],
input[type=button],
input[type=reset] {
  display: inline-block;
  padding: 10px 18px;
  font-family: inherit;
  font-size: inherit;
  color: white;
  background: var(--accent);
  border: 0;
  border-radius: 0px;
  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: 0;
  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 {
  padding: 10px 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 {
  padding: 8px 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);
  max-width: calc(100% - 20px);
  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);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, nav right */
  gap: 2rem;
  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;
  }
}

@media (max-width: 767.98px) {
  .site-header {
    border-bottom: 1px solid var(--header-border);
  }
}
/* header actions (menu + button) - the right-hand group of the bar */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* 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. The
   8px + 2px lands on the 10px 18px of the theme's real buttons (section 1.3). */
.header-button {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid transparent;
  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). */
.header-button--block {
  display: block;
  margin-top: 1.5em;
  white-space: normal;
}
@media (max-width: 767.98px) {
  .header-button--block {
    display: block;
  }
}

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

.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: 1.2em;
  font-weight: 600;
  font-family: var(--heading-font);
  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: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--nav-font);
}
.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: 12px 0;
  line-height: 20px;
  transition: all 0.2s;
}
.site-header .primary-nav .menu > li.current-menu-item > a,
.site-header .primary-nav .menu > li.current-menu-ancestor > a,
.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,
.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;
}

/* off-canvas menu (mobile, opened by the hamburger)
------------------- */
/* Closed by default; the .is-open class (toggled by inline onclick) slides it
   in. We use visibility + opacity, not display:none, so the slide transition
   runs with zero JS — no requestAnimationFrame needed. */
.header-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0s linear 0.25s; /* delay hiding until panel slid out */
}

.header-offcanvas.is-open {
  visibility: visible;
  transition-delay: 0s;
}

.header-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.header-offcanvas__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0; /* slides in from the right */
  width: min(80vw, 320px);
  padding: 1em 1.5em;
  overflow-y: auto;
  /* the panel is a sibling of .site-header, not a child - so it can't inherit
     the header color, it has to name both tokens itself. */
  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;
}

.header-offcanvas.is-open .header-offcanvas__backdrop {
  opacity: 1;
}

.header-offcanvas.is-open .header-offcanvas__panel {
  transform: none;
}

/* close button - top-right of the panel */
.header-offcanvas__close {
  margin-left: auto;
  margin-bottom: 0.5em;
}

/* 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);
}

.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;
}

/* lock background scroll while the panel is open */
.has-offcanvas-open {
  overflow: hidden;
}

/* 4. footer
-------------------------------------------- */
.site-footer .footer-container-inner {
  padding: var(--footer-padding) 0;
  margin: var(--spacing-2xl) auto 0;
  border-top: 1px solid var(--border);
  width: var(--content-width);
  max-width: 100%;
}

.copyright a {
  text-decoration: none;
}
.copyright a:hover {
  text-decoration: underline;
}
.copyright p {
  margin: 0;
}
.footer-nav {
  margin-bottom: 0.5em;
}

.footer-nav .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.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;
}

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

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

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

.archive-description {
  font-size: 1.1em;
  line-height: 1.3;
  margin-top: 0.2em;
}
@media (max-width: 767.98px) {
  .archive-description {
    font-size: 1em;
  }
}
.archive-description p {
  margin: 0;
}

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

.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;
  align-items: center;
  gap: 20px;
  position: relative;
}

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

.entry-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;
}
.entry-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.entry-title a:hover {
  text-decoration: underline;
}

.entry-summary {
  margin-top: 1em;
  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;
}
.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);
}

/* 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);
  order: 2;
  margin: 0;
  /* Scale the chosen width rather than pinning a px value, so a % width
     stays a % here. Default 100px -> 80px, as before. */
}
@media (max-width: 767.98px) {
  .entry-thumbnail {
    width: calc(var(--thumb-width) * 0.8);
  }
}
.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);
  -o-object-fit: cover;
     object-fit: cover; /* fill the box without distortion */
  -o-object-position: center center;
     object-position: center center;
  display: block;
}

/* 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 {
  text-decoration: underline;
}

/* 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);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     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;
}

/* 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-header {
  padding: var(--spacing-lg) 0 var(--spacing-lg);
}
@media (max-width: 767.98px) {
  .single-header {
    padding-top: var(--spacing-lg);
  }
}

/* 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;
}

.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 */
}
.entry-content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--border);
}
.entry-content {
  /* alignwide / alignfull - break out only when the screen is wide enough */
}
@media (min-width: 900px) {
  .entry-content .alignwide {
    width: var(--wide);
    max-width: 90vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .entry-content .alignwide .wp-element-caption {
    max-width: var(--reading);
    margin-inline: auto;
  }
  .entry-content .alignfull {
    width: 96vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .entry-content .alignfull .wp-element-caption {
    max-width: var(--reading);
    margin-inline: auto;
  }
}
.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 */
}

.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;
  -moz-column-gap: 10px;
       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;
}/*# sourceMappingURL=style.css.map */