/* ═══════════════════════════════════════════════════════════════════
   Landing page — islamiclittlebravehearts
   Recreates "The Prophets Collection" design, plus the Kids Store.
   Mobile-first: every clamp() floor is a phone value.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--cream-site); }
body {
  font-family: var(--font-serif);
  color: var(--body-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
button { font-family: inherit; color: inherit; }
::selection { background: rgba(246, 198, 77, 0.45); color: #1f3a2c; }

/* Visible keyboard focus everywhere — this is a children's site and it
   must be operable without a mouse. */
:focus-visible {
  outline: 3px solid var(--gold-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cream-card-solid); color: var(--forest);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: var(--r-pill);
  box-shadow: var(--sh-card); transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ── Scroll reveal ─────────────────────────────────────────────
   Driven by IntersectionObserver rather than animation-timeline:view(),
   which is Chromium-only — iOS Safari is the majority of this audience. */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.22, 0.7, 0.2, 1),
              transform 0.85s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ═══════════════ INTRO CURTAIN ═══════════════
   The logo animating in, once per browser session. Skippable by tap or
   key, and reduced to a plain fade when motion is reduced.            */
#intro {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 42%, #fffdf4, var(--cream-site) 62%, #f2e9cf);
  cursor: pointer;
  transition: opacity 0.7s ease, visibility 0.7s;
}
#intro[hidden] { display: none; }
#intro.done { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-logo {
  width: min(200px, 42vw); height: auto;
  filter: drop-shadow(0 16px 30px rgba(80, 90, 40, 0.3));
  animation: introLogo 1.35s cubic-bezier(0.22, 0.9, 0.24, 1) both;
}
@keyframes introLogo {
  0% { opacity: 0; transform: scale(0.55) translateY(28px) rotate(-7deg); }
  55% { opacity: 1; transform: scale(1.06) translateY(-6px) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}

.intro-word {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(17px, 4.4vw, 25px); letter-spacing: -0.02em;
  color: var(--forest); text-align: center; line-height: 1.2;
  animation: fadeUpSm 0.7s ease 0.75s both;
}
.intro-sub {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(8px, 2.3vw, 10px); letter-spacing: 0.28em;
  color: var(--gold-dark); text-align: center;
  animation: fadeUpSm 0.7s ease 0.95s both;
}

/* Sparkle burst around the shield as it lands. */
.intro-sparks { position: absolute; left: 50%; top: 42%; pointer-events: none; }
.intro-sparks span {
  position: absolute; color: var(--gold-bright); font-size: 13px;
  animation: starPop 1.1s ease-out both;
}

/* ═══════════════ NAV ═══════════════ */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 28px;
  padding: 18px clamp(16px, 4.5vw, 52px);
}
.nav-brand { display: flex; align-items: center; gap: 11px; color: var(--forest); }
.nav-brand img {
  height: 40px; width: auto;
  filter: drop-shadow(0 4px 8px rgba(80, 90, 40, 0.25));
  animation: navLogo 0.9s cubic-bezier(0.22, 0.9, 0.24, 1) both;
}
@keyframes navLogo {
  from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.nav-brand-text { display: flex; flex-direction: column; gap: 2px; }
.nav-brand-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.05em;
}
.nav-brand-sub {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 8.5px; letter-spacing: 0.22em; color: var(--forest);
}
.nav-links {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.nav-links a {
  position: relative; z-index: 1;
  color: var(--forest-soft); padding: 9px 15px; border-radius: var(--r-pill);
  transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: #3a2705; }

/* ── The travelling gold pill ──────────────────────────────────
   One shared highlight rather than a background on each link, because a
   background cannot move between elements. site.js writes --gx/--gy/--gw/--gh
   for whichever link is hovered or focused; everything else is here.
   The easing overshoots (y > 1 on the second control point) so the pill
   arrives a little past its mark and settles back — that slight weight is
   what makes it read as an object rather than a fading rectangle. It starts
   parked off the right edge, so its first appearance slides in from there. */
.nav-glide {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--gw, 0px); height: var(--gh, 36px);
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 8px 18px -6px rgba(170, 120, 20, 0.5), inset 0 1px 0 rgba(255, 247, 214, 0.6);
  opacity: 0; pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.32, 1.42, 0.5, 1),
              width 0.55s cubic-bezier(0.32, 1.42, 0.5, 1),
              opacity 0.3s ease;
}
.nav-links[data-glide="on"] .nav-glide { opacity: 1; }

