/* Brand CTA: two quiet rings gather into a breathing point of connection. */
body:not(.admin-page) :is(.button, .text-link) {
  --cta-ring: 16px; --cta-core: 8px; --cta-x: 23px; --cta-pad: 38px;
  --cta-ring-scale: 1; --cta-ring-opacity: .72; --cta-core-scale: 1;
  --cta-core-fill: transparent; --cta-breathe: none;
  position: relative; isolation: isolate; display: inline-flex;
  align-items: center; justify-content: center; gap: 0;
  max-inline-size: 100%; min-inline-size: 0; padding-inline: var(--cta-pad);
  border-radius: 999px; text-align: center; text-decoration: none;
  vertical-align: middle;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
    box-shadow .3s ease, transform .3s ease;
}
body:not(.admin-page) :is(.button, .text-link)::before,
body:not(.admin-page) :is(.button, .text-link)::after {
  content: ""; position: absolute; top: 50%; inset-inline-end: var(--cta-x);
  box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease,
    background-color .3s ease, border-color .3s ease;
}
body:not(.admin-page) :is(.button, .text-link)::before {
  inline-size: var(--cta-ring); block-size: var(--cta-ring);
  opacity: var(--cta-ring-opacity);
  transform: translate(50%, -50%) scale(var(--cta-ring-scale));
}
body:not(.admin-page) :is(.button, .text-link)::after {
  inline-size: var(--cta-core); block-size: var(--cta-core);
  background-color: var(--cta-core-fill);
  transform: translate(50%, -50%) scale(var(--cta-core-scale));
  animation: var(--cta-breathe);
}
body:not(.admin-page) .button {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .13), 0 3px 12px rgb(34 44 83 / .10);
}
body:not(.admin-page) .button-small { --cta-ring: 14px; --cta-core: 7px; --cta-x: 20px; --cta-pad: 33px; }
body:not(.admin-page) .button-large { --cta-ring: 18px; --cta-core: 9px; --cta-x: 28px; --cta-pad: 46px; }
body:not(.admin-page) .text-link {
  --cta-ring: 14px; --cta-core: 7px; --cta-x: 20px; --cta-pad: 33px;
  --cta-link-ink: var(--ink); --cta-link-hover-ink: var(--heritage-rust);
  --cta-link-hover-bg: var(--heritage-rust-wash);
  min-height: 42px; padding-block: 9px;
  color: var(--cta-link-ink); background-color: transparent;
  border: 1px solid color-mix(in srgb, currentColor 27%, transparent);
  box-shadow: none;
}
body:not(.admin-page) :is(.story, .rhythm, .about-quote, .site-footer, .closing, .small-close) .text-link {
  --cta-link-ink: var(--paper); --cta-link-hover-ink: var(--white);
  --cta-link-hover-bg: rgb(243 239 237 / .10);
}
body:not(.admin-page) .header-actions .button { white-space: nowrap; flex-shrink: 0; }
body:not(.admin-page) .mobile-menu .button { font-family: var(--body); font-size: 14px; }
body:not(.admin-page) :is(.button, .text-link):focus-visible:not(:disabled):not([aria-disabled="true"]) {
  --cta-ring-scale: .28; --cta-ring-opacity: 0; --cta-core-scale: .68;
  --cta-core-fill: currentColor; --cta-breathe: yuan-cta-breathe 1.9s ease-in-out .4s infinite;
  transform: translateY(-1px); box-shadow: 0 5px 16px rgb(34 44 83 / .12);
}
body:not(.admin-page) .text-link:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  color: var(--cta-link-hover-ink); background-color: var(--cta-link-hover-bg);
  border-color: color-mix(in srgb, currentColor 54%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-page) :is(.button, .text-link):hover:not(:disabled):not([aria-disabled="true"]) {
    --cta-ring-scale: .28; --cta-ring-opacity: 0; --cta-core-scale: .68;
    --cta-core-fill: currentColor; --cta-breathe: yuan-cta-breathe 1.9s ease-in-out .4s infinite;
    gap: 0; transform: translateY(-1px); box-shadow: 0 5px 16px rgb(34 44 83 / .12);
  }
  body:not(.admin-page) .text-link:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--cta-link-hover-ink); background-color: var(--cta-link-hover-bg);
    border-color: color-mix(in srgb, currentColor 54%, transparent);
  }
}
body:not(.admin-page) :is(.button, .text-link):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0) scale(.985); box-shadow: none;
}
/* Preserve each existing colour variant while keeping disabled CTAs at rest. */
body:not(.admin-page) .button-dark { --cta-rest-bg: var(--heritage-navy); --cta-rest-ink: var(--white); }
body:not(.admin-page) .button-orange { --cta-rest-bg: var(--heritage-rust); --cta-rest-ink: var(--white); }
body:not(.admin-page) .button-outline { --cta-rest-bg: transparent; --cta-rest-ink: var(--ink); }
body:not(.admin-page) :is(.closing, .small-close) .button-dark {
  --cta-rest-bg: var(--white); --cta-rest-ink: var(--heritage-navy);
}
body:not(.admin-page) :is(.button, .text-link):is(:disabled, [aria-disabled="true"]) {
  --cta-breathe: none; cursor: default; transform: none; box-shadow: none;
  background-color: var(--cta-rest-bg, transparent); color: var(--cta-rest-ink, var(--cta-link-ink, var(--ink)));
}
@keyframes yuan-cta-breathe {
  0%, 100% { transform: translate(50%, -50%) scale(.68); }
  50% { transform: translate(50%, -50%) scale(.84); }
}
@media (max-width: 560px) {
  body:not(.admin-page) .button { --cta-ring: 14px; --cta-core: 7px; --cta-x: 20px; --cta-pad: 33px; }
  body:not(.admin-page) .text-link { --cta-ring: 12px; --cta-core: 6px; --cta-x: 18px; --cta-pad: 29px; }
  body:not(.admin-page) .header-actions .button { --cta-ring: 10px; --cta-core: 5px; --cta-x: 13px; --cta-pad: 23px; }
}
@media (max-width: 360px) {
  body:not(.admin-page) .header-actions .button { --cta-ring: 9px; --cta-core: 4.5px; --cta-x: 11px; --cta-pad: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) :is(.button, .text-link) { transition: none !important; transform: none !important; }
  body:not(.admin-page) :is(.button, .text-link)::before,
  body:not(.admin-page) :is(.button, .text-link)::after { transition: none !important; animation: none !important; }
}
.motion-paused body:not(.admin-page) :is(.button, .text-link),
body.motion-paused:not(.admin-page) :is(.button, .text-link) { transition: none !important; transform: none !important; }
.motion-paused body:not(.admin-page) :is(.button, .text-link)::before,
.motion-paused body:not(.admin-page) :is(.button, .text-link)::after,
body.motion-paused:not(.admin-page) :is(.button, .text-link)::before,
body.motion-paused:not(.admin-page) :is(.button, .text-link)::after { transition: none !important; animation: none !important; }