/*
Theme Name: alternatirement
Theme URI: https://alternatirement.com
Description: Child theme of Twenty Twenty-Five for alternatirement.com - the v19 homepage design (centred logo masthead, menu, green featured-article box, framed green-to-orange text panels, homepage sections) in Bitter throughout.
Author: M&M
Version: 3.42.0
Template: twentytwentyfive
Requires at least: 6.6
Text Domain: alternatirement-test
*/

/* ---------- Bitter, self-hosted (explicit faces) ----------
   Declared here as well as in theme.json: style.css is loaded by every
   screen (site and editor alike), so the real faces - including Bold
   Italic - are guaranteed present wherever the text is rendered. */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/bitter2-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/bitter2-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/bitter2-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/bitter2-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/bitter2-600i.woff2') format('woff2');
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/bitter2-700i.woff2') format('woff2');
}

/* ---------- Masthead ---------- */
.ar-masthead { padding-top: 0.6rem; }
.ar-logo { text-align: center; }
.ar-logo img { height: auto; margin-inline: auto; }

/* ---------- Menu row: full-width green lines, evenly spaced ---------- */
.ar-menu-row {
  border-top: 1px solid var(--wp--preset--color--ar-grey);
  border-bottom: 1px solid var(--wp--preset--color--ar-grey);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  margin-top: 1.4rem;
}
.ar-menu-row .wp-block-navigation { font-weight: 600; }
/* Current page (Mike, 2026-10-31): the menu doubles as the breadcrumb -
   the item for the page you are on stays GREEN (no underline at rest);
   hovering it adds the orange underline, like every other item. WordPress's
   own current-menu-item marking never fires for this menu (verified: zero
   occurrences in the served HTML), so the theme marks position itself: a
   body class names the open page (ar-on-<slug>; ar-cat-<slug> on stage
   archives, both set in functions.php) and the matching menu word is lit.
   Hrefs are suffix-matched so relative and absolute forms both count. */
body.ar-on-start-here .ar-nav a[href$="/start-here/"],
body.ar-on-articles .ar-nav a[href$="/articles/"],
body.ar-on-explore .ar-nav a[href$="/explore/"],
body.ar-on-about .ar-nav a[href$="/about/"],
body.ar-on-subscribe .ar-nav a[href$="/subscribe/"],
body.ar-on-transitions .ar-nav a[href$="/transitions/"],
body.ar-cat-pre-tirement .ar-nav a[href$="/category/pre-tirement/"],
body.ar-cat-early-tirement .ar-nav a[href$="/category/early-tirement/"],
body.ar-cat-post-tirement .ar-nav a[href$="/category/post-tirement/"],
body.ar-cat-pre-tirement .ar-nav .ar-transitions > a,
body.ar-cat-early-tirement .ar-nav .ar-transitions > a,
body.ar-cat-post-tirement .ar-nav .ar-transitions > a,
body.ar-cat-pre-tirement .ar-nav .ar-transitions > button,
body.ar-cat-early-tirement .ar-nav .ar-transitions > button,
body.ar-cat-post-tirement .ar-nav .ar-transitions > button {
  color: var(--wp--preset--color--ar-green);
}
/* Hover (Mike, 2026-10-29): the word itself turns green AND keeps the
   orange underline - two signals, not one. */
.ar-menu-row .wp-block-navigation a:hover {
  color: var(--wp--preset--color--ar-green);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--ar-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
/* Submenu (Mike, 2026-10-29): the stage title gets the same green +
   orange underline treatment; the grey descriptor line beneath it is
   deliberately left untouched. */
.ar-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--ar-green);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--ar-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
/* Site-wide focus rule (Mike, 2026-10-30): a mouse click shows no focus
   box anywhere - it added nothing. Keyboard tabbing keeps a clear
   indicator, in the site's orange rather than the old green box. The
   Transitions submenu is the one deliberate exception: there a focused
   stage takes the hover treatment instead (green word, orange underline). */
a:focus:not(:focus-visible) { outline: none; box-shadow: none; }
a:focus-visible { outline: 3px solid var(--wp--preset--color--ar-orange); outline-offset: 2px; }

/* The same green focus box turned up around the logo when clicked -
   removed the same way: clicking the logo simply goes home. */
.wp-block-site-logo a:focus:not(:focus-visible),
.wp-block-site-title a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.ar-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.ar-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  outline: none;
  box-shadow: none;
  color: var(--wp--preset--color--ar-green);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--ar-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}


/* ---------- Custom menu: Transitions dropdown panel (Mike's v12 pattern) ----------
   The menu itself is a standard WordPress Navigation block -- every label and
   link stays editable in the Site Editor. Only the LOOK is custom: the dropdown
   panel, and each stage item shown as a bold title with its explanation beneath
   (the explanations are the three lines of CSS content below). */
.ar-nav .wp-block-navigation__submenu-container {
  border: 1px solid var(--wp--preset--color--ar-line);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(30, 40, 30, 0.14);
  padding: 0.4rem 0;
  min-width: 430px;
  background: #ffffff;
}
.ar-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  color: var(--wp--preset--color--ar-charcoal);
  width: 100%;
  box-sizing: border-box;
}
.ar-nav .wp-block-navigation__submenu-container > li + li .wp-block-navigation-item__content {
  border-top: 1px solid #e8ece8;
}
/* The descriptors hang on the menu ITEM (li), not on the link itself
   (moved 2026-10-29): an ancestor link's underline cannot be cancelled
   by its children, so on the anchor the explanation always picked up
   the orange underline on hover. On the li it is out of reach. */
/* The item row is a flex row in the parent theme, so the descriptor
   must claim a full row of its own or it sits beside the title
   (regression caught by Mike, 2026-10-29). */
.ar-nav li.ar-dd { flex-wrap: wrap; }
.ar-nav li.ar-dd::after {
  flex: 0 0 100%;
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--wp--preset--color--ar-grey);
  white-space: nowrap;
  padding: 0 1.1rem 0.55rem;
  margin-top: -0.5rem;
}
.ar-nav li.ar-dd-pre::after { content: "The preparation years - 18 to late 40s"; }
.ar-nav li.ar-dd-early::after { content: "Late 40s on, while you\2019 re still mobile"; }
.ar-nav li.ar-dd-post::after { content: "Choosing where to land, while you can"; }
/* No chevron on Transitions at desktop widths (Mike, v14) -- the panel opens on
   hover. On phones the toggle stays: there is no hover, it is how the panel opens. */
@media (min-width: 601px) {
  .ar-nav .wp-block-navigation-submenu__toggle { display: none; }
}


/* ---------- Mobile menu overlay: logo OUTSIDE the block (Mike, 2026-11-05) ----------
   WordPress opens the mobile menu as a full-screen panel that covers the page.
   Until v3.37 the whole overlay was pale green with the logo drawn inside it,
   and the menu text ran to the edges of the screen. Mike's correction: the
   logo does not belong in the block, and the text needs padding around it.
   So the overlay itself now wears the paper ground, the logo prints at the
   top of it on that ground (the ::before moves from the content up to the
   container), and the menu alone sits in a pale-green block beneath it -
   the dialog, with panel radius, side margins, and generous padding doing
   the breathing room. Inside the block the dropdown is a plain list, so
   the floating-panel width/border/shadow rules must not apply there. */
.ar-nav .wp-block-navigation__responsive-container.is-menu-open::before {
  content: "";
  display: block;
  width: min(230px, 62vw);
  height: 61px;
  background: url("https://alternatirement.com/wp-content/uploads/2025/04/cropped-LogoDKGreyGreen2.png") center center / contain no-repeat;
  margin: 1.25rem auto 0.5rem;
}
.ar-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ar-paper); }
.ar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  margin: 0.75rem 1rem 1rem;
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: 16px;
  background: #F1F7F1;
}
.ar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; }
.ar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  padding: 0;
  background: transparent;
}

/* ---------- Search box in the menu row ---------- */
.ar-menu-actions { margin-left: auto; }
.ar-search { flex: 0 0 auto; width: 300px; max-width: 100%; }
.ar-search .wp-block-search__inside-wrapper {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #A9BCA9;
  background: var(--wp--preset--color--ar-mist);
  border-radius: 12px;
  padding: 0.27rem 0.35rem 0.27rem 0.55rem;
}
.ar-search .wp-block-search__input { background: transparent; border: 0; min-width: 0; flex: 1 1 auto; font-size: 0.95rem; line-height: 1.35; padding: 0.1rem 0; }
.ar-search .wp-block-search__button { background: transparent; color: var(--wp--preset--color--ar-charcoal); padding: 0.15rem; margin: 0; }
.ar-search .wp-block-search__button svg { width: 20px; height: 20px; }

