:root {
  --top-height: 64px;
  --dock-space: 112px;
  --hero-cover-height: clamp(190px, 34svh, 300px);
  --track-width: 290px;
  --track-height: 6px;
  --reader-size: 30px;
  --reader-ring: 2.5px;
  --row-avatar: 44px;
  --row-cover-width: 44px;
  --pick-mark-size: 26px;
  --story-width: clamp(200px, 30svh, 240px);
  --story-cover-width: 96px;
  --flame-ring-size: 150px;
  --flame-size: 52px;
  --ring-stroke: 6px;
  --ring-circumference: 427;
  --today-pages-ratio: 0.7;
  --week-flame-size: 22px;
  --unlit-opacity: 0.28;
  --cover-radius: 10px;
  --cover-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
  --dock-fade: rgba(0, 0, 0, 0.28);
}

.scene {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-lg);
  max-width: 1080px;
  min-height: calc(100vh - var(--top-height));
  min-height: calc(100svh - var(--top-height));
  margin: 0 auto;
  padding-top: var(--space-lg);
  padding-bottom: var(--dock-space);
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
}

.scene-hero {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-lg);
}

.scene-words {
  display: grid;
  gap: var(--space-sm);
  text-align: center;
}

.scene-words .callout a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}

.cover {
  border-radius: var(--cover-radius);
  box-shadow: var(--cover-shadow);
  object-fit: cover;
}

.hero-cover {
  width: auto;
  height: var(--hero-cover-height);
  aspect-ratio: 2 / 3;
}

.reading-track {
  position: relative;
  width: min(var(--track-width), 100%);
  height: calc(var(--reader-size) + var(--reader-ring) * 2);
}

.reading-track .rail {
  position: absolute;
  left: 0;
  bottom: calc(var(--reader-size) / 2 - var(--track-height) / 2 + var(--reader-ring));
  width: 100%;
  height: var(--track-height);
  border-radius: calc(var(--track-height) / 2);
  background: var(--scene-track);
}

.reading-track .rail-fill {
  width: calc(var(--progress) * 100%);
  background: var(--butter);
}

.reader {
  position: absolute;
  bottom: 0;
  left: calc(var(--progress) * 100% - (var(--reader-size) / 2 + var(--reader-ring)));
  padding: var(--reader-ring);
  border-radius: 50%;
  background: var(--scene-lagoon);
}

.reader-me {
  background: var(--butter);
}

.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--reader-size);
  height: var(--reader-size);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--avatar-tint);
  color: var(--ink);
  font-family: var(--serif);
  font-size: calc(var(--reader-size) * 0.45);
  line-height: 1;
}

.avatar-large {
  width: var(--row-avatar);
  height: var(--row-avatar);
  font-size: calc(var(--row-avatar) * 0.45);
}

.tint-sage {
  --avatar-tint: var(--sage);
}

.tint-butter {
  --avatar-tint: var(--butter);
}

.tint-rose {
  --avatar-tint: var(--rose);
}

.club {
  display: grid;
  gap: 14px;
  width: min(100%, 400px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.club-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.club-row-texts {
  display: grid;
  flex: 1;
  min-width: 0;
}

.club-row-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
}

.club-cover {
  width: var(--row-cover-width);
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: 5px;
}

.locked-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--scene-glass-edge);
  border-radius: var(--radius-md);
  background: var(--scene-glass);
}

.locked-row svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.locked-row-texts {
  display: grid;
}

.locked-row-title {
  font-weight: 500;
}

.glass-sheet {
  display: grid;
  gap: var(--space-md);
  width: min(100%, 360px);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--scene-glass-edge);
  border-radius: var(--radius-lg);
  background: var(--scene-glass);
}

.pick-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--pick-mark-size);
  height: var(--pick-mark-size);
  border: 1.5px solid var(--scene-ink-faint);
  border-radius: 50%;
}

.pick-mark.is-picked {
  border-color: var(--scene-ink);
  background: var(--scene-ink);
  color: var(--scene);
}

.pick-mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invite-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--scene-glass-edge);
}

.invite-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: var(--story-width);
  aspect-ratio: 9 / 16;
  padding: 22px 16px 14px;
  border: 1px solid var(--scene-glass-edge);
  border-radius: var(--radius-md);
  background: linear-gradient(to bottom, rgba(251, 246, 230, 0.1), transparent 45%), var(--scene-gilt);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.story-cover {
  width: var(--story-cover-width);
  height: auto;
  aspect-ratio: 240 / 314;
}

.story-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
}

.story-review {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.25;
}

.story-mark {
  width: 46px;
  height: auto;
  margin-top: auto;
  opacity: 0.45;
}

.stars {
  display: flex;
  gap: 3px;
  color: var(--butter);
}

.stars svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.series {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--flame-ring-size);
  height: var(--flame-ring-size);
}

.series-ring {
  position: absolute;
  inset: 0;
}

.series-ring-track,
.series-ring-today {
  fill: none;
  stroke-width: var(--ring-stroke);
}

.series-ring-track {
  stroke: var(--scene-track);
}

.series-ring-today {
  stroke: var(--flame-lit);
  stroke-linecap: round;
  stroke-dasharray: var(--ring-circumference);
  stroke-dashoffset: calc(var(--ring-circumference) * (1 - var(--today-pages-ratio)));
}

.series-flame {
  width: var(--flame-size);
  height: var(--flame-size);
}

.series-count {
  margin-top: calc(var(--space-xs) * -1);
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1.1;
}

.week {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week li {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  font-size: var(--text-label);
  color: var(--scene-ink-faint);
}

.week svg {
  width: var(--week-flame-size);
  height: var(--week-flame-size);
}

.week .unlit svg {
  opacity: var(--unlit-opacity);
}

.questions {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-top: var(--space-xl);
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
}

.install-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding-top: var(--space-md);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-md));
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
  background: linear-gradient(to bottom, transparent, var(--dock-fade) 45%);
  pointer-events: none;
}

.install-dock .action-button {
  max-width: var(--dock-width);
  margin: 0 auto;
  pointer-events: auto;
}

.page-end {
  padding-bottom: var(--dock-space);
}

@media (min-width: 900px) {
  :root {
    --hero-cover-height: clamp(260px, 46svh, 400px);
    --story-width: clamp(220px, 40svh, 300px);
  }

  .scene {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
  }

  .scene-hero {
    order: 2;
  }

  .scene-words {
    order: 1;
    text-align: left;
    align-self: center;
  }
}