/* On phones the nav wraps to two rows and the links centre under the mark. */
@media (max-width: 720px) {
  .nav { gap: 8px; padding: 14px 16px; }
  .nav-brand img { height: 34px; }
  .nav-brand-title { font-size: 11px; }
  .nav-brand-sub { font-size: 7.5px; letter-spacing: 0.18em; }
  .nav-links { width: 100%; justify-content: center; gap: 2px; font-size: 12px; }
  .nav-links a { padding: 7px 11px; }
}

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  background-color: #bee3f5;
  background-image: url("../img/hero-garden.jpg");
  background-size: cover; background-position: center bottom;
  background-repeat: no-repeat;
}
.hero-sun {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 720px 460px at 60% -8%, rgba(255, 236, 168, 0.8), transparent 70%);
}
.hero-wash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 62% 78% at 18% 46%, rgba(252, 247, 232, 0.82), rgba(252, 247, 232, 0.34) 46%, transparent 72%);
}
.hero-rays {
  position: absolute; top: -80px; left: 32%;
  width: 680px; height: 82vh; z-index: 1; pointer-events: none;
  transform-origin: top center; rotate: 15deg;
  animation: fadeIn 2.2s ease 0.5s both;
}
.hero-rays span { position: absolute; top: 0; }
.hero-rays span:nth-child(1) {
  left: 6%; width: 120px; height: 100%;
  background: linear-gradient(180deg, rgba(255, 233, 158, 0.6), rgba(255, 233, 158, 0) 82%);
  filter: blur(13px); animation: rayBreathe 7s ease-in-out infinite alternate;
}
.hero-rays span:nth-child(2) {
  left: 38%; width: 70px; height: 92%;
  background: linear-gradient(180deg, rgba(255, 240, 185, 0.55), rgba(255, 240, 185, 0) 80%);
  filter: blur(11px); animation: rayBreathe 9s ease-in-out -3s infinite alternate;
}
.hero-rays span:nth-child(3) {
  left: 62%; width: 150px; height: 96%;
  background: linear-gradient(180deg, rgba(255, 228, 150, 0.45), rgba(255, 228, 150, 0) 84%);
  filter: blur(16px); animation: rayBreathe 8s ease-in-out -5s infinite alternate;
}

.corner-foliage { position: absolute; z-index: 30; pointer-events: none; opacity: 0.5; }
.corner-foliage .sway { position: absolute; inset: 0; }
.corner-foliage .clip {
  position: absolute; inset: 0; overflow: hidden;
  filter: blur(1.5px) saturate(1.05);
}
.corner-foliage img { position: absolute; }
.corner-l {
  top: -70px; left: -80px; width: min(430px, 44vw); height: 340px;
  animation: fadeIn 1.8s ease 0.2s both;
}
.corner-l .sway { transform-origin: top left; animation: swayLeaf 9s ease-in-out infinite alternate; }
.corner-l .clip { -webkit-mask-image: radial-gradient(ellipse at 16% 10%, #000 40%, transparent 72%); mask-image: radial-gradient(ellipse at 16% 10%, #000 40%, transparent 72%); }
.corner-l img { width: 240%; max-width: none; left: -8%; top: -4%; }
.corner-r {
  top: -80px; right: -90px; width: min(400px, 40vw); height: 330px;
  animation: fadeIn 1.8s ease 0.4s both;
}
.corner-r .sway { transform-origin: top right; animation: swayLeaf 11s ease-in-out -4s infinite alternate; }
.corner-r .clip { -webkit-mask-image: radial-gradient(ellipse at 84% 8%, #000 38%, transparent 72%); mask-image: radial-gradient(ellipse at 84% 8%, #000 38%, transparent 72%); }
.corner-r img { width: 240%; max-width: none; right: -6%; top: -5%; transform: scaleX(-1); }

.hero-book {
  position: absolute; z-index: 5;
  right: clamp(10px, 3vw, 64px); top: clamp(120px, 17vh, 210px);
  width: min(620px, 46vw); aspect-ratio: 1.24 / 1;
  pointer-events: none; animation: fadeIn 2s ease 0.6s both;
}
.hero-book-inner { position: absolute; inset: 0; animation: floatSoft 9s ease-in-out infinite; }
.hero-book-mask {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 46% 48% at 50% 50%, #000 58%, transparent 90%);
  mask-image: radial-gradient(ellipse 46% 48% at 50% 50%, #000 58%, transparent 90%);
}
.hero-book-mask img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.hero-book-glow {
  position: absolute; left: 28%; right: 28%; top: 6%; height: 34%;
  background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(255, 226, 140, 0.4), transparent 72%);
  filter: blur(26px); mix-blend-mode: screen;
  animation: rayBreathe 7s ease-in-out infinite alternate;
}
/* The floating book crowds the title on narrow screens — retire it there. */
@media (max-width: 860px) { .hero-book { display: none; } }

.hero-inner {
  position: relative; z-index: 6; max-width: 1340px; margin: 0 auto;
  padding: clamp(120px, 14vh, 160px) clamp(18px, 4.5vw, 64px) 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px clamp(24px, 4vw, 70px);
}
.hero-col {
  flex: 1 1 440px; max-width: 600px;
  padding-bottom: clamp(120px, 24vh, 280px);
  display: flex; flex-direction: column; align-items: flex-start;
}

.hero-title {
  margin: 0; display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-display); font-weight: 800;
  line-height: 0.86; letter-spacing: -0.045em; color: var(--forest-ink);
}
.hero-title-1 {
  display: flex; align-items: baseline; gap: 0.34em; margin-left: 0.06em;
  animation: fadeUp 0.9s ease var(--intro-delay, 0.28s) both;
}
.hero-the {
  font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -0.01em;
}
.hero-prophets { font-size: clamp(46px, 7.6vw, 110px); }
.hero-title-2 {
  display: flex; align-items: center; gap: 0.5em; align-self: stretch;
  margin-top: 0.06em;
  animation: fadeUp 0.9s ease calc(var(--intro-delay, 0.28s) + 0.14s) both;
}
.hero-collection {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(44px, 7.2vw, 104px); letter-spacing: -0.02em;
  color: var(--forest-mid); padding-left: 0.1em;
}
.hero-star { color: var(--gold-to); font-size: clamp(14px, 1.5vw, 22px); }
.hero-rule {
  flex: 1; height: 1px; min-width: 20px;
  background: linear-gradient(90deg, rgba(201, 144, 30, 0.55), rgba(201, 144, 30, 0));
}

.hero-lede {
  display: flex; align-items: flex-start; gap: 18px;
  margin-top: 30px; max-width: 520px;
  animation: fadeUp 0.9s ease calc(var(--intro-delay, 0.28s) + 0.27s) both;
}
.hero-lede-bar {
  flex: none; width: 2px; align-self: stretch; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-to), rgba(227, 163, 42, 0));
}
.hero-lede-text { display: flex; flex-direction: column; gap: 12px; }
.hero-lede-lead {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px, 1.8vw, 23px); line-height: 1.42;
  color: var(--forest-mid); text-wrap: balance;
}
.hero-lede p {
  margin: 0; max-width: 42ch;
  font-size: clamp(15.5px, 1.35vw, 17.5px); line-height: 1.78;
  color: var(--body-ink-2); text-wrap: pretty;
}

