.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* SPERO site stylesheet. Ported from the v2 design (home-v2.css) by SIDDATWORK.
   Generated: edit the source and regenerate rather than editing here. */
@font-face { font-family: "Causten"; src: url("https://sperow.kinsta.cloud/wp-content/uploads/fonts/Causten-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Causten"; src: url("https://sperow.kinsta.cloud/wp-content/uploads/fonts/Causten-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Causten"; src: url("https://sperow.kinsta.cloud/wp-content/uploads/fonts/Causten-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---- Elementor V4 compatibility layer --------------------------------
   Elementor's atomic base styles (.elementor .e-*-base, 0,2,0) add padding,
   min-width and display that the v2 design never had. Reset them to browser
   defaults at 0,3,0: above Elementor's base, below every boosted v2 rule. */
.elementor .e-con.e-div-block-base,
.elementor .e-heading-base.e-heading-base,
.elementor .e-paragraph-base.e-paragraph-base,
.elementor .e-image-base.e-image-base,
.elementor .e-button-base.e-button-base { all: revert; }
/* Elementor document wrappers must not create layout of their own */
.elementor-location-header, .elementor-location-footer { display: contents; }
/* Loop wrappers (loop, layout, item) vanish so the v2 flex/grid layouts see the cards as
   direct children, exactly like the static design. */
:is(body,#spero) .spero-loop, :is(body,#spero) .spero-loop-item { display: contents; }
:is(body,#spero) .spero-cover-url, :is(body,#spero) .spero-post-art, :is(body,#spero) .spero-blog-cats { display: none; }
/* A pull quote made with WordPress's Pullquote block reads as the design's .pull: drop the
   block library's rules and let the quote's inner paragraph take the blockquote type. */
:is(body,#spero) .prose .wp-block-pullquote { border: 0; padding: 0; text-align: left; font-size: inherit; line-height: inherit; }
:is(body,#spero) .prose .wp-block-pullquote blockquote p { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
:is(body,#spero) .prose .wp-block-pullquote cite { display: block; margin-top: 1rem; font-size: 1rem; font-weight: 500; color: var(--text-soft); }
/* Post content (book descriptions, author bios, blog posts) takes the design's typography,
   not the Elementor kit's global font and text colour. */
:is(body,#spero) .elementor-widget-theme-post-content {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: inherit; color: inherit;
}
/* ------------------------------------------------------------------
   SPERO homepage v2 · brand-guide build
   Standalone stylesheet. Colors and type straight from the
   SPERO Brand Guide (05.01.23): Causten only, navy / orange / white /
   grey, sky used sparingly. Does not touch v1 files.
------------------------------------------------------------------- *//* ---- Causten (client-supplied brand face) ------------------------ *//* ---- brand tokens ------------------------------------------------ */










:root {
  /* Brand guide, page 05 */
  --navy: #2d3243;        /* Pantone 101-16 C */
  --ink: #2d3243;
  --ink-night: #1e2230;
  --ink-deep: #262b3a;
  --orange: #ff8b2b;      /* Sidd 23 Aug: overrides brand Pantone 34-6 C (#de834d) everywhere */
  --sky: #79b3e0;         /* Pantone 14-4320, sparing use only */
  --grey: #cfcfd1;        /* Pantone Cool Grey 2 */

  /* Tints from the guide's percentage ladder */
  --navy-80: #575b69;
  --navy-soft: #4a4f60;
  --orange-20: #ffe8d5;
  --orange-10: #fff3ea;
  --grey-20: #f5f5f6;
  --sky-20: #e4f0f9;   /* 20% tint of Pantone 14-4320 per the guide's ladder */

  --white: #ffffff;
  --text: var(--navy);
  --text-soft: #565b6c;
  --line: rgba(45, 50, 67, 0.14);
  --line-on-navy: rgba(255, 255, 255, 0.18);
  --white-on-navy: rgba(255, 255, 255, 0.94);
  --muted-on-navy: rgba(255, 255, 255, 0.72);

  --sans: "Causten", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vh, 7.5rem);
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Rylo sheet layout: full-bleed sections with rounded tops that
     overlap the section above, so the backdrop never shows between folds */
  --canvas: var(--navy);
  --panel-deep: #232838;
  --panel-inset: clamp(10px, 1.6vw, 22px);   /* still spaces the fixed nav */
  --sheet-radius: clamp(36px, 5vw, 72px);
  --sheet-overlap: clamp(36px, 5vw, 72px);
}/* ---- base -------------------------------------------------------- */




:is(body,#spero) *,
:is(body,#spero) *::before,
:is(body,#spero) *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:is(body,#spero) {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:is(body,#spero) img { max-width: 100%; display: block; }
:is(body,#spero) h1,
:is(body,#spero) h2,
:is(body,#spero) h3,
:is(body,#spero) h4,
:is(body,#spero) p { margin: 0; }
:is(body,#spero) a { color: inherit; }

:is(body,#spero) a:focus-visible,
:is(body,#spero) button:focus-visible,
:is(body,#spero) input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

:is(body,#spero) .shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

:is(body,#spero) .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:is(body,#spero) .skip-link {
  position: absolute;
  top: -48px;
  left: 1rem;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
:is(body,#spero) .skip-link:focus { top: 0; }/* ---- reveal (gentle, brand-appropriate) -------------------------- */




html.reveal-ready :is(body,#spero) .rise {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}
html.reveal-ready :is(body,#spero) .rise.on { filter: blur(0); }
html.reveal-ready :is(body,#spero) .rise.on {
  opacity: 1;
  transform: none;
}
html.reveal-ready :is(body,#spero) .rise.d1 { transition-delay: 0.08s; }/* Hero entrance: words rise out of masked lines, then the rest follows. *//* padding keeps descenders (g, y, p) inside the mask box */




html.reveal-ready :is(body,#spero) .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
html.reveal-ready :is(body,#spero) .wi {
  display: inline-block;
  transform: translateY(118%);
  transition: transform 0.95s var(--ease);
}
html.reveal-ready :is(body,#spero) .wi.on { transform: none; }/* Every section heading rises word by word out of its own mask. The
   per-word delay is set inline by the splitter. */



html.reveal-ready :is(body,#spero) [data-anim="words"] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
html.reveal-ready :is(body,#spero) [data-anim="words"] .wi {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
html.reveal-ready :is(body,#spero) [data-anim="words"].on .wi { transform: none; }
html.reveal-ready :is(body,#spero) .hero [data-seq] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.reveal-ready :is(body,#spero) .hero [data-seq].on { opacity: 1; transform: none; }
html.reveal-ready :is(body,#spero) .rise.d2 { transition-delay: 0.16s; }
html.reveal-ready :is(body,#spero) .rise.d3 { transition-delay: 0.24s; }/* ---- type helpers ------------------------------------------------ */




:is(body,#spero) .kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: 0.8rem;
}/* The guide's sky micro-rule: the one sparing use of blue. */


:is(body,#spero) .kicker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--sky);
}
:is(body,#spero) .kicker-on-navy { color: var(--orange); }

:is(body,#spero) h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

:is(body,#spero) h2 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

:is(body,#spero) .section-head { margin-bottom: 3.4rem; }
:is(body,#spero) .section-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
:is(body,#spero) .link-more {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--orange);
  text-decoration: none;
  white-space: nowrap;
}
:is(body,#spero) .link-more:hover { text-decoration: underline; }/* ---- buttons ----------------------------------------------------- */




:is(body,#spero) .btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
:is(body,#spero) .btn:active { transform: translateY(1px); }/* Character roll on hover, after revilo.io's "Let's talk" button: each
   letter carries a clone 1.3em below via text-shadow, then rides up so
   the clone lands in its place. JS splits the label and staggers it. */



:is(body,#spero) .btn-chars {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
}
:is(body,#spero) .btn-chars span {
  display: inline-block;
  position: relative;
  text-shadow: 0 1.3em currentColor;
  transform: translateY(0) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
:is(body,#spero) .btn:hover .btn-chars span,
:is(body,#spero) .btn:focus-visible .btn-chars span { transform: translateY(-1.3em) rotate(0.001deg); }

@media (prefers-reduced-motion: reduce) {
  :is(body,#spero) .btn-chars span { transition: none; }
}
:is(body,#spero) .btn-lg { padding: 1.1rem 2.15rem; font-size: 1.12rem; }

:is(body,#spero) .btn-orange {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
}
:is(body,#spero) .btn-orange:hover { background: #f57e15; border-color: #f57e15; }

:is(body,#spero) .btn-navy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
:is(body,#spero) .btn-navy:hover { background: #232739; border-color: #232739; }

:is(body,#spero) .btn-ghost-navy {
  border-color: var(--line);
  color: var(--navy);
  background: transparent;
}
:is(body,#spero) .btn-ghost-navy:hover { border-color: var(--navy); }

:is(body,#spero) .btn-ghost-light {
  border-color: var(--line-on-navy);
  color: var(--white-on-navy);
  background: transparent;
}
:is(body,#spero) .btn-ghost-light:hover { border-color: var(--white); }/* reads on both the cream page and the photograph */



:is(body,#spero) .btn-glass {
  background: rgba(20, 24, 34, 0.5);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
:is(body,#spero) .btn-glass:hover {
  background: rgba(20, 24, 34, 0.72);
  border-color: var(--white);
}

:is(body,#spero) .btn-buy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
}
:is(body,#spero) .btn-buy:hover { background: var(--orange); border-color: var(--orange); color: var(--navy); }/* ---- nav --------------------------------------------------------- *//* Floating glass pill, after rylo.com: translucent bar, blur, hairline
   border, generous radius. Sticky so the menu stays reachable. *//* Fixed so the hero runs edge to edge behind it. */






:is(body,#spero) .site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1.5rem var(--panel-inset) 0.35rem;
  background: transparent;
  pointer-events: none;
}/* Rylo's recipe verbatim: light 5% fill over the page color, blur 16,
   1px light 10% border, 16px radius, light text. Once scrolled the
   glass darkens so it stays readable over the white panels. */



:is(body,#spero) .nav-inner {
  pointer-events: auto;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.7rem 0.7rem 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
:is(body,#spero) .site-nav.scrolled .nav-inner {
  background: rgba(35, 40, 56, 0.78);
  box-shadow: 0 14px 40px rgba(20, 23, 33, 0.35);
}

:is(body,#spero) .nav-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  text-decoration: none;
}
:is(body,#spero) .nav-mark {
  width: 52px;
  height: 52px;
  color: var(--orange);
  animation: mark-spin 48s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
:is(body,#spero) .nav-mark.is-spinning { animation-play-state: running; }/* The real lockup, recomposed so the mark can spin: the traced brand
   mark beside the wordmark cut from the brand PNG. */


:is(body,#spero) .nav-wordmark { height: 25px; width: auto; display: block; color: var(--white); }

:is(body,#spero) .nav-menu {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}/* Rylo-style hover: a soft translucent chip appears behind the item. */


:is(body,#spero) .nav-menu a {
  text-decoration: none;
  font-weight: 400;
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
}
:is(body,#spero) .nav-menu a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}
:is(body,#spero) .nav-menu-ctas { display: none; }

:is(body,#spero) .nav-ctas {
  display: none;
  align-items: center;
  gap: 0.7rem;
  margin-left: 0.4rem;
}/* Nav CTA type matches the menu items. */


:is(body,#spero) .nav-ctas .btn,
:is(body,#spero) .nav-menu-ctas .btn { font-size: 1.06rem; }

:is(body,#spero) .nav-burger {
  margin-left: auto;
  appearance: none;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
:is(body,#spero) .burger-bar,
:is(body,#spero) .burger-bar::before,
:is(body,#spero) .burger-bar::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}
:is(body,#spero) .burger-bar { position: relative; }
:is(body,#spero) .burger-bar::before { position: absolute; top: -6px; left: 0; }
:is(body,#spero) .burger-bar::after { position: absolute; top: 6px; left: 0; }
:is(body,#spero) .menu-open .burger-bar { background: transparent; }
:is(body,#spero) .menu-open .burger-bar::before { transform: translateY(6px) rotate(45deg); }
:is(body,#spero) .menu-open .burger-bar::after { transform: translateY(-6px) rotate(-45deg); }/* mobile menu panel */



@media (max-width: 1099.98px) {
  :is(body,#spero) .nav-menu {
    pointer-events: auto;
    position: absolute;
    top: 100%;
    left: var(--panel-inset);
    right: var(--panel-inset);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(45, 50, 67, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(45, 50, 67, 0.16);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 1.4rem 1.4rem;
    display: none;
  }
  :is(body,#spero) .menu-open .nav-menu { display: flex; }
  :is(body,#spero) .nav-menu a {
    padding: 0.85rem 0.2rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--grey-20);
  }
  :is(body,#spero) .nav-menu-ctas {
    display: flex;
    gap: 0.7rem;
    padding-top: 1.2rem;
    flex-wrap: wrap;
  }
}

@media (min-width: 1100px) {
  :is(body,#spero) .nav-menu { display: flex; position: static; }
  :is(body,#spero) .nav-ctas { display: flex; }
  :is(body,#spero) .nav-burger { display: none; }
}/* ---- rounded inset panels ---------------------------------------- *//* Every major section is a rounded card floating on the canvas,
   with the canvas showing around and between them. */





:is(body,#spero) .panel {
  position: relative;
  margin: calc(-1 * var(--sheet-overlap)) 0 0;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  overflow: hidden;
  scroll-margin-top: 96px;
}/* The next sheet overlaps this one and the parallax holds this one's
   content back, so reserve both below the last element. */



:is(body,#spero) :is([data-elementor-type^="wp-"],[data-elementor-type^="single"]) > .panel { padding-bottom: calc(var(--section) + var(--sheet-overlap) + 90px); }/* ---- hero -------------------------------------------------------- *//* Full-bleed, full-viewport hero: runs behind the fixed nav. */






:is(body,#spero) .hero {
  position: relative;
  margin-bottom: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  background:
    radial-gradient(100% 90% at 80% 108%, rgba(255, 139, 43, 0.8), rgba(255, 139, 43, 0.24) 55%, transparent 80%),
    radial-gradient(130% 50% at 45% 120%, rgba(255, 139, 43, 0.38), transparent 72%),
    linear-gradient(180deg, var(--ink-night) 0%, var(--ink) 62%, var(--ink-deep) 100%);
  color: var(--white-on-navy);
  overflow: hidden;
}

:is(body,#spero) .hero-grid {
  position: relative;
  width: 100%;
  display: grid;
  gap: 3rem;
  align-items: center;
  padding-top: clamp(6.5rem, 14vh, 9rem);
  padding-bottom: clamp(4rem, 9vh, 6rem);
  will-change: transform;
}

:is(body,#spero) .hero h1 {
  font-size: clamp(3.2rem, 6.4vw, 6.1rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--white);
}
:is(body,#spero) .hero h1 .accent { font-style: normal; color: var(--orange); }
:is(body,#spero) .hero h1 .hl { display: inline; }
@media (min-width: 768px) {
  :is(body,#spero) .hero h1 .hl { display: block; white-space: nowrap; }
}

:is(body,#spero) .hero-scroll {
  position: absolute;
  bottom: calc(var(--sheet-overlap) + 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
}/* The fan of featured books. These are the flight sources. */



:is(body,#spero) .hero-books {
  position: relative;
  display: none;
  aspect-ratio: 1 / 1.06;
  max-width: 680px;
  justify-self: center;
  width: 100%;
}
:is(body,#spero) .hero-books img {
  position: absolute;
  width: 55%;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(15, 18, 28, 0.55);
}/* Fan poses mirror the release-grid order left to right, so every
   book's flight path drops straight toward its own column: Matthew and
   Future up top, Theology front-left, Courageous Hope front-right and
   on top of the pile. Pose lives in --pose so the entrance can
   compose with it. */


:is(body,#spero) .hero-books img { transform: rotate(var(--pose, 0deg)); }
:is(body,#spero) .hero-books .spero-loop-item:nth-child(1) img { left: 0;   top: 0;    --pose: -6deg; z-index: 1; }
:is(body,#spero) .hero-books .spero-loop-item:nth-child(2) img { right: 1%; top: 5%;   --pose: 7deg;  z-index: 2; }
:is(body,#spero) .hero-books .spero-loop-item:nth-child(3) img { right: 3%; top: 41%;  --pose: 6deg;  z-index: 5; }
:is(body,#spero) .hero-books .spero-loop-item:nth-child(4) img { left: 5%;  top: 37%;  --pose: -8deg; z-index: 4; }/* Load entrance: the pile assembles back to front, each book rising
   into its pose, Courageous Hope arriving last on top. */



html.reveal-ready :is(body,#spero) .hero-books img {
  opacity: 0;
  transform: translateY(74px) scale(0.94) rotate(var(--pose, 0deg));
}
html.reveal-ready :is(body,#spero) .hero-books.on img {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--pose, 0deg));
  transition: transform 1.15s var(--ease), opacity 0.75s ease;
}
html.reveal-ready :is(body,#spero) .hero-books.on .spero-loop-item:nth-child(1) img { transition-delay: 0.05s; }
html.reveal-ready :is(body,#spero) .hero-books.on .spero-loop-item:nth-child(2) img { transition-delay: 0.18s; }
html.reveal-ready :is(body,#spero) .hero-books.on .spero-loop-item:nth-child(4) img { transition-delay: 0.31s; }
html.reveal-ready :is(body,#spero) .hero-books.on .spero-loop-item:nth-child(3) img { transition-delay: 0.46s; }/* Once the pile has assembled, opacity stops transitioning (and the
   entrance delays are dropped) so the flight's handover between the fan
   and its in-flight clones is frame-perfect instead of blinking. */



html.reveal-ready :is(body,#spero) .hero-books.on.entrance-done .spero-loop-item:nth-child(n) img {
  transition: transform 1.15s var(--ease);
  transition-delay: 0s;
}/* In-flight duplicates that travel from the fan to the release grid. */



:is(body,#spero) .float-book {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  /* starts as an exact twin of the fan cover; the flight blends these
     toward the release card's corners and shadow as it travels */
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(15, 18, 28, 0.55);
  z-index: 40;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, width;
  display: none;
}
:is(body,#spero).flight-active .float-book { display: block; }
:is(body,#spero) .flight-hidden { opacity: 0 !important; }
:is(body,#spero) .release-cover img { transition: transform 0.35s var(--ease); }

:is(body,#spero) .hero-copy { max-width: 620px; }
:is(body,#spero) .hero h1 { color: var(--white); }
:is(body,#spero) .hero-sub {
  margin-top: 1.5rem;
  max-width: 34rem;
  color: var(--muted-on-navy);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}
:is(body,#spero) .hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

:is(body,#spero) .hero-visual {
  display: none;
  place-items: center;
}
@keyframes mark-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  :is(body,#spero) .nav-mark { animation: none; }
}

@media (min-width: 900px) {
  :is(body,#spero) .hero-grid { grid-template-columns: 1.05fr 1fr; max-width: 1340px; }
  :is(body,#spero) .hero-books { display: block; margin-top: -4.5rem; }
}/* ---- featured releases ------------------------------------------- */




:is(body,#spero) .releases { padding: var(--section) 0; background: var(--white); }/* Slider of release cards: drag, snap, arrows. Cards are whole links;
   covers share one fixed height so every top edge and every text block
   sits on the same line. */



:is(body,#spero) .release-nav { display: flex; gap: 0.6rem; }
:is(body,#spero) .slider-arrow {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--navy);
  font-size: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
:is(body,#spero) .slider-arrow:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
:is(body,#spero) .slider-arrow:disabled { opacity: 0.3; pointer-events: none; }/* the slider runs wider than the standard shell so four cards fit */



:is(body,#spero) .releases > .shell { max-width: 1400px; }

:is(body,#spero) .release-track {
  display: flex;
  gap: clamp(1.4rem, 2.4vw, 2.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem 0.5rem 1.8rem;
  margin: -0.5rem -0.5rem 0;
  cursor: grab;
}
:is(body,#spero) .release-track::-webkit-scrollbar { display: none; }
:is(body,#spero) .release-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
:is(body,#spero) .release-track.is-dragging .release { pointer-events: none; }

:is(body,#spero) .release {
  flex: 0 0 clamp(230px, 20vw, 300px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--navy);
  padding-top: 1.4rem;
  text-decoration: none;
  color: inherit;
}

:is(body,#spero) .release-cover {
  --cover-h: clamp(240px, 24vw, 310px);
  display: grid;
  place-items: end center;
  height: var(--cover-h);
  margin-bottom: 1.4rem;
}/* Height is pinned so every spine lines up; width follows the cover's own
   ratio. max-width:none defeats the global img rule, which would otherwise
   drive the height from the width and overflow the card. */


:is(body,#spero) .release-cover img {
  height: var(--cover-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(45, 50, 67, 0.24);
  /* no opacity here: the flight swaps this cover for its in-flight clone,
     and a fade would blink against the clone disappearing instantly */
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
:is(body,#spero) .release:hover .release-cover img {
  transform: translateY(-10px) rotate(-2deg);
  box-shadow: 0 34px 70px rgba(45, 50, 67, 0.34);
}

:is(body,#spero) .release-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.5rem;
}
:is(body,#spero) .release-title {
  display: block;
  font-size: 1.38rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.55rem;
  transition: color 0.25s ease;
}
:is(body,#spero) .release:hover .release-title { color: var(--orange); }
:is(body,#spero) .release-desc {
  display: block;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 1.15rem;
}
:is(body,#spero) .release-view {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}
:is(body,#spero) .release-arrow { transition: transform 0.3s var(--ease), color 0.25s ease; }
:is(body,#spero) .release:hover .release-view { color: var(--orange); }
:is(body,#spero) .release:hover .release-arrow { transform: translateX(6px); }/* ---- read. scan. experience. ------------------------------------- *//* The printed page and the film scene share one stage. Scanning sweeps
   a light bar down and wipes the scene in behind it, which is the
   printed QR mechanic performed on screen. */





:is(body,#spero) .rse {
    padding: var(--section) 0;
  background: var(--panel-deep);
  color: var(--white-on-navy);
}
:is(body,#spero) .rse-title { color: var(--white); }
:is(body,#spero) .rse-title .accent { font-style: normal; color: var(--orange); }
:is(body,#spero) .rse-lead {
  margin-top: 1.3rem;
  max-width: 46rem;
  font-size: 1.14rem;
  color: var(--muted-on-navy);
}

:is(body,#spero) .rse-stage {
  position: relative;
  margin-top: 3.2rem;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 8.2;
  background: #f6f1e6;
  box-shadow: 0 40px 90px rgba(10, 12, 20, 0.5);
}/* the printed page */



:is(body,#spero) .rse-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
  padding: clamp(1.6rem, 5vw, 4.5rem);
  background:
    repeating-linear-gradient(92deg, rgba(120, 96, 50, 0.035) 0 2px, transparent 2px 7px),
    #f6f1e6;
  color: var(--navy);
}
:is(body,#spero) .rse-ref {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
}
:is(body,#spero) .rse-verse {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--navy);
}
:is(body,#spero) .rse-code {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(45, 50, 67, 0.55);
}/* a printed code block, drawn rather than imaged */


:is(body,#spero) .rse-code-mark {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background:
    linear-gradient(var(--navy) 0 0) 0 0 / 16px 16px no-repeat,
    linear-gradient(var(--navy) 0 0) 100% 0 / 16px 16px no-repeat,
    linear-gradient(var(--navy) 0 0) 0 100% / 16px 16px no-repeat,
    repeating-linear-gradient(90deg, var(--navy) 0 4px, transparent 4px 8px) 50% 50% / 22px 22px no-repeat,
    #f6f1e6;
  border: 2px solid var(--navy);
}/* The reveal: two vertical passes read the page, then one fast pass
   across wipes the film scene in behind the bar. */



:is(body,#spero) .rse-scene {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
:is(body,#spero) .rse-scene img { width: 100%; height: 100%; object-fit: cover; }
:is(body,#spero) .rse-stage.is-scanned .rse-scene { clip-path: inset(0 0 0 0); }
:is(body,#spero) .rse-stage.is-sweeping .rse-scene {
  animation: rseWipe 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}/* same curve and duration as the bar, so the edge travels with it */



@keyframes rseWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}/* One pass down, one pass across. Each is a SINGLE continuous motion:
   only a start and an end keyframe, so the easing curve is applied once
   across the whole travel. Intermediate stops would make the browser
   ease between every pair, which reads as start-stop-start. Opacity is
   set by the class, never keyframed, and the stage clips the bar at
   both ends so no fade is needed. */



:is(body,#spero) .rse-line {
  position: absolute;
  left: 0;
  right: 0;
  top: -3%;
  height: 3px;
  background: var(--orange);
  box-shadow: 0 0 30px 7px rgba(255, 139, 43, 0.75);
  opacity: 0;
  pointer-events: none;
  will-change: top;
}
:is(body,#spero) .rse-stage.is-scanning .rse-line {
  opacity: 1;
  animation: rseScanDown 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes rseScanDown {
  from { top: -3%; }
  to   { top: 103%; }
}/* the pass that reveals, sweeping left to right */



:is(body,#spero) .rse-line-h {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2%;
  width: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--orange) 45%, rgba(255,255,255,0.9));
  box-shadow: 0 0 40px 10px rgba(255, 139, 43, 0.85);
  opacity: 0;
  pointer-events: none;
  will-change: left;
}
:is(body,#spero) .rse-stage.is-sweeping .rse-line-h {
  opacity: 1;
  animation: rseSweepAcross 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes rseSweepAcross {
  from { left: -2%; }
  to   { left: 104%; }
}

@media (prefers-reduced-motion: reduce) {
  :is(body,#spero) .rse-line,
:is(body,#spero) .rse-line-h { display: none; }
  :is(body,#spero) .rse-stage.is-sweeping .rse-scene { animation: none; }
}

:is(body,#spero) .rse-caption {
  position: absolute;
  left: clamp(1.2rem, 3vw, 2.4rem);
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.5s ease 0.45s;
}
:is(body,#spero) .rse-stage.is-scanned .rse-caption { opacity: 1; }/* the control sits on the stage itself, top right, over either state */



:is(body,#spero) .rse-actions {
  position: absolute;
  top: clamp(1.1rem, 2.4vw, 1.9rem);
  right: clamp(1.1rem, 2.4vw, 1.9rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: min(58%, 27rem);
  text-align: right;
}
:is(body,#spero) .rse-note {
  font-size: 0.76rem;
  line-height: 1.5;
  max-width: 22rem;
  color: rgba(255, 255, 255, 0.88);
  /* the still is light in places, so the note carries its own shade */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 16px rgba(0, 0, 0, 0.75);
}/* while the page is showing, the note reads on cream instead */


:is(body,#spero) .rse-stage:not(.is-scanned) .rse-note {
  color: rgba(45, 50, 67, 0.5);
  text-shadow: none;
}/* ---- the visual scripture series -------------------------------- *//* Four covers that open like doors: the one you point at takes the room. */





:is(body,#spero) .series { padding: var(--section) 0; background: var(--white); }
:is(body,#spero) .series h2 .accent { font-style: normal; color: var(--orange); }
:is(body,#spero) .series-lead {
  margin-top: 1.3rem;
  max-width: 44rem;
  font-size: 1.14rem;
  color: var(--text-soft);
}

:is(body,#spero) .series-row {
  margin-top: 3rem;
  display: flex;
  gap: 0.85rem;
  height: clamp(360px, 46vw, 560px);
}
:is(body,#spero) .portrait {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: var(--navy);
  transition: flex-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
:is(body,#spero) .portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* transform only: animating filter on an image this size costs a
     repaint every frame and is what made the open feel heavy */
  transform: scale(1.015);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  filter: saturate(0.9);
}/* the dimming layer, faded rather than filtered, so brightening is cheap */


:is(body,#spero) .portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(16, 19, 28, 0.44);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}/* the scrim is a pseudo-element, so it paints above the label unless
   both are given an explicit order */


:is(body,#spero) .portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(18, 21, 31, 0.94) 6%, rgba(18, 21, 31, 0.35) 45%, transparent 78%);
}
:is(body,#spero) .portrait-body {
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.1rem, 1.8vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
:is(body,#spero) .portrait-name {
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
}/* Fixed height, clamped to two lines. In normal flow this text rewrapped
   as the panel widened, so its block height changed in steps and shoved
   the title up and down. Reserving the space keeps every title still. */


:is(body,#spero) .portrait-lens {
  font-size: 0.95rem;
  line-height: 1.45;
  height: 2.9em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(255, 255, 255, 0.82);
  max-width: 30ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}/* pointer opens a door; the first stands open until one is chosen */



@media (hover: hover) and (min-width: 900px) {
  :is(body,#spero) .series-row:hover .portrait { flex-grow: 1; }
  :is(body,#spero) .series-row:hover .portrait:hover,
:is(body,#spero) .series-row .portrait.is-paired,
:is(body,#spero) .series-row:not(:hover) .portrait.is-open { flex-grow: 2.6; }
  :is(body,#spero) .portrait:hover img,
:is(body,#spero) .portrait.is-paired img,
:is(body,#spero) .series-row:not(:hover) .portrait.is-open img { transform: scale(1.06); }
  :is(body,#spero) .portrait:hover::before,
:is(body,#spero) .portrait.is-paired::before,
:is(body,#spero) .series-row:not(:hover) .portrait.is-open::before { opacity: 0; }
  :is(body,#spero) .portrait:hover .portrait-lens,
:is(body,#spero) .portrait.is-paired .portrait-lens,
:is(body,#spero) .series-row:not(:hover) .portrait.is-open .portrait-lens {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 899.98px) {
  :is(body,#spero) .series-row { flex-wrap: wrap; height: auto; }
  :is(body,#spero) .portrait { flex: 1 1 calc(50% - 0.5rem); aspect-ratio: 3 / 4; }
  :is(body,#spero) .portrait-lens { opacity: 1; transform: none; height: auto; -webkit-line-clamp: none; }
  :is(body,#spero) .portrait::before { opacity: 0.25; }
}/* ---- about ------------------------------------------------------- */




:is(body,#spero) .about {
  position: relative;
  padding: calc(var(--section) * 1.15) 0;
  background: var(--sky-20);
  overflow: hidden;
}/* One large real mark, faintly turning with the scroll. */



:is(body,#spero) .about-watermark {
  position: absolute;
  top: 50%;
  right: -14%;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  margin-top: calc(min(52vw, 720px) / -2);
  background: var(--sky);
  opacity: 0.26;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240.288 264.24 67.695 67.694' fill='currentColor' role='img' aria-label='SPERO sunburst mark'%3E%3Cpath fill-rule='nonzero' d='M265.081 308.285 C264.812 308.172 264.552 308.053 264.291 307.93 L259.343 312.879 L250.205 322.02 C249.726 321.544 249.27 321.054 248.828 320.559 L258.465 312 L265.122 306.091 C265.278 306.267 265.441 306.443 265.611 306.611 C265.78 306.781 265.954 306.944 266.132 307.101 M268.454 309.434 C268.199 309.369 267.952 309.299 267.703 309.229 L268.108 308.528 C267.901 308.408 267.698 308.282 267.499 308.152 L262.6 315.581 L255.508 326.341 C256.063 326.709 256.627 327.06 257.212 327.398 L263.675 316.203 L268.108 308.528 C268.315 308.649 268.524 308.762 268.736 308.866 L268.454 309.434 Z M271.688 310.015 C271.444 309.987 271.205 309.957 270.964 309.923 L268.722 318.296 L265.375 330.779 C264.725 330.605 264.084 330.41 263.455 330.2 L267.523 317.973 L270.33 309.528 C270.555 309.604 270.782 309.671 271.013 309.732 C271.245 309.793 271.478 309.849 271.711 309.896 L271.688 310.015 Z M271.013 286.441 C271.245 286.38 271.478 286.326 271.711 286.279 L269.921 277.558 L267.329 264.934 C266.677 265.068 266.027 265.22 265.375 265.394 L268.722 277.879 L265.515 265.918 C264.899 266.165 263.435 267.314 262.846 267.615 L270.33 286.647 C270.555 286.572 270.782 286.504 271.013 286.441 Z M268.108 287.645 C268.315 287.526 268.524 287.413 268.736 287.308 L264.753 279.348 L258.981 267.826 C258.386 268.123 257.796 268.438 257.212 268.775 L258.272 270.609 C257.808 271.053 257.055 271.928 256.629 272.41 L267.499 288.023 C267.698 287.889 267.901 287.765 268.108 287.645 Z M265.611 289.561 C265.78 289.392 265.954 289.229 266.131 289.072 L260.221 282.416 L251.663 272.779 C251.168 273.222 250.681 273.678 250.205 274.155 L259.343 283.295 L253.397 277.351 C253.136 277.899 252.586 279.255 252.366 279.826 L265.122 290.083 C265.278 289.905 265.441 289.731 265.611 289.561 Z M263.694 292.06 C263.814 291.851 263.94 291.65 264.068 291.453 L256.641 286.552 L245.88 279.459 C245.513 280.013 245.161 280.581 244.823 281.165 L256.017 287.627 L251.298 284.902 C251.241 285.461 250.957 286.941 250.945 287.508 L263.356 292.686 C263.461 292.477 263.573 292.267 263.694 292.06 Z M262.488 294.966 C262.552 294.736 262.622 294.506 262.695 294.281 L254.249 291.473 L242.022 287.406 C241.812 288.037 241.618 288.677 241.444 289.328 L253.927 292.672 L251.709 292.078 C251.816 292.577 252.227 293.947 252.366 294.435 L262.327 295.661 C262.374 295.429 262.427 295.197 262.488 294.966 Z M253.215 298.086 L262.078 298.086 C262.078 298.328 262.088 298.566 262.099 298.8 L255.03 299.764 C254.797 299.387 254.144 298.48 253.93 298.086 L262.078 298.086 C262.078 297.848 262.088 297.608 262.099 297.373 L253.215 296.845 L240.353 296.082 C240.315 296.745 240.288 297.413 240.288 298.086 L253.215 298.086 Z M253.927 303.5 L262.488 301.207 C262.552 301.439 262.622 301.668 262.695 301.892 L258.405 304.027 C258.132 303.754 257.416 302.919 257.16 302.636 L262.488 301.207 C262.427 300.977 262.374 300.745 262.327 300.512 L253.607 302.301 L240.982 304.894 C241.118 305.546 241.267 306.196 241.444 306.846 L253.927 303.5 Z M283.19 287.889 C283.458 288.001 283.719 288.121 283.978 288.244 L288.927 283.293 L298.066 274.155 C298.543 274.629 299.003 275.12 299.444 275.616 L289.805 284.172 L283.149 290.083 C282.994 289.905 282.83 289.731 282.659 289.561 C282.491 289.392 282.317 289.229 282.14 289.074 L283.19 287.889 Z M279.82 286.74 C280.072 286.803 280.319 286.874 280.566 286.946 L280.163 287.645 C280.369 287.765 280.573 287.892 280.77 288.023 L285.671 280.589 L292.765 269.829 C292.209 269.465 291.641 269.113 291.057 268.775 L284.596 279.97 L280.163 287.645 C279.956 287.526 279.747 287.413 279.534 287.308 L279.82 286.74 Z M276.586 286.162 C276.827 286.187 277.07 286.216 277.307 286.25 L279.549 277.879 L282.895 265.394 C283.546 265.569 284.185 265.764 284.814 265.973 L280.75 278.203 L277.939 286.647 C277.714 286.572 277.488 286.504 277.256 286.441 C277.025 286.38 276.793 286.326 276.561 286.279 L276.586 286.162 Z M274.134 310.145 C274.376 310.145 274.614 310.137 274.85 310.123 L275.379 319.008 L276.14 331.844 C275.806 331.873 275.473 331.895 275.14 331.909 C275.024 331.915 274.912 331.92 274.799 331.922 L274.767 331.924 L274.668 331.926 C274.49 331.931 274.312 331.934 274.134 331.934 C273.462 331.934 272.795 331.912 272.13 331.872 L272.894 319.008 L273.421 310.123 C273.656 310.137 273.895 310.145 274.134 310.145 Z M277.256 309.732 C277.025 309.793 276.793 309.849 276.561 309.896 L278.352 318.616 L280.943 331.24 C281.594 331.106 282.246 330.956 282.895 330.779 L279.549 318.296 L282.756 330.256 C283.371 330.006 284.815 328.969 285.403 328.672 L277.939 309.528 C277.714 309.604 277.488 309.671 277.256 309.732 Z M280.163 308.528 C279.956 308.649 279.747 308.762 279.534 308.866 L283.52 316.823 L289.291 328.349 C289.884 328.049 290.476 327.734 291.057 327.398 L289.999 325.567 C290.463 325.12 291.726 324.224 292.153 323.743 L280.77 308.152 C280.573 308.282 280.369 308.408 280.163 308.528 Z M282.659 306.611 C282.491 306.781 282.317 306.944 282.14 307.101 L288.051 313.757 L296.606 323.394 C297.103 322.952 297.59 322.497 298.066 322.02 L288.927 312.879 L294.873 318.824 C295.134 318.274 295.842 316.681 296.061 316.105 L283.149 306.091 C282.994 306.267 282.83 306.443 282.659 306.611 Z M284.577 304.115 C284.456 304.322 284.331 304.525 284.199 304.724 L291.633 309.621 L302.393 316.716 C302.757 316.16 303.11 315.593 303.447 315.01 L292.251 308.547 L296.972 311.271 C297.027 310.714 297.113 309.214 297.126 308.645 L284.914 303.484 C284.809 303.698 284.698 303.906 284.577 304.115 Z M285.781 301.207 C285.719 301.439 285.649 301.668 285.576 301.892 L294.022 304.701 L306.25 308.767 C306.459 308.136 306.653 307.498 306.828 306.846 L294.344 303.5 L296.564 304.095 C296.456 303.595 295.799 301.847 295.661 301.363 L285.944 300.512 C285.897 300.745 285.843 300.977 285.781 301.207 Z M295.055 298.086 L286.191 298.086 C286.191 297.848 286.183 297.608 286.17 297.373 L293.219 296.212 C293.454 296.592 294.126 297.693 294.34 298.086 L286.191 298.086 C286.191 298.328 286.183 298.566 286.17 298.8 L295.055 299.328 L307.921 300.092 C307.96 299.429 307.983 298.761 307.983 298.086 L295.055 298.086 Z M294.344 292.672 L285.781 294.966 C285.719 294.736 285.649 294.506 285.576 294.281 L289.666 292.126 C289.935 292.398 290.854 293.252 291.111 293.539 L285.781 294.966 C285.843 295.197 285.897 295.429 285.944 295.661 L294.665 293.871 L307.289 291.279 C307.156 290.629 307.003 289.977 306.828 289.328 L294.344 292.672 Z M274.134 286.031 C274.376 286.031 274.614 286.038 274.85 286.053 L275.379 277.168 L276.14 264.302 C275.475 264.263 274.809 264.24 274.134 264.24 C273.958 264.24 273.78 264.243 273.603 264.248 L273.503 264.248 L273.473 264.251 C273.361 264.254 273.247 264.259 273.131 264.263 C272.799 264.277 272.465 264.301 272.134 264.33 L272.894 277.168 L273.421 286.053 C273.656 286.038 273.895 286.031 274.134 286.031 Z M286.291 289.462 C286.565 289.644 287.27 290.157 287.538 290.348 L292.251 287.627 L303.447 281.165 C303.785 281.745 304.099 282.337 304.399 282.932 L292.873 288.702 L284.914 292.686 C284.809 292.477 284.698 292.267 284.577 292.06 C284.456 291.851 284.331 291.65 284.199 291.453 L286.291 289.462 Z M262.313 306.691 C262.036 306.51 261.001 306.017 260.733 305.825 L256.017 308.547 L244.823 315.01 C244.486 314.426 244.172 313.836 243.875 313.243 L255.398 307.471 L263.356 303.484 C263.461 303.698 263.573 303.906 263.694 304.115 C263.814 304.322 263.94 304.525 264.068 304.724 L262.313 306.691 Z'/%3E%3C/svg%3E ");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240.288 264.24 67.695 67.694' fill='currentColor' role='img' aria-label='SPERO sunburst mark'%3E%3Cpath fill-rule='nonzero' d='M265.081 308.285 C264.812 308.172 264.552 308.053 264.291 307.93 L259.343 312.879 L250.205 322.02 C249.726 321.544 249.27 321.054 248.828 320.559 L258.465 312 L265.122 306.091 C265.278 306.267 265.441 306.443 265.611 306.611 C265.78 306.781 265.954 306.944 266.132 307.101 M268.454 309.434 C268.199 309.369 267.952 309.299 267.703 309.229 L268.108 308.528 C267.901 308.408 267.698 308.282 267.499 308.152 L262.6 315.581 L255.508 326.341 C256.063 326.709 256.627 327.06 257.212 327.398 L263.675 316.203 L268.108 308.528 C268.315 308.649 268.524 308.762 268.736 308.866 L268.454 309.434 Z M271.688 310.015 C271.444 309.987 271.205 309.957 270.964 309.923 L268.722 318.296 L265.375 330.779 C264.725 330.605 264.084 330.41 263.455 330.2 L267.523 317.973 L270.33 309.528 C270.555 309.604 270.782 309.671 271.013 309.732 C271.245 309.793 271.478 309.849 271.711 309.896 L271.688 310.015 Z M271.013 286.441 C271.245 286.38 271.478 286.326 271.711 286.279 L269.921 277.558 L267.329 264.934 C266.677 265.068 266.027 265.22 265.375 265.394 L268.722 277.879 L265.515 265.918 C264.899 266.165 263.435 267.314 262.846 267.615 L270.33 286.647 C270.555 286.572 270.782 286.504 271.013 286.441 Z M268.108 287.645 C268.315 287.526 268.524 287.413 268.736 287.308 L264.753 279.348 L258.981 267.826 C258.386 268.123 257.796 268.438 257.212 268.775 L258.272 270.609 C257.808 271.053 257.055 271.928 256.629 272.41 L267.499 288.023 C267.698 287.889 267.901 287.765 268.108 287.645 Z M265.611 289.561 C265.78 289.392 265.954 289.229 266.131 289.072 L260.221 282.416 L251.663 272.779 C251.168 273.222 250.681 273.678 250.205 274.155 L259.343 283.295 L253.397 277.351 C253.136 277.899 252.586 279.255 252.366 279.826 L265.122 290.083 C265.278 289.905 265.441 289.731 265.611 289.561 Z M263.694 292.06 C263.814 291.851 263.94 291.65 264.068 291.453 L256.641 286.552 L245.88 279.459 C245.513 280.013 245.161 280.581 244.823 281.165 L256.017 287.627 L251.298 284.902 C251.241 285.461 250.957 286.941 250.945 287.508 L263.356 292.686 C263.461 292.477 263.573 292.267 263.694 292.06 Z M262.488 294.966 C262.552 294.736 262.622 294.506 262.695 294.281 L254.249 291.473 L242.022 287.406 C241.812 288.037 241.618 288.677 241.444 289.328 L253.927 292.672 L251.709 292.078 C251.816 292.577 252.227 293.947 252.366 294.435 L262.327 295.661 C262.374 295.429 262.427 295.197 262.488 294.966 Z M253.215 298.086 L262.078 298.086 C262.078 298.328 262.088 298.566 262.099 298.8 L255.03 299.764 C254.797 299.387 254.144 298.48 253.93 298.086 L262.078 298.086 C262.078 297.848 262.088 297.608 262.099 297.373 L253.215 296.845 L240.353 296.082 C240.315 296.745 240.288 297.413 240.288 298.086 L253.215 298.086 Z M253.927 303.5 L262.488 301.207 C262.552 301.439 262.622 301.668 262.695 301.892 L258.405 304.027 C258.132 303.754 257.416 302.919 257.16 302.636 L262.488 301.207 C262.427 300.977 262.374 300.745 262.327 300.512 L253.607 302.301 L240.982 304.894 C241.118 305.546 241.267 306.196 241.444 306.846 L253.927 303.5 Z M283.19 287.889 C283.458 288.001 283.719 288.121 283.978 288.244 L288.927 283.293 L298.066 274.155 C298.543 274.629 299.003 275.12 299.444 275.616 L289.805 284.172 L283.149 290.083 C282.994 289.905 282.83 289.731 282.659 289.561 C282.491 289.392 282.317 289.229 282.14 289.074 L283.19 287.889 Z M279.82 286.74 C280.072 286.803 280.319 286.874 280.566 286.946 L280.163 287.645 C280.369 287.765 280.573 287.892 280.77 288.023 L285.671 280.589 L292.765 269.829 C292.209 269.465 291.641 269.113 291.057 268.775 L284.596 279.97 L280.163 287.645 C279.956 287.526 279.747 287.413 279.534 287.308 L279.82 286.74 Z M276.586 286.162 C276.827 286.187 277.07 286.216 277.307 286.25 L279.549 277.879 L282.895 265.394 C283.546 265.569 284.185 265.764 284.814 265.973 L280.75 278.203 L277.939 286.647 C277.714 286.572 277.488 286.504 277.256 286.441 C277.025 286.38 276.793 286.326 276.561 286.279 L276.586 286.162 Z M274.134 310.145 C274.376 310.145 274.614 310.137 274.85 310.123 L275.379 319.008 L276.14 331.844 C275.806 331.873 275.473 331.895 275.14 331.909 C275.024 331.915 274.912 331.92 274.799 331.922 L274.767 331.924 L274.668 331.926 C274.49 331.931 274.312 331.934 274.134 331.934 C273.462 331.934 272.795 331.912 272.13 331.872 L272.894 319.008 L273.421 310.123 C273.656 310.137 273.895 310.145 274.134 310.145 Z M277.256 309.732 C277.025 309.793 276.793 309.849 276.561 309.896 L278.352 318.616 L280.943 331.24 C281.594 331.106 282.246 330.956 282.895 330.779 L279.549 318.296 L282.756 330.256 C283.371 330.006 284.815 328.969 285.403 328.672 L277.939 309.528 C277.714 309.604 277.488 309.671 277.256 309.732 Z M280.163 308.528 C279.956 308.649 279.747 308.762 279.534 308.866 L283.52 316.823 L289.291 328.349 C289.884 328.049 290.476 327.734 291.057 327.398 L289.999 325.567 C290.463 325.12 291.726 324.224 292.153 323.743 L280.77 308.152 C280.573 308.282 280.369 308.408 280.163 308.528 Z M282.659 306.611 C282.491 306.781 282.317 306.944 282.14 307.101 L288.051 313.757 L296.606 323.394 C297.103 322.952 297.59 322.497 298.066 322.02 L288.927 312.879 L294.873 318.824 C295.134 318.274 295.842 316.681 296.061 316.105 L283.149 306.091 C282.994 306.267 282.83 306.443 282.659 306.611 Z M284.577 304.115 C284.456 304.322 284.331 304.525 284.199 304.724 L291.633 309.621 L302.393 316.716 C302.757 316.16 303.11 315.593 303.447 315.01 L292.251 308.547 L296.972 311.271 C297.027 310.714 297.113 309.214 297.126 308.645 L284.914 303.484 C284.809 303.698 284.698 303.906 284.577 304.115 Z M285.781 301.207 C285.719 301.439 285.649 301.668 285.576 301.892 L294.022 304.701 L306.25 308.767 C306.459 308.136 306.653 307.498 306.828 306.846 L294.344 303.5 L296.564 304.095 C296.456 303.595 295.799 301.847 295.661 301.363 L285.944 300.512 C285.897 300.745 285.843 300.977 285.781 301.207 Z M295.055 298.086 L286.191 298.086 C286.191 297.848 286.183 297.608 286.17 297.373 L293.219 296.212 C293.454 296.592 294.126 297.693 294.34 298.086 L286.191 298.086 C286.191 298.328 286.183 298.566 286.17 298.8 L295.055 299.328 L307.921 300.092 C307.96 299.429 307.983 298.761 307.983 298.086 L295.055 298.086 Z M294.344 292.672 L285.781 294.966 C285.719 294.736 285.649 294.506 285.576 294.281 L289.666 292.126 C289.935 292.398 290.854 293.252 291.111 293.539 L285.781 294.966 C285.843 295.197 285.897 295.429 285.944 295.661 L294.665 293.871 L307.289 291.279 C307.156 290.629 307.003 289.977 306.828 289.328 L294.344 292.672 Z M274.134 286.031 C274.376 286.031 274.614 286.038 274.85 286.053 L275.379 277.168 L276.14 264.302 C275.475 264.263 274.809 264.24 274.134 264.24 C273.958 264.24 273.78 264.243 273.603 264.248 L273.503 264.248 L273.473 264.251 C273.361 264.254 273.247 264.259 273.131 264.263 C272.799 264.277 272.465 264.301 272.134 264.33 L272.894 277.168 L273.421 286.053 C273.656 286.038 273.895 286.031 274.134 286.031 Z M286.291 289.462 C286.565 289.644 287.27 290.157 287.538 290.348 L292.251 287.627 L303.447 281.165 C303.785 281.745 304.099 282.337 304.399 282.932 L292.873 288.702 L284.914 292.686 C284.809 292.477 284.698 292.267 284.577 292.06 C284.456 291.851 284.331 291.65 284.199 291.453 L286.291 289.462 Z M262.313 306.691 C262.036 306.51 261.001 306.017 260.733 305.825 L256.017 308.547 L244.823 315.01 C244.486 314.426 244.172 313.836 243.875 313.243 L255.398 307.471 L263.356 303.484 C263.461 303.698 263.573 303.906 263.694 304.115 C263.814 304.322 263.94 304.525 264.068 304.724 L262.313 306.691 Z'/%3E%3C/svg%3E ");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
}

:is(body,#spero) .about .shell { position: relative; }

:is(body,#spero) .about-title {
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
:is(body,#spero) .about-title .accent { font-style: normal; color: var(--orange); }

:is(body,#spero) .about-body {
  margin: 1.8rem 0 0;
  max-width: 42rem;
  color: var(--text-soft);
  font-size: 1.18rem;
}/* Mission / Vision / Impact: three navy tiles standing like books on a
   shelf. Each tucks under the one to its left, and its label runs down
   the seam as a spine. Laid out with flex so the spine's rotation never
   affects the spacing (rotate(180deg) swaps an element's own sides). */



:is(body,#spero) .about-cards {
  --ov: clamp(26px, 3.4vw, 56px);        /* how far each card tucks under */
  display: flex;
  align-items: stretch;
  margin-top: 3.8rem;
}

:is(body,#spero) .about-card {
  position: relative;
  flex: 1 1 0;
  min-height: clamp(300px, 30vw, 370px);
  display: flex;
  align-items: stretch;
  gap: clamp(1.1rem, 1.6vw, 1.7rem);
  padding: 2.5rem 2.1rem 2.5rem calc(var(--ov) + 1.5rem);
  border-radius: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--navy);
  color: var(--white-on-navy);
  box-shadow: -22px 30px 60px rgba(20, 24, 35, 0.3);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
:is(body,#spero) .about-card + .about-card { margin-left: calc(-1 * var(--ov)); }
:is(body,#spero) .about-card:nth-child(1) { z-index: 3; background: #39415a; }
:is(body,#spero) .about-card:nth-child(2) { z-index: 2; background: #2c3348; }
:is(body,#spero) .about-card:nth-child(3) { z-index: 1; background: #1f2534; }

:is(body,#spero) .about-card:hover {
  z-index: 4;
  transform: translateY(-14px);
  box-shadow: -26px 46px 88px rgba(20, 24, 35, 0.42);
}/* the spine: label reading bottom to top down the seam */



:is(body,#spero) .about-card-spine {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--orange);
}

:is(body,#spero) .about-card-text {
  align-self: center;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: clamp(1.1rem, 1.6vw, 1.7rem);
  font-size: clamp(1.16rem, 1.55vw, 1.4rem);
  line-height: 1.5;
  color: var(--white);
}/* The four volumes themselves, sitting under the panels: the panels are
   the mood, these are the objects you can actually pick up. Hovering
   either one lights up its pair. */



:is(body,#spero) .series-books {
  margin-top: clamp(1.6rem, 2.4vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}
:is(body,#spero) .series-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1rem 1.2rem;
  border-radius: 20px;
  text-decoration: none;
  background: var(--grey-20);
  transition: background 0.35s ease, transform 0.45s var(--ease);
}
:is(body,#spero) .series-book-cover {
  display: block;
  height: clamp(120px, 13vw, 180px);
}
:is(body,#spero) .series-book-cover img {
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(45, 50, 67, 0.26);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

:is(body,#spero) .series-book:hover,
:is(body,#spero) .series-book.is-paired {
  background: var(--sky-20);
  transform: translateY(-6px);
}
:is(body,#spero) .series-book:hover .series-book-cover img,
:is(body,#spero) .series-book.is-paired .series-book-cover img {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow: 0 26px 52px rgba(45, 50, 67, 0.34);
}

@media (max-width: 860px) {
  :is(body,#spero) .series-books { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :is(body,#spero) .about-cards { flex-direction: column; --ov: 0px; }
  :is(body,#spero) .about-card + .about-card { margin-left: 0; margin-top: 1rem; }
  :is(body,#spero) .about-card { min-height: 0; padding-left: 1.6rem; }
}/* ---- authors: editorial index with hover cover reveals ----------- */





:is(body,#spero) .authors { padding: var(--section) 0; background: var(--white); }

:is(body,#spero) .author-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem 2rem;
  align-items: center;
  padding: 1.7rem 0;
  border-top: 2px solid var(--navy);
  text-decoration: none;
}
:is(body,#spero) .author-index .spero-loop-item:last-child .author-row { border-bottom: 2px solid var(--navy); }
@media (min-width: 900px) {
  :is(body,#spero) .author-row { grid-template-columns: 172px 1fr 220px 56px; }
}
@media (min-width: 1200px) {
  :is(body,#spero) .author-row { grid-template-columns: 208px 1fr 240px 56px; }
}/* Portrait, left of the name. Photos are placeholders until SPERO
   supplies headshots; Rob's slot carries the brand mark meanwhile. */



:is(body,#spero) .author-face {
  display: none;
  position: relative;
  width: clamp(140px, 12vw, 172px);
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--grey-20);
  flex: 0 0 auto;
}
@media (min-width: 900px) {
  :is(body,#spero) .author-face { display: block; }
}
:is(body,#spero) .author-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
:is(body,#spero) .author-row:hover .author-face img { transform: scale(1.07); }
@media (min-width: 900px) {
  }

:is(body,#spero) .author-num {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--orange);
}

:is(body,#spero) .author-name {
  display: block;
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy);
  transition: color 0.25s ease;
}
:is(body,#spero) .author-role {
  display: block;
  margin-top: 0.45rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 52ch;
  /* leaves the cover's landing zone clear on the right */
  padding-right: 2rem;
}

:is(body,#spero) .author-book {
  display: none;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
:is(body,#spero) .author-book small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.3rem;
}
@media (min-width: 900px) {
  :is(body,#spero) .author-book { display: block; }
}

:is(body,#spero) .author-arrow {
  display: none;
  font-size: 1.7rem;
  color: var(--navy);
  transition: transform 0.25s var(--ease), color 0.25s ease;
}
@media (min-width: 900px) {
  :is(body,#spero) .author-arrow { display: block; justify-self: end; }
}/* Right-aligned to the title column, so it never lands on the name or
   the description. The arrow column stays clear of it. */



:is(body,#spero) .author-cover {
  display: none;
  position: absolute;
  right: 72px;
  top: 50%;
  width: clamp(200px, 20vw, 292px);
  border-radius: 6px;
  box-shadow: 0 36px 80px rgba(15, 18, 28, 0.45);
  opacity: 0;
  --cover-y: 0px;
  transform: translate(38px, calc(-50% + 34px + var(--cover-y))) rotate(-7deg) scale(0.88);
  transition: opacity 0.35s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 5;
}
@media (min-width: 1050px) {
  :is(body,#spero) .author-cover { display: block; }
  :is(body,#spero) .author-index .spero-loop-item:first-child .author-row .author-cover { --cover-y: 60px; }
}

:is(body,#spero) .author-row:hover .author-name { color: var(--orange); }
:is(body,#spero) .author-row:hover .author-arrow { color: var(--orange); transform: translateX(8px); }
:is(body,#spero) .author-row:hover .author-cover {
  opacity: 1;
  transform: translate(0, calc(-50% - 6px + var(--cover-y))) rotate(3deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  :is(body,#spero) .author-cover { transition: opacity 0.2s ease; }
}/* Author rows assemble: the portrait settles, the words follow, the
   arrow arrives last. Each row runs on its own when it comes into view. */




html.reveal-ready :is(body,#spero) .author-row.anim { opacity: 1; transform: none; filter: none; }
html.reveal-ready :is(body,#spero) .author-row.anim .author-face {
  opacity: 0;
  transform: translateY(26px) scale(0.94);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}
html.reveal-ready :is(body,#spero) .author-row.anim .author-main,
html.reveal-ready :is(body,#spero) .author-row.anim .author-book {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.85s var(--ease);
}
html.reveal-ready :is(body,#spero) .author-row.anim .author-main { transition-delay: 0.1s; }
html.reveal-ready :is(body,#spero) .author-row.anim .author-book { transition-delay: 0.18s; }
html.reveal-ready :is(body,#spero) .author-row.anim .author-arrow {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.6s var(--ease) 0.26s, transform 0.7s var(--ease) 0.26s;
}
html.reveal-ready :is(body,#spero) .author-row.anim.on .author-face,
html.reveal-ready :is(body,#spero) .author-row.anim.on .author-main,
html.reveal-ready :is(body,#spero) .author-row.anim.on .author-book { opacity: 1; transform: none; }
html.reveal-ready :is(body,#spero) .author-row.anim.on .author-arrow { opacity: 1; transform: none; }/* The title steps aside as the cover arrives; the cover says it better.
   Sits after the reveal rules so it outranks their delayed transition. */



@media (min-width: 1050px) {
  :is(body,#spero) .author-row:hover .author-book,
html.reveal-ready :is(body,#spero) .author-row.anim.on:hover .author-book {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.55s var(--ease);
    transition-delay: 0s;
  }
}/* ---- subscribe: statement CTA on the orange sheet ---------------- *//* short section, so it takes only the clearance it actually needs
   rather than the blanket reserve every other sheet uses */




:is(body,#spero) :is([data-elementor-type^="wp-"],[data-elementor-type^="single"]) > .panel.subscribe { padding-bottom: calc(var(--sheet-overlap) + clamp(2.6rem, 5vh, 3.8rem)); }

:is(body,#spero) .subscribe {
  position: relative;
  background: var(--orange);
  color: var(--navy);
  overflow: hidden;
}

:is(body,#spero) .subscribe-watermark {
  position: absolute;
  top: 50%;
  right: -13%;
  width: min(46vw, 640px);
  aspect-ratio: 1;
  margin-top: calc(min(46vw, 640px) / -2);
  background: var(--white);
  opacity: 0.16;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240.288 264.24 67.695 67.694' fill='currentColor' role='img' aria-label='SPERO sunburst mark'%3E%3Cpath fill-rule='nonzero' d='M265.081 308.285 C264.812 308.172 264.552 308.053 264.291 307.93 L259.343 312.879 L250.205 322.02 C249.726 321.544 249.27 321.054 248.828 320.559 L258.465 312 L265.122 306.091 C265.278 306.267 265.441 306.443 265.611 306.611 C265.78 306.781 265.954 306.944 266.132 307.101 M268.454 309.434 C268.199 309.369 267.952 309.299 267.703 309.229 L268.108 308.528 C267.901 308.408 267.698 308.282 267.499 308.152 L262.6 315.581 L255.508 326.341 C256.063 326.709 256.627 327.06 257.212 327.398 L263.675 316.203 L268.108 308.528 C268.315 308.649 268.524 308.762 268.736 308.866 L268.454 309.434 Z M271.688 310.015 C271.444 309.987 271.205 309.957 270.964 309.923 L268.722 318.296 L265.375 330.779 C264.725 330.605 264.084 330.41 263.455 330.2 L267.523 317.973 L270.33 309.528 C270.555 309.604 270.782 309.671 271.013 309.732 C271.245 309.793 271.478 309.849 271.711 309.896 L271.688 310.015 Z M271.013 286.441 C271.245 286.38 271.478 286.326 271.711 286.279 L269.921 277.558 L267.329 264.934 C266.677 265.068 266.027 265.22 265.375 265.394 L268.722 277.879 L265.515 265.918 C264.899 266.165 263.435 267.314 262.846 267.615 L270.33 286.647 C270.555 286.572 270.782 286.504 271.013 286.441 Z M268.108 287.645 C268.315 287.526 268.524 287.413 268.736 287.308 L264.753 279.348 L258.981 267.826 C258.386 268.123 257.796 268.438 257.212 268.775 L258.272 270.609 C257.808 271.053 257.055 271.928 256.629 272.41 L267.499 288.023 C267.698 287.889 267.901 287.765 268.108 287.645 Z M265.611 289.561 C265.78 289.392 265.954 289.229 266.131 289.072 L260.221 282.416 L251.663 272.779 C251.168 273.222 250.681 273.678 250.205 274.155 L259.343 283.295 L253.397 277.351 C253.136 277.899 252.586 279.255 252.366 279.826 L265.122 290.083 C265.278 289.905 265.441 289.731 265.611 289.561 Z M263.694 292.06 C263.814 291.851 263.94 291.65 264.068 291.453 L256.641 286.552 L245.88 279.459 C245.513 280.013 245.161 280.581 244.823 281.165 L256.017 287.627 L251.298 284.902 C251.241 285.461 250.957 286.941 250.945 287.508 L263.356 292.686 C263.461 292.477 263.573 292.267 263.694 292.06 Z M262.488 294.966 C262.552 294.736 262.622 294.506 262.695 294.281 L254.249 291.473 L242.022 287.406 C241.812 288.037 241.618 288.677 241.444 289.328 L253.927 292.672 L251.709 292.078 C251.816 292.577 252.227 293.947 252.366 294.435 L262.327 295.661 C262.374 295.429 262.427 295.197 262.488 294.966 Z M253.215 298.086 L262.078 298.086 C262.078 298.328 262.088 298.566 262.099 298.8 L255.03 299.764 C254.797 299.387 254.144 298.48 253.93 298.086 L262.078 298.086 C262.078 297.848 262.088 297.608 262.099 297.373 L253.215 296.845 L240.353 296.082 C240.315 296.745 240.288 297.413 240.288 298.086 L253.215 298.086 Z M253.927 303.5 L262.488 301.207 C262.552 301.439 262.622 301.668 262.695 301.892 L258.405 304.027 C258.132 303.754 257.416 302.919 257.16 302.636 L262.488 301.207 C262.427 300.977 262.374 300.745 262.327 300.512 L253.607 302.301 L240.982 304.894 C241.118 305.546 241.267 306.196 241.444 306.846 L253.927 303.5 Z M283.19 287.889 C283.458 288.001 283.719 288.121 283.978 288.244 L288.927 283.293 L298.066 274.155 C298.543 274.629 299.003 275.12 299.444 275.616 L289.805 284.172 L283.149 290.083 C282.994 289.905 282.83 289.731 282.659 289.561 C282.491 289.392 282.317 289.229 282.14 289.074 L283.19 287.889 Z M279.82 286.74 C280.072 286.803 280.319 286.874 280.566 286.946 L280.163 287.645 C280.369 287.765 280.573 287.892 280.77 288.023 L285.671 280.589 L292.765 269.829 C292.209 269.465 291.641 269.113 291.057 268.775 L284.596 279.97 L280.163 287.645 C279.956 287.526 279.747 287.413 279.534 287.308 L279.82 286.74 Z M276.586 286.162 C276.827 286.187 277.07 286.216 277.307 286.25 L279.549 277.879 L282.895 265.394 C283.546 265.569 284.185 265.764 284.814 265.973 L280.75 278.203 L277.939 286.647 C277.714 286.572 277.488 286.504 277.256 286.441 C277.025 286.38 276.793 286.326 276.561 286.279 L276.586 286.162 Z M274.134 310.145 C274.376 310.145 274.614 310.137 274.85 310.123 L275.379 319.008 L276.14 331.844 C275.806 331.873 275.473 331.895 275.14 331.909 C275.024 331.915 274.912 331.92 274.799 331.922 L274.767 331.924 L274.668 331.926 C274.49 331.931 274.312 331.934 274.134 331.934 C273.462 331.934 272.795 331.912 272.13 331.872 L272.894 319.008 L273.421 310.123 C273.656 310.137 273.895 310.145 274.134 310.145 Z M277.256 309.732 C277.025 309.793 276.793 309.849 276.561 309.896 L278.352 318.616 L280.943 331.24 C281.594 331.106 282.246 330.956 282.895 330.779 L279.549 318.296 L282.756 330.256 C283.371 330.006 284.815 328.969 285.403 328.672 L277.939 309.528 C277.714 309.604 277.488 309.671 277.256 309.732 Z M280.163 308.528 C279.956 308.649 279.747 308.762 279.534 308.866 L283.52 316.823 L289.291 328.349 C289.884 328.049 290.476 327.734 291.057 327.398 L289.999 325.567 C290.463 325.12 291.726 324.224 292.153 323.743 L280.77 308.152 C280.573 308.282 280.369 308.408 280.163 308.528 Z M282.659 306.611 C282.491 306.781 282.317 306.944 282.14 307.101 L288.051 313.757 L296.606 323.394 C297.103 322.952 297.59 322.497 298.066 322.02 L288.927 312.879 L294.873 318.824 C295.134 318.274 295.842 316.681 296.061 316.105 L283.149 306.091 C282.994 306.267 282.83 306.443 282.659 306.611 Z M284.577 304.115 C284.456 304.322 284.331 304.525 284.199 304.724 L291.633 309.621 L302.393 316.716 C302.757 316.16 303.11 315.593 303.447 315.01 L292.251 308.547 L296.972 311.271 C297.027 310.714 297.113 309.214 297.126 308.645 L284.914 303.484 C284.809 303.698 284.698 303.906 284.577 304.115 Z M285.781 301.207 C285.719 301.439 285.649 301.668 285.576 301.892 L294.022 304.701 L306.25 308.767 C306.459 308.136 306.653 307.498 306.828 306.846 L294.344 303.5 L296.564 304.095 C296.456 303.595 295.799 301.847 295.661 301.363 L285.944 300.512 C285.897 300.745 285.843 300.977 285.781 301.207 Z M295.055 298.086 L286.191 298.086 C286.191 297.848 286.183 297.608 286.17 297.373 L293.219 296.212 C293.454 296.592 294.126 297.693 294.34 298.086 L286.191 298.086 C286.191 298.328 286.183 298.566 286.17 298.8 L295.055 299.328 L307.921 300.092 C307.96 299.429 307.983 298.761 307.983 298.086 L295.055 298.086 Z M294.344 292.672 L285.781 294.966 C285.719 294.736 285.649 294.506 285.576 294.281 L289.666 292.126 C289.935 292.398 290.854 293.252 291.111 293.539 L285.781 294.966 C285.843 295.197 285.897 295.429 285.944 295.661 L294.665 293.871 L307.289 291.279 C307.156 290.629 307.003 289.977 306.828 289.328 L294.344 292.672 Z M274.134 286.031 C274.376 286.031 274.614 286.038 274.85 286.053 L275.379 277.168 L276.14 264.302 C275.475 264.263 274.809 264.24 274.134 264.24 C273.958 264.24 273.78 264.243 273.603 264.248 L273.503 264.248 L273.473 264.251 C273.361 264.254 273.247 264.259 273.131 264.263 C272.799 264.277 272.465 264.301 272.134 264.33 L272.894 277.168 L273.421 286.053 C273.656 286.038 273.895 286.031 274.134 286.031 Z M286.291 289.462 C286.565 289.644 287.27 290.157 287.538 290.348 L292.251 287.627 L303.447 281.165 C303.785 281.745 304.099 282.337 304.399 282.932 L292.873 288.702 L284.914 292.686 C284.809 292.477 284.698 292.267 284.577 292.06 C284.456 291.851 284.331 291.65 284.199 291.453 L286.291 289.462 Z M262.313 306.691 C262.036 306.51 261.001 306.017 260.733 305.825 L256.017 308.547 L244.823 315.01 C244.486 314.426 244.172 313.836 243.875 313.243 L255.398 307.471 L263.356 303.484 C263.461 303.698 263.573 303.906 263.694 304.115 C263.814 304.322 263.94 304.525 264.068 304.724 L262.313 306.691 Z'/%3E%3C/svg%3E ");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240.288 264.24 67.695 67.694' fill='currentColor' role='img' aria-label='SPERO sunburst mark'%3E%3Cpath fill-rule='nonzero' d='M265.081 308.285 C264.812 308.172 264.552 308.053 264.291 307.93 L259.343 312.879 L250.205 322.02 C249.726 321.544 249.27 321.054 248.828 320.559 L258.465 312 L265.122 306.091 C265.278 306.267 265.441 306.443 265.611 306.611 C265.78 306.781 265.954 306.944 266.132 307.101 M268.454 309.434 C268.199 309.369 267.952 309.299 267.703 309.229 L268.108 308.528 C267.901 308.408 267.698 308.282 267.499 308.152 L262.6 315.581 L255.508 326.341 C256.063 326.709 256.627 327.06 257.212 327.398 L263.675 316.203 L268.108 308.528 C268.315 308.649 268.524 308.762 268.736 308.866 L268.454 309.434 Z M271.688 310.015 C271.444 309.987 271.205 309.957 270.964 309.923 L268.722 318.296 L265.375 330.779 C264.725 330.605 264.084 330.41 263.455 330.2 L267.523 317.973 L270.33 309.528 C270.555 309.604 270.782 309.671 271.013 309.732 C271.245 309.793 271.478 309.849 271.711 309.896 L271.688 310.015 Z M271.013 286.441 C271.245 286.38 271.478 286.326 271.711 286.279 L269.921 277.558 L267.329 264.934 C266.677 265.068 266.027 265.22 265.375 265.394 L268.722 277.879 L265.515 265.918 C264.899 266.165 263.435 267.314 262.846 267.615 L270.33 286.647 C270.555 286.572 270.782 286.504 271.013 286.441 Z M268.108 287.645 C268.315 287.526 268.524 287.413 268.736 287.308 L264.753 279.348 L258.981 267.826 C258.386 268.123 257.796 268.438 257.212 268.775 L258.272 270.609 C257.808 271.053 257.055 271.928 256.629 272.41 L267.499 288.023 C267.698 287.889 267.901 287.765 268.108 287.645 Z M265.611 289.561 C265.78 289.392 265.954 289.229 266.131 289.072 L260.221 282.416 L251.663 272.779 C251.168 273.222 250.681 273.678 250.205 274.155 L259.343 283.295 L253.397 277.351 C253.136 277.899 252.586 279.255 252.366 279.826 L265.122 290.083 C265.278 289.905 265.441 289.731 265.611 289.561 Z M263.694 292.06 C263.814 291.851 263.94 291.65 264.068 291.453 L256.641 286.552 L245.88 279.459 C245.513 280.013 245.161 280.581 244.823 281.165 L256.017 287.627 L251.298 284.902 C251.241 285.461 250.957 286.941 250.945 287.508 L263.356 292.686 C263.461 292.477 263.573 292.267 263.694 292.06 Z M262.488 294.966 C262.552 294.736 262.622 294.506 262.695 294.281 L254.249 291.473 L242.022 287.406 C241.812 288.037 241.618 288.677 241.444 289.328 L253.927 292.672 L251.709 292.078 C251.816 292.577 252.227 293.947 252.366 294.435 L262.327 295.661 C262.374 295.429 262.427 295.197 262.488 294.966 Z M253.215 298.086 L262.078 298.086 C262.078 298.328 262.088 298.566 262.099 298.8 L255.03 299.764 C254.797 299.387 254.144 298.48 253.93 298.086 L262.078 298.086 C262.078 297.848 262.088 297.608 262.099 297.373 L253.215 296.845 L240.353 296.082 C240.315 296.745 240.288 297.413 240.288 298.086 L253.215 298.086 Z M253.927 303.5 L262.488 301.207 C262.552 301.439 262.622 301.668 262.695 301.892 L258.405 304.027 C258.132 303.754 257.416 302.919 257.16 302.636 L262.488 301.207 C262.427 300.977 262.374 300.745 262.327 300.512 L253.607 302.301 L240.982 304.894 C241.118 305.546 241.267 306.196 241.444 306.846 L253.927 303.5 Z M283.19 287.889 C283.458 288.001 283.719 288.121 283.978 288.244 L288.927 283.293 L298.066 274.155 C298.543 274.629 299.003 275.12 299.444 275.616 L289.805 284.172 L283.149 290.083 C282.994 289.905 282.83 289.731 282.659 289.561 C282.491 289.392 282.317 289.229 282.14 289.074 L283.19 287.889 Z M279.82 286.74 C280.072 286.803 280.319 286.874 280.566 286.946 L280.163 287.645 C280.369 287.765 280.573 287.892 280.77 288.023 L285.671 280.589 L292.765 269.829 C292.209 269.465 291.641 269.113 291.057 268.775 L284.596 279.97 L280.163 287.645 C279.956 287.526 279.747 287.413 279.534 287.308 L279.82 286.74 Z M276.586 286.162 C276.827 286.187 277.07 286.216 277.307 286.25 L279.549 277.879 L282.895 265.394 C283.546 265.569 284.185 265.764 284.814 265.973 L280.75 278.203 L277.939 286.647 C277.714 286.572 277.488 286.504 277.256 286.441 C277.025 286.38 276.793 286.326 276.561 286.279 L276.586 286.162 Z M274.134 310.145 C274.376 310.145 274.614 310.137 274.85 310.123 L275.379 319.008 L276.14 331.844 C275.806 331.873 275.473 331.895 275.14 331.909 C275.024 331.915 274.912 331.92 274.799 331.922 L274.767 331.924 L274.668 331.926 C274.49 331.931 274.312 331.934 274.134 331.934 C273.462 331.934 272.795 331.912 272.13 331.872 L272.894 319.008 L273.421 310.123 C273.656 310.137 273.895 310.145 274.134 310.145 Z M277.256 309.732 C277.025 309.793 276.793 309.849 276.561 309.896 L278.352 318.616 L280.943 331.24 C281.594 331.106 282.246 330.956 282.895 330.779 L279.549 318.296 L282.756 330.256 C283.371 330.006 284.815 328.969 285.403 328.672 L277.939 309.528 C277.714 309.604 277.488 309.671 277.256 309.732 Z M280.163 308.528 C279.956 308.649 279.747 308.762 279.534 308.866 L283.52 316.823 L289.291 328.349 C289.884 328.049 290.476 327.734 291.057 327.398 L289.999 325.567 C290.463 325.12 291.726 324.224 292.153 323.743 L280.77 308.152 C280.573 308.282 280.369 308.408 280.163 308.528 Z M282.659 306.611 C282.491 306.781 282.317 306.944 282.14 307.101 L288.051 313.757 L296.606 323.394 C297.103 322.952 297.59 322.497 298.066 322.02 L288.927 312.879 L294.873 318.824 C295.134 318.274 295.842 316.681 296.061 316.105 L283.149 306.091 C282.994 306.267 282.83 306.443 282.659 306.611 Z M284.577 304.115 C284.456 304.322 284.331 304.525 284.199 304.724 L291.633 309.621 L302.393 316.716 C302.757 316.16 303.11 315.593 303.447 315.01 L292.251 308.547 L296.972 311.271 C297.027 310.714 297.113 309.214 297.126 308.645 L284.914 303.484 C284.809 303.698 284.698 303.906 284.577 304.115 Z M285.781 301.207 C285.719 301.439 285.649 301.668 285.576 301.892 L294.022 304.701 L306.25 308.767 C306.459 308.136 306.653 307.498 306.828 306.846 L294.344 303.5 L296.564 304.095 C296.456 303.595 295.799 301.847 295.661 301.363 L285.944 300.512 C285.897 300.745 285.843 300.977 285.781 301.207 Z M295.055 298.086 L286.191 298.086 C286.191 297.848 286.183 297.608 286.17 297.373 L293.219 296.212 C293.454 296.592 294.126 297.693 294.34 298.086 L286.191 298.086 C286.191 298.328 286.183 298.566 286.17 298.8 L295.055 299.328 L307.921 300.092 C307.96 299.429 307.983 298.761 307.983 298.086 L295.055 298.086 Z M294.344 292.672 L285.781 294.966 C285.719 294.736 285.649 294.506 285.576 294.281 L289.666 292.126 C289.935 292.398 290.854 293.252 291.111 293.539 L285.781 294.966 C285.843 295.197 285.897 295.429 285.944 295.661 L294.665 293.871 L307.289 291.279 C307.156 290.629 307.003 289.977 306.828 289.328 L294.344 292.672 Z M274.134 286.031 C274.376 286.031 274.614 286.038 274.85 286.053 L275.379 277.168 L276.14 264.302 C275.475 264.263 274.809 264.24 274.134 264.24 C273.958 264.24 273.78 264.243 273.603 264.248 L273.503 264.248 L273.473 264.251 C273.361 264.254 273.247 264.259 273.131 264.263 C272.799 264.277 272.465 264.301 272.134 264.33 L272.894 277.168 L273.421 286.053 C273.656 286.038 273.895 286.031 274.134 286.031 Z M286.291 289.462 C286.565 289.644 287.27 290.157 287.538 290.348 L292.251 287.627 L303.447 281.165 C303.785 281.745 304.099 282.337 304.399 282.932 L292.873 288.702 L284.914 292.686 C284.809 292.477 284.698 292.267 284.577 292.06 C284.456 291.851 284.331 291.65 284.199 291.453 L286.291 289.462 Z M262.313 306.691 C262.036 306.51 261.001 306.017 260.733 305.825 L256.017 308.547 L244.823 315.01 C244.486 314.426 244.172 313.836 243.875 313.243 L255.398 307.471 L263.356 303.484 C263.461 303.698 263.573 303.906 263.694 304.115 C263.814 304.322 263.94 304.525 264.068 304.724 L262.313 306.691 Z'/%3E%3C/svg%3E ");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
}

:is(body,#spero) .subscribe-inner {
  position: relative;
  /* symmetric: the footer covers the bottom --sheet-overlap, so the
     panel carries that plus the same pad below as the inner has above */
  padding-top: clamp(2.6rem, 5vh, 3.8rem);
  padding-bottom: 0;
  display: grid;
  gap: 2.4rem;
  align-items: center;
}
@media (min-width: 900px) {/* copy left, sign-up right, one row */

  
  :is(body,#spero) .subscribe-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 3.5rem; }
}

:is(body,#spero) .kicker-on-orange { color: var(--navy); }
:is(body,#spero) .kicker-on-orange::after { background: rgba(45, 50, 67, 0.45); }

:is(body,#spero) .subscribe-title {
  /* sized to sit on one line next to the sign-up */
  font-size: clamp(1.7rem, 2.45vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
}

:is(body,#spero) .subscribe-sub {
  margin-top: 1.3rem;
  font-size: 1.14rem;
  color: rgba(45, 50, 67, 0.82);
  max-width: 40rem;
}

:is(body,#spero) .subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  width: 100%;
  max-width: 560px;
}
@media (min-width: 900px) {
  :is(body,#spero) .subscribe-form { width: clamp(360px, 27vw, 470px); }
  :is(body,#spero) .subscribe-title { white-space: nowrap; }
}
:is(body,#spero) .subscribe-form input {
  flex: 1 1 280px;
  font: inherit;
  font-size: 1.05rem;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 1.15rem 1.6rem;
}
:is(body,#spero) .subscribe-form input::placeholder { color: rgba(45, 50, 67, 0.45); }
:is(body,#spero) .subscribe-form input:focus { border-color: var(--navy); outline: none; }/* ---- footer (after rylo.com: columns, then a giant lockup) ------- */




:is(body,#spero) .site-footer {
  background: #1a1e2a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--white-on-navy);
  padding: 5rem 0 0;
}

:is(body,#spero) .footer-cols {
  display: grid;
  gap: 3rem 2rem;
  margin-bottom: 5rem;
}
@media (min-width: 800px) {
  :is(body,#spero) .footer-cols { grid-template-columns: 1fr 1fr 1fr; }
}

:is(body,#spero) .footer-col h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.3rem;
}
:is(body,#spero) .footer-col a:not(.footer-store) {
  display: block;
  padding: 0.4rem 0;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.2s ease;
}
:is(body,#spero) .footer-col a:not(.footer-store):hover { color: var(--orange); }

:is(body,#spero) .footer-store {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
:is(body,#spero) .footer-store:hover { text-decoration: underline; }
:is(body,#spero) .footer-note {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.45);
  max-width: 24ch;
}/* The showpiece: the lockup spans the full width and scales with it,
   the mark cropped off the left and the wordmark bleeding off the right.
   Sized in vw with no cap, so it never strands space on wide screens. */



:is(body,#spero) .footer-brand-giant {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: -5.2vw;   /* letters run just past the bottom edge */
  margin-left: -5vw;
  margin-right: -5vw;
}
:is(body,#spero) .footer-mark {
  flex: 0 0 auto;
  width: 22vw;
  aspect-ratio: 1;
  background: var(--orange);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240.288 264.24 67.695 67.694' fill='currentColor' role='img' aria-label='SPERO sunburst mark'%3E%3Cpath fill-rule='nonzero' d='M265.081 308.285 C264.812 308.172 264.552 308.053 264.291 307.93 L259.343 312.879 L250.205 322.02 C249.726 321.544 249.27 321.054 248.828 320.559 L258.465 312 L265.122 306.091 C265.278 306.267 265.441 306.443 265.611 306.611 C265.78 306.781 265.954 306.944 266.132 307.101 M268.454 309.434 C268.199 309.369 267.952 309.299 267.703 309.229 L268.108 308.528 C267.901 308.408 267.698 308.282 267.499 308.152 L262.6 315.581 L255.508 326.341 C256.063 326.709 256.627 327.06 257.212 327.398 L263.675 316.203 L268.108 308.528 C268.315 308.649 268.524 308.762 268.736 308.866 L268.454 309.434 Z M271.688 310.015 C271.444 309.987 271.205 309.957 270.964 309.923 L268.722 318.296 L265.375 330.779 C264.725 330.605 264.084 330.41 263.455 330.2 L267.523 317.973 L270.33 309.528 C270.555 309.604 270.782 309.671 271.013 309.732 C271.245 309.793 271.478 309.849 271.711 309.896 L271.688 310.015 Z M271.013 286.441 C271.245 286.38 271.478 286.326 271.711 286.279 L269.921 277.558 L267.329 264.934 C266.677 265.068 266.027 265.22 265.375 265.394 L268.722 277.879 L265.515 265.918 C264.899 266.165 263.435 267.314 262.846 267.615 L270.33 286.647 C270.555 286.572 270.782 286.504 271.013 286.441 Z M268.108 287.645 C268.315 287.526 268.524 287.413 268.736 287.308 L264.753 279.348 L258.981 267.826 C258.386 268.123 257.796 268.438 257.212 268.775 L258.272 270.609 C257.808 271.053 257.055 271.928 256.629 272.41 L267.499 288.023 C267.698 287.889 267.901 287.765 268.108 287.645 Z M265.611 289.561 C265.78 289.392 265.954 289.229 266.131 289.072 L260.221 282.416 L251.663 272.779 C251.168 273.222 250.681 273.678 250.205 274.155 L259.343 283.295 L253.397 277.351 C253.136 277.899 252.586 279.255 252.366 279.826 L265.122 290.083 C265.278 289.905 265.441 289.731 265.611 289.561 Z M263.694 292.06 C263.814 291.851 263.94 291.65 264.068 291.453 L256.641 286.552 L245.88 279.459 C245.513 280.013 245.161 280.581 244.823 281.165 L256.017 287.627 L251.298 284.902 C251.241 285.461 250.957 286.941 250.945 287.508 L263.356 292.686 C263.461 292.477 263.573 292.267 263.694 292.06 Z M262.488 294.966 C262.552 294.736 262.622 294.506 262.695 294.281 L254.249 291.473 L242.022 287.406 C241.812 288.037 241.618 288.677 241.444 289.328 L253.927 292.672 L251.709 292.078 C251.816 292.577 252.227 293.947 252.366 294.435 L262.327 295.661 C262.374 295.429 262.427 295.197 262.488 294.966 Z M253.215 298.086 L262.078 298.086 C262.078 298.328 262.088 298.566 262.099 298.8 L255.03 299.764 C254.797 299.387 254.144 298.48 253.93 298.086 L262.078 298.086 C262.078 297.848 262.088 297.608 262.099 297.373 L253.215 296.845 L240.353 296.082 C240.315 296.745 240.288 297.413 240.288 298.086 L253.215 298.086 Z M253.927 303.5 L262.488 301.207 C262.552 301.439 262.622 301.668 262.695 301.892 L258.405 304.027 C258.132 303.754 257.416 302.919 257.16 302.636 L262.488 301.207 C262.427 300.977 262.374 300.745 262.327 300.512 L253.607 302.301 L240.982 304.894 C241.118 305.546 241.267 306.196 241.444 306.846 L253.927 303.5 Z M283.19 287.889 C283.458 288.001 283.719 288.121 283.978 288.244 L288.927 283.293 L298.066 274.155 C298.543 274.629 299.003 275.12 299.444 275.616 L289.805 284.172 L283.149 290.083 C282.994 289.905 282.83 289.731 282.659 289.561 C282.491 289.392 282.317 289.229 282.14 289.074 L283.19 287.889 Z M279.82 286.74 C280.072 286.803 280.319 286.874 280.566 286.946 L280.163 287.645 C280.369 287.765 280.573 287.892 280.77 288.023 L285.671 280.589 L292.765 269.829 C292.209 269.465 291.641 269.113 291.057 268.775 L284.596 279.97 L280.163 287.645 C279.956 287.526 279.747 287.413 279.534 287.308 L279.82 286.74 Z M276.586 286.162 C276.827 286.187 277.07 286.216 277.307 286.25 L279.549 277.879 L282.895 265.394 C283.546 265.569 284.185 265.764 284.814 265.973 L280.75 278.203 L277.939 286.647 C277.714 286.572 277.488 286.504 277.256 286.441 C277.025 286.38 276.793 286.326 276.561 286.279 L276.586 286.162 Z M274.134 310.145 C274.376 310.145 274.614 310.137 274.85 310.123 L275.379 319.008 L276.14 331.844 C275.806 331.873 275.473 331.895 275.14 331.909 C275.024 331.915 274.912 331.92 274.799 331.922 L274.767 331.924 L274.668 331.926 C274.49 331.931 274.312 331.934 274.134 331.934 C273.462 331.934 272.795 331.912 272.13 331.872 L272.894 319.008 L273.421 310.123 C273.656 310.137 273.895 310.145 274.134 310.145 Z M277.256 309.732 C277.025 309.793 276.793 309.849 276.561 309.896 L278.352 318.616 L280.943 331.24 C281.594 331.106 282.246 330.956 282.895 330.779 L279.549 318.296 L282.756 330.256 C283.371 330.006 284.815 328.969 285.403 328.672 L277.939 309.528 C277.714 309.604 277.488 309.671 277.256 309.732 Z M280.163 308.528 C279.956 308.649 279.747 308.762 279.534 308.866 L283.52 316.823 L289.291 328.349 C289.884 328.049 290.476 327.734 291.057 327.398 L289.999 325.567 C290.463 325.12 291.726 324.224 292.153 323.743 L280.77 308.152 C280.573 308.282 280.369 308.408 280.163 308.528 Z M282.659 306.611 C282.491 306.781 282.317 306.944 282.14 307.101 L288.051 313.757 L296.606 323.394 C297.103 322.952 297.59 322.497 298.066 322.02 L288.927 312.879 L294.873 318.824 C295.134 318.274 295.842 316.681 296.061 316.105 L283.149 306.091 C282.994 306.267 282.83 306.443 282.659 306.611 Z M284.577 304.115 C284.456 304.322 284.331 304.525 284.199 304.724 L291.633 309.621 L302.393 316.716 C302.757 316.16 303.11 315.593 303.447 315.01 L292.251 308.547 L296.972 311.271 C297.027 310.714 297.113 309.214 297.126 308.645 L284.914 303.484 C284.809 303.698 284.698 303.906 284.577 304.115 Z M285.781 301.207 C285.719 301.439 285.649 301.668 285.576 301.892 L294.022 304.701 L306.25 308.767 C306.459 308.136 306.653 307.498 306.828 306.846 L294.344 303.5 L296.564 304.095 C296.456 303.595 295.799 301.847 295.661 301.363 L285.944 300.512 C285.897 300.745 285.843 300.977 285.781 301.207 Z M295.055 298.086 L286.191 298.086 C286.191 297.848 286.183 297.608 286.17 297.373 L293.219 296.212 C293.454 296.592 294.126 297.693 294.34 298.086 L286.191 298.086 C286.191 298.328 286.183 298.566 286.17 298.8 L295.055 299.328 L307.921 300.092 C307.96 299.429 307.983 298.761 307.983 298.086 L295.055 298.086 Z M294.344 292.672 L285.781 294.966 C285.719 294.736 285.649 294.506 285.576 294.281 L289.666 292.126 C289.935 292.398 290.854 293.252 291.111 293.539 L285.781 294.966 C285.843 295.197 285.897 295.429 285.944 295.661 L294.665 293.871 L307.289 291.279 C307.156 290.629 307.003 289.977 306.828 289.328 L294.344 292.672 Z M274.134 286.031 C274.376 286.031 274.614 286.038 274.85 286.053 L275.379 277.168 L276.14 264.302 C275.475 264.263 274.809 264.24 274.134 264.24 C273.958 264.24 273.78 264.243 273.603 264.248 L273.503 264.248 L273.473 264.251 C273.361 264.254 273.247 264.259 273.131 264.263 C272.799 264.277 272.465 264.301 272.134 264.33 L272.894 277.168 L273.421 286.053 C273.656 286.038 273.895 286.031 274.134 286.031 Z M286.291 289.462 C286.565 289.644 287.27 290.157 287.538 290.348 L292.251 287.627 L303.447 281.165 C303.785 281.745 304.099 282.337 304.399 282.932 L292.873 288.702 L284.914 292.686 C284.809 292.477 284.698 292.267 284.577 292.06 C284.456 291.851 284.331 291.65 284.199 291.453 L286.291 289.462 Z M262.313 306.691 C262.036 306.51 261.001 306.017 260.733 305.825 L256.017 308.547 L244.823 315.01 C244.486 314.426 244.172 313.836 243.875 313.243 L255.398 307.471 L263.356 303.484 C263.461 303.698 263.573 303.906 263.694 304.115 C263.814 304.322 263.94 304.525 264.068 304.724 L262.313 306.691 Z'/%3E%3C/svg%3E ");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240.288 264.24 67.695 67.694' fill='currentColor' role='img' aria-label='SPERO sunburst mark'%3E%3Cpath fill-rule='nonzero' d='M265.081 308.285 C264.812 308.172 264.552 308.053 264.291 307.93 L259.343 312.879 L250.205 322.02 C249.726 321.544 249.27 321.054 248.828 320.559 L258.465 312 L265.122 306.091 C265.278 306.267 265.441 306.443 265.611 306.611 C265.78 306.781 265.954 306.944 266.132 307.101 M268.454 309.434 C268.199 309.369 267.952 309.299 267.703 309.229 L268.108 308.528 C267.901 308.408 267.698 308.282 267.499 308.152 L262.6 315.581 L255.508 326.341 C256.063 326.709 256.627 327.06 257.212 327.398 L263.675 316.203 L268.108 308.528 C268.315 308.649 268.524 308.762 268.736 308.866 L268.454 309.434 Z M271.688 310.015 C271.444 309.987 271.205 309.957 270.964 309.923 L268.722 318.296 L265.375 330.779 C264.725 330.605 264.084 330.41 263.455 330.2 L267.523 317.973 L270.33 309.528 C270.555 309.604 270.782 309.671 271.013 309.732 C271.245 309.793 271.478 309.849 271.711 309.896 L271.688 310.015 Z M271.013 286.441 C271.245 286.38 271.478 286.326 271.711 286.279 L269.921 277.558 L267.329 264.934 C266.677 265.068 266.027 265.22 265.375 265.394 L268.722 277.879 L265.515 265.918 C264.899 266.165 263.435 267.314 262.846 267.615 L270.33 286.647 C270.555 286.572 270.782 286.504 271.013 286.441 Z M268.108 287.645 C268.315 287.526 268.524 287.413 268.736 287.308 L264.753 279.348 L258.981 267.826 C258.386 268.123 257.796 268.438 257.212 268.775 L258.272 270.609 C257.808 271.053 257.055 271.928 256.629 272.41 L267.499 288.023 C267.698 287.889 267.901 287.765 268.108 287.645 Z M265.611 289.561 C265.78 289.392 265.954 289.229 266.131 289.072 L260.221 282.416 L251.663 272.779 C251.168 273.222 250.681 273.678 250.205 274.155 L259.343 283.295 L253.397 277.351 C253.136 277.899 252.586 279.255 252.366 279.826 L265.122 290.083 C265.278 289.905 265.441 289.731 265.611 289.561 Z M263.694 292.06 C263.814 291.851 263.94 291.65 264.068 291.453 L256.641 286.552 L245.88 279.459 C245.513 280.013 245.161 280.581 244.823 281.165 L256.017 287.627 L251.298 284.902 C251.241 285.461 250.957 286.941 250.945 287.508 L263.356 292.686 C263.461 292.477 263.573 292.267 263.694 292.06 Z M262.488 294.966 C262.552 294.736 262.622 294.506 262.695 294.281 L254.249 291.473 L242.022 287.406 C241.812 288.037 241.618 288.677 241.444 289.328 L253.927 292.672 L251.709 292.078 C251.816 292.577 252.227 293.947 252.366 294.435 L262.327 295.661 C262.374 295.429 262.427 295.197 262.488 294.966 Z M253.215 298.086 L262.078 298.086 C262.078 298.328 262.088 298.566 262.099 298.8 L255.03 299.764 C254.797 299.387 254.144 298.48 253.93 298.086 L262.078 298.086 C262.078 297.848 262.088 297.608 262.099 297.373 L253.215 296.845 L240.353 296.082 C240.315 296.745 240.288 297.413 240.288 298.086 L253.215 298.086 Z M253.927 303.5 L262.488 301.207 C262.552 301.439 262.622 301.668 262.695 301.892 L258.405 304.027 C258.132 303.754 257.416 302.919 257.16 302.636 L262.488 301.207 C262.427 300.977 262.374 300.745 262.327 300.512 L253.607 302.301 L240.982 304.894 C241.118 305.546 241.267 306.196 241.444 306.846 L253.927 303.5 Z M283.19 287.889 C283.458 288.001 283.719 288.121 283.978 288.244 L288.927 283.293 L298.066 274.155 C298.543 274.629 299.003 275.12 299.444 275.616 L289.805 284.172 L283.149 290.083 C282.994 289.905 282.83 289.731 282.659 289.561 C282.491 289.392 282.317 289.229 282.14 289.074 L283.19 287.889 Z M279.82 286.74 C280.072 286.803 280.319 286.874 280.566 286.946 L280.163 287.645 C280.369 287.765 280.573 287.892 280.77 288.023 L285.671 280.589 L292.765 269.829 C292.209 269.465 291.641 269.113 291.057 268.775 L284.596 279.97 L280.163 287.645 C279.956 287.526 279.747 287.413 279.534 287.308 L279.82 286.74 Z M276.586 286.162 C276.827 286.187 277.07 286.216 277.307 286.25 L279.549 277.879 L282.895 265.394 C283.546 265.569 284.185 265.764 284.814 265.973 L280.75 278.203 L277.939 286.647 C277.714 286.572 277.488 286.504 277.256 286.441 C277.025 286.38 276.793 286.326 276.561 286.279 L276.586 286.162 Z M274.134 310.145 C274.376 310.145 274.614 310.137 274.85 310.123 L275.379 319.008 L276.14 331.844 C275.806 331.873 275.473 331.895 275.14 331.909 C275.024 331.915 274.912 331.92 274.799 331.922 L274.767 331.924 L274.668 331.926 C274.49 331.931 274.312 331.934 274.134 331.934 C273.462 331.934 272.795 331.912 272.13 331.872 L272.894 319.008 L273.421 310.123 C273.656 310.137 273.895 310.145 274.134 310.145 Z M277.256 309.732 C277.025 309.793 276.793 309.849 276.561 309.896 L278.352 318.616 L280.943 331.24 C281.594 331.106 282.246 330.956 282.895 330.779 L279.549 318.296 L282.756 330.256 C283.371 330.006 284.815 328.969 285.403 328.672 L277.939 309.528 C277.714 309.604 277.488 309.671 277.256 309.732 Z M280.163 308.528 C279.956 308.649 279.747 308.762 279.534 308.866 L283.52 316.823 L289.291 328.349 C289.884 328.049 290.476 327.734 291.057 327.398 L289.999 325.567 C290.463 325.12 291.726 324.224 292.153 323.743 L280.77 308.152 C280.573 308.282 280.369 308.408 280.163 308.528 Z M282.659 306.611 C282.491 306.781 282.317 306.944 282.14 307.101 L288.051 313.757 L296.606 323.394 C297.103 322.952 297.59 322.497 298.066 322.02 L288.927 312.879 L294.873 318.824 C295.134 318.274 295.842 316.681 296.061 316.105 L283.149 306.091 C282.994 306.267 282.83 306.443 282.659 306.611 Z M284.577 304.115 C284.456 304.322 284.331 304.525 284.199 304.724 L291.633 309.621 L302.393 316.716 C302.757 316.16 303.11 315.593 303.447 315.01 L292.251 308.547 L296.972 311.271 C297.027 310.714 297.113 309.214 297.126 308.645 L284.914 303.484 C284.809 303.698 284.698 303.906 284.577 304.115 Z M285.781 301.207 C285.719 301.439 285.649 301.668 285.576 301.892 L294.022 304.701 L306.25 308.767 C306.459 308.136 306.653 307.498 306.828 306.846 L294.344 303.5 L296.564 304.095 C296.456 303.595 295.799 301.847 295.661 301.363 L285.944 300.512 C285.897 300.745 285.843 300.977 285.781 301.207 Z M295.055 298.086 L286.191 298.086 C286.191 297.848 286.183 297.608 286.17 297.373 L293.219 296.212 C293.454 296.592 294.126 297.693 294.34 298.086 L286.191 298.086 C286.191 298.328 286.183 298.566 286.17 298.8 L295.055 299.328 L307.921 300.092 C307.96 299.429 307.983 298.761 307.983 298.086 L295.055 298.086 Z M294.344 292.672 L285.781 294.966 C285.719 294.736 285.649 294.506 285.576 294.281 L289.666 292.126 C289.935 292.398 290.854 293.252 291.111 293.539 L285.781 294.966 C285.843 295.197 285.897 295.429 285.944 295.661 L294.665 293.871 L307.289 291.279 C307.156 290.629 307.003 289.977 306.828 289.328 L294.344 292.672 Z M274.134 286.031 C274.376 286.031 274.614 286.038 274.85 286.053 L275.379 277.168 L276.14 264.302 C275.475 264.263 274.809 264.24 274.134 264.24 C273.958 264.24 273.78 264.243 273.603 264.248 L273.503 264.248 L273.473 264.251 C273.361 264.254 273.247 264.259 273.131 264.263 C272.799 264.277 272.465 264.301 272.134 264.33 L272.894 277.168 L273.421 286.053 C273.656 286.038 273.895 286.031 274.134 286.031 Z M286.291 289.462 C286.565 289.644 287.27 290.157 287.538 290.348 L292.251 287.627 L303.447 281.165 C303.785 281.745 304.099 282.337 304.399 282.932 L292.873 288.702 L284.914 292.686 C284.809 292.477 284.698 292.267 284.577 292.06 C284.456 291.851 284.331 291.65 284.199 291.453 L286.291 289.462 Z M262.313 306.691 C262.036 306.51 261.001 306.017 260.733 305.825 L256.017 308.547 L244.823 315.01 C244.486 314.426 244.172 313.836 243.875 313.243 L255.398 307.471 L263.356 303.484 C263.461 303.698 263.573 303.906 263.694 304.115 C263.814 304.322 263.94 304.525 264.068 304.724 L262.313 306.691 Z'/%3E%3C/svg%3E ");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: mark-spin 48s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
:is(body,#spero) .footer-mark.is-spinning { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  :is(body,#spero) .footer-mark { animation: none; }
}/* the wordmark takes whatever width is left; its height follows */


:is(body,#spero) .footer-word {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: auto;
  color: #c6cad3;
}

:is(body,#spero) .footer-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

:is(body,#spero) .footer-fine { margin-top: 1.1rem; }
:is(body,#spero) .footer-fine p {
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.38);
}/* End custom CSS */