/* =========================================================
   0. Tokens
   Purple is the brand. Teal carries links (complementary,
   so links stay findable inside purple headings). Pink is
   the accent used only for section titles.
   ========================================================= */
:root {
  --display: "Comic Neue", "Comic Sans MS", cursive;
  --font: "Comic Neue", "Comic Sans MS", cursive;

  --purple: #593691;          /* brand deep purple — logo outline */
  --purple-mid: #7c59bc;      /* brand mid purple — logo spots */
  --purple-deep: #3d2465;     /* footer bar */
  --purple-wash: #f5f1fb;     /* post header band */
  --purple-line: #e4d9f6;

  --link: #a93e85;            /* analogous magenta-violet — all links */
  --link-hover: #7e2c63;

  --accent: #c46ba4;          /* pastel orchid pink — section titles */
  --accent-soft: #f9e8f3;
  --peri: #8b9be0;            /* pastel periwinkle — small touches */

  --ink: #232323;
  --muted: #6a6a6a;
  --line: #e6e6e6;
  --rule: #ececec;
  --bg: #fff;

  --maxw: 1240px;
  --content: 69%;
  --gap: 44px;
}

/* =========================================================
   1. Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 21px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.22; color: var(--ink); font-weight: 700; }
/* subheadings inside written content pick up the darkest brand purple */
.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--purple-deep); }
.entry-content h2.pm-section-title { color: var(--accent); }
h1 { font-size: 2.2rem; margin: 0 0 .4em; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--purple-mid); outline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   2. Header — slim, sticky, compresses on scroll and reveals
      an inline search field in the menu bar
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  transition: padding .28s cubic-bezier(.4,0,.2,1);
}
.site-branding .site-title,
.site-branding img { transition: font-size .28s cubic-bezier(.4,0,.2,1), max-height .28s cubic-bezier(.4,0,.2,1); }
.site-header.is-stuck .header-inner { padding-top: 7px; padding-bottom: 7px; }
.site-header.is-stuck .site-branding .site-title { font-size: 1.3rem; }
.site-header.is-stuck .site-branding img { max-height: 36px; }
.site-header.is-stuck .main-nav a { font-size: .92rem; }

.site-branding { margin-right: auto; }
.site-branding .site-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 900;
}
.site-branding .site-title a { color: var(--purple); }
.site-branding .site-title a:hover { color: var(--purple-mid); text-decoration: none; }
.site-branding img { max-height: 72px; width: auto; }

/* nav */
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 34px; }
.main-nav a {
  color: var(--purple);
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: font-size .28s cubic-bezier(.4,0,.2,1);
  letter-spacing: .04em;
}
.main-nav a:hover { color: var(--link); text-decoration: none; }
.main-nav .sub-menu { display: none; }
.main-nav li { position: relative; }
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
  display: block;
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  border: 1px solid var(--line);
  min-width: 210px;
  padding: 6px 0;
  box-shadow: 0 6px 18px rgba(89,54,145,.12);
}
.main-nav .sub-menu li { display: block; }
.main-nav .sub-menu a { display: block; padding: 9px 16px; text-transform: none; letter-spacing: 0; }

/* inline header search — hidden at the top of the page, slides in once stuck */
.header-search {
  display: flex;
  align-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width .3s cubic-bezier(.4,0,.2,1), opacity .22s linear;
}
.site-header.is-stuck .header-search { width: 250px; opacity: 1; }
.header-search input[type="search"] {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  padding: 8px 13px;
  border: 1px solid var(--purple);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.header-search input[type="search"]:focus { outline: none; border-color: var(--purple-mid); }

/* search icon button */
.search-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--purple); padding: 8px; line-height: 0;
}
.search-toggle:hover { color: var(--link); }

/* hamburger */
.menu-toggle {
  display: none;
  background: none; border: 1px solid var(--purple-line); border-radius: 6px;
  cursor: pointer; padding: 9px 11px; line-height: 0; color: var(--purple);
}

.mobile-menu-search { display: none; }

/* =========================================================
   3. Search overlay
   ========================================================= */
