@charset "UTF-8";
/*
Theme Name: Evermag
Theme URI: https://owldraft.com/themes/evermag
Author: OwlDraft
Author URI: https://owldraft.com
Description: Evermag is a minimal WordPress theme for magazine, newspaper & blog. It focuses on readibility and website performance.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: evermag
Tags: blog, news, one-column, two-columns, right-sidebar, left-sidebar, 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
    1.4 media     - image alignment, caption, [gallery] (classic & gutenberg)
2. layout         - .container, .reading widths
3. header         - layout, branding, menu, mobile icons, off-canvas
4. footer         - copyright, footer menu
5. blog - archive - layout, header, loop, pagination
6. single         - post body, tags, comments (list + reply form)
*/
:root {
  --container-width: 1170px;
  --reading: 640px;
  --wide: 900px; /* alignwide width, between reading and full */
  /* single + archive sidebar layout */
  --sidebar-width: 280px; /* the .secondary column */
  --content-gap: 56px; /* gap between .primary and .secondary */
  --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-width is the List image width (the Grid always fills its column).
     --thumb-ratio is an aspect-ratio value; auto = the image's own ratio. Both
     List and Grid default to 4/3; the customizer's ratio select emits
     --thumb-ratio-choice, which overrides it. */
  --thumb-width: 300px;
  --thumb-ratio: var(--thumb-ratio-choice, 4/3);
  /* header logo box - overridable from the customizer Header section. The image
     fits within a square of this size, ratio preserved (never cropped).
     --logo-mobile-height caps the logo's height on phones only. */
  --logo-width: 250px;
  --logo-mobile-height: 32px;
  --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);
  /* footer skin - overridable from the customizer Footer section. Default
     (light) inherits the page colors, so that skin emits no CSS; the Dark
     preset and the two color pickers repoint these tokens. */
  --footer-bg: transparent;
  --footer-text: var(--text);
  --footer-meta: var(--meta);
  --footer-border: var(--border);
  /* 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 */
}

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

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

/* Top breathing room for the whole content area. Lives here (not on the
   archive's first child) so the sidebar column is pushed down with the
   content and the two line up at the top. Singular views set their own top
   spacing via .single-header, so they opt out. */
.site-main {
  padding-top: var(--spacing-xl);
}

.single .site-main,
.page .site-main {
  padding-top: 0;
}

/* content layout - drives both single (singular.php) and archive (index.php).
   Four shapes, one .primary / .secondary structure:
     .layout-reading        reading width, no sidebar (single only)
     .layout-fullwidth      container width, no sidebar
     .layout-sidebar-right  container width, content + sidebar
     .layout-sidebar-left   container width, sidebar + content
   The sidebar is a fixed --sidebar-width column; .primary flexes to fill the
   rest (= container - sidebar - gap). It stacks below the content on phones. */
.content-layout.layout-reading {
  width: var(--reading);
  max-width: 100%;
  margin: 0 auto;
}
.content-layout.layout-sidebar-left, .content-layout.layout-sidebar-right {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
}
@media (max-width: 767.98px) {
  .content-layout.layout-sidebar-left, .content-layout.layout-sidebar-right {
    display: block; /* stack: sidebar drops below the content */
  }
}
.content-layout {
  /* sidebar on the left: pull .secondary (2nd in source) ahead of .primary,
     so the content still comes first in the DOM for readers + screen readers */
}
.content-layout.layout-sidebar-left .secondary {
  order: -1;
}
.content-layout .primary {
  flex: 1 1 auto;
  min-width: 0; /* let wide children (pre, tables, media) shrink, not overflow */
}
.content-layout .secondary {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  min-width: 0;
}
@media (max-width: 767.98px) {
  .content-layout .secondary {
    width: auto;
    margin-top: var(--spacing-2xl);
  }
}

/* sidebar widgets - the .secondary column on single + archive */
.secondary {
  font-size: 0.95em;
}
.secondary .widget {
  margin: 0 0 var(--spacing-lg);
}
.secondary .widget:last-child {
  margin-bottom: 0;
}
.secondary .widget-title {
  margin: 0 0 var(--spacing);
  font-size: 1rem;
}
.secondary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.secondary li + li {
  margin-top: 0.5em;
}
.secondary a {
  text-decoration: none;
}
.secondary a:hover {
  text-decoration: underline;
}