.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px;
  animation: fadeUp 0.9s ease calc(var(--intro-delay, 0.28s) + 0.42s) both;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color: #3a2705; border: none; border-radius: var(--r-pill);
  padding: 17px 32px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15.5px; letter-spacing: -0.01em;
  box-shadow: 0 16px 34px -10px rgba(170, 120, 20, 0.55), inset 0 1px 0 rgba(255, 247, 214, 0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-gold:hover {
  transform: translateY(-3px); color: #3a2705;
  box-shadow: 0 24px 44px -12px rgba(170, 120, 20, 0.6), inset 0 1px 0 rgba(255, 247, 214, 0.7);
}
.btn-gold:active { transform: translateY(0) scale(0.97); }

.btn-quiet {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; color: var(--forest);
  padding: 17px 4px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border-bottom: 1.5px solid rgba(31, 58, 44, 0.3); border-radius: 0;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.btn-quiet:hover { border-color: var(--gold-accent); color: var(--gold-darker); }

.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  z-index: 14; pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 244, 228, 0), var(--cream-site) 92%);
}
/* A real link down to the first section, not decoration. The hover lift is on
   the pill rather than on .scroll-cue, because .scroll-cue owns the
   translateX(-50%) that centres it — a transform here would replace it. */
.scroll-cue {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 7px;
  animation: fadeIn 1.2s ease 1.6s both;
}
.scroll-cue-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 253, 244, 0.92);
  border: 1.5px solid rgba(201, 144, 30, 0.45);
  border-radius: var(--r-pill); padding: 10px 20px;
  font-family: var(--font-display); font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 700; letter-spacing: -0.01em; color: var(--forest-ink);
  box-shadow: 0 14px 30px -16px rgba(60, 70, 35, 0.6);
  transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.5, 1),
              background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.scroll-cue:hover .scroll-cue-pill {
  transform: translateY(-4px);
  background: #fffdf4; border-color: var(--gold-accent);
  box-shadow: 0 20px 36px -14px rgba(60, 70, 35, 0.65);
}
.scroll-cue:active .scroll-cue-pill { transform: translateY(-1px) scale(0.98); }
.scroll-cue-pill span { color: var(--gold-to); font-size: 13px; animation: twinkle 2.6s ease-in-out infinite; }
.scroll-cue-pill span:last-child { animation-delay: -1.3s; }

