/* The bookmark tabs: a row of tabs under a ruled line on a white page, and a red cloth ribbon hanging from the line
   above the chosen one. The text of each tab is set like a page of a book. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1d1b17;           /* the line, the chosen tab and the titles */
  --muted: #8b857a;         /* the other tabs */
  --text: #4a463f;          /* the text */
  --ribbon: #c63d2f;        /* the ribbon */
}

* {
  box-sizing: border-box;
}

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

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

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* the column never grows with the row of tabs: the row scrolls instead */
  justify-items: center;
  align-content: start;
  padding: clamp(48px, 24vh, 220px) 16px 48px;   /* held from the top: when the text changes height, only its bottom moves */
}

.book {
  width: min(680px, 100%);
}

/* ---------------------------------------------------------------- the line, the ribbon and the tabs */
.book__tabs {
  position: relative;
  display: flex;
  gap: 34px;
  padding: 60px 4px 0;
  border-top: 1.5px solid var(--ink);
  overflow-x: auto;
  scrollbar-width: none;
}

.book__tabs::-webkit-scrollbar {
  display: none;
}

/* on a narrow screen the row scrolls: it fades out on the side where more tabs are hidden */
.book__tabs.has-left {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
  mask-image: linear-gradient(90deg, transparent, #000 40px);
}

.book__tabs.has-right {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}

.book__tabs.has-left.has-right {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.tab {
  flex: none;
  padding: 6px 0 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 20px;
  font-variation-settings: 'wght' 430;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.35s ease, font-variation-settings 0.35s ease;
}

.tab[aria-selected='true'] {
  color: var(--ink);
  font-variation-settings: 'wght' 620;
}

@media (hover: hover) and (pointer: fine) {
  .tab:not([aria-selected='true']):hover {
    color: #4f4a42;
  }
}

.tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

/* the ribbon hangs from the line: it turns on its top, and the cloth rolls up and down from there */
.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 46px;
  transform-origin: 50% 0;
  pointer-events: none;
}

.ribbon__cloth {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0 4px, transparent 4px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.1) 42%, rgba(0, 0, 0, 0.18)),
    var(--ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

/* ---------------------------------------------------------------- the pages */
.book__pages {
  position: relative;
  margin-top: 26px;
}

.page {
  outline: none;
}

.page h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 500;
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.page p {
  margin: 0;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
}

@media (max-width: 560px) {
  .book__tabs {
    gap: 22px;
  }

  .tab {
    font-size: 18px;
  }
}