.search-overlay {
  position: fixed; inset: 0 0 auto 0;
  background: #fff;
  box-shadow: 0 3px 16px rgba(89,54,145,.16);
  padding: 16px 5vw;
  z-index: 99999;
  display: none;
}
.search-overlay.open { display: block; }
.admin-bar .search-overlay { top: 32px; }
.search-overlay form { display: flex; align-items: center; gap: 20px; max-width: var(--maxw); margin: 0 auto; }
.search-overlay input[type="search"] {
  flex: 1; font-size: 17px; padding: 10px 14px;
  border: 1px solid var(--purple); border-radius: 6px; background: #fff;
  transition: font-size .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1);
}
.search-overlay input:focus { border-color: var(--purple-mid); outline: none; }
.site-header.is-stuck ~ .search-overlay input[type="search"],
.search-overlay.is-stuck input[type="search"] { font-size: 15px; padding: 8px 12px; }
.search-overlay .overlay-go { background: none; border: none; cursor: pointer; color: var(--purple); padding: 6px; line-height: 0; }
.search-overlay .overlay-go:hover { color: var(--link); }
.search-overlay .close {
  background: none; border: none; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--purple); padding: 6px;
}
.search-overlay .close:hover { color: var(--link); }

/* =========================================================
   4. Layout: content + sidebar
   ========================================================= */
.site-main { padding: 0 0 60px; }
.layout {
  display: grid;
  grid-template-columns: var(--content) 1fr;
  gap: 40px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 24px 0;
}
.layout.no-sidebar { grid-template-columns: 1fr; max-width: 900px; }
.single .layout { grid-template-columns: 69% 31%; max-width: var(--maxw); gap: 40px; padding-top: 40px; }

/* the homepage runs full width — no sidebar */
.home .layout { grid-template-columns: 1fr; max-width: var(--maxw); padding-top: 48px; }

/* =========================================================
   5. Section titles (pastel pink accent, centred)
   ========================================================= */
.pm-section-title {
  font-family: var(--display);
  text-align: center;
  color: var(--accent);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 64px 0 34px;
}
.pm-section-title a { color: inherit; }

/* legacy ruled heading, still used by archive/index titles */
.rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 700;
  margin: 0 0 14px;
}
.rule::after { content: ""; flex: 1; height: 9px; background: var(--rule); }
.rule a { color: var(--ink); }
.rule a:hover { color: var(--link); text-decoration: none; }

/* =========================================================
   6. Single post
   ========================================================= */
.post-hero {
  background: var(--purple-wash);
  border-bottom: 1px solid var(--purple-line);
  padding: 26px 0 22px;
}
.post-hero .container { max-width: var(--maxw); }
.post-hero .entry-title {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 900;
  color: var(--ink);
}
.post-hero .entry-meta { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.55; }
.post-hero .entry-meta a { color: var(--link); font-weight: 600; }
.post-hero .byline-label { color: var(--ink); font-weight: 600; }
.post-hero .updated { display: block; }

.entry-title { margin: 0 0 6px; font-size: 2.1rem; }
.entry-meta { color: var(--muted); font-size: .82rem; margin-bottom: 18px; }
.entry-meta a { color: var(--muted); }
.entry-content { font-size: 21px; }
.entry-content a { color: var(--link); font-weight: 400; }
.entry-content a:hover { color: var(--link-hover); text-decoration: underline; }
.entry-content a:has(> img),
.entry-content a:has(> figure) { display: block; text-decoration: none; line-height: 0; }
.entry-content a > img { display: block; margin-bottom: 0; }
.entry-content figure { margin-bottom: 0; }
.entry-content figure img { display: block; }
.entry-content img { display: block; vertical-align: bottom; margin: 8px 0 22px; }
.entry-content h2 { margin: 1.4em 0 .5em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }

/* printable tiles inside posts get a light frame + teal caption.
   Scoped to .single — the homepage lives in .entry-content too, and this
   would otherwise override the tile and cover-grid styling. */