/* ═══════════════ SECTION FURNITURE ═══════════════ */
.section { position: relative; scroll-margin-top: 20px; }
.eyebrow {
  font-family: var(--font-mono); font-size: clamp(10px, 2.6vw, 11px);
  letter-spacing: 0.24em; font-weight: 700; color: var(--gold-dark);
}
.eyebrow-light { color: var(--gold-bright); }
.section-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 13px;
}
.section-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 5.6vw, 60px); letter-spacing: -0.03em;
  line-height: 1.04; color: var(--forest); text-wrap: balance;
}
.section-head p {
  margin: 0; max-width: 48ch; font-size: clamp(15.5px, 3.9vw, 18px);
  line-height: 1.7; color: var(--body-ink); text-wrap: pretty;
}

/* ═══════════════ INSIDE A BOOK ═══════════════ */
.inside {
  background: var(--cream-site);
  padding: clamp(70px, 12vh, 140px) clamp(16px, 4.5vw, 52px) clamp(80px, 13vh, 150px);
}
.inside-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }

.shelf { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 4vw, 22px); margin-top: 14px; flex-wrap: wrap; }
/* Hovering lifts the book off the shelf. The easing overshoots slightly so it
   rises with a little weight, and the shadow lengthens and softens as it goes
   up — without that, a moving book with a fixed shadow just looks like it slid.
   NB: site.js strips the inline `bookIn` entrance animation once it finishes;
   its `both` fill mode would otherwise keep applying a transform, and an
   animated transform beats a :hover one in the cascade. */
.spine-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; padding: 6px; cursor: pointer;
  transition: transform 0.46s cubic-bezier(0.34, 1.32, 0.48, 1);
}
.spine-btn:hover, .spine-btn:focus-visible { transform: translateY(-14px) rotate(-2deg) scale(1.045); }
.spine-btn:active { transform: translateY(-6px) rotate(-1deg) scale(0.99); }
.spine {
  position: relative; display: block; width: 58px; height: 78px;
  border-radius: 3px 7px 7px 3px; background: #4c3a1c; overflow: hidden;
  box-shadow: 0 10px 20px -6px rgba(40, 30, 10, 0.55);
  transition: box-shadow 0.46s ease;
}
.spine-btn:hover .spine, .spine-btn:focus-visible .spine {
  box-shadow: 0 26px 34px -10px rgba(40, 30, 10, 0.5);
}
.spine-label { transition: color 0.3s ease; }
.spine-btn:hover .spine-label { color: var(--gold-darker); }
.spine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spine::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 2;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(30, 22, 8, 0.75), rgba(255, 255, 255, 0.18) 78%, rgba(30, 22, 8, 0.28));
}
.spine::after {
  content: ""; position: absolute; right: 0; top: 3px; bottom: 3px; width: 4px; z-index: 2;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(180deg, #fffdf4, #fffdf4 2px, #e4dac0 2px, #e4dac0 3px);
}
.spine-ring {
  position: absolute; inset: 0; z-index: 3; border-radius: 3px 7px 7px 3px;
  border: 2.5px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 244, 0.5);
  transition: border-color 0.25s ease;
}
.spine-btn[aria-pressed="true"] .spine-ring { border-color: var(--gold-border); }
.spine-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--forest-soft); }
.spine-sparks { position: absolute; left: 50%; top: 34%; pointer-events: none; }
.spine-sparks span { position: absolute; color: var(--gold-bright); animation: starPop 0.95s ease-out both; }

