/* Direction: a page of a book caught on a spring breeze. Paper sky, a serif voice, and the
   live word highlight as the hero, because hearing the page is the whole product. */
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces/files/fraunces-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces/files/fraunces-latin-wght-italic.woff2) format("woff2"); }

:root {
  --ww-ground: #f3f8fb;   /* sky-washed paper */
  --ww-page: #fffdf8;     /* the book page */
  --ww-ink: #13283b;      /* text, 14:1 on ground */
  --ww-ink-2: #4d6274;    /* labels, 6:1 on ground */
  --ww-sky: #6cc3ea;      /* brand: the kite */
  --ww-sky-ink: #1d6a96;  /* brand for small text and buttons, 5.6:1 */
  --ww-peach: #ffc9b0;    /* one job: the word being spoken */
  --ww-deep: #0f2a3f;     /* invitation surface */
  --ww-hair: rgb(19 40 59 / .1);
  --ww-shadow: 0 1px 2px rgb(19 40 59 / .05), 0 24px 60px -20px rgb(19 40 59 / .22);
  --ww-display: "Fraunces", Georgia, serif;
  --ww-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --ww-ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ww-ink); font: 1.0625rem/1.55 var(--ww-ui); background:
  radial-gradient(55% 40% at 10% 0%, rgb(108 195 234 / .35), transparent 70%),
  radial-gradient(45% 35% at 100% 25%, rgb(255 201 176 / .35), transparent 70%),
  radial-gradient(60% 40% at 50% 100%, rgb(150 225 210 / .3), transparent 70%) fixed, var(--ww-ground); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ww-sky-ink); outline-offset: 3px; border-radius: 6px; }
.wide { max-width: 90rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .wide { padding-inline: 2.5rem; } }

/* Floating frosted header pill */
header { position: sticky; top: 0; z-index: 50; pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 1.5rem); max-width: 72rem; height: 3.25rem; margin: .5rem auto 0; padding: 0 .4rem 0 1.25rem;
  border-radius: 999px; background: rgb(243 248 251 / .28);
  -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), 0 1px 1px rgb(19 40 59 / .04), 0 1px 3px rgb(19 40 59 / .04); }
.brand { display: flex; white-space: nowrap; align-items: center; gap: .5rem; font: 700 1.15rem var(--ww-display); letter-spacing: -.02em; }

.btn { display: inline-flex; white-space: nowrap; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.25rem; border-radius: 999px;
  border: 1px solid transparent; background: var(--ww-sky-ink); color: #fff; font: 600 .95rem var(--ww-ui);
  transition: background .25s var(--ww-ease); }
.pill .btn { min-height: 2.45rem; }
.btn.light { background: #fff; color: var(--ww-deep); min-height: 3.25rem; padding: 0 1.6rem; font-size: 1.05rem; }
.arrow { transition: transform .3s var(--ww-ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #155578; }
  .btn.light:hover { background: #e6f3fa; }
  .btn:hover .arrow { transform: translateX(3px); }
}

/* 1. The promise */
.hero { padding-block: 4.5rem 2.5rem; text-align: center; }
.label { margin: 0 0 1rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ww-ink-2); }
h1, h2 { margin: 0; font-family: var(--ww-display); font-weight: 750; letter-spacing: -.04em; line-height: .95; text-wrap: balance; }
h1 { font-size: clamp(3rem, 9vw, 7.5rem); max-width: 14ch; margin-inline: auto; }
em { font-style: italic; font-weight: 600; color: var(--ww-sky-ink); }
.sub { margin: 1.25rem auto 0; max-width: 40ch; color: var(--ww-ink-2); text-wrap: balance; }

/* The product's own surface: a page being spoken */
.stage { position: relative; margin: 0 auto; padding-block: 1rem 5rem; max-width: 62rem; }
.page { position: relative; padding: 2.25rem 1.5rem 6rem; border-radius: 28px; background: var(--ww-page); box-shadow: var(--ww-shadow); }
.page p { margin: 0; font: 1.35rem/1.65 ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif; }
.page span { border-radius: 5px; padding: 0 .08em; margin: 0 -.08em; transition: background .3s var(--ww-ease); }
.page span.now { background: var(--ww-peach); }
.bar { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem;
  padding: .35rem; border-radius: 999px; background: rgb(255 255 255 / .7); font: 600 .85rem var(--ww-ui); color: var(--ww-ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 10px 30px rgb(19 40 59 / .14), 0 2px 6px rgb(19 40 59 / .06); }
.ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-style: normal; }
.play { background: var(--ww-sky-ink); color: #fff; }
.pct { padding-left: .75rem; color: var(--ww-ink-2); }
.track { width: 5.5rem; height: 4px; border-radius: 2px; background: var(--ww-hair); overflow: hidden; }
.track b { display: block; width: 34%; height: 100%; background: var(--ww-sky-ink); }

.note { position: absolute; font: italic 500 1.1rem var(--ww-display); color: var(--ww-sky-ink); white-space: nowrap; }
.n1 { top: -1.5rem; left: 1.5rem; }
.n2 { bottom: 2.25rem; right: 1rem; }
.stamp { position: absolute; top: -1rem; right: 1rem; padding: .4rem .8rem; border: 1.5px solid var(--ww-sky-ink); border-radius: 6px;
  transform: rotate(4deg); background: var(--ww-ground); color: var(--ww-sky-ink);
  font: 700 .7rem var(--ww-ui); letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 768px) {
  .page { padding: 3.5rem 4rem 7rem; }
  .page p { font-size: 1.6rem; }
  .n1 { left: -1rem; top: -2rem; transform: rotate(-3deg); }
  .n2 { right: -2rem; bottom: 9rem; transform: rotate(2deg); }
  .stamp { right: -1rem; }
}

/* 2. The invitation */
.invite { position: relative; overflow: hidden; background: var(--ww-deep); color: #fff; padding-block: 6rem; }
.invite h2 { font-size: clamp(3rem, 10vw, 8rem); margin-bottom: 2.25rem; max-width: 9ch; }
.invite em { color: var(--ww-sky); }
.kite { position: absolute; right: -4rem; top: 50%; width: min(34rem, 70vw); height: auto; transform: translateY(-50%) rotate(12deg);
  animation: drift 7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes drift { to { transform: translateY(-54%) rotate(6deg); } }
@media (max-width: 767px) { .kite { opacity: .55; right: -8rem; } }

/* 3. Footer */
footer { display: flex; justify-content: flex-end; align-items: center; min-height: 2rem; padding-bottom: .25rem; font-size: .8rem; color: var(--ww-ink-2); }

@media (max-width: 767px) { .hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Live demo controls */
button.ico { border: 0; padding: 0; cursor: pointer; transition: background .25s var(--ww-ease); }
.play .i-pause, .play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-pause { display: inline; }
.track b { transition: width .3s var(--ww-ease); }
.page p.live span { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  button.play:hover { background: #155578; }
  .page p.live span:not(.now):hover { background: var(--ww-hair); }
}
.music[aria-pressed="true"] { background: rgb(29 106 150 / .14); color: var(--ww-sky-ink); }
.rate { font: 600 .85rem var(--ww-ui); color: var(--ww-ink); min-width: 40px; width: auto; padding-inline: .4rem; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .music:hover, .rate:hover { background: var(--ww-hair); } }