/* ============================================
   Google Fonts Import
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap');

/* ============================================
   CSS Variables
   ============================================ */
:root {
  --primary-color: #9ABDDC;
  --bg-color: #fdfdfd;
  --dark-grey-color: rgb(128, 128, 128);
  --grey-color: #E2E2E2;
  --text-color: #1a1a1a;

  --body-font: Inter;
  /* Code blocks only. Not self-hosted: Berkeley Mono is commercially licensed,
     so readers get whichever of these they already have. To ship a webfont
     instead, put it in static/ (the only dir rheo.toml copies verbatim) and
     reference it as /static/fonts/<name>.woff2 with font-display: swap. */
  --mono-font: ui-monospace, "SF Mono", "Cascadia Mono", "Berkeley Mono", Menlo, Consolas, monospace;
  --font-size: 16pt;
  --line-height: 1.4;
  --small-font-size: 9pt;

  --blog-width: 36em;
}

/* ============================================
   Base Styles
   ============================================ */
body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-weight: 400;
  line-height: var(--line-height);
  font-size: var(--font-size);
  background-color: var(--bg-color);
  overflow-x: hidden;
  color: var(--text-color);
}

.content {
  max-width: var(--blog-width);
  margin: 0 auto;
  padding: 50px 50px;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--body-font);
  font-weight: 700;
  margin: 1.5em 0 0.5em 0;
}

h1 {
  font-size: 1.5em;
  color: var(--primary-color);
}

h2 {
  text-align: left;
}

h2, h3, h4 {
  text-align: left;
  font-size: 1.2em;
  margin: 0;
}

h4 {
  font-size: 1em;
}

p {
  margin: 1em 0;
}