/* ---------- Trim the page's top padding: maximise real estate above the logo ---------- */
body .wp-site-blocks { padding-top: 0.6rem; }

/* ---------- Desktop layout width: 90% of the screen, applied once at the top level ---------- */
@media (min-width: 783px) {
  .ar-masthead, .ar-front-main, .ar-page-main, .ar-single-main { max-width: min(90%, 1240px); margin-left: auto; margin-right: auto; }
}


/* ---------- Ordinary pages (Start Here, About, ...): the framed sheet ----------
   Mike approved the framed-sheet mockup 2026-10-29: no displayed page title
   (the title field still sets the URL and the browser tab); all the text sits
   in ONE pale-mist panel with a green top rule, matching the homepage cards.
   Top padding halved at Mike's direction 2026-10-30 (the gap from the green strip
   to the first content read as dead air); the bottom stays deliberately tighter. The
   first paragraph is a bold lead-in. A closing line becomes the green button
   by tagging its block with the class ar-cta in the editor (Advanced >
   Additional CSS class) - a paragraph rule, so About's last line is safe. */
.ar-page-main { padding-top: 1.25rem; padding-bottom: 2.5rem; }
.ar-page-main .wp-block-post-content {
  background: var(--wp--preset--color--ar-mist);
  border: 1px solid var(--wp--preset--color--ar-line);
  border-top: 12px solid var(--wp--preset--color--ar-green);
  border-bottom: 12px solid var(--wp--preset--color--ar-orange);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.4rem, 3vw, 1.9rem);
}
.ar-page-main .entry-content > p:first-child { font-size: 1.35rem; line-height: 1.5; font-weight: 600; }
.ar-page-main .entry-content h2 { margin-top: 2.2rem; }
.ar-page-main .entry-content h2:not(:has(+ .is-style-ar-syllables)),
.ar-single-main .entry-content h2:not(:has(+ .is-style-ar-syllables)) {
  font-size: 1.55rem;
  line-height: 1.25;
  margin-top: 2.4rem;
  border-left: 6px solid var(--wp--preset--color--ar-green);
  padding-left: 1.1rem;
}
/* In-sheet H1 (settled 2026-10-31): a real H1 inside the framed sheet
   (Privacy Policy, Disclaimer) takes the H2 treatment scaled up - 2.3rem
   with an 8px green bar. This absorbs the interim X-Large preset Mike
   applied by hand in the editor on those pages. */
.ar-page-main .entry-content h1 {
  font-size: 2.3rem;
  line-height: 1.2;
  border-left: 8px solid var(--wp--preset--color--ar-green);
  padding-left: 1.1rem;
  /* More air top and bottom (Mike, 2026-11-02): the padding also
     stretches the green bar taller, so the title pops. */
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  margin-top: 0.25rem;
  margin-bottom: 1.75rem;
}
/* The Transitions page is UNFRAMED (Mike, 2026-11-03): it is an
   explanation, not an article - the same reasoning that took the
   stage titles out of their banded box (v3.19). So this page alone
   sheds the sheet: no green/orange bands, no ground, no inset; the
   section sits on the page like it does on the homepage, and its
   title keeps the plain section dress instead of the in-sheet H2
   treatment above. Scoped by the page's body class; every other
   page keeps its frame. */
body.ar-on-transitions .ar-page-main .wp-block-post-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* The Newsletter page joins the unframed family (Mike, 2026-11-05):
   like Articles, the stage pages and Transitions, it is furniture,
   not an article - its title comes out of the banded sheet and the
   page breathes on the paper ground. The signup's own panel (below)
   is now the only box on the page. */
body.ar-on-subscribe .ar-page-main .wp-block-post-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* About Us follows on the same reasoning (Mike, 2026-11-05, as a
   look-and-see): it explains who they are - furniture, not an
   article - so its title leaves the banded sheet too. The H1
   keeps its green-bar recipe (that rule lives on the heading
   itself), and the floated photo keeps its geometry; only the
   sheet goes. Fully reversible: delete this one rule and the
   frame returns exactly as it was. */
body.ar-on-about .ar-page-main .wp-block-post-content {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
body.ar-on-transitions .ar-page-main .ar-transitions { margin-top: 0.75rem; }
body.ar-on-transitions .ar-page-main .entry-content h2.ar-section-h {
  font-size: 1.9rem;
  margin-top: 0;
  border-left: none;
  padding-left: 0;
}
.ar-page-main .entry-content h3,
.ar-single-main .entry-content h3 { font-size: 1.22rem; margin-top: 1.9rem; }
.entry-content h2:has(+ .is-style-ar-syllables) { font-size: 2.15rem; line-height: 1.1; letter-spacing: -0.01em; }
.ar-page-main .entry-content > :last-child { margin-bottom: 0; }
.ar-page-main .ar-cta {
  display: inline-block;
  background: var(--wp--preset--color--ar-green);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  padding: 0.7rem 1.6rem;
  border-radius: 12px;
  margin-top: 1.9rem;
  margin-bottom: 0.2rem;
}
/* The whole green area is the button, not just the words (Mike, 2026-10-30):
   the link stretches across the paragraph's padding, so a click anywhere
   on the button counts. */
.ar-page-main .ar-cta a { color: inherit; text-decoration: none; display: block; margin: -0.7rem -1.6rem; padding: 0.7rem 1.6rem; }
/* Hover, for consistency with the homepage buttons (Mike, 2026-10-30):
   the featured box announces hover with a colour shift and the orange
   outline; the green CTA now answers the same way in its own register -
   it deepens to dark green and the orange outline appears. focus-within
   covers keyboard users tabbing onto the link inside. */
.ar-page-main .ar-cta { border: 4px solid var(--wp--preset--color--ar-green); outline: 2px solid transparent; outline-offset: 0; transition: background-color 0.15s ease, color 0.15s ease, outline-color 0.15s ease; }
.entry-content .is-style-ar-button a:focus-visible,
.ar-page-main .ar-cta a:focus-visible { outline: none; }
.entry-content .is-style-ar-button:hover, .entry-content .is-style-ar-button:focus-within,
.ar-page-main .ar-cta:hover, .ar-page-main .ar-cta:focus-within {
  background: #ffffff;
  color: var(--wp--preset--color--ar-green-dark);
  outline-color: var(--wp--preset--color--ar-orange);
}

/* ---------- Featured Post box ---------- */
.ar-featured {
  border-radius: 16px;
  padding: clamp(0.9rem, 2vw, 1.4rem) clamp(1.1rem, 2.8vw, 2.25rem);
}
.ar-featured .ar-kicker {
  color: #96e696;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.ar-featured .wp-block-post-title a { color: #ffffff; text-decoration: none; }
/* The featured picture shows WHOLE (Mike, 2026-10-30, superseding the
   2.49 cover-fill): the calendar is a sheet, not a photo - cropping it
   flat killed the floating-sheet depth. It sits in its column at
   natural proportions, vertically centred, wearing the soft shadow. */
.ar-featured .wp-block-columns { align-items: stretch; }
.ar-featured .wp-block-columns .wp-block-column:last-child { display: flex; align-items: center; }
.ar-featured .wp-block-post-featured-image { position: static; margin: 0; width: 100%; }
.ar-featured .wp-block-post-featured-image img { width: 100%; height: auto; object-fit: contain; }
/* Featured picture shadow (Mike, 2026-10-31 - the standard class shadow was
   wrong here twice over): (1) a box-shadow follows the image FILE's
   rectangle, but the calendar is a white sheet floating on transparency, so
   the shadow hovered as a detached rounded halo instead of hugging the
   sheet; (2) the calibrated tint at standard strength nearly vanishes on
   the box's green. A drop-shadow filter follows the picture's own alpha -
   the sheet casts it, like the Promise's baked shadow - in the same deep
   green family, denser so it reads on green. Featured box only. */
.ar-featured .wp-block-post-featured-image img {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(20, 44, 20, 0.30)) drop-shadow(0 13px 15px rgba(20, 44, 20, 0.32));
}
@media (max-width: 781px) {
  .ar-featured .wp-block-post-featured-image { position: static; }
  .ar-featured .wp-block-post-featured-image img { height: auto; }
}
.ar-featured .wp-block-post-excerpt { color: rgba(255,255,255,0.92); }
/* Both featured-box buttons are ONE style (Mike, 2026-10-29, second
   pass - his exact choreography): at rest they are the Browse-style
   ghost button - white text, white surround, the green box showing
   through. On hover the button fills white, its edge becomes a thin
   green inlay, and an orange outline appears outside it. Identical
   on both buttons. */
.ar-featured .wp-block-read-more,
.ar-featured .ar-browse-btn .wp-block-button__link {
  background: transparent;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  border: 2px solid #ffffff;
  border-radius: 12px;
  padding: 0.7rem 1.6rem;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, outline-color 0.15s ease;
}
.ar-featured .wp-block-read-more:hover,
.ar-featured .wp-block-read-more:focus-visible,
.ar-featured .ar-browse-btn .wp-block-button__link:hover,
.ar-featured .ar-browse-btn .wp-block-button__link:focus-visible {
  background: #ffffff;
  color: var(--wp--preset--color--ar-green-dark);
  border-color: var(--wp--preset--color--ar-green);
  outline-color: var(--wp--preset--color--ar-orange);
}

/* ---------- Soft shadow on the featured graphic (replaces the hard orange offset) ---------- */
/* Header Subscribe button + footer utility row (Mike, 2026-10-30): any
   button in the menu row wears the canonical solid-button dress; footer
   links stay quiet text - buttons are for the actions the site pushes. */
.ar-menu-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: nowrap; }
.ar-menu-row .wp-block-button__link {
  background: var(--wp--preset--color--ar-green); color: #fff; font-weight: 700;
  font-size: 1rem; line-height: 1.25; padding: 0.7rem 1.6rem;
  border: 4px solid var(--wp--preset--color--ar-green); border-radius: 12px;
  text-decoration: none; outline: 2px solid transparent; outline-offset: 0;
  transition: background-color 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
}
.ar-menu-row .wp-block-button__link:hover, .ar-menu-row .wp-block-button__link:focus-visible {
  background: #ffffff; color: var(--wp--preset--color--ar-green-dark);
  outline-color: var(--wp--preset--color--ar-orange);
}
.ar-footer-links { font-size: 0.95rem; margin-bottom: 0.6rem; }
.ar-footer-links a { color: var(--wp--preset--color--ar-grey); text-decoration: none; margin: 0 0.35rem; }
.ar-footer-links a:hover, .ar-footer-links a:focus-visible { color: var(--wp--preset--color--ar-green); text-decoration: underline; }

