:root {
  --ink: #24221f;
  --muted: #8d887f;
  --line: #dfdbd2;
  --accent: #d45532;
  --paper: #fbfaf7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at 15% 0%, #f8f4ed 0, #f4f0e8 45%, #ece5d9 100%);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}

.post-shell {
  max-width: 860px;
  margin: 40px auto;
  padding: 56px min(10vw, 96px);
  background: var(--paper);
  box-shadow: 0 2px 10px #4d413218;
}

.post-content {
  font:
    17px/1.7 "Newsreader",
    Georgia,
    serif;
  color: #393630;
  --topography-progress: 0;
  --heading-sticky-top-1: 0px;
  --heading-sticky-top-2: 0px;
  --heading-sticky-top-3: 0px;
  --heading-sticky-top-4: 0px;
  --heading-sticky-top-5: 0px;
  --heading-sticky-top-6: 0px;
  --heading-sticky-bg: var(--paper);
  --topography-anchor-spacer: 0px;
  --heading-indent: 16px;
}

.post-content.is-topography-anchor-lock {
  overflow-anchor: none;
}

.post-content.has-topography-anchor-spacer {
  padding-top: var(--topography-anchor-spacer);
  padding-bottom: var(--topography-anchor-spacer);
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  position: static;
  display: flex;
  align-items: center;
  gap: calc(10px - (var(--topography-progress) * 10px));
  touch-action: pan-y;
  background: var(--heading-sticky-bg);
  box-shadow: 0 1px 0 #e6dfd4;
  padding: calc(2px - (var(--topography-progress) * 2px)) 0 calc(3px - (var(--topography-progress) * 3px));
}

.topography-handle {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc2b4;
  border-radius: 999px;
  background: #f4efe6;
  color: #5a544c;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease;
}

.topography-handle::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-top: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
}

.topography-handle[aria-pressed="true"]::before {
  inset: 4px 6px;
  border-top-width: 1.8px;
  border-bottom-width: 1.8px;
}

.topography-handle:hover {
  border-color: #b8ae9f;
  background: #f9f4eb;
}

.topography-handle:focus-visible {
  outline: 2px solid #9f988e;
  outline-offset: 2px;
  opacity: 1;
  transform: scale(1);
}

.post-content h1:hover .topography-handle,
.post-content h2:hover .topography-handle,
.post-content h3:hover .topography-handle,
.post-content h4:hover .topography-handle,
.post-content h5:hover .topography-handle,
.post-content h6:hover .topography-handle,
.post-content h1:focus-within .topography-handle,
.post-content h2:focus-within .topography-handle,
.post-content h3:focus-within .topography-handle,
.post-content h4:focus-within .topography-handle,
.post-content h5:focus-within .topography-handle,
.post-content h6:focus-within .topography-handle,
.post-content[data-topography-mode="collapsed"] .topography-handle,
.post-content.is-topography-dragging .topography-handle {
  opacity: 1;
  transform: scale(1);
}

.post-content img {
  margin-block: calc(22px - (var(--topography-progress) * 22px)) 0;
}

.topography-segment {
  --segment-height: auto;
  overflow: clip;
  max-height: calc(var(--segment-height) * (1 - var(--topography-progress)));
  opacity: calc(1 - (var(--topography-progress) * 0.26));
  filter: brightness(calc(1 - (var(--topography-progress) * 0.08)));
  transform-origin: center top;
}

.topography-segment__inner {
  transform-origin: center top;
  transform: scale(calc(1 - (var(--topography-progress) * 0.05)), calc(1 - (var(--topography-progress) * 0.12)));
}

.post-content.is-topography-dragging {
  user-select: none;
}

@media (hover: none) and (pointer: coarse) {
  .topography-handle {
    display: none;
  }
}