.single .entry-content .wp-block-columns { margin-bottom: 0; gap: 2.2em; }
/* Printable previews sit at 80% of the reading column, centred, with the
   caption and description constrained to the same width. The shadow rules
   are !important on purpose: post bodies carry inline
   style="box-shadow:none" on these images, and an !important stylesheet
   rule is the one thing that outranks an inline style. */
.single .entry-content .wp-block-columns,
.single .entry-content .wp-block-image {
  width: 80%;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.single .entry-content p.has-text-align-center {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.single .entry-content .wp-block-columns .wp-block-image { width: 100%; max-width: 100%; }
.single .entry-content .wp-block-image img,
.single .entry-content .wp-block-columns .wp-block-image img {
  border-radius: 8px !important;
  width: 100%;
  box-shadow: 0 5px 20px rgba(50, 30, 85, .2), 0 1px 4px rgba(50, 30, 85, .12) !important;
}
.single .entry-content .wp-block-columns p a { color: var(--link); font-weight: 600; }
.single .entry-content .wp-block-columns p { margin-top: 14px; margin-bottom: 2.2em; }
.single .entry-content .wp-block-image { margin-top: 10px; margin-bottom: 16px; }

.hero-img { margin: 8px 0 26px; }

/* share buttons */
.share { display: flex; gap: 10px; margin: 0 0 30px; flex-wrap: wrap; }
.share a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: 6px; color: #fff; font-size: .9rem; font-weight: 500;
  text-decoration: none;
}
.share a:hover { opacity: .92; text-decoration: none; color: #fff; }
.share .fb { background: #3b5998; }
.share .tw { background: #1da1f2; }
.share .pin { background: #bd081c; }

/* =========================================================
   7. Card grids (archives, search)
   ========================================================= */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
.card-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafafa;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-title {
  display: block;
  margin: 11px 0 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--link);
  line-height: 1.3;
  text-align: center;
}
.card a { text-decoration: none; }
.card a:hover .card-title { color: var(--link-hover); text-decoration: underline; }

/* =========================================================
   8. Homepage blocks
   ========================================================= */
.home .entry-content > * { margin-top: 0; margin-bottom: 0; }
.home .entry-content p:empty,
.home .entry-content .wp-block-group:empty { display: none !important; }

/* 8a. Four category tiles */
.pm-tiles { gap: 30px !important; margin: 0 0 64px !important; }
.pm-tiles .wp-block-column { min-width: 0; }
.pm-tiles figure { margin: 0; }
.pm-tiles img {
  width: 100%;
  border-radius: 18px;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.pm-tiles a:hover img { transform: translateY(-4px); }

/* 8b. Search call to action */
.pm-searchrow { align-items: center !important; gap: 40px !important; margin: 0 0 44px !important; }
.pm-searchrow figure { margin: 0; }
.pm-searchrow img { width: 100%; max-width: 470px; margin-left: auto; }
.pm-searchrow .wp-block-search { margin: 0; }
.pm-searchrow .wp-block-search__inside-wrapper {
  border: 2px solid var(--purple);
  border-radius: 4px;
  padding: 0;
  background: #fff;
}
.pm-searchrow .wp-block-search__input {
  border: none;
  padding: 15px 18px;
  font-family: var(--font);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
}
.pm-searchrow .wp-block-search__input::placeholder { color: #8d8d8d; }
.pm-searchrow .wp-block-search__input:focus { outline: none; }
.pm-searchrow .wp-block-search__button {
  background: transparent;
  border: none;
  color: var(--link);
  padding: 0 18px;
  cursor: pointer;
}
.pm-searchrow .wp-block-search__button:hover { color: var(--link-hover); }
.pm-searchrow .wp-block-search__button svg { fill: currentColor; width: 26px; height: 26px; }

/* 8c. Intro band */
.pm-intro { align-items: center !important; gap: 56px !important; margin: 0 0 30px !important; }
.pm-intro figure { margin: 0; }
.pm-intro img { width: 100%; max-width: 480px; margin: 0 auto; border-radius: 50%; }
.pm-intro p { text-align: center; color: #333; margin: 0 0 1.15em; }
.pm-intro .pm-section-title { margin-top: 0; }

/* 8d. As featured in */
.pm-featured-in { margin: 0 0 30px !important; }
.pm-featured-in img { margin: 0 auto; max-width: 1000px; width: 100%; }

/* 8e. Cover grids */
.pm-covers { gap: 36px !important; margin: 0 0 40px !important; }
.pm-covers .wp-block-column { min-width: 0; }
.pm-covers figure { margin: 0; }
.pm-covers img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.pm-covers a:hover img { transform: translateY(-4px); }
.pm-cover-label {
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 14px 0 0 !important;
  line-height: 1.3;
}
.pm-cover-label a { color: var(--link); }
.pm-cover-label a:hover { color: var(--link-hover); }

/* 8f. Section buttons */
.pm-btn {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  margin: 8px 0 24px !important;
}
.pm-btn .wp-block-button__link {
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  padding: 15px 32px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
}
.pm-btn .wp-block-button__link:hover { background: var(--purple-mid); color: #fff; text-decoration: none; }

/* =========================================================
   9. Sidebar widgets
   ========================================================= */
/* the sidebar carries a rule running its full height, splitting it from the content */
.layout > .sidebar { border-left: 1px solid var(--line); padding-left: 40px; }

.sidebar .widget { margin-bottom: 34px; }
.sidebar .widget-title {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}

.search-box { display: flex; border: 2px solid var(--purple); border-radius: 4px; overflow: hidden; }
.search-box input[type="search"] { flex: 1; border: none; padding: 12px 14px; font-family: var(--font); font-size: 15px; min-width: 0; }
.search-box input:focus { outline: none; }
.search-box button {
  border: none; background: var(--purple); color: #fff;
  padding: 0 18px; font-family: var(--display); font-weight: 700; font-size: 14px; cursor: pointer;
}
.search-box button:hover { background: var(--purple-mid); }

.ad-box { background: #f6f4fa; padding: 14px; border-radius: 8px; }
.ad-label { text-align: center; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #9a93aa; margin-bottom: 10px; }
.ad-inner { background: #fff; min-height: 250px; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 13px; text-align: center; }

.feat-card { position: relative; display: block; margin-bottom: 16px; overflow: hidden; border-radius: 10px; }
.feat-card img { width: 100%; height: auto; }
.feat-list { list-style: none; margin: 0; padding: 0; }
.feat-list li { border-bottom: 1px solid var(--rule); }
.feat-list li:last-child { border-bottom: 0; }
.feat-list a { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: var(--ink); font-size: .95rem; line-height: 1.35; text-decoration: none; }
.feat-list a:hover { color: var(--link); }
.feat-list img { width: 64px; height: 64px; object-fit: cover; flex: none; border: 1px solid var(--line); border-radius: 6px; }

.sidebar ul.menu, .sidebar .cat-list, .sidebar .widget_categories ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget_categories li { padding: 8px 0; border-bottom: 1px solid #f1f1f1; text-align: center; }
.sidebar .widget_categories li:last-child { border-bottom: 0; }
.sidebar .widget_categories a { color: var(--link); }
.sidebar .widget_categories a:hover { color: var(--link-hover); }

/* =========================================================
   10. Archive / index
   ========================================================= */
.page-title { margin: 0 0 26px; }
.archive-title {
  font-family: var(--display);
  text-align: center;
  color: var(--accent);
  font-size: clamp(1.8rem, 3.2vw, 2.35rem);
  font-weight: 800;
  margin: 6px 0 28px;
}

.pagination { display: flex; gap: 8px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--purple);
  font-family: var(--display); font-weight: 600;
}
.pagination .current { background: var(--purple); color: #fff; border-color: var(--purple); }
.pagination a:hover { border-color: var(--purple-mid); text-decoration: none; }

/* =========================================================
   11. Footer
   ========================================================= */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 48px 0 0; margin-top: 30px; }
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 44px;
  align-items: start;
  text-align: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.footer-menu ul { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 3px; }
.footer-menu a {
  color: var(--link);
  font-family: var(--display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.5;
}
.footer-menu a:hover { color: var(--link-hover); }

.footer-brand img { margin: 0 auto 18px; max-height: 74px; width: auto; }
.footer-brand .footer-title {
  font-family: var(--display); font-size: 1.5rem; font-weight: 800;
  color: var(--purple); margin: 0 0 14px;
}
.footer-brand p { color: #444; font-size: .96rem; line-height: 1.7; max-width: 470px; margin: 0 auto; }

.footer-bottom {
  margin-top: 44px;
  background: var(--purple-deep);
  color: #ddd0f2;
  text-align: center;
  padding: 16px 24px;
  font-size: .86rem;
}
.footer-bottom a { color: #fff; }
.footer-bottom p { margin: 0; }

/* =========================================================
   12. Mobile
   ========================================================= */
@media (max-width: 980px) {
  .footer-cols { grid-template-columns: 1fr; gap: 34px; }
  .footer-brand { order: -1; }
}
@media (max-width: 900px) {
  :root { --gap: 30px; }
  .layout,
  .single .layout { grid-template-columns: 1fr !important; gap: 40px; max-width: 100%; }
  .layout > .sidebar { border-left: 0; padding-left: 0; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .sidebar { margin-top: 8px; }
  .pm-searchrow img { max-width: 380px; margin: 0 auto; }
  .pm-intro img { max-width: 380px; }
  .pm-section-title { margin: 42px 0 24px; }
}
@media (max-width: 768px) {
  body { font-size: 20px; }
  .header-inner { padding: 8px 16px; gap: 12px; }
  .site-branding img { max-height: 48px; }
  .site-header.is-stuck .header-inner { padding-top: 7px; padding-bottom: 7px; }
  .container, .layout { padding-left: 16px; padding-right: 16px; }
  .menu-toggle { display: inline-flex; order: 4; }
  .search-toggle { display: inline-flex; order: 3; }
  .site-branding { order: 1; margin-right: auto; }
  .header-search { display: none; }
  .site-header.is-stuck .header-search { display: none; }
  .main-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 20px rgba(89,54,145,.1);
    order: 5;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-top: 1px solid var(--line); }
  .main-nav a { display: block; padding: 14px 18px; }
  .main-nav .sub-menu { position: static; display: block; border: none; box-shadow: none; padding: 0 0 0 16px; }
  .mobile-menu-search { display: block; padding: 14px 18px; border-top: 1px solid var(--line); }
  .entry-title, .post-hero .entry-title { font-size: 1.7rem; }
  .post-hero { padding: 24px 0 20px; }
}
/* Core stacks every column to 100% below 782px. For the tile and cover grids
   two-up reads far better on a tablet, so override it — the .home prefix keeps
   these selectors ahead of core's !important rule regardless of load order. */
@media (min-width: 601px) and (max-width: 781px) {
  .home .wp-block-columns.pm-tiles,
  .home .wp-block-columns.pm-covers { flex-wrap: wrap !important; gap: 24px !important; }
  .home .wp-block-columns.pm-tiles > .wp-block-column,
  .home .wp-block-columns.pm-covers > .wp-block-column { flex-basis: calc(50% - 12px) !important; }
  .home .wp-block-columns.pm-searchrow > .wp-block-column,
  .home .wp-block-columns.pm-intro > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 600px) {
  .home .wp-block-columns.pm-tiles,
  .home .wp-block-columns.pm-covers { gap: 22px !important; }
  .home .wp-block-columns.pm-tiles > .wp-block-column,
  .home .wp-block-columns.pm-covers > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
}

/* Keep form controls consistent with the site typography. */
button, input, select, textarea { font-family: var(--font); }

/* Slightly fuller reading text; Comic Neue has only regular and bold weights. */
.entry-content { -webkit-text-stroke: 0.12px currentColor; }
.entry-content :is(p, li, figcaption) { font-size: inherit; }
.entry-content a:not(.wp-block-button__link):not(:has(img)):not(:has(figure)),
.entry-content .wp-block-columns p a,
.pm-cover-label a {
  font-size: inherit !important;
  font-weight: 400 !important;
  color: var(--link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  -webkit-text-stroke: 0.032em currentColor;
}
.entry-content a :is(strong, b, span) { font-weight: inherit; -webkit-text-stroke: inherit; }
.entry-content a:not(.wp-block-button__link):not(:has(img)):not(:has(figure)):is(:hover, :focus-visible),
.entry-content .wp-block-columns p a:is(:hover, :focus-visible),
.pm-cover-label a:is(:hover, :focus-visible) {
  color: var(--link-hover);
  text-decoration: underline;
}
.entry-content a:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.pm-cover-label { font-size: 21px; font-weight: 400; }
@media (max-width: 782px) { .entry-content, .pm-cover-label { font-size: 20px; } }

.main-nav a { font-size: 1.17rem; -webkit-text-stroke: 0.17px currentColor; }
.site-header.is-stuck .main-nav a { font-size: 1.02rem; }
.post-hero .entry-title { font-size: clamp(1.85rem, 3.4vw, 2.6rem); -webkit-text-stroke: 0.23px currentColor; }
.search-box input::-webkit-search-cancel-button { appearance: none; }
.search-box .search-clear { background: transparent; color: var(--purple); padding: 0 12px; font-size: 1.4rem; }
.search-box .search-clear[hidden] { display: none; }

a[href] { -webkit-text-stroke: 0.032em currentColor; }
.search-box input::placeholder { color: #757575; opacity: 1; }
.search-box:has(input:placeholder-shown) .search-clear { display: none; }
.search-box .search-clear:hover { background: var(--purple-wash); }
.feat-card { box-shadow: 0 5px 20px rgba(50, 30, 85, .2), 0 1px 4px rgba(50, 30, 85, .12); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .feat-card { transition: transform .18s ease; }
  .feat-card:hover { transform: translateY(-4px) rotate(-.6deg); }
}

.post-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 2rem 0;
}
.post-topics a {
  background: var(--purple-wash);
  border: 1px solid var(--purple-line);
  border-radius: 999px;
  padding: .25rem .85rem;
  color: var(--purple);
}
.post-topics a:is(:hover, :focus-visible) { color: var(--purple-deep); }
.printamoo-comments { margin-top: 2.5rem; }
.printamoo-comments > h2 {
  text-align: center;
  color: var(--purple-deep);
  border-block: 1px solid var(--purple-line);
  padding: .75rem;
}
.printamoo-comments .comment-respond {
  padding: clamp(1rem, 4vw, 1.75rem);
  background: var(--purple-wash);
  border: 1px solid var(--purple-line);
  border-radius: 12px;
}
.printamoo-comments .comment-form label { display: block; font-weight: 700; }
.printamoo-comments .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.printamoo-comments :is(textarea, input[type="text"], input[type="email"], input[type="url"]) {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--purple-mid);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.printamoo-comments textarea { min-height: 8rem; resize: vertical; }
.printamoo-comments .submit {
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  padding: .5rem 1.2rem;
  cursor: pointer;
}
.printamoo-comments .submit:hover { background: var(--purple-deep); }
.printamoo-comments :focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

.printamoo-comments .commentmetadata > a:first-child,
.printamoo-comments .comment-metadata > a:first-child { display: none; }

.header-account { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.main-nav .header-trial {
  background: var(--purple);
  color: #fff;
  border-radius: 8px;
  padding: .4rem .75rem;
}
.main-nav .header-trial:is(:hover, :focus-visible) { background: var(--purple-deep); color: #fff; }
@media (min-width: 769px) {
  .main-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1rem; }
  .main-nav > ul { flex-wrap: wrap; justify-content: flex-end; gap: .25rem clamp(.65rem, 1.4vw, 1.5rem); }
  .site-header.is-stuck .header-search { width: clamp(90px, 12vw, 180px); }
}
@media (max-width: 768px) {
  .header-account { flex-wrap: wrap; padding: .5rem 18px; }
  .main-nav .header-account a { padding: .4rem .75rem; }
}


/* Mobile layouts must follow the retained desktop styles above. */
@media (max-width: 781px) {
  .layout > *, .wp-block-column { min-width: 0; }
  .home .layout { width: 100%; padding: 24px 14px 0; }
  .home .entry-content { min-width: 0; width: 100%; }
  .home .wp-block-columns:is(.pm-tiles, .pm-covers) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
    width: 100% !important;
    margin: 0 0 30px !important;
  }
  .home .wp-block-columns:is(.pm-searchrow, .pm-intro) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100% !important;
    gap: 20px !important;
    margin: 0 0 30px !important;
  }
  .home .wp-block-columns > .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .home .entry-content figure { max-width: 100% !important; margin-inline: auto !important; }
  .home .entry-content img { max-width: 100% !important; height: auto; }
  .home .pm-searchrow img { width: min(100%, 280px); margin: 0 auto; }
  .home .pm-intro img { width: min(100%, 300px); }
  .home .wp-block-search, .home .wp-block-search__inside-wrapper { width: 100% !important; min-width: 0; }
  .home .wp-block-search__input { width: 0; min-width: 0; flex: 1 1 0; padding: 12px; font-size: 16px; }
  .home .wp-block-search__button { flex-shrink: 0; margin: 0; padding: 0 12px; }
  .home .pm-section-title { font-size: 1.65rem; margin: 28px 0 20px; }
  .single .layout { padding-inline: 10px; }
  .single .entry-content .wp-block-columns,
  .single .entry-content .wp-block-image,
  .single .entry-content p.has-text-align-center {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  .single .entry-content .wp-block-image img { width: 100% !important; height: auto; }
}
@media (max-width: 768px) {
  .header-inner { padding: 8px 12px; gap: 10px; }
  .site-branding { min-width: 0; }
  .site-branding img { width: auto; max-width: min(48vw, 200px); height: auto; max-height: 48px; }
  .main-nav { max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
  .main-nav ul { width: 100%; margin: 0; padding: 0; align-items: stretch; }
  .main-nav li { width: 100%; margin: 0; }
  .main-nav a, .site-header.is-stuck .main-nav a { font-size: 1rem; padding: 10px 16px; line-height: 1.35; }
  .main-nav .sub-menu { padding-left: 16px; }
  .main-nav .sub-menu a { font-size: .95rem; padding: 8px 16px; }
  .header-account { gap: 12px; padding: 12px 16px; }
}


/* Header controls and consistent archive layouts. */
.site-header .main-nav .header-trial {
  transition: background-color .18s ease, box-shadow .18s ease;
}
.site-header .main-nav .header-trial:is(:hover, :focus-visible) {
  background: #593691 !important;
  color: #fff !important;
  box-shadow: 0 3px 9px rgb(61 36 101 / 20%);
}
.search-overlay { display: none !important; }
@media (min-width: 769px) {
  .site-header .main-nav a,
  .site-header.is-stuck .main-nav a { font-size: 1.25rem; }
  .header-inner { flex-wrap: wrap; }
  .main-nav { min-width: 0; flex: 1 1 580px; }
  .header-search { flex: 0 0 0; }
  .site-header.search-open .header-search,
  .site-header.is-stuck .header-search {
    width: 180px; flex-basis: 180px; opacity: 1;
  }
}
@media (max-width: 768px) {
  .site-header.search-open .header-search {
    display: block;
    order: 6;
    width: 100%;
    opacity: 1;
    flex: 1 0 100%;
  }
  .site-header.search-open .header-inner { flex-wrap: wrap; }
}
:is(.archive, .search, .blog) .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.archive, .search, .blog) .card-img { aspect-ratio: auto; }
:is(.archive, .search, .blog) .card-img img { height: auto; aspect-ratio: auto; object-fit: contain; }
@media (min-width: 901px) {
  :is(.single, .archive, .search, .blog) .layout {
    grid-template-columns: minmax(0, 69fr) minmax(0, 31fr);
    max-width: var(--maxw);
    gap: 40px;
    padding-top: 40px;
  }
}


/* Keep header controls within their own space at every desktop width. */
@media (min-width: 769px) {
  .header-inner { gap: 16px; }
  .site-branding { flex: 0 0 auto; margin-right: 0; }
  .site-branding img { width: auto; max-width: 210px; }
  .site-header .main-nav a,
  .site-header.is-stuck .main-nav a { font-size: 1.05rem; white-space: nowrap; }
  .main-nav { flex: 1 1 540px; min-width: 0; gap: 12px; }
  .main-nav > ul { gap: 14px; }
  .header-account { gap: 12px; }
  .header-search { display: none; }
  .site-header.search-open .header-search,
  .site-header.is-stuck .header-search { display: flex; flex: 0 0 190px; width: 190px; }
  .site-header.search-open .search-toggle,
  .site-header.is-stuck .search-toggle { display: none; }
}
.site-header .header-search {
  border: 1px solid var(--purple-mid);
  border-radius: 7px;
  align-items: center;
  background: white;
  overflow: hidden;
}
.site-header .header-search input[type="search"] {
  border: 0;
  border-radius: 0;
  width: 0;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
}
.header-search-submit {
  background: transparent; border: 0; color: var(--purple);
  padding: 8px; cursor: pointer; flex: 0 0 auto; display: inline-flex;
}
.search-clear {
  border: 0 !important; background: transparent !important;
  color: var(--purple) !important; font: inherit;
  padding: 6px 8px !important; cursor: pointer; flex: 0 0 auto;
}
.search-clear[hidden] { display: none !important; }
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
@media (max-width: 768px) {
  .site-header.search-open .header-search { display: flex; }
}
:is(.archive, .search, .blog) .card-img {
  height: auto !important; aspect-ratio: auto !important;
}
:is(.archive, .search, .blog) .card-img img {
  width: 100% !important; height: auto !important;
  max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important;
}


.search-clear {
  font-size: 26px !important; line-height: 1 !important;
  width: 36px; height: 40px; padding: 0 !important;
  align-items: center; justify-content: center;
}
.search-clear[hidden] {
  display: inline-flex !important; visibility: hidden; pointer-events: none;
}
.search-clear:not([hidden]) { display: inline-flex !important; }
.site-header .header-search { height: 42px; }
.site-header .header-search input[type="search"] { height: 40px; }
.header-account { border-left: 1px solid var(--purple-line); padding-left: 16px; }
.site-header { transition: box-shadow .25s ease; }
.header-inner { transition: padding .25s ease; }
.site-branding img { transition: max-height .25s ease, max-width .25s ease; }
@media (min-width: 769px) {
  .site-header .header-search,
  .site-header.search-open .header-search,
  .site-header.is-stuck .header-search {
    display: flex; width: 190px; min-width: 190px; max-width: 190px;
    flex: 0 0 190px; opacity: 1;
  }
  .site-header .search-toggle { display: none; }
}

/* Homepage cards share the printable preview shadow. */
.home :is(.pm-covers, .pm-tiles) img {
  box-shadow: 0 5px 20px rgba(50, 30, 85, .2), 0 1px 4px rgba(50, 30, 85, .12) !important;
}


.home .pm-tiles img { box-shadow: none !important; }
.header-account .pmm-nav-separator { display: none !important; }
.header-account a[href*="action=logout"] { display: none !important; }
.header-account > a:not(.header-trial) { border: 0 !important; }
.header-account { border-left: 1px solid var(--purple-line); }
.search-clear {
  font-size: 0 !important;
  position: relative;
  align-self: center;
}
.search-clear::before, .search-clear::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.search-clear::after { transform: translate(-50%, -50%) rotate(-45deg); }
:is(.archive, .search, .blog) .grid { align-items: start; }
:is(.archive, .search, .blog) .card-img {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
}
:is(.archive, .search, .blog) .card-img img {
  display: block !important;
  position: static !important;
  min-height: 0 !important;
}