/* empty-sidebar placeholder - editors only (evermag_sidebar_placeholder). A
   dashed box makes it read as "nothing here yet", not real sidebar content. */
.sidebar-placeholder {
  padding: var(--spacing);
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  color: var(--gray);
  font-size: 0.9em;
  line-height: 1.5;
}
.sidebar-placeholder p {
  margin: 0 0 0.75em;
}
.sidebar-placeholder p:last-child {
  margin-bottom: 0;
}
.sidebar-placeholder .sidebar-placeholder__title {
  font-weight: 600;
  color: var(--text);
}
.sidebar-placeholder .sidebar-placeholder__note {
  font-size: 0.85em;
  font-style: italic;
}
.sidebar-placeholder a {
  color: var(--accent);
  text-decoration: underline;
}

/* 3. header
-------------------------------------------- */
/* header-main layout - left | branding | actions
------------------- */
/* Three-column grid. Desktop uses `auto` for the centre so the branding takes
   only what it needs and the 1fr rails keep it optically centered. Mobile locks
   the rails to a 1/6 - 2/3 - 1/6 ratio: hamburger left, logo centred, button
   right. minmax(0,..) lets the rails shrink so a long word can't force the
   branding off-centre. */
.header-main .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1em 0;
}
@media (max-width: 767.98px) {
  .header-main .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.5em 0;
  }
}

/* left rail - social on desktop, hamburger on mobile (never both at once) */
.header-main__left {
  justify-self: start;
  display: flex;
  align-items: center;
}

.header-main__branding {
  justify-self: center;
  min-width: 0; /* let a long title shrink instead of pushing the rails */
}

.header-main__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 767.98px) {
  .header-main {
    border-bottom: 1px solid var(--border);
  }
  /* social hides on mobile - its slot is taken by the hamburger. */
  .header-main__left .social-nav {
    display: none;
  }
  /* the search steps aside on mobile so the right rail is just the
     button (the 1/6 rail has no room for both). Search stays reachable
     inside the off-canvas menu. */
  .header-search {
    display: none;
  }
}
/* social links - brand icons from the Social Menu location
------------------- */
.social-nav .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: opacity 0.2s;
}
.social-nav a:hover, .social-nav a:focus {
  opacity: 1;
}
.social-nav a svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* header button - the optional CTA from the customizer Header section.
------------------- */
/* Every variant carries the same 2px border + padding, so switching style never
   changes the button's size - only the outline one shows its border. */
.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 mobile right rail is only ~1/6 wide, so trim the padding + type to
     help a short CTA fit. */
}
@media (max-width: 767.98px) {
  .header-button {
    padding: 6px 10px;
    font-size: 0.8em;
  }
}

.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 any header background. */
.header-button--outline {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}

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

/* the hamburger only stands in for the primary nav, which is desktop-only, so it
   shows just on mobile. The search toggle stays visible at every width. */
.header-hamburger {
  display: none;
}
@media (max-width: 767.98px) {
  .header-hamburger {
    display: inline-flex;
  }
}

/* header search - reveal wrapper (toggle + dropdown panel as siblings)
   ------------------- */
/* The wrapper is the positioning context; main.js flips .is-open on it. */
.header-search {
  position: relative;
  display: inline-flex;
}

/* Toggle holds both icons stacked; .is-open swaps the magnifier for a close. */
.header-search__toggle .header-search__close-icon {
  display: none;
}

.header-search.is-open .header-search__toggle .header-search__icon {
  display: none;
}

.header-search.is-open .header-search__toggle .header-search__close-icon {
  display: inline-block;
}

/* Panel - drops directly under the icon, anchored to the toggle's right edge
   (the search sits on the right rail), so it extends leftward and never runs
   off-screen. */
.header-search__panel {
  position: absolute;
  z-index: 200;
  top: calc(100% + 4px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.header-search__panel[hidden] {
  display: none;
}

/* search form - rendered by get_search_form() (searchform.php). Appears in the
   header reveal panel, the search widget, and the results page. Input fills the
   width; the submit button sits absolute inside the field's right edge, so it
   reads as one search affordance with an embedded magnifier.
   ------------------- */
.evermag-search-form {
  display: block;
  width: 100%;
}

.evermag-search-form__field {
  position: relative; /* anchors the submit button + the JS autocomplete list */
  width: 100%;
}

.evermag-search-form .search-field {
  width: 100%;
  /* keep typed text clear of the absolute submit button. */
  padding-right: 40px;
}

button.evermag-search-form__submit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  opacity: 0.5;
}
button.evermag-search-form__submit:hover {
  opacity: 1;
}
button.evermag-search-form__submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  opacity: 1;
}

