/* A small feather dips into a paint stroke. Only transform and opacity move. */
.feather-loader {
  --loader-paint: var(--warm);
  --loader-vein: var(--glow);
  display: inline-block;
  position: relative;
  width: 64px;
  height: 68px;
  flex: none;
  color: var(--ink-2);
  vertical-align: middle;
}
.feather-loader__quill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 23% 80%;
  animation: feather-hop 1.35s cubic-bezier(.22, 1, .36, 1) infinite;
}
.feather-loader__stroke {
  position: absolute;
  width: 48%;
  height: 4%;
  left: 8%;
  bottom: 5%;
  border-radius: 50%;
  background: var(--loader-paint);
  transform-origin: left center;
  animation: feather-stroke 1.35s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes feather-hop {
  0%, 100% { transform: translateY(0) rotate(-8deg) scale(1, 1); }
  12% { transform: translateY(2px) rotate(-12deg) scale(1.04, .96); }
  36% { transform: translateY(-9px) rotate(5deg) scale(.98, 1.02); }
  59% { transform: translateY(0) rotate(-5deg) scale(1.03, .97); }
  74% { transform: translateY(-3px) rotate(0deg) scale(1, 1); }
  88% { transform: translateY(0) rotate(-8deg) scale(1, 1); }
}
@keyframes feather-stroke {
  0%, 100% { transform: scaleX(.55); opacity: .28; }
  16% { transform: scaleX(1); opacity: .85; }
  43% { transform: scaleX(.7); opacity: .3; }
  65% { transform: scaleX(.95); opacity: .65; }
}
.feather-loader--small { width: 26px; height: 28px; }
.loading-label { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn .feather-loader { color: inherit; --loader-paint: currentColor; --loader-vein: currentColor; }
.feather-loader--small .feather-loader__quill { animation-name: feather-hop-small; }
@keyframes feather-hop-small {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  35% { transform: translateY(-3px) rotate(5deg); }
  60% { transform: translateY(1px) rotate(-6deg); }
  78% { transform: translateY(-1px) rotate(0deg); }
}
.boot-message {
  min-height: min(66dvh, 540px);
  padding: 96px 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-4);
}
#cmsDraftState { display: inline-flex; align-items: center; min-height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .feather-loader__quill, .feather-loader__stroke { animation: none !important; }
  .feather-loader__quill { transform: rotate(-8deg); }
  .feather-loader__stroke { transform: scaleX(.8); opacity: .6; }
}

/* --------------------------------------------------------------------------
   The static opening in index.html. Real prose for crawlers, AI answer
   engines and no-JavaScript readers. With JavaScript enabled, the early
   inline style hides the prose before first paint and only the loader shows.
   -------------------------------------------------------------------------- */
.boot-intro {
  max-width: 62ch;
  margin: 0 auto;
  padding: 56px 24px 96px;
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.68;
}
.boot-intro__wordmark { font-family: var(--font-script); font-size: 27px; line-height: 1; color: var(--ink-2); }
.boot-intro__wordmark span { color: var(--cta, var(--accent)); }
.boot-intro h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  color: var(--ink);
  margin: 18px 0 0;
  text-wrap: balance;
}
.boot-intro__lede { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.boot-intro__lede strong { font-weight: 600; color: var(--ink); }

/* Keep the initial loader centered without the fallback article spacing. */
html.js .boot-intro { max-width: none; padding: 0; }

.boot-intro__block { margin-top: 44px; border-top: 1px solid var(--line-soft); padding-top: 28px; }
.boot-intro__block h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}
.boot-intro__block h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 24px 0 6px;
}
.boot-intro__block p { margin: 0 0 12px; }
.boot-intro__block ul { margin: 0; padding-left: 20px; }
.boot-intro__block li { margin-bottom: 8px; }
.boot-intro a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.boot-intro a:hover { color: var(--ink); }