/* Standard graphic presentation (settled with Mike, 2026-10-30): one soft
   shadow for everything, tinted a deeper shade of the pale green the site
   wears. Strength calibrated the same day from a four-step proof: Mike
   picked step 2 of 4, about 20% below full strength. Photographs add the white mat - "Lifted print"; created graphics
   take the shadow alone - "Lifted sheet". Both live in the Image block's
   Styles panel. */
.is-style-ar-lifted-print img {
  box-sizing: border-box;
  background: #ffffff;
  padding: 12px;
  border: 1px solid var(--wp--preset--color--ar-line);
  box-shadow: 0 13px 27px rgba(31, 58, 31, 0.24), 0 2px 7px rgba(31, 58, 31, 0.16);
}
.is-style-ar-lifted-sheet img {
  box-shadow: 0 13px 27px rgba(31, 58, 31, 0.24), 0 2px 7px rgba(31, 58, 31, 0.16);
}
.ar-soft-shadow img {
  border-radius: 10px;
  box-shadow: 0 13px 27px rgba(31, 58, 31, 0.24), 0 2px 7px rgba(31, 58, 31, 0.16);
}

/* ---------- Small screens: menu row stacks, search goes full width ---------- */
@media (max-width: 782px) {
  body .wp-site-blocks { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.35rem; }
  .wp-block-site-logo.ar-logo img { max-width: 72%; }
  /* hamburger and search share ONE line, per Mike's mobile comments */
  .ar-menu-row { gap: 0.5rem; flex-wrap: nowrap; }
  .ar-search { flex: 0 1 44%; max-width: 170px; min-width: 0; width: auto; }
  /* Mobile review batch (Mike, 2026-11-02):
     1. The search box stopped short of the right edge and clipped its
        own "Search" placeholder. The actions group now stretches and
        right-aligns, and the box gets a definite, wider measure. */
  .ar-menu-actions { flex: 1 1 auto; justify-content: flex-end; }
  .ar-search { flex: 1 1 auto; width: 100%; max-width: 240px; }
  /* 2. The lengthened featured title wrapped to three lines. Down a
        size on mobile only, so it sits on two. v3.37 (Mike,
        2026-11-05): the fixed 1.75rem silently grew when v3.18
        raised the mobile root size - the title is back on three
        lines on his phone. The size is now tied to the viewport
        width instead, so the two-line fit scales with the phone
        itself and a future root change cannot undo it.
        v3.41 (Mike, same day): he also wants the BREAK in a
        particular place - line one "Somebody sold you a date",
        line two "- and a promise". Measured in Bitter Bold: at
        28px the prefixes run 338px ("...a date") and 360px
        ("...a date -") against his ~320-335px line, so the break
        fell after "a". At ~26px the prefixes run ~314/334px,
        which parks the break exactly after "date" across that
        line range. Slightly smaller fluid size, same mechanism. */
  .ar-featured .wp-block-post-title { font-size: clamp(1.25rem, 6.3vw, 1.45rem); line-height: 1.2; }
  /* 3. The ticker's "WHERE IN THE WORLD ARE WE NOW?" label broke
        mid-phrase. Never allowed to break, and sized fluidly so it
        always fits inside the box with the same inset both sides.
        The .ar-front-main scoping is load-bearing: the desktop ticker
        rules sit LATER in this file, so unscoped mobile rules of equal
        weight silently lost to them in v3.01 (the label stayed at
        desktop size and ran into the right edge). */
  .ar-front-main .ar-ticker { padding-left: 1.1rem; padding-right: 1.1rem; }
  .ar-front-main .ar-ticker p { font-size: 0.88rem; }
  .ar-front-main .ar-ticker strong { white-space: nowrap; letter-spacing: 0.01em; font-size: clamp(0.8rem, 3.8vw, 0.95rem); }
  /* The explanation drops to its own line beneath the label on
     phones (Mike, 2026-11-05): the label becomes a block, so the
     route text starts on the next line. Desktop keeps the two in
     line, untouched - this rule lives in the mobile query only. */
  .ar-front-main .ar-ticker strong { display: block; margin-bottom: 0.1rem; }
  /* Band titles on phones (Mike, 2026-11-05): he wants the FAQ
     title on ONE line and the newsletter title on TWO, at one
     shared size across both bands. Solved from the real Bitter
     Bold metrics (validated against the rendered page: predicted
     widths 360/492px vs measured 360/493px at desktop size). At
     the old 1.7rem (32px here) the titles measure 426px and
     583px against his ~260-295px line, hence 2 and 3 lines.
     First pass (v3.40) shrank the type to ~19px; Mike then
     pointed at the real culprit - the bands' 2.2rem side padding
     eating the line. v3.41 cuts the padding on mobile only
     (below), the line widens to ~300-340px, and the titles come
     back UP to ~22px (253->293px and 346->401px) while keeping
     the one-line / two-line fit at every width in the range.
     Fluid in vw so the fit scales with the phone; desktop keeps
     the shared 1.7rem and the full padding. */
  .ar-front-main .ar-news { padding-left: 1.1rem; padding-right: 1.1rem; }
  .ar-front-main .ar-news h2 { font-size: clamp(0.95rem, 5.35vw, 1.3rem); }
  /* 4. "One life, Three transitions" wrapped. Down a size on mobile
        only, so the heading holds one line. Desktop untouched. */
  .ar-transitions .ar-section-h { font-size: 1.45rem; }
}

/* ---------- Paragraph styles (Styles panel: Promise / Key line / Button) -----
   Registered in functions.php; applied by WordPress as is-style-* classes.
   Scoped to article/page content so they behave the same in posts and pages. */
.entry-content .is-style-ar-promise {
  font-style: italic;
  color: #101216;
  font-size: 1.27rem;
  line-height: 1.6;
  border-left: 6px solid var(--wp--preset--color--ar-orange);
  padding: 1rem 0 1rem 1.1rem;
  margin-left: 0.35rem;
}
.entry-content .is-style-ar-keyline {
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.5;
  border-left: 6px solid var(--wp--preset--color--ar-green);
  padding-left: 1.1rem;
  margin-left: 0.35rem;
}
/* Barred blocks hold together beside a floated image (Mike, 2026-10-30):
   a block's BOX slides under a left-floated graphic while only its text
   wraps, which stranded the Highlight's orange bar at the sheet's edge,
   detached from its words. flow-root keeps the whole block - bar and
   text together - in the column beside the float instead. */