/* ── The open book spread ──────────────────────────────────── */
.book-spread { position: relative; }
.book-spread::before,
.book-spread::after {
  content: ""; position: absolute; border: 1px solid rgba(140, 120, 70, 0.25);
  border-radius: 18px;
}
.book-spread::before { inset: 12px -10px -12px 10px; background: #f1e8cf; transform: rotate(0.5deg); }
.book-spread::after { inset: 6px -5px -6px 5px; background: #f7efda; transform: rotate(-0.3deg); }
/* z-index is load-bearing: the two decorative paper sheets above are ::before
   and ::after on .book-spread, and ::after sits AFTER this element in tree
   order. With auto z-index on all three it paints over the pages and the whole
   spread renders as a blank cream card. */
.book-pages {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(60, 70, 35, 0.4);
}
.book-page-l, .book-page-r {
  flex: 1 1 340px; min-width: 0;
  padding: clamp(24px, 4.5vw, 52px);
  display: flex; flex-direction: column;
}
.book-page-l {
  background: linear-gradient(105deg, #fffdf4 60%, #faf3e0 100%);
  border-radius: 18px 4px 4px 18px;
  box-shadow: inset -22px 0 28px -22px rgba(90, 70, 30, 0.3);
  align-items: center; gap: 18px; text-align: center;
}
.book-page-r {
  position: relative;
  background: linear-gradient(255deg, #fffdf4 60%, #faf3e0 100%);
  border-radius: 4px 18px 18px 4px;
  box-shadow: inset 22px 0 28px -22px rgba(90, 70, 30, 0.3);
  gap: 20px;
}
/* Stacked on phones: square off the seam so it reads as one card. */
@media (max-width: 760px) {
  .book-page-l { border-radius: 18px 18px 0 0; box-shadow: none; }
  .book-page-r { border-radius: 0 0 18px 18px; box-shadow: none; }
}

.cover-frame { position: relative; width: min(230px, 64%); aspect-ratio: 100 / 128; }
.cover-frame::before {
  content: ""; position: absolute; inset: -9px;
  border: 1.5px solid rgba(201, 144, 30, 0.45);
  border-radius: 999px 999px 16px 16px;
}
.cover-art {
  position: absolute; inset: 0; overflow: hidden; background: #406c4e;
  border-radius: 999px 999px 10px 10px;
  box-shadow: 0 18px 36px -12px rgba(60, 70, 35, 0.45);
}
.cover-art img { width: 100%; height: 100%; object-fit: cover; }

.book-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; font-weight: 700; color: var(--gold-dark); }
.book-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 2.6vw, 31px); letter-spacing: -0.02em;
  line-height: 1.12; color: var(--forest); text-wrap: balance;
}
.book-virtue {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mint); border: 1px solid rgba(78, 141, 83, 0.3);
  border-radius: var(--r-pill); padding: 6px 15px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; color: #3e6b47;
}
.book-virtue span { color: var(--gold-to); }
.book-blurb { margin: 4px 0 0; max-width: 40ch; font-size: 15.5px; line-height: 1.75; color: var(--body-ink); text-wrap: pretty; }
.book-status { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--sage-meta); text-wrap: pretty; }
.book-meta { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.bm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 38px; }
.bm-head-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; font-weight: 700; color: var(--gold-dark); }
.bm-head-r { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--sage-meta); }
.bm-ribbon-tab {
  position: absolute; top: -6px; right: 44px; width: 24px; height: 74px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-to));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: 0 6px 12px rgba(120, 80, 10, 0.35);
}
.bm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-gold-solid {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-to));
  color: #fff; border: none; border-radius: var(--r-pill);
  padding: 15px 28px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  text-shadow: 0 1px 2px rgba(150, 100, 10, 0.3);
  box-shadow: var(--sh-gold); transition: transform 0.25s ease;
}
.btn-gold-solid:hover { transform: translateY(-2px); color: #fff; }
.btn-gold-solid:active { transform: scale(0.97); }
.link-restart {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--forest-soft); border-bottom: 1.5px solid rgba(31, 58, 44, 0.25); padding-bottom: 2px;
}

.bm-ribbon-wrap { display: flex; justify-content: center; padding: 6px 0 2px; }
.bm-ribbon {
  position: relative; width: min(168px, 48%);
  animation: ribbonSway 7s ease-in-out infinite; transform-origin: top center;
}
.bm-ribbon-body {
  position: relative; border-radius: 8px 8px 0 0;
  background: linear-gradient(150deg, var(--gold-bright) 0%, var(--gold-to) 48%, var(--gold-accent) 100%);
  box-shadow: 0 16px 30px -14px rgba(120, 80, 10, 0.7), inset 0 1px 0 rgba(255, 247, 214, 0.7);
  padding: 20px 14px 48px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
}
.bm-ribbon-body hr { width: 34px; height: 1px; border: none; background: rgba(255, 253, 244, 0.6); margin: 0; }
.bm-ribbon-cap { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.22em; font-weight: 700; color: #fffdf4; }
.bm-ribbon-num {
  font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1;
  color: #fffdf4; text-shadow: 0 2px 4px rgba(120, 80, 10, 0.45);
}
.bm-ribbon-of { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; white-space: nowrap; color: var(--warm-1); }
.bm-ribbon-story { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; white-space: nowrap; color: #fffdf4; padding-top: 2px; }
.bm-ribbon-pin {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid var(--gold-accent); background: #fffdf4;
  box-shadow: 0 3px 6px rgba(120, 80, 10, 0.3);
}

.bm-progress { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.bm-track {
  width: 100%; max-width: 280px; height: 8px; border-radius: var(--r-pill);
  background: #efe6cd; border: 1px solid rgba(140, 120, 70, 0.3); overflow: hidden;
}
.bm-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-bright), var(--gold-to));
  transition: width 0.5s ease;
}
.bm-status { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--body-ink); max-width: 34ch; text-wrap: pretty; }
.bm-foot {
  margin-top: auto; padding-top: 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  color: var(--sage-meta); text-align: center;
}