/* search autocomplete dropdown - titles-only list built by main.js, anchored
   under the field. Hidden via the [hidden] attribute the script toggles, so it
   has no footprint when JS is off.
   ------------------- */
.evermag-search-suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  max-height: 60vh;
  overflow-y: auto;
}
.evermag-search-suggest li {
  margin: 0;
}
.evermag-search-suggest a {
  display: block;
  padding: 0.5em 0.75em;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evermag-search-suggest {
  /* Arrow-key highlight (.is-active on the li) + mouse hover share one look. */
}
.evermag-search-suggest li.is-active a,
.evermag-search-suggest a:hover,
.evermag-search-suggest a:focus {
  background: rgba(0, 0, 0, 0.05);
}
.evermag-search-suggest[hidden] {
  display: none;
}

/* branding (logo | title + tagline)
------------------- */
/* Centered masthead at every width: logo stacked above the identity, both
   centered - the layout no longer collapses to a row on mobile. */
.evermag-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

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

.site-title {
  margin: 0;
  font-size: 2em;
  font-weight: 600;
  font-family: var(--heading-font);
  line-height: 1.1;
}
.site-title a {
  text-decoration: none;
  color: inherit;
}

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

.site-header .custom-logo-link img {
  display: block;
  width: auto;
  height: auto;
  /* fallbacks match the :root defaults, so the logo still sizes sanely if the
     token is ever missing (Site Identity option - never crops). */
  max-width: var(--logo-width, 250px);
  max-height: var(--logo-width, 250px);
  /* phones cap the logo's height separately - a tall desktop logo would
     otherwise eat the short mobile bar. */
}
@media (max-width: 767.98px) {
  .site-header .custom-logo-link img {
    max-height: var(--logo-mobile-height, 32px);
  }
}

/* navbar - the primary menu on its own row below header-main
------------------- */
/* hairline top + bottom fences the menu row off from the branding above and the
   content below. Hidden on mobile, where the off-canvas takes over. */
.navbar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 767.98px) {
  .navbar {
    display: none;
  }
}

.site-header .primary-nav .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* centered under the branding */
  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(--bg);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  padding: 0.5em 1em;
}
.site-header .primary-nav .menu ul > li + li > a {
  border-top: 1px solid var(--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;
  background: var(--bg);
  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(--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 {
  background: var(--footer-bg);
  color: var(--footer-text);
  /* Links follow the footer text color so they stay readable on any skin
     (the page accent would vanish on a dark footer). */
}
/* footer widgets
------------------- */
.footer-widgets {
  padding: var(--spacing-2xl) 0;
  margin-top: var(--spacing-2xl);
  border-top: 1px solid var(--footer-border);
  /* When widget areas are present they own the top rule/rhythm, so the
     copyright block below drops its own to avoid a double border. */
}
.footer-widgets + .footer-bottom {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.footer-widgets .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg) var(--spacing-xl);
}
.footer-widgets {
  /* Match the grid columns to how many areas are actually active. */
}
.footer-widgets.footer-widgets-1 .container {
  grid-template-columns: 1fr;
}
.footer-widgets.footer-widgets-2 .container {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 767.98px) {
  .footer-widgets .container {
    grid-template-columns: 1fr;
  }
}

.footer-widget-area .widget {
  margin: 0 0 var(--spacing) 0;
}
.footer-widget-area .widget:last-child {
  margin-bottom: 0;
}
.footer-widget-area {
  /* Classic widgets emit .widget-title; block widgets (widget_block) emit a
     Heading block instead — style both identically. */
}
.footer-widget-area .widget-title,
.footer-widget-area .widget_block .wp-block-heading {
  margin: 0 0 var(--spacing) 0;
  font-size: 1rem;
}
.footer-widget-area ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-widget-area a {
  text-decoration: none;
}
.footer-widget-area a:hover {
  text-decoration: underline;
}

.footer-bottom {
  padding: var(--spacing-2xl) 0;
  margin-top: var(--spacing-2xl);
  border-top: 1px solid var(--footer-border);
}

.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(--footer-meta);
  text-decoration: none;
  cursor: default;
}

/* 5. blog - archive
-------------------------------------------- */
/* Archive width + sidebar now come from .content-layout (section 2). The old
   .archive-wrap reading-width wrapper is gone; index.php uses .primary. */
/* archive header
------------------- */
.archive-header {
  /* Sits full-width above the .primary / sidebar columns, centred. Top gap
     comes from .site-main; only the bottom gap to the columns is set here. */
  padding: 0 0 var(--spacing-2xl);
  text-align: center;
}
.archive-header h1 {
  margin: 0;
}
.archive-header {
  /* Search form (404 + search results): keep the input a sensible width
     instead of stretching the full centred header. */
}
.archive-header form {
  max-width: 360px;
  margin: var(--spacing) auto 0;
}

.archive-heading {
  display: flex;
  align-items: baseline;
  justify-content: center; /* title + page number centred */
  gap: 10px;
}

/* Author-archive avatar, centred above the title. */
.archive-avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 0.75em;
  border-radius: 50%;
}

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