.entry-content .is-style-ar-promise,
.entry-content .is-style-ar-keyline { display: flow-root; }
.ar-page-main .entry-content h2,
.ar-single-main .entry-content h2 { display: flow-root; }
/* Float-wrap controls (Mike, 2026-10-30). Exact line breaks can never be
   locked across browsers or widths - text rendering sees to that - but
   PLACEMENT can be guaranteed:
   - .ar-clear on a paragraph (Block tab > Advanced > Additional CSS
     class) forces it to start BELOW any floated graphic, at any width,
     in every browser.
   - On phone-width screens a floated graphic un-floats and centres at
     full width; a sliver text column beside it helps nobody.
   - text-wrap: pretty where supported simply avoids stranded
     single-word last lines; it does not promise identical breaks. */
.entry-content .ar-clear { clear: both; }
/* Floated graphics: the file carries the spacing. Core's wide float
   margins made the text-side gap and the sheet-side gap two different
   numbers, so a graphic looked off-balance aligned either way (Mike,
   2026-10-30). The float now adds only a whisper of gutter and the
   graphic's own even padding does the rest, both sides alike. */
.entry-content .wp-block-image.alignleft { margin: 0.3em 0.5rem 0.75em 0; }
.entry-content .wp-block-image.alignright { margin: 0.3em 0 0.75em 0.5rem; }
/* Standing image spacing rule (Mike, 2026-11-03, generalising the
   v2.58 float rule above): every picture placed in page or article
   content sits TIGHT to the text around it - non-floated images get
   their top and bottom margins carved to 0.75rem instead of the
   editor's default block spacing; floated images keep the v2.58
   geometry (0.5rem gutter on the text side, none on the sheet side,
   the graphic's own padding setting the inset). Applies to every
   new page and image without being asked again. */