/* ═══════════════ THE DUSK RAMP (cream day → green night) ═══════════════
   The old four-stop gradient over 140px put a visible seam across the page.
   Three things fix it: more height for the colour to travel in, many more
   stops so no single step is large enough to band, and planting.

   The planting is the hero's own foliage art, mirrored in from both sides.
   It is a JPEG with no alpha, so it is composited with mix-blend-mode:
   multiply — the picture's near-white sky leaves the ramp untouched while
   the leaves darken it, which reads as cut-out foliage without needing a
   transparent source. `isolation: isolate` keeps that blend inside the ramp
   instead of letting it reach down the page. .ramp-veil then re-asserts the
   two end colours so the artwork dissolves at the top and bottom edges.  */
.dusk-ramp {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(200px, 30vh, 340px);
  background: linear-gradient(180deg,
    var(--cream-site) 0%,
    #f4f0da 10%,
    #e8e9c8 22%,
    #d5deb2 34%,
    #b6ca9b 46%,
    #93b085 57%,
    #74987a 68%,
    #5b8467 78%,
    #4a7454 88%,
    #3c6449 100%);
}
.ramp-foliage {
  position: absolute; bottom: -8%; height: 128%;
  width: min(520px, 48vw);
  mix-blend-mode: multiply; opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 94%);
  mask-image: linear-gradient(90deg, #000 30%, transparent 94%);
}
.ramp-foliage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  filter: blur(1px) saturate(1.05);
}
.ramp-l { left: -5%; }
/* Mirrored, and because the mask lives in the element's own coordinate space
   the flip carries it too — one mask rule fades both sides toward the middle. */
.ramp-r { right: -5%; transform: scaleX(-1); }
.ramp-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    var(--cream-site) 0%,
    rgba(250, 244, 228, 0) 22%,
    rgba(60, 100, 73, 0) 58%,
    rgba(60, 100, 73, 0.3) 74%,
    rgba(60, 100, 73, 0.72) 87%,
    rgba(60, 100, 73, 0.95) 95%,
    #3c6449 100%);
}
@media (max-width: 720px) {
  .ramp-foliage { width: 62vw; opacity: 0.8; }
}
/* ═══════════════ HOW READING WORKS ═══════════════ */
.how {
  background: linear-gradient(180deg, #3c6449 0%, #28503b 42%, #1b3a2b 100%);
  padding: 30px clamp(16px, 4.5vw, 52px) clamp(90px, 14vh, 160px);
  overflow: clip;
}
.how .section-head h2 { color: var(--cream-on-dark-2); font-weight: 700; font-size: clamp(28px, 4.6vw, 46px); letter-spacing: -0.025em; }
.how .section-head p { color: rgba(250, 243, 220, 0.82); max-width: 56ch; }
.how-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 6vw, 48px); }

.fireflies { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fireflies span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fff6d0, var(--gold-border) 70%);
}

.how-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.how-card {
  flex: 1 1 300px; max-width: 356px;
  background: linear-gradient(180deg, #fffdf4, #f6eeda);
  border-radius: 18px; padding: 12px 12px 24px;
  box-shadow: 0 24px 50px -16px rgba(5, 20, 12, 0.6), 0 0 0 1px rgba(246, 198, 77, 0.25);
}
.how-card-art { position: relative; height: 196px; border-radius: 12px; overflow: hidden; }
.how-card-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how-card-body { padding: 20px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.how-card-kicker { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; font-weight: 700; color: var(--gold-dark); }
.how-card-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--forest); }
.how-card-body p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body-ink); text-wrap: pretty; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
  border: 1px solid rgba(246, 198, 77, 0.4); background: rgba(255, 253, 244, 0.07);
  border-radius: var(--r-pill); padding: 9px 18px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  font-weight: 700; color: var(--cream-on-dark-3);
}

/* ═══════════════ FOR PARENTS ═══════════════ */
.parents {
  background: linear-gradient(180deg, #1b3a2b 0%, #152e22 100%);
  padding: clamp(80px, 13vh, 150px) clamp(16px, 4.5vw, 52px);
  overflow: clip;
}
.parents-arc { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); pointer-events: none; }
.parents-arc-1 { width: min(760px, 92vw); aspect-ratio: 100 / 72; border: 1.5px solid rgba(246, 198, 77, 0.14); border-radius: 999px 999px 24px 24px; }
.parents-arc-2 { width: min(700px, 84vw); aspect-ratio: 100 / 70; border: 1px solid rgba(246, 198, 77, 0.1); border-radius: 999px 999px 20px 20px; }
.parents-inner {
  position: relative; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
}
.parents-inner h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4.6vw, 46px); letter-spacing: -0.025em;
  line-height: 1.06; color: var(--cream-on-dark-2); text-wrap: balance;
}
.parents-inner p { margin: 0; max-width: 58ch; font-size: clamp(16px, 4vw, 17.5px); line-height: 1.8; color: rgba(250, 243, 220, 0.85); text-wrap: pretty; }
.parents-list { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 12px; }
.parents-list div { display: flex; align-items: center; gap: 12px; }
.parents-list span:first-child { color: var(--gold-bright); font-size: 14px; }
.parents-list span:last-child { font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 3.7vw, 15.5px); color: var(--cream-on-dark-3); text-align: left; }

