/* ===== log.html minimal overrides ===== */

/* ---- Make article container match your 1000px width ---- */
.page > #quartz-body .center {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
}

/* ---- Make headings match your site's style ---- */
.page article > h1 {
  font-size: 2.4rem !important;
  margin-bottom: 1.5rem !important;
  border-left: 4px solid #2e7ea0 !important;
  padding-left: 1rem !important;
}

article h2 {
  border-top: none !important; /* Remove Quartz's horizontal rule */
  margin-top: var(--space-l2-lg) !important;
  margin-bottom: var(--space-l2-sm) !important;
}

/* ---- Apply your wavy underline to article links (not TOC) ---- */
article a:not(.toc a) {
  color: #2c7a6b !important;
  text-decoration: none !important;
  border-bottom: 1px solid #2c7a6b !important;
  padding-bottom: 0.12em !important;
}

article a:not(.toc a):hover {
  border-bottom: none !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%235c9c8f' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E") !important;
  background-position: 0 calc(100% - 1.5px) !important;
  background-size: auto 3px !important;
  background-repeat: repeat-x !important;
  padding-bottom: 3px !important;
}
/* ===== Apply global typography rules to log content (preserves TOC & layout) ===== */

/* ---- Ensure your root variables are available (they're already in styles.css) ---- */
/* Your :root variables are already defined in styles.css, so no need to redeclare */

/* ---- Prose elements inside the article: use your vertical rhythm ---- */
.article-title, article {
  max-width: 100% !important; /* Let the grid handle width */
}

/* ---- Paragraphs: use your spacing formula ---- */
article p {
  max-width: 70ch !important;
  margin: calc(1ex / 0.32) 0 !important; /* Your original top AND bottom margin */
  line-height: calc(1ex / 0.32) !important; /* Your preferred line-height */
}

/* ---- Lists: use your spacing formula ---- */
article ul,
article ol {
  max-width: 70ch !important;
  margin: calc(1ex / 0.32) 0 !important;
}

/* ---- List items: use your list spacing ---- */
article li {
  max-width: 70ch !important;
  margin: 0 !important; /* Remove default margins, handled by li + li */
}

article li + li {
  margin-top: var(--space-list-items) !important;
}

article li :is(ul, ol) {
  margin-top: var(--space-list-items) !important;
  margin-bottom: 0 !important;
}

/* ---- Blockquotes: use your spacing ---- */
article blockquote {
  max-width: 70ch !important;
  margin: calc(1ex / 0.32) 0 !important;
}

/* ---- Headings: use your spacing variables ---- */
article h1 {
  margin-bottom: var(--space-l1-sm) !important;
}

article h2 {
  margin-top: var(--space-l2-lg) !important;
  margin-bottom: var(--space-l2-sm) !important;
}

article h3 {
  margin-top: var(--space-l3-lg) !important;
  margin-bottom: var(--space-l3-sm) !important;
}

article h4 {
  margin-top: var(--space-l4-lg) !important;
  margin-bottom: var(--space-l4-sm) !important;
}

article h5 {
  margin-top: var(--space-l5-lg) !important;
  margin-bottom: var(--space-l5-sm) !important;
}

article h6 {
  margin-top: var(--space-l6-lg) !important;
  margin-bottom: var(--space-l6-sm) !important;
}

/* ---- Close spacing when headings follow each other ---- */
article h1 + h2 {
  margin-top: var(--space-l2-sm) !important;
}
article h2 + h3 {
  margin-top: var(--space-l3-sm) !important;
}
article h3 + h4 {
  margin-top: var(--space-l4-sm) !important;
}
article h4 + h5 {
  margin-top: var(--space-l5-sm) !important;
}
article h5 + h6 {
  margin-top: var(--space-l6-sm) !important;
}

/* ---- Remove extra space at start/end of article ---- */
article > *:first-child {
  margin-top: 0 !important;
}
article > *:last-child {
  margin-bottom: 0 !important;
}
/* ---- TOC: just adjust colors to match your palette ---- */
.toc a {
  color: #427b88 !important;
}

.toc a:hover {
  color: #427b88 !important;
  text-decoration: none !important;
  opacity:0.8 !important;
}

/* ---- Hide Quartz's footer (your site-footer handles this) ---- */
.page > #quartz-body footer {
  display: none !important;
}