/* The text pages (How Memoir works, Privacy, Terms and licences): a title, a switch between Memoir in the browser and
   on Windows where the two differ, then the text in one readable column, with its contents beside it on wide
   screens, following the reading. */
html.doc-html { scroll-padding-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html.doc-html { scroll-behavior: smooth; } }

.doc { padding: clamp(140px, 22vh, 210px) var(--gutter) 0; }
.doc-in { max-width: 1120px; margin: 0 auto; }
.doc-head { max-width: 52em; }
.doc-h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(36px, 5.2vw, 76px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.doc-h b { font-weight: 900; }
.doc-lede { margin: 24px 0 0; max-width: 34em; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 20px); text-wrap: pretty; }

/* in short: the one thing to know, before the detail */
.doc-short {
  margin: clamp(40px, 6vh, 56px) 0 0;
  max-width: 44em;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--plate);
  color: var(--ink);
  font-size: 17px;
}
.doc-short b { font-weight: 650; }

/* the switch: which Memoir the text is about */
.seg {
  position: relative;
  display: inline-flex;
  margin-top: clamp(36px, 5vh, 48px);
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  isolation: isolate;
}
.seg button {
  position: relative;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: #000; }
.seg button:focus-visible { outline: none; box-shadow: var(--ring); }
.seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: -1;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  transition: transform 0.45s var(--pop), width 0.45s var(--pop);
}
.seg-thumb.now { transition: none; }
html:not(.js) .seg { display: none; }

.doc-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
  margin-top: clamp(56px, 9vh, 96px);
}
.doc-body.one { margin-top: clamp(56px, 9vh, 96px); }

/* the contents, beside the text */
.doc-toc { position: sticky; top: 112px; }
.doc-toc > p { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.toc-rail { position: relative; border-left: 1px solid var(--line); }
.toc-rail ol { margin: 0; padding: 0; list-style: none; }
.toc-rail a {
  display: block;
  padding: 6px 0 6px 16px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.toc-rail a:hover, .toc-rail a[aria-current="true"] { color: var(--ink); }
.toc-rail a:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--ring); }
.toc-bar {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.5s var(--ease-out), height 0.5s var(--ease-out);
}
.toc-bar.now { transition: none; }

/* the text */
.doc-text { max-width: 42em; min-width: 0; }
.doc-text [hidden="until-found"] { display: block !important; }
.doc-date { margin: 0 0 clamp(36px, 5vh, 48px); font-size: 14px; color: var(--ink-3); }
.doc-sec + .doc-sec { margin-top: clamp(52px, 8vh, 80px); }
.doc-sec h2 { margin: 0 0 18px; font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.doc-sec h2:focus { outline: none; }
.doc-sec h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.doc-text p { margin: 0 0 14px; color: var(--ink-2); text-wrap: pretty; }
.doc-text ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.doc-text li { position: relative; padding-left: 22px; color: var(--ink-2); text-wrap: pretty; }
.doc-text li::before { content: ""; position: absolute; top: 0.68em; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.doc-text b { color: var(--ink); font-weight: 600; }
.doc-text code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--plate-2);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.84em;
  overflow-wrap: anywhere;
}
.doc-text a:not(.pill) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(245, 245, 247, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease);
}
.doc-text a:not(.pill):hover { text-decoration-color: currentColor; }
.doc-text a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--ring); }

/* each part rises in once it comes into view, and plays to its end */
.doc-sec > *, .doc-short { transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.doc-sec > :not(h2) { transition-delay: 0.08s; }
.js .doc-sec:not(.in) > *, .js .doc-short:not(.in) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .js .doc-sec:not(.in) > *, .js .doc-short:not(.in) { opacity: 1; transform: none; }
  .seg-thumb, .toc-bar { transition: none; }
}

@media (max-width: 960px) {
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
}
@media (max-width: 560px) {
  .seg { display: flex; }
  .seg button { flex: 1; padding: 0 10px; font-size: 13px; }
  .doc-short { padding: 20px 20px; }
}