@media (any-pointer: fine) and (any-pointer: coarse) {
  .topography-handle {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topography-handle,
  .topography-segment,
  .topography-segment__inner {
    transition: none !important;
  }
}

.post-content h1[data-sticky-active="true"],
.post-content h2[data-sticky-active="true"],
.post-content h3[data-sticky-active="true"],
.post-content h4[data-sticky-active="true"],
.post-content h5[data-sticky-active="true"],
.post-content h6[data-sticky-active="true"] {
  position: sticky;
}

.post-content.is-topography-dragging h1[data-sticky-active="true"],
.post-content.is-topography-dragging h2[data-sticky-active="true"],
.post-content.is-topography-dragging h3[data-sticky-active="true"],
.post-content.is-topography-dragging h4[data-sticky-active="true"],
.post-content.is-topography-dragging h5[data-sticky-active="true"],
.post-content.is-topography-dragging h6[data-sticky-active="true"] {
  position: static;
}

/* #region MARK: Headings */
.post-content h1 {
  top: var(--heading-sticky-top-1);
  z-index: 16;
  margin: 0 0 calc(23px - (var(--topography-progress) * 23px));
  font:
    500 clamp(32px, 4vw, 46px) / 1.05 "Newsreader",
    Georgia,
    serif;
  letter-spacing: -0.035em;
}

.post-content h2 {
  top: var(--heading-sticky-top-2);
  z-index: 15;
  margin: calc(39px - (var(--topography-progress) * 39px)) 0 calc(13px - (var(--topography-progress) * 13px))
    calc(var(--topography-progress) * calc(var(--heading-indent) * 1));
  font:
    600 21px / 1.2 "DM Sans",
    sans-serif;
  letter-spacing: -0.03em;
}

.post-content h3 {
  top: var(--heading-sticky-top-3);
  z-index: 14;
  margin: calc(28px - (var(--topography-progress) * 28px)) 0 calc(10px - (var(--topography-progress) * 10px))
    calc(var(--topography-progress) * calc(var(--heading-indent) * 2));
  font:
    600 18px / 1.25 "DM Sans",
    sans-serif;
}

.post-content h4 {
  top: var(--heading-sticky-top-4);
  z-index: 13;
  margin: calc(24px - (var(--topography-progress) * 24px)) 0 calc(8px - (var(--topography-progress) * 8px))
    calc(var(--topography-progress) * calc(var(--heading-indent) * 3));
  font:
    600 16px / 1.25 "DM Sans",
    sans-serif;
}

.post-content h5 {
  top: var(--heading-sticky-top-5);
  z-index: 12;
  margin: calc(20px - (var(--topography-progress) * 20px)) 0 calc(7px - (var(--topography-progress) * 7px))
    calc(var(--topography-progress) * calc(var(--heading-indent) * 4));
  font:
    600 14px / 1.25 "DM Sans",
    sans-serif;
}

.post-content h6 {
  top: var(--heading-sticky-top-6);
  z-index: 11;
  margin: calc(18px - (var(--topography-progress) * 18px)) 0 calc(6px - (var(--topography-progress) * 6px))
    calc(var(--topography-progress) * calc(var(--heading-indent) * 5));
  font:
    600 13px / 1.25 "DM Sans",
    sans-serif;
  color: var(--muted);
}
/* #endregion */

.post-content p,
.post-content ul,
.post-content ol,
.post-content table {
  margin: 0 0 19px;
}

.post-content ul,
.post-content ol {
  padding-left: 1.5rem;
}

.post-content li {
  margin: 0 0 8px;
}

.post-content a {
  color: var(--accent);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-content blockquote {
  margin: calc(27px - (var(--topography-progress) * 27px)) 0;
  padding: 9px 22px;
  border-left: 2px solid var(--accent);
  color: #80766a;
  font-style: italic;
}

.post-content :not(pre) > code,
.post-content li > code,
.post-content p > code,
.post-content a > code {
  padding: 2px 5px;
  border-radius: 6px;
  background: #f4f0e8;
  font:
    13px "DM Mono",
    monospace;
}

.post-content pre {
  overflow-x: auto;
  margin: 20px 0;
  padding: 15px;
  background: #292724;
  color: #eee9df;
  border-radius: 4px;
  font:
    13px / 1.6 "DM Mono",
    monospace;
}

.post-content hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.post-content table {
  border-collapse: collapse;
  width: 100%;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
}

.post-content th,
.post-content td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
}

.post-content img {
  display: block;
  max-width: 100%;
  border-radius: 3px;
}

@media (max-width: 860px) {
  .post-shell {
    margin: 0;
    min-height: 100vh;
    box-shadow: none;
    padding: 34px min(7vw, 32px);
  }

  .post-content {
    font-size: 16px;
  }

  .post-content h1 {
    margin-bottom: calc(16px - (var(--topography-progress) * 16px));
    font-size: clamp(28px, 9vw, 40px);
  }

  .post-content h2 {
    margin-top: calc(30px - (var(--topography-progress) * 30px));
    margin-bottom: calc(11px - (var(--topography-progress) * 11px));
  }
}