.entry-content .wp-block-image { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.entry-content p { text-wrap: pretty; }
@media (max-width: 640px) {
  .entry-content .wp-block-image.alignleft,
  .entry-content .wp-block-image.alignright { float: none; margin-left: auto; margin-right: auto; }
}

/* Links inside article text declare themselves at rest (Mike, 2026-10-30):
   on a phone there is no hover to reveal them, so a link is green and
   underlined at all times in body copy. (Button-styled paragraphs keep
   their own dress - their rule outranks this one.) */
.entry-content p a, .entry-content li a {
  color: var(--wp--preset--color--ar-green);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--ar-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry-content .is-style-ar-button {
  display: inline-block;
  background: var(--wp--preset--color--ar-green);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  padding: 0.7rem 1.6rem;
  border: 4px solid var(--wp--preset--color--ar-green);
  border-radius: 12px;
  margin-top: 1.9rem;
  margin-bottom: 0.2rem;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: background-color 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
}
.entry-content .is-style-ar-button a { color: inherit; text-decoration: none; display: block; margin: -0.7rem -1.6rem; padding: 0.7rem 1.6rem; }
.entry-content .is-style-ar-syllables {
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #69706C;
  margin-top: -0.25rem;
}
.entry-content .is-style-ar-syllables::before { content: "[ "; }
.entry-content .is-style-ar-syllables::after { content: " ]"; }

/* Stage line (Mike, 2026-10-29, refined same evening): NOT a smaller
   copy of the green-bar headlines. The stage NAME is the highlight -
   large, bold, dark - and the descriptor after the dash ("- the
   groundwork.") stays ordinary body text. The name is wrapped in
   .ar-stage-name by the render filter in functions.php; space above
   the line is what sets it apart. */
.entry-content .is-style-ar-stageline {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.45;
  color: #3C4145;
  margin-top: 2rem;
}
.entry-content .is-style-ar-stageline .ar-stage-name {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1B1E22;
}

/* ---------- Articles (single posts): the same framed sheet ----------
   Mike's standing frame rule (2026-10-29): every framed text panel runs
   green strip at the top, orange strip at the bottom - posts included.
   TT5's single template keeps its 780px reading measure; the sheet, the
   lead paragraph and the tight bottom carry over from the page template. */
.ar-single-main .wp-block-post-content {
  background: var(--wp--preset--color--ar-mist);
  border: 1px solid var(--wp--preset--color--ar-line);
  border-top: 12px solid var(--wp--preset--color--ar-green);
  border-bottom: 12px solid var(--wp--preset--color--ar-orange);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.4rem, 3vw, 1.9rem);
}
.ar-single-main .entry-content > p:first-child { font-size: 1.35rem; line-height: 1.5; font-weight: 600; }
.ar-single-main .entry-content > :last-child { margin-bottom: 0; }
.ar-page-main .wp-block-post-content, .ar-single-main .wp-block-post-content { color: #22252A; }

/* ---------- Homepage sections (settled at mockup v19, built v2.7) ---------- */
.ar-ticker { border-radius: 16px; padding: 0.85rem 1.4rem; margin-top: 1.1rem; }
.ar-ticker p { margin: 0; font-size: 1.02rem; }
.ar-ticker strong { color: var(--wp--preset--color--ar-orange); letter-spacing: 0.02em; }
.ar-section { margin-top: 2.6rem; }
.ar-section-h { font-size: 1.9rem; font-weight: 700; margin: 0 0 0.4rem; }
/* Parked homepage sections (Mike, 2026-11-03): Latest articles and
   Find your way in are hidden until the library earns them - Latest
   returns at eight-plus articles on a monthly rhythm, Find your way
   in when its questions can land on stocked shelves (its questions
   work as FAQ entries meanwhile). The sections stay built in the
   Front Page template; deleting this rule restores both. */
.ar-front-main .ar-latest, .ar-front-main .ar-findway { display: none; }
.ar-section-sub { color: var(--wp--preset--color--ar-grey); font-size: 1.1rem; margin: 0 0 1.4rem; }
.ar-section-head { margin-bottom: 1.1rem; }
.ar-section-head .ar-section-h { margin: 0; }
.ar-all-link { margin: 0; font-weight: 700; }
.ar-all-link a { color: var(--wp--preset--color--ar-green); text-decoration: none; }

/* Three transitions: road line + numbered stops on desktop, cards below */
.ar-trans-cards { position: relative; gap: 1.5rem; }
.ar-trans-card {
  background: #F1F7F1;
  border: 1px solid var(--wp--preset--color--ar-line);
  border-top: 16px solid var(--wp--preset--color--ar-charcoal);
  border-bottom: 16px solid var(--wp--preset--color--ar-charcoal);
  border-radius: 16px;
  padding: 1.3rem 1.5rem 1rem;
  height: 100%;
}
.ar-trans-pre { border-top-color: var(--wp--preset--color--ar-yellow); border-bottom-color: var(--wp--preset--color--ar-yellow); }
.ar-trans-early { border-top-color: var(--wp--preset--color--ar-blue); border-bottom-color: var(--wp--preset--color--ar-blue); }
.ar-trans-post { border-top-color: var(--wp--preset--color--ar-purple); border-bottom-color: var(--wp--preset--color--ar-purple); }
.ar-trans-card h3 { font-size: 1.45rem; margin: 0 0 0.25rem; }
.ar-trans-age { font-weight: 700; margin: 0 0 0.6rem; }
.ar-trans-pre .ar-trans-age, .ar-trans-pre .ar-trans-link a { color: var(--wp--preset--color--ar-gold); }
.ar-trans-early .ar-trans-age, .ar-trans-early .ar-trans-link a { color: var(--wp--preset--color--ar-blue); }
.ar-trans-post .ar-trans-age, .ar-trans-post .ar-trans-link a { color: var(--wp--preset--color--ar-purple); }
.ar-trans-card p { margin-top: 0; }
.ar-trans-link { font-weight: 700; margin-bottom: 0; }
.ar-trans-link a { text-decoration: none; }
/* Whole transition card is the link (Mike, 2026-10-30): the Start here
   anchor stretches over the card, article-card style - no button needed -
   and the card answers hover in the same language as the article cards:
   the tint deepens a step and a soft shadow lands. The gap above the
   Start here line now equals the gap above the description by
   construction: both are the age line's 0.6rem. */
.ar-trans-card { position: relative; }
.ar-trans-card .ar-trans-link a::after { content: ""; position: absolute; inset: 0; }
.ar-trans-card:hover { background: #E8F2E8; box-shadow: 0 4px 18px rgba(0, 92, 0, 0.10); }
.ar-trans-card:hover .ar-trans-link a { text-decoration: underline; }
.ar-trans-card p:not(.ar-trans-age):not(.ar-trans-link) { margin-bottom: 0; }
.ar-trans-link { margin-top: 0.6rem; }
/* Cascade-proofing (Mike, 2026-10-30): WordPress's own flow-layout rule
   hands every card child margin-block-start 1.2rem / margin-block-end 0
   at the SAME specificity as the card's own rules, so which gap won
   depended on stylesheet order - the padding change could fail to stick.
   These stronger selectors settle it deterministically: the gap above
   the description and the gap above Start here are both the age line's
   0.6rem, by construction and by cascade. */
.ar-trans-card .ar-trans-age { margin-bottom: 0.6rem; }
.ar-trans-card p.wp-block-paragraph:not(.ar-trans-link) { margin-top: 0; }
.ar-trans-card .ar-trans-link { margin-top: 0.6rem; }
/* Card titles inside page content (Mike, 2026-11-03): the page
   template's article H3 rule (.ar-page-main .entry-content h3 -
   1.22rem with a 1.9rem top margin, meant for article subheadings)
   outranks the card's own title rule and leaks into the transition
   cards on the Transitions page: titles sat smaller and far lower
   than on the homepage, with the extra air only at the top. This
   re-asserts the card title's own dress inside page and post
   content, so the cards render identically wherever the section
   appears. */
.ar-page-main .entry-content .ar-trans-card h3,
.ar-single-main .entry-content .ar-trans-card h3 { font-size: 1.45rem; margin: 0 0 0.25rem; }
@media (min-width: 783px) {
  .ar-transitions .ar-trans-cards { margin-top: 5.2rem; }
  .ar-transitions .ar-trans-cards::before {
    content: ""; position: absolute; left: 4%; right: 4%; top: -3.1rem; height: 8px;
    background: #BEDCBE; border-radius: 4px;
  }
  .ar-trans-cards .wp-block-column { position: relative; counter-increment: ar-stop; }
  .ar-transitions .ar-trans-cards { counter-reset: ar-stop; }
  .ar-trans-cards .wp-block-column::before {
    content: counter(ar-stop);
    position: absolute; top: -4.35rem; left: 2.2rem;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.25rem; color: #fff;
    background: var(--wp--preset--color--ar-charcoal); z-index: 1;
  }
  .ar-trans-cards .wp-block-column:nth-child(1)::before { background: var(--wp--preset--color--ar-yellow); color: var(--wp--preset--color--ar-charcoal); }
  .ar-trans-cards .wp-block-column:nth-child(2)::before { background: var(--wp--preset--color--ar-blue); }
  .ar-trans-cards .wp-block-column:nth-child(3)::before { background: var(--wp--preset--color--ar-purple); }
}

/* Latest articles: tall card left (spans both rows), two stacked right */
.ar-latest .wp-block-post-template {
  display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0;
}
@media (min-width: 783px) {
  .ar-latest .wp-block-post-template { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; }
  .ar-latest .wp-block-post-template > li:first-child { grid-row: 1 / span 2; }
}
.ar-card {
  background: #fff; border: 1px solid var(--wp--preset--color--ar-line);
  border-radius: 16px; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
}
.ar-latest .wp-block-post-template > li:first-child .ar-card { background: #E4F5E4; }
.ar-card .wp-block-post-featured-image { margin: 0; }
.ar-card .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ar-latest .wp-block-post-template > li:not(:first-child) .wp-block-post-featured-image { max-height: 120px; overflow: hidden; }
.ar-card-body { padding: 1.1rem 1.4rem 1.3rem; }
.ar-card-body .wp-block-post-title { font-size: 1.35rem; line-height: 1.3; margin: 0 0 0.5rem; }
.ar-latest .wp-block-post-template > li:first-child .wp-block-post-title { font-size: 1.7rem; }
.ar-card-body .wp-block-post-title a { color: inherit; text-decoration: none; }
.ar-card-body .wp-block-post-excerpt { color: var(--wp--preset--color--ar-grey); margin: 0 0 0.9rem; }
.ar-card-body .wp-block-post-excerpt p { margin: 0; }
/* A visible read link at the foot of every article card (Mike,
   2026-11-03): the whole card is already clickable, but nothing on
   it said so. Dressed as a plain text link to suit the plain cards -
   the featured box's label and arrow, without the button. The card's
   stretched title link carries the click, so this is pure signpost. */
.ar-card-body::after {
  content: "Read article →";
  display: block;
  margin-top: 0.15rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--wp--preset--color--ar-green-dark);
}
.ar-card:hover .ar-card-body::after { color: var(--wp--preset--color--ar-green); }
.ar-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ar-chips a {
  background: var(--wp--preset--color--ar-green); color: #fff; text-decoration: none;
  font-size: 0.82rem; font-weight: 700; padding: 0.28rem 0.7rem; border-radius: 8px;
}
.ar-chips .wp-block-post-terms__separator { display: none; }

/* Find your way in: situation table */
.ar-findway-table table { width: 100%; border-collapse: collapse; border: 1px solid var(--wp--preset--color--ar-line); border-radius: 8px; overflow: hidden; }
.ar-findway-table th {
  background: var(--wp--preset--color--ar-green); color: #fff; text-align: left;
  font-size: 1.05rem; padding: 0.8rem 1.2rem; border: none;
}
.ar-findway-table td { padding: 0.8rem 1.2rem; border: none; font-size: 1.02rem; }
.ar-findway-table tbody tr:nth-child(odd) { background: #F3F9F3; }
.ar-findway-table td a { color: var(--wp--preset--color--ar-green); font-weight: 700; text-decoration: none; }

/* Newsletter: orange block */
.ar-news { border-radius: 16px; padding: 1.4rem 2.2rem; margin-top: 2.6rem; }
.ar-news h2 { font-size: 1.7rem; margin: 0 0 0.4rem; }
.ar-news-text p { margin: 0; color: #FFEEE5; }
.ar-news-btn .wp-block-button__link {
  background: var(--wp--preset--color--ar-charcoal); color: #fff;
  border-radius: 10px; font-weight: 700; padding: 0.75rem 1.6rem;
}

/* ---------- Stage (category) archives (Mike, 2026-10-29) ----------
   Replaces the default WordPress archive look: no "Category:" prefix,
   the title as a plain page heading with the category description
   under it as an ordinary paragraph, then the articles as excerpt
   cards in a scrolling list. (Until 2026-11-03 the title and
   description sat in a bordered panel banded top and bottom in the
   stage's colour; Mike took them out of the box - bands read as an
   article, and these pages are explanations and listings, not
   articles. The title now opens the page exactly as Articles,
   Explore and About Us do.) Cards are banded top
   and bottom too, colour-coded by the categories the article is filed
   under - one stage its colour, two stages half-and-half, three a
   three-way split, none of them charcoal. All rules are scoped to
   .ar-archive-main so they can never touch the homepage Latest cards,
   which share the ar-card class names. */
.ar-archive-main { width: min(90%, 1240px); margin-inline: auto; padding: 1.6rem 0 2.6rem; }
.ar-archive-main .ar-stage-head { margin-bottom: 1.6rem; }
.ar-archive-main .ar-stage-title {
  font-size: 2.3rem;
  line-height: 1.2;
  border-left: 8px solid var(--wp--preset--color--ar-green);
  padding-left: 1.1rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  margin-top: 0.25rem;
  margin-bottom: 0.9rem;
}
.ar-archive-main .ar-stage-desc { color: #3C4145; font-size: 1.05rem; line-height: 1.55; max-width: 46rem; }
.ar-archive-main .ar-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.ar-archive-main .ar-card { position: relative; background: #F7FAF7; border: 1px solid var(--wp--preset--color--ar-line); border-radius: 16px; overflow: hidden; }
.ar-archive-main .ar-card-bar { height: 8px; background: var(--wp--preset--color--ar-charcoal); }
.ar-archive-main .wp-block-post.category-pre-tirement .ar-card-bar { background: #F5B301; }
.ar-archive-main .wp-block-post.category-early-tirement .ar-card-bar { background: #2F6DB3; }
.ar-archive-main .wp-block-post.category-post-tirement .ar-card-bar { background: #7A2E9E; }
.ar-archive-main .wp-block-post.category-pre-tirement.category-early-tirement .ar-card-bar { background: linear-gradient(90deg, #F5B301 0 50%, #2F6DB3 50% 100%); }
.ar-archive-main .wp-block-post.category-pre-tirement.category-post-tirement .ar-card-bar { background: linear-gradient(90deg, #F5B301 0 50%, #7A2E9E 50% 100%); }
.ar-archive-main .wp-block-post.category-early-tirement.category-post-tirement .ar-card-bar { background: linear-gradient(90deg, #2F6DB3 0 50%, #7A2E9E 50% 100%); }
.ar-archive-main .wp-block-post.category-pre-tirement.category-early-tirement.category-post-tirement .ar-card-bar { background: linear-gradient(90deg, #F5B301 0 33.4%, #2F6DB3 33.4% 66.7%, #7A2E9E 66.7% 100%); }
/* Card layout mirrors the featured box (Mike, 2026-10-29): text on the
   left, the article's picture on the right as a visual reminder - not a
   full-width banner leading the card. On phones the picture stacks
   under the text. A post with no picture simply gets a full-width text. */
.ar-archive-main .ar-card-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
.ar-archive-main .ar-card-body { flex: 1 1 auto; min-width: 0; padding: 0.35rem 1.05rem 0.4rem; }
.ar-archive-main .ar-card-img { flex: 0 0 36%; align-self: flex-start; margin: 0.35rem 1.05rem 0.4rem 0; }
.ar-archive-main .ar-card-img img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ar-archive-main .ar-card-title { font-size: 1.3rem; line-height: 1.3; margin: 0 0 0.45rem; }
.ar-archive-main .ar-card-title a { color: #1B1E22; text-decoration: none; }
.ar-archive-main .ar-card { transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.ar-archive-main .ar-card:hover { background: #F1F7F1; box-shadow: 0 4px 18px rgba(0, 92, 0, 0.10); }
.ar-archive-main .ar-card-title a::after { content: ""; position: absolute; inset: 0; }
.ar-archive-main .ar-card-title a:hover { color: var(--wp--preset--color--ar-green); }
.ar-archive-main .ar-card-excerpt { color: #3C4145; margin: 0; font-size: 0.94rem; line-height: 1.5; }
.ar-archive-main .ar-card-body::after { margin-top: 0.6rem; }
/* Two half-width cards per row (Mike, 2026-10-29): excerpts hard-clamped
   at four lines in the narrower column; single column on small screens. */
/* Full excerpts on the cards - no clamp, no trim (Mike, 2026-10-29). */
@media (max-width: 760px) {
  .ar-archive-main .ar-card-list { grid-template-columns: 1fr; }
  .ar-archive-main .ar-card-img { display: none; }
}
.ar-archive-main .ar-no-results { color: #3C4145; }

/* Footer brand mark: the a|t, centred, crowning the copyright line */
.ar-footer-mark { display: flex; justify-content: center; margin: 1rem auto 0.3rem; }
.ar-footer-mark img { width: 52px; height: auto; }

/* Footer rhythm (v2.71): copyright sits tight under the mark; links carry more presence */
.ar-footer .ar-copyright { margin-top: 0.15rem; }
.ar-footer-links { font-size: 1.1rem; font-weight: 500; }
.ar-footer-links a { color: #383C40; }

/* Newsletter band, one line (v2.72): text left, button right; the button is
   the canonical ghost - the featured pair's dress - in paragraph form, so
   the whole button is the link. The orange hover ring has nowhere to show
   on an orange ground; the fill and the words carry the hover. */
.ar-news-row { column-gap: 2rem; row-gap: 0.9rem; }
.ar-news .ar-band-btn {
  flex: none; margin: 0; font-size: 1rem; line-height: 1.25; font-weight: 700;
  color: #fff; background: transparent; border: 2px solid #fff; border-radius: 12px;
  padding: 0.7rem 2.2rem;
}
.ar-news .ar-band-btn a { display: block; margin: -0.7rem -2.2rem; padding: 0.7rem 2.2rem; color: inherit; text-decoration: none; }
.ar-news .ar-band-btn:hover { background: #fff; color: var(--wp--preset--color--ar-green-dark); border-color: var(--wp--preset--color--ar-green); outline: 2px solid var(--wp--preset--color--ar-orange); outline-offset: 2px; }

/* FAQ band (Mike, 2026-11-03, colour corrected same evening): the band
   is the newsletter band's twin in size and layout, but its ground is
   the featured article box's green (ar-green), not orange. Its button
   keeps the canonical ghost dress above - the same button as Sign me
   up - because a solid green button on a green band would vanish;
   that is also the dress the featured box's own buttons wear. */
/* FAQ band button cloned from the featured article's button (Mike,
   2026-11-03, explicit): white outline and white text at rest; on
   hover the background fills white, a thin green edge appears and an
   orange outline lands outside - the featured choreography exactly,
   including its size, so the band button narrows from the Sign me up
   padding (2.2rem) to the featured padding (1.6rem). The colours were
   already identical; only the padding lines the two up. */
.ar-faqband .ar-band-btn { padding: 0.7rem 1.6rem; }
.ar-faqband .ar-band-btn a { margin: -0.7rem -1.6rem; padding: 0.7rem 1.6rem; }

/* Band pair rhythm (Mike, 2026-11-03): the green FAQ band and the
   orange newsletter band sit as a pair, so the gap between them is
   HALF the standard section gap - the orange band's top margin is
   halved when it directly follows the green one. */
.ar-front-main .ar-faqband + .ar-news:not(.ar-faqband) { margin-top: 1.3rem; }

/* Band button mirror rule (Mike, 2026-11-03): each band's button
   hovers by the same law in mirror image - fill white, the border
   inlay takes the band's OWN colour, the outline takes the OTHER
   band's colour. The green band's button (border green, outline
   orange) is the generic rule above; the orange band's button flips
   it: border orange, outline green. */
.ar-news:not(.ar-faqband) .ar-band-btn:hover { border-color: var(--wp--preset--color--ar-orange); outline-color: var(--wp--preset--color--ar-green); }

/* Footer divider, guaranteed (v2.74): the grey line over the footer,
   set in CSS as well as in the part, so it cannot go missing. */
/* (the footer divider lives under the links row - see below) */
footer.wp-block-group.ar-footer { padding-top: 1.75rem; padding-bottom: 2.5rem; }

/* Mobile reading size (Mike, 2026-10-30; second step 2026-11-03):
   standard text larger on small screens - every rem on the page
   scales with the root. The first step (17.5px) shipped but still
   read small to him on the phone, so the root steps up again and
   article/page copy gets more breathing room in its line height. */
@media (max-width: 700px) {
  html { font-size: 18.75px; }
  .ar-page-main .entry-content p:not([class*="is-style"]), .ar-page-main .entry-content li,
  .ar-single-main .entry-content p:not([class*="is-style"]), .ar-single-main .entry-content li { line-height: 1.7; }
  /* The transition cards are exempt from the roomier line height
     (Mike, 2026-11-03): the cards must be an exact copy of the
     front page's wherever the section appears, and the front page
     copy keeps the base line height. */
  body .ar-page-main .entry-content .ar-trans-card p,
  body .ar-single-main .entry-content .ar-trans-card p { line-height: inherit; }
}

/* Footer divider (Mike, 2026-10-30, corrected): the masthead's own line -
   1px solid ar-grey - under the links row, dividing it from the mark and
   copyright below. Not full width, not above the links. */
.ar-footer-links { margin-bottom: 0; }
.ar-footer-links-band { border-top: 1px solid var(--wp--preset--color--ar-grey); border-bottom: 1px solid var(--wp--preset--color--ar-grey); padding: 0.85rem 0; }
.ar-footer-mark { margin-top: 2.25rem; }

/* Buttons get a physical lift (Mike, 2026-10-30): the graphics' own
   green-tinted soft shadow, scaled to button size, on every button the
   site wears. The shadow gives each button its own edge and separation,
   so it reads as one raised object on any ground - green box, orange
   band, pale sheet - instead of changing character with the background.
   Hover lifts a touch more; pressing dips it. Colours untouched. */
.is-style-ar-button, .ar-cta, .ar-band-btn,
.ar-featured .wp-block-button__link, .ar-menu-row .wp-block-button__link {
  box-shadow: 0 4px 10px rgba(31, 58, 31, 0.28), 0 1px 3px rgba(31, 58, 31, 0.20);
}
.is-style-ar-button:hover, .ar-cta:hover, .ar-band-btn:hover,
.ar-featured .wp-block-button__link:hover, .ar-menu-row .wp-block-button__link:hover,
.ar-featured .wp-block-button__link:focus-visible, .ar-menu-row .wp-block-button__link:focus-visible {
  box-shadow: 0 7px 16px rgba(31, 58, 31, 0.34), 0 2px 5px rgba(31, 58, 31, 0.22);
}
.is-style-ar-button:active, .ar-cta:active, .ar-band-btn:active,
.ar-featured .wp-block-button__link:active, .ar-menu-row .wp-block-button__link:active {
  box-shadow: 0 2px 5px rgba(31, 58, 31, 0.26), 0 1px 2px rgba(31, 58, 31, 0.20);
}

/* The band button's label never wraps (Mike, 2026-10-30): adding the
   arrow pushed it to two lines and fattened the button. One line,
   always - the widened padding gives it the room. */
.ar-news .ar-band-btn, .ar-news .ar-band-btn a { white-space: nowrap; }

/* Footer social row (Mike, 2026-10-30): Facebook + X, logos only,
   charcoal with a green hover, centred above the links band. */
.ar-social { margin: 0 0 1.1rem; font-size: 2.25rem; }
.ar-social .wp-block-social-link:hover { color: var(--wp--preset--color--ar-green); }

/* ---------- Subscribe form (MailPoet) ----------
   The /subscribe/ form is a MailPoet shortcode form that arrived in
   MailPoet's default dress (parked 2026-10-31, shipped in the v3.00
   catch-up round). This puts it in the site's clothes: Bitter, fields
   in the search-box family (mist ground, #A9BCA9 outline, 12px
   radius), and the Subscribe button in the canonical solid-green
   dress with the site hover and lift. */
.mailpoet_form { font-family: 'Bitter', serif; }
.mailpoet_form .mailpoet_paragraph { margin-bottom: 1rem; }
.mailpoet_form label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.mailpoet_form input.mailpoet_text {
  width: 100%;
  box-sizing: border-box;
  background: var(--wp--preset--color--ar-mist);
  border: 1px solid #A9BCA9;
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 1rem;
  color: var(--wp--preset--color--ar-charcoal);
}
.mailpoet_form input.mailpoet_text:focus {
  outline: 3px solid var(--wp--preset--color--ar-orange);
  outline-offset: 1px;
}
.mailpoet_form .mailpoet_submit,
.mailpoet_form input[type="submit"] {
  background: var(--wp--preset--color--ar-green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  padding: 0.7rem 1.6rem;
  border: 4px solid var(--wp--preset--color--ar-green);
  border-radius: 12px;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: 0 4px 10px rgba(31, 58, 31, 0.28), 0 1px 3px rgba(31, 58, 31, 0.20);
  transition: background-color 0.15s ease, color 0.15s ease, outline-color 0.15s ease, box-shadow 0.15s ease;
}
.mailpoet_form .mailpoet_submit:hover,
.mailpoet_form input[type="submit"]:hover {
  background: #ffffff;
  color: var(--wp--preset--color--ar-green-dark);
  outline-color: var(--wp--preset--color--ar-orange);
  box-shadow: 0 7px 16px rgba(31, 58, 31, 0.34), 0 2px 5px rgba(31, 58, 31, 0.22);
}
.mailpoet_form .mailpoet_submit:active,
.mailpoet_form input[type="submit"]:active {
  box-shadow: 0 2px 5px rgba(31, 58, 31, 0.26), 0 1px 2px rgba(31, 58, 31, 0.20);
}
/* The success message gets real presence (Mike, 2026-11-02): it is the
   payoff moment of the signup, so it stands at display size rather than
   body size, in the dark green already used for it. */
.mailpoet_form .mailpoet_validate_success,
.mailpoet_form .mailpoet_message p { font-size: 1.65rem; line-height: 1.45; }
.mailpoet_form .mailpoet_validate_success { color: var(--wp--preset--color--ar-green-dark); font-weight: 600; }
.mailpoet_form .mailpoet_validate_error,
.mailpoet_form .parsley-errors-list { color: #B3261E; }

/* Subscribe page layout (Mike, 2026-11-02; twice revised same day;
   superseded 2026-11-03, see the panel rule below): the signup stack
   was LEFT-aligned at 60% of the sheet's content width after Mike
   rejected a fixed pixel cap. The email box and the Subscribe button
   share the width and the email box stands at the button's height.
   The Turnstile widget itself is fixed at 300px by Cloudflare and
   cannot change; its left edge lines up with the rest. Scoped to the
   Subscribe page via its body class so no other MailPoet surface is
   touched. */
/* The form as a centred panel (Mike, 2026-11-03): the 60% column read
   as disjointed and floating, so the form itself becomes a composed
   block - the standard pale green ground, the hairline outline (the
   FAQ answer box's micro line), 16px panel corners, generous padding -
   centred on the page. Inside it the fields keep one left-aligned
   column, capped at 460px so the email box never stretches the full
   panel width; the v3.18 equal-air spacing around the Turnstile
   rides inside unchanged. */
/* ONE panel, centred (Mike, 2026-11-05, rebuilt after measuring
   the live page): MailPoet wraps the form in its own full-width
   div, and BOTH layers carry the .mailpoet_form class - so the
   old generic rule dressed wrapper AND form as two nested
   panels, and MailPoet's own stylesheet sets the wrapper to
   width:100% by ID, which beat the theme's width cap, zeroed the
   auto margins, and let the panel's padding push it past the
   sheet's right edge: two blocks, one overflowing, nothing
   centred, exactly as Mike reported. The dress now goes on the
   wrapper DIV only (the form element inside keeps just
   MailPoet's own modest padding, no dress of ours), the width is
   capped by max-width - which MailPoet's ID rule does not
   contest - and border-box sizing keeps the padding inside the
   cap, so margin:auto can centre it for real. The radius below
   carries !important because MailPoet's generated form CSS sets
   border-radius: 0 on this same wrapper by ID (a form-design
   value), which outranks any class rule - left alone, the panel
   renders square, as Mike found on desktop (2026-11-05). */
body.ar-on-subscribe div.mailpoet_form {
  box-sizing: border-box;
  max-width: 680px;
  margin: 1.75rem auto;
  text-align: left;
  background: #F1F7F1;
  border: 1px solid var(--wp--preset--color--ar-line);
  border-radius: 16px !important;
  padding: 2.25rem 2.5rem;
}
body.ar-on-subscribe .mailpoet_form .mailpoet_paragraph,
body.ar-on-subscribe .mailpoet_form .mailpoet_form_paragraph,
body.ar-on-subscribe .mailpoet_form .mailpoet_message { max-width: 460px; margin-inline: auto; }
/* Name row aligned to the email field (Mike, 2026-11-05): the
   columns row already shares the 460px cap (it carries the
   mailpoet_paragraph class), but MailPoet's own column widths
   left the two name boxes narrower than the row, edges adrift
   from the email field below. Impose the geometry: the row is a
   flex line spanning the full capped width, each name takes an
   equal half, and a small gap - not MailPoet's 20px margin,
   which its ID rule would otherwise keep - separates them.
   First name's left edge then sits on the email's left edge and
   last name's right edge on the email's right. Desktop widths
   only; below 500px MailPoet stacks the names full-width, which
   already aligns. */
@media (min-width: 501px) {
  body.ar-on-subscribe .mailpoet_form .mailpoet_form_columns { display: flex; gap: 0.75rem; }
  body.ar-on-subscribe .mailpoet_form .mailpoet_form_column { flex: 1 1 0; min-width: 0; margin-left: 0 !important; }
}
@media (max-width: 782px) {
  body.ar-on-subscribe div.mailpoet_form { padding: 1.5rem 1.25rem; }
}
body.ar-on-subscribe .mailpoet_form .mailpoet_paragraph { margin-bottom: 0.55rem; }
/* Vertical rhythm (Mike, 2026-11-02, queued for this zip): the name
   fields sit tight to the email field; the Cloudflare check then
   stands off with EQUAL air above and below it - the email field's
   own bottom margin is zeroed and the submit button's paragraph
   carries none, so the Turnstile wrapper's 1.5rem margins are the
   whole of both gaps. */
body.ar-on-subscribe .mailpoet_form .mailpoet_paragraph:has(input[type="email"]) { margin-bottom: 0; }
body.ar-on-subscribe .mailpoet_form .mailpoet_form_paragraph:has(.mailpoet_turnstile) { margin: 1.5rem 0; }
body.ar-on-subscribe .mailpoet_form .mailpoet_paragraph:has(.mailpoet_submit) { margin-top: 0; margin-bottom: 0; }
body.ar-on-subscribe .mailpoet_form label { text-align: left; }
body.ar-on-subscribe .mailpoet_form input.mailpoet_text { min-height: 3.15rem; padding: 0.7rem 0.9rem; }
body.ar-on-subscribe .mailpoet_form .mailpoet_submit,
body.ar-on-subscribe .mailpoet_form input[type="submit"] { width: 100%; min-height: 3.15rem; box-sizing: border-box; }
body.ar-on-subscribe .mailpoet_form .cf-turnstile { display: flex; justify-content: flex-start; }
body.ar-on-subscribe .mailpoet_form .mailpoet_validate_success { text-align: left; }

/* FAQ accordion (Mike, 2026-11-02): the Hexapoda FAQ behaviour - a
   list of questions, click one and its answer unfolds beneath it -
   rebuilt with the WordPress core Accordion block (no FAQ plugin;
   the Hexapoda one is exactly the kind of third-party dependency
   that rots) and dressed in this site's clothes: each item its own
   nothing boxed at all except the answer, which opens as a shaded
   pale green panel under its plain question, in italics. Inert
   until an Accordion block exists. */
.wp-block-accordion { margin-top: 1.5rem; }
/* NO box around the question (Mike, 2026-11-02): an item is just a
   question line standing on the page; the only box anywhere is the
   shaded answer that opens beneath it. */
.wp-block-accordion-item {
  margin-bottom: 0;
}
/* Inter-question spacing (Mike, 2026-11-03, settled v3.33 after
   three rounds): he wants the questions at text-line density -
   the next question basically on the next line, no extra air.
   Three separate contributors had to die to get there: WordPress
   flow layout's block-gap top margin on each item (zeroed here),
   the article-subheading rule's 1.9rem top margin riding on the
   H3 questions (pinned below), and - the big one, found last -
   the CLOSED answer panels still holding their full box between
   the questions (see the panel rules). What remains is declared
   here: 0.2rem under each item plus the question bar's own
   0.15rem padding - line-to-line, by construction. */
.entry-content .wp-block-accordion-item { margin-top: 0; }
/* The REAL gap culprit (Mike, 2026-11-03, after v3.31 halved the
   item margins and the gap barely moved): every question is an
   H3, and the page template's article-subheading rule hands
   every H3 in page content a 1.9rem top margin - the same leak
   family as the transition cards in v3.28, this time riding on
   the accordion headings, where the margin collapses straight
   through the borderless item and lands between the questions.
   Pinned off inside the accordion, in page and post content. */
.ar-page-main .entry-content .wp-block-accordion-heading,
.ar-single-main .entry-content .wp-block-accordion-heading { margin-top: 0; margin-bottom: 0; }
/* The question bar stays PLAIN (Mike, 2026-11-02, reversing his
   first instinct after seeing the green bar live): charcoal words on
   white, only the toggle icon in orange. The colour lives in the
   answer instead (below). */
.wp-block-accordion-heading__toggle {
  font-family: 'Bitter', serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  background: transparent;
  color: var(--wp--preset--color--ar-charcoal);
  padding: 0;
  width: 100%;
  transition: color 0.15s ease;
}
/* Hover (Mike, 2026-11-03): the question itself answers the pointer -
   it turns the standard green, and pointedly WITHOUT an underline
   (he weighed the orange-underline alternative and set it aside).
   The dot and the toggle icon keep their orange. Keyboard focus
   gets the same signal. On touch screens there is no hover to
   give; a tap simply opens the answer, and on some phones the
   green tint lingers on the tapped question until the next tap -
   harmless, and it usefully marks the open one.
   v3.30 correction: v3.29's bare rule lost the text-decoration
   half of the fight - WordPress core's own accordion stylesheet
   underlines the toggle on hover, loads after the theme, and at
   equal specificity won, so the underline showed through in the
   text's new green (it takes the current colour). v3.30 scoped
   the selectors through .entry-content to outrank core; v3.31
   makes the removal unconditional with !important - Mike has now
   reported the underline three times, and a cosmetic property
   is not worth a fourth round of cascade arithmetic. */
.entry-content .wp-block-accordion-heading__toggle:hover,
.entry-content .wp-block-accordion-heading__toggle:focus-visible { color: var(--wp--preset--color--ar-green); text-decoration: none !important; }
.entry-content .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.entry-content .wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title { text-decoration: none !important; }
.wp-block-accordion-heading__toggle-icon {
  color: var(--wp--preset--color--ar-orange);
}
/* An orange dot stands before every question (Mike, 2026-11-03): a
   small round marker in the site's orange, sitting on the question
   line ahead of the words - the accordion's one spot of colour at
   rest, matching the toggle icon at the other end. */
.wp-block-accordion-heading__toggle::before {
  content: "";
  display: inline-block;
  flex: none;
  align-self: center;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--ar-orange);
  margin-right: 0.7rem;
}
/* The answer, and only the answer, gets a box (Mike, 2026-11-02):
   it opens under its question inset on BOTH sides with generous
   padding so it pops, shaded in the site's standard background
   green #F1F7F1 (he judged the deeper #E4F5E4 too dark against the
   greens used elsewhere), text in italics. v3.15 settles the
   details in Mike's words: the generous padding is LEFT and RIGHT,
   and the outline is the article cards' hairline, 1px ar-line -
   not the firmer search-box green, which stays in reserve if the
   hairline reads too faint. v3.16: the box's own inset from the
   sheet doubles (3rem each side) while the answer's inner padding
   eases back (1.25rem / 2.5rem), and the opening slows down (see
   the animation rules under the panel). v3.25 (Mike, 2026-11-03):
   the inner padding is halved at the sides and made UNIFORM -
   1.25rem on all four sides, top and bottom the same as left and
   right. */
.wp-block-accordion-panel {
  margin: 0.5rem 3rem 0.25rem;
  padding: 1.25rem;
  background: #F1F7F1;
  border: 1px solid var(--wp--preset--color--ar-line);
  border-radius: 12px;
  color: #22252A;
}
/* A CLOSED answer takes up NO space at all (v3.33): the panel
   keeps its box only while its item is open. Measured against
   Mike's three reports of a "massive line break" between
   questions, this was the bulk of it - every closed answer was
   still holding its margins, its 1.25rem top and bottom padding
   and its borders in the stack (up to ~3.3rem of empty box per
   question) while the item and heading margins around it got
   trimmed to little effect. Zeroed here, the list closes up to
   the questions' own lines. */
.wp-block-accordion-item:not(.is-open) .wp-block-accordion-panel {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}
/* Line-to-line, measured settlement (Mike, 2026-11-03, v3.34):
   the rendered page was measured directly - 38px of white
   between one question's words and the next, and the closed
   panels contribute 0 of it (the v3.33 panel theory was wrong;
   they take no space). What remains is the question line's own
   height plus the last declared air, so both are now set
   explicitly and at .entry-content weight, which outranks
   WordPress core's bare-class accordion styles regardless of
   load order: the toggle's line-height is pinned to 1.3 (it was
   inheriting whatever the cascade handed it), its padding is
   zero, and the item's bottom margin is zero. The questions
   should now sit at the density of ordinary text lines. */
.entry-content .wp-block-accordion-item { margin-bottom: 0; }
.entry-content .wp-block-accordion-heading__toggle { line-height: 1.3; padding-top: 0; padding-bottom: 0; }
/* The opening, made elegant (Mike, 2026-11-02): core already
   animates the unfold at a snappy 0.3s; slow it to a smoother
   0.55s glide and fade the answer in as it settles. Pure CSS on
   core's own classes and its built-in motion - no plugin, no
   script, nothing for updates or mobile to break - and people
   who ask their device for reduced motion keep the instant open. */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-accordion-item {
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .wp-block-accordion-item.is-open .wp-block-accordion-panel {
    animation: ar-faq-fade 0.5s ease-out both;
  }
}
@keyframes ar-faq-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Phones: the doubled inset would crush the answer's column, so
   the box nearly reaches the edges there instead. */
@media (max-width: 782px) {
  .wp-block-accordion-panel {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 1.25rem;
  }
}
.wp-block-accordion-panel p { font-style: italic; }
.wp-block-accordion-panel > :first-child { margin-top: 0; }
.wp-block-accordion-panel > :last-child { margin-bottom: 0; }