a {
  color: var(--text-color);
  text-decoration: underline;
  text-decoration-color: var(--dark-grey-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.2s ease;
}

a:hover {
  text-decoration-thickness: 3px;
}

/* ============================================
   Lists
   ============================================ */
ul {
  list-style-type: circle;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

li {
  margin: 0.25em 0;
}

/* ============================================
   Images
   ============================================ */
img {
  max-width: 100%;
  height: auto;
}

.video-embed {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}

/* ============================================
   Code
   ============================================ */
pre {
  max-width: 100%;
  margin: 1em 0;
}

code {
  font-family: var(--mono-font);
  background-color: #f0f0f0;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

pre code {
  display: block;
  padding: 1em;
  background-color: #fff;
  border: 1px solid var(--grey-color);
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ============================================
   Blockquotes
   ============================================ */
blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 3px solid var(--grey-color);
  background-color: #fff;
}

/* ============================================
   Post List
   ============================================ */
.post-title {
  font-size: 14pt;
}

/* ============================================
   Footnotes
   ============================================ */
[role="doc-endnotes"] {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid var(--grey-color);
  font-size: 0.9em;
}

[role="doc-endnotes"] ol {
  padding-left: 1.5em;
}

a[role="doc-backlink"] {
  margin-right: 0.2em;
}

.site-header {
  padding: .4rem 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--grey-color);
  font-family: var(--body-font);
  font-variant: small-caps;
  font-size: 0.9em;
  position: sticky;
  top: 0;
  background-color: var(--bg-color);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header h2 {
  margin: 0.5em;
}

.site-title h2 {
  text-align: center;
}

.site-header a {
  color: black;
}

.site-title {
  flex: 1;
  text-align: center;
}

.subscribe-btn {
  opacity: 0.4;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  gap: 0.35em;
  position: absolute;
  right: 0;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-variant: small-caps;
  color: inherit;
  cursor: pointer;
}

.subscribe-btn:hover {
  opacity: 1;
}

.subscribe-dialog {
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 340px;
  width: calc(100% - 2rem);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  font-family: var(--body-font);
  font-variant: normal;
  font-size: 1rem;
  color: var(--text-color);
}

.subscribe-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.subscribe-dialog-close-form {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.5rem 0;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  color: var(--dark-grey-color);
  padding: 0;
}

.dialog-close:hover {
  color: var(--text-color);
}

.subscribe-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.subscribe-option {
  padding: 0.6em 0.7em;
  border: 1px solid var(--grey-color);
  border-radius: 6px;
  transition: border-color 0.2s, background-color 0.2s;
}

.subscribe-option:hover {
  border-color: var(--primary-color);
  background-color: rgba(154, 189, 220, 0.1);
}

.subscribe-option-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--text-color);
  font-weight: 700;
}

.subscribe-option-desc {
  margin: 0.35em 0 0 0;
  font-size: var(--small-font-size);
  color: var(--dark-grey-color);
}

.subscribe-option-desc a {
  color: inherit;
  text-decoration: underline;
}

.site-footer {
  margin-top: 3rem;
  padding: .5rem 0;
  border-top: 2px solid var(--grey-color);
  text-align: center;
  width: 100%;
  font-family: var(--body-font);
  font-size: var(--small-font-size);
  margin-bottom: 2rem;
}

.site-footer p {
  margin: 0;
  margin-bottom: 0.2em;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  display: inline-block;
  margin: 0 1rem;
}



/* ============================================
   Mobile Styles
   ============================================ */
@media (max-width: 600px) {
  body {
    font-size: 14pt;
  }

  /* No justified text on mobile. index.js tags the content container with
     `.rheo-kp-skip` so the KP client leaves paragraphs alone (natural wrapping).
     This `!important` is the no-JS fallback: it beats the package's
     `.rheo-kp { text-align: justify }` (which loads after this stylesheet). */
  .rheo-kp {
    text-align: left !important;
  }

  .content {
    padding: 12px;
  }

  /* Icon-only on narrow screens: the text label collides with the centered
     site title once the header is this tight. */
  .subscribe-btn span {
    display: none;
  }

  /* Blogfeed's filter tooltips are `position: absolute; white-space: nowrap`,
     centered on their button — the outermost ones hang tens of px past the
     viewport edge and widen the document's scrollable area even while
     `visibility: hidden`. There's no hover on touch, so drop them entirely. */
  .filter-btn .tooltip {
    display: none;
  }

  /* Dialog default centering algorithm drifts off-center on mobile
     (dynamic toolbar / viewport unit quirks). Drop it in as a bottom
     sheet instead: full-width, pinned to the bottom, slides up. */
  .subscribe-dialog {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: none;
    /* Load-bearing: clears the base rule's `width: calc(100% - 2rem)` (and the
       UA's `dialog { width: fit-content }`) so `left: 0; right: 0` alone solve
       for width. Any explicit width over-constrains the box — `right` is the
       one dropped, so the sheet sits flush left with a 2rem gap on the right,
       and a `100%` that resolves against a layout viewport wider than the
       screen overshoots and gives the page a horizontal scrollbar. */
    width: auto;
    /* Unconstrained height pushes the box (and its close button) above the
       top of a short viewport, since it's pinned to the bottom — cap it and
       let it scroll internally instead. `dvh` tracks a mobile browser's
       collapsing toolbar; the `vh` line above it is the fallback for
       browsers without `dvh` support. */
    max-height: 85vh;
    max-height: 85dvh;
    /* `overflow-y: auto` on its own computes `overflow-x` up from `visible` to
       `auto`, so one long token inside would make the sheet scroll sideways.
       Pin the cross axis. `overscroll-behavior` keeps a rubber-band at the
       scroll limit from chaining out to the page behind the backdrop. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* Pad past the home indicator / gesture bar. Without this the sheet's last
       row sits under system chrome and the sheet reads as not-quite-flush. */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    border-radius: 12px 12px 0 0;
    animation: subscribe-dialog-slide-up 0.2s ease-out;
  }

  @keyframes subscribe-dialog-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}