.archive-description {
  /* Cap the line length to the reading width and centre it under the title,
     so a long description doesn't stretch the full container. */
  max-width: var(--reading);
  margin: 0.2em auto 0;
  font-size: 1.1em;
  line-height: 1.3;
}
@media (max-width: 767.98px) {
  .archive-description {
    font-size: 1em;
  }
}
.archive-description p {
  margin: 0;
}

/* archive loop
------------------- */
.evermag-entry + .evermag-entry {
  margin-top: var(--spacing-2xl);
}

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

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

/* List display (default) — stoat.dev style: the image sits on the LEFT (its
   natural DOM order, so no `order` needed) and the text column is vertically
   centred against it. Width/ratio come from --thumb-width / --thumb-ratio. */
.display-list .entry-body {
  align-items: center;
}
.display-list {
  /* On phones a 300px image would swamp the row, so cap it to a share of the
     width — but never wider than the chosen --thumb-width (keeps small px
     widths small). */
}
@media (max-width: 767.98px) {
  .display-list .entry-thumbnail {
    width: min(var(--thumb-width), 42%);
  }
}

/* Grid display — N equal columns; each post becomes a card with the image on
   TOP (entry-body stacks) and the text below. The grid `gap` owns the spacing,
   so the between-post margin from the list is switched off. Columns step down
   on narrower viewports so cards never get too cramped. */
.display-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2xl) var(--spacing-xl);
}
.display-grid.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.display-grid.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.display-grid .evermag-entry + .evermag-entry {
  margin-top: 0;
}
.display-grid .entry-body {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.display-grid .entry-thumbnail {
  width: 100%;
  margin-bottom: var(--spacing);
}
.display-grid {
  /* laptop: a 4-up grid drops to 3 before it gets too tight */
}
@media (max-width: 1023.98px) {
  .display-grid.grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.display-grid {
  /* tablet: everything wider than 2-up drops to 2 */
}
@media (max-width: 767.98px) {
  .display-grid.grid-cols-3, .display-grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .display-grid {
    gap: var(--spacing-xl) var(--spacing);
  }
}
.display-grid {
  /* phone: single column. The compound selectors match the specificity of the
     tablet rules above so this wins at phone width (both media queries apply). */
}
@media (max-width: 479.98px) {
  .display-grid, .display-grid.grid-cols-2, .display-grid.grid-cols-3, .display-grid.grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

.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 {
  opacity: 0.7;
}

.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 .evermag-icon {
  /* nudge the bubble to sit on the text baseline */
}

.entry-categories {
  /* min-width:0 lets a long category list wrap onto more lines instead of
     overflowing its container. */
  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;
}

/* Category kicker above the title — shared by the archive card (.entry-text)
   and the single header. */
.entry-text > .entry-categories,
.single-header .entry-categories {
  margin-bottom: 0.75em;
  color: var(--meta);
  font-size: 0.875em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.entry-text > .entry-categories a,
.single-header .entry-categories a {
  color: inherit;
  text-decoration: none;
}
.entry-text > .entry-categories a:hover,
.single-header .entry-categories a:hover {
  color: var(--dark-gray);
}

/* 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. In List
   mode the image is the first flex item, so it sits on the LEFT with no
   `order`; the Grid overrides width to 100% above. */
.entry-thumbnail {
  flex: 0 0 auto;
  display: block;
  width: var(--thumb-width);
  margin: 0;
}
.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;
  }
}

/* 6. single
-------------------------------------------- */
/* The article fills .primary; its width (reading vs container) is set by the
   .content-layout wrapper in section 2, not here. */
.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);
  }
}