/* ═══════════════ FOOTER ═══════════════ */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #152e22 0%, #0d2016 55%, #0a1a12 100%);
  padding: clamp(70px, 11vh, 130px) clamp(16px, 4.5vw, 52px) 48px;
  overflow: clip;
}
.footer-stars { position: absolute; inset: 0; pointer-events: none; }
.footer-stars span { position: absolute; color: var(--warm-2); }
.footer-moon {
  position: absolute; left: 76%; top: 16%; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 42% 45%, #fff0be, var(--gold-border) 78%);
  box-shadow: 0 0 22px rgba(255, 222, 120, 0.5);
}
.footer-moon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #0d2016; transform: translate(9px, -4px);
}
.footer-inner {
  position: relative; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
}
.footer-inner img {
  height: 82px; width: auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
  animation: floatSoft 5s ease-in-out infinite;
}
.footer-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 5vw, 24px); letter-spacing: -0.02em; color: var(--cream-on-dark-2); margin-top: 6px; }
.footer-kicker { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.26em; font-weight: 700; color: var(--gold-bright); }
.footer-rule { width: 110px; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 198, 77, 0.5), transparent); margin: 10px 0; }
.footer-part { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: rgba(250, 243, 220, 0.75); }
.footer-by { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: rgba(250, 243, 220, 0.85); }
.footer-by a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(246, 198, 77, 0.45); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 8px; }
.footer-nav a { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: rgba(250, 243, 220, 0.7); }
.footer-nav a:hover { color: var(--gold-bright); }
.footer-sign { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.28em; color: rgba(250, 243, 220, 0.45); margin-top: 22px; }

/* The sound toggle is a SHARED component and lives in tokens.css — both this
   page and the reader use it, and the reader does not load this file. */

/* ═══════════════════════════════════════════════════════════════════
   KIDS STORE
   Sits between "How reading works" and "For parents", so it is styled
   as a lantern-lit clearing rather than a bright block — that keeps the
   page's dusk → nightfall gradient unbroken. Product cards stay cream so
   the goods read brightly against the dark.
   ═══════════════════════════════════════════════════════════════════ */
.store {
  background: linear-gradient(180deg, #1b3a2b 0%, #1e4030 46%, #1b3a2b 100%);
  padding: clamp(80px, 13vh, 150px) clamp(16px, 4.5vw, 52px) clamp(90px, 14vh, 160px);
  overflow: clip;
}
/* Warm lantern pools, so the clearing looks lit rather than merely lighter. */
.store-lanterns { position: absolute; inset: 0; pointer-events: none; }
.store-lanterns i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.24), transparent 68%);
  filter: blur(8px);
}
.store-lanterns i:nth-child(1) { left: -6%; top: 8%; width: 380px; height: 380px; animation: rayBreathe 9s ease-in-out infinite alternate; }
.store-lanterns i:nth-child(2) { right: -8%; top: 34%; width: 440px; height: 440px; animation: rayBreathe 11s ease-in-out -4s infinite alternate; }
.store-lanterns i:nth-child(3) { left: 38%; bottom: -10%; width: 340px; height: 340px; animation: rayBreathe 8s ease-in-out -2s infinite alternate; }

.store-inner { position: relative; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(34px, 6vw, 52px); }
.store .section-head h2 { color: var(--cream-on-dark-2); font-size: clamp(30px, 5.4vw, 54px); }
.store .section-head p { color: rgba(250, 243, 220, 0.82); max-width: 52ch; }

