/* The reading dial: a reading pane alone on a white page, with the article above and the chapter bar below. The dial
   is drawn by the script in one SVG over the pane, small in the bar and big over the page when it opens. */
:root {
  --page: #ffffff;                  /* the page and the pane */
  --ink: #141414;                   /* the text, the read part of the rim and the names */
  --soft: #8a857c;                  /* the minutes left and the kicker */
  --hair: rgba(20, 20, 20, 0.12);   /* the pane's edge and the line over the bar */
  --track: #e6e2da;                 /* the part of the rim still to read */
  --accent: #2c3fd6;                /* the hand and the chapter you are in */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Newsreader Variable', 'Newsreader', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 32px 16px;
}

/* ---------------------------------------------------------------- the pane */
.reader {
  position: relative;
  width: min(600px, 100%);
  height: 470px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--page);
  box-shadow: 0 0 0 1px var(--hair), 0 24px 50px -30px rgba(20, 20, 20, 0.3);
  -webkit-tap-highlight-color: transparent;
}

/* the article: only there to be read and scrolled */
.text {
  position: absolute;
  inset: 0 0 64px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 38px 44px 56px;
  scrollbar-width: thin;
  scrollbar-color: var(--track) transparent;
  outline: none;
  z-index: 0;
}

.text > * {
  max-width: 430px;
}

.kicker {
  margin: 0 0 10px;
  color: var(--soft);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.title {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1;
  font-weight: 420;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 72;
}

.lede {
  margin: 0 0 30px;
  font-size: 19px;
  line-height: 1.38;
  font-style: italic;
  font-weight: 360;
}

.text h2 {
  margin: 34px 0 12px;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 520;
  font-variation-settings: 'opsz' 36;
  scroll-margin-top: 24px;
}

.text p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 380;
  font-variation-settings: 'opsz' 16;
}

.text p.kicker {
  font-size: 13px;
  margin-bottom: 10px;
}

.text p.lede {
  font-size: 19px;
  margin-bottom: 30px;
}

/* over the article while the dial is open: a click on it closes the dial */
.veil {
  position: absolute;
  inset: 0 0 64px 0;
  background: rgba(255, 255, 255, 0.78);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* ---------------------------------------------------------------- the bar */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  margin: 0;
  padding: 0 14px 0 22px;
  border: 0;
  border-top: 1px solid var(--hair);
  background: var(--page);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.bar__words {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

/* the chapter's name rolls up into a little window when it changes */
.bar__now-box {
  position: relative;
  display: block;
  height: 24px;
  overflow: hidden;
  flex: none;
}

.bar__now {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-style: italic;
  font-weight: 440;
  white-space: nowrap;
}

.bar__left {
  color: var(--soft);
  font-size: 13.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* the place in the bar where the small dial sits: the script draws it there */
.bar__dial {
  flex: none;
  width: 48px;
  height: 48px;
}

.bar:focus-visible .bar__now {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bar:focus-visible .bar__dial {
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--ink);
}

/* ---------------------------------------------------------------- the dial */
.dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.dial__face {
  fill: var(--page);
}

.dial path {
  fill: none;
  stroke-linecap: round;
}

.dial__track {
  stroke: var(--track);
}

.dial__read {
  stroke: var(--ink);
}

.dial__read.is-now {
  stroke: var(--accent);
}

.dial__names text {
  fill: var(--ink);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 470;
  letter-spacing: 0.01em;
}

.dial__names text.is-now {
  fill: var(--accent);
}

.dial__needle {
  stroke: var(--accent);
  stroke-linecap: round;
}

.dial__pin {
  fill: var(--page);
  stroke: var(--accent);
}

.dial__now {
  fill: var(--ink);
  font-size: 22px;
  font-style: italic;
  font-weight: 440;
}

.dial__left {
  fill: var(--soft);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* the chapters' buttons, over their names, and the ring that takes the drag */
.chapters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 5;
}

.chapter {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 28px;
  margin: -14px 0 0 -42px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: transparent;
  font: inherit;
  font-size: 1px;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.chapter:focus-visible {
  box-shadow: 0 0 0 1.5px var(--ink);
}

.grip {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  visibility: hidden;
  z-index: 4;
}

.grip.is-held {
  cursor: grabbing;
}