/* Subtitle: a quieter, larger-than-body line under the title. */
.single-subtitle {
  margin: 0.5em 0 0;
  font-size: 1.25em;
  line-height: 1.4;
  color: var(--dark-gray);
  font-weight: 400;
}

/* Byline: author avatar + name, then date + comments (the "\B7" separators come
   from the shared .entry-meta rule). */
.single-byline {
  margin-top: 0.9em;
}
.single-byline .single-byline__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.single-byline .single-byline__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.single-byline .single-byline__name {
  font-weight: 600;
}

.single-thumbnail {
  margin: 0 0 var(--spacing-lg);
}
.single-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

.single-thumbnail__caption {
  margin-top: 0.6em;
  font-size: 0.875em;
  line-height: 1.5;
  color: var(--gray);
}
.single-thumbnail__caption a {
  color: inherit;
  text-decoration: underline;
}

/* On the centred reading layout the featured image breaks out wider than the
   text column (like an alignwide block), while the caption stays at reading
   width so it lines up with the body copy. The off-centre sidebar layouts and
   narrow viewports leave the image filling its column. */
@media (min-width: 900px) {
  .content-layout.layout-reading .single-thumbnail {
    width: var(--wide);
    max-width: 90vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .content-layout.layout-reading .single-thumbnail .single-thumbnail__caption {
    max-width: var(--reading);
    margin-inline: auto;
  }
}
/* Author bio card below the content. */
.evermag-authorbox {
  display: flex;
  gap: var(--spacing);
  align-items: flex-start;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
}

.evermag-authorbox__avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.evermag-authorbox__name {
  font-family: var(--heading-font);
  font-weight: 700;
  text-decoration: none;
}

.evermag-authorbox__bio {
  margin: 0.4em 0 0;
  line-height: 1.55;
  color: var(--gray);
}

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

/* Query Loop post blocks — the block-editor equivalents of the classic archive
   card. A Query Loop dropped into content renders these; map each onto the same
   look as .entry-title / .entry-thumbnail / .entry-meta so a block-built listing
   matches the rest of the theme. Spacing between them is left to the block's own
   blockGap, so these only set the type/colour, not vertical rhythm. */
.wp-block-post > .wp-block-columns {
  gap: 3em;
}

.wp-block-post-template-is-layout-grid {
  gap: 2.4em;
}

.wp-block-post-title {
  /* margin:0 overrides the element-level h2-h6 section-break top margin (the
     block usually renders as an <h2>) — see the note in section 1. */
  margin: 0;
  font-family: var(--heading-font);
  /* 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.7;
}

.wp-block-post-terms + .wp-block-post-title {
  margin-top: 1em;
}

.wp-block-post-excerpt__excerpt {
  margin: 0.5em 0;
}

.wp-block-post-featured-image {
  margin-top: 0;
}
.wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.wp-block-post-date {
  color: var(--meta);
  font-size: 0.875em;
}
.wp-block-post-date a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.wp-block-post-date a:hover {
  color: var(--dark-gray);
}

.entry-content {
  overflow-wrap: break-word; /* break long URLs so they don't overflow */
}
.entry-content:first-child {
  padding-top: 2em;
}
.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 wide enough, and only for the
     layouts that are centred in the viewport (reading + full width). The
     sidebar layouts sit off-centre, so the 50% + translate re-centre would
     overrun the sidebar; there, align* simply fills .primary. */
}
@media (min-width: 900px) {
  .entry-content {
    /* reading: a narrow column, so alignwide widens and alignfull bleeds full */
  }
  .layout-reading .entry-content .alignwide {
    width: var(--wide);
    max-width: 90vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .layout-reading .entry-content .alignwide .wp-element-caption {
    max-width: var(--reading);
    margin-inline: auto;
  }
  .layout-reading .entry-content .alignfull {
    width: 96vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .layout-reading .entry-content .alignfull .wp-element-caption {
    max-width: var(--reading);
    margin-inline: auto;
  }
  .entry-content {
    /* full width: content already fills the container, so only alignfull bleeds */
  }
  .layout-fullwidth .entry-content .alignfull {
    width: 96vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
.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 */