/* ── Product cards ─────────────────────────────────────────── */
.store-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.store-card {
  flex: 1 1 260px; max-width: 330px;
  display: flex; flex-direction: column; gap: 0;
  background: linear-gradient(180deg, #fffdf4, #f6eeda);
  border: 2px solid var(--gold-border); border-radius: var(--r-card);
  padding: 14px 14px 22px; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  box-shadow: 0 24px 50px -18px rgba(5, 20, 12, 0.7), 0 0 0 1px rgba(246, 198, 77, 0.2);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.store-card:hover {
  transform: translateY(-5px);
  border-color: var(--green);
  box-shadow: 0 30px 58px -18px rgba(5, 20, 12, 0.75), 0 0 0 1px rgba(62, 142, 79, 0.3);
}
.store-card:active { transform: translateY(-1px) scale(0.985); }

/* Square, because the three product photographs are a mix of portrait and
   landscape and a square crop is the only one that treats all of them well. */
.store-card-art {
  position: relative; border-radius: var(--r-cover); overflow: hidden;
  aspect-ratio: 1 / 1;
  background: radial-gradient(ellipse at 50% 30%, #fff8e2, #f3e8cd 70%, #ecdfc0);
}
.store-card-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; /* per-card object-position is set inline */
  transition: transform 0.55s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.store-card:hover .store-card-art img { transform: scale(1.05); }
/* z-index because the badge precedes the image in the markup — without it the
   positioned image paints straight over it. */
.store-card-art .soon {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  background: rgba(43, 90, 167, 0.94); color: #fff;
  border-radius: var(--r-pill); padding: 5px 12px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; font-weight: 700;
  box-shadow: 0 6px 14px -4px rgba(10, 30, 60, 0.5);
}
.store-card-body { padding: 18px 6px 0; display: flex; flex-direction: column; gap: 8px; }
.store-card-kicker { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; font-weight: 700; color: var(--gold-dark); }
.store-card-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--forest); }
.store-card-body p { margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--body-ink); text-wrap: pretty; }

/* ── Register panel ────────────────────────────────────────── */
.register {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 253, 244, 0.97), rgba(246, 238, 218, 0.97));
  border: 2px solid var(--gold-border); border-radius: var(--r-card);
  padding: clamp(26px, 5.5vw, 44px) clamp(20px, 5vw, 48px);
  box-shadow: 0 28px 60px -20px rgba(5, 20, 12, 0.75);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.register-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint); border: 1px solid rgba(78, 141, 83, 0.35);
  border-radius: var(--r-pill); padding: 7px 16px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  font-weight: 700; color: var(--green-deep);
}
.register h3 {
  margin: 0; max-width: 22ch;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 5vw, 33px); letter-spacing: -0.025em;
  line-height: 1.12; color: var(--forest); text-wrap: balance;
}
.register-note { margin: 0; max-width: 46ch; font-size: clamp(14.5px, 3.7vw, 16px); line-height: 1.65; color: var(--body-ink); text-wrap: pretty; }

.register-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; max-width: 540px; margin-top: 4px; }
.register-field { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.register-form input[type="email"] {
  width: 100%; font-family: var(--font-body), var(--font-display); font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--blue-deep); background: #fff;
  border: 2px solid rgba(43, 90, 167, 0.22); border-radius: var(--r-pill);
  padding: 15px 22px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.register-form input[type="email"]::placeholder { color: #9aa398; }
.register-form input[type="email"]:focus {
  outline: none; border-color: var(--gold-border);
  box-shadow: 0 0 0 4px rgba(246, 198, 77, 0.28);
}
.register-form input[type="email"][aria-invalid="true"] { border-color: #c2544a; }
.register-form .btn-gold-solid { flex: 0 0 auto; padding: 15px 30px; justify-content: center; }
.register-form .btn-gold-solid[disabled] { opacity: 0.62; cursor: progress; transform: none; }

/* Honeypot — a real person never sees or tabs into this. */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

.register-msg {
  min-height: 22px; font-family: var(--font-display); font-weight: 600;
  font-size: 14.5px; line-height: 1.5; max-width: 44ch; text-wrap: pretty;
}
.register-msg[data-state="error"] { color: #a83f35; }
.register-msg[data-state="ok"] { color: var(--green-deep); }

/* Success takes over the panel — a small celebration, then a calm confirmation. */
.register-done { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: fadeUpSm 0.6s ease both; }
.register-done .tick {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-to));
  display: grid; place-items: center; color: #fff; font-size: 30px;
  box-shadow: 0 14px 30px -8px rgba(190, 140, 30, 0.65);
  animation: breathe 2.6s ease-in-out infinite;
}
.register-done h3 { color: var(--green-deep); }

/* The one line on this panel written for the grown-up, so it gets the friendly
   rounded face rather than the mono used for labels — mono reads as machinery,
   and this is a reassurance. Width is pinned to the form's own 540px so the
   two blocks share an edge instead of the text wandering wider than the field
   above it, and `balance` evens the line lengths under a centred heading. */
.register-small {
  font-family: var(--font-body), var(--font-display);
  font-weight: 400; font-size: 13.5px; line-height: 1.75; letter-spacing: 0;
  color: var(--muted-label-2);
  width: 100%; max-width: 540px; text-wrap: balance;
}

@media (max-width: 560px) {
  .register-form { flex-direction: column; }
  .register-form .btn-gold-solid { width: 100%; }
}