/* Brand styling on the index; measured Medium reading typography on posts.
   Reference inspected 2026-10-20. Source Serif Pro is bundled locally.
   Medium's proprietary Söhne is replaced by its published Helvetica fallback. */
.articles-page, .reading-page { overflow-x: clip; }
.articles-page .navbar-logo-left, .reading-page .navbar-logo-left { position: relative; z-index: 5; }
.article-index { position: relative; isolation: isolate; max-width: 1000px; margin: 0 auto; padding: 52px 30px 100px; }
.article-watercolor { pointer-events: none; position: absolute; z-index: -1; width: 786px; max-width: none; top: -76px; left: calc(50% - 50vw); }
.article-index-heading { text-align: center; margin-bottom: 52px; }
.article-index-heading h1 { font: 700 64px/1.1 Karla, sans-serif; color: #111f46; margin: 0 0 26px; }
.archive-note { font: 400 24px/1.5 "JR Hand", cursive; color: #435574; margin: 0 auto; max-width: 620px; }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 52px 28px; list-style: none; padding: 0; margin: 0; }
.article-card { min-width: 0; }
.article-card > a, .article-card-locked { display: flex; height: 100%; flex-direction: column; color: #111f46; text-decoration: none; }
.article-card-image { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #f4f5f7; }
.article-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-card-text { display: flex; flex-direction: column; flex: 1; padding-top: 22px; }
.article-card h2 { font: 700 23px/1.25 Karla, sans-serif; margin: 0 0 12px; }
.article-card p { font: 400 17px/1.5 Karla, sans-serif; margin: 0 0 18px; }
.article-card-read { margin-top: auto; padding-top: 6px; color: #406bd8; font: 600 16px/1.5 Karla, sans-serif; }
.article-card > a:hover h2 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.reading-main { max-width: 728px; padding: 48px 24px 80px; margin: 0 auto; color: #242424; }
.article-header { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.article-header h1 { font: 700 42px/52px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.011em; margin: 0 0 32px; color: #242424; overflow-wrap: break-word; }
.article-subtitle { font: 400 24px/30px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #6b6b6b; margin: -16px 0 32px; }
.article-cover { margin: 0 0 48px; }
.article-cover img { display: block; width: 100%; max-height: 510px; object-fit: contain; }
.article-prose { font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 20px; line-height: 32px; font-weight: 400; letter-spacing: -.003em; overflow-wrap: break-word; display: flow-root; }
.article-prose p { font: inherit; letter-spacing: inherit; margin-top: 2.14em; margin-bottom: -.46em; }
.article-prose > :first-child { margin-top: 0; }
.article-prose strong, .article-prose b { font-weight: 700; }
.article-prose h2 { font: 600 24px/30px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.016em; margin: 1.95em 0 -.28em; }
.article-prose h3, .article-prose h4 { font: 600 20px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; margin: 1.72em 0 -.31em; }
.article-prose h2 strong, .article-prose h3 strong, .article-prose h4 strong { font-weight: inherit; }
.article-prose h2 + p, .article-prose h3 + p, .article-prose h4 + p { margin-top: .86em; }
.article-prose a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.article-prose ul, .article-prose ol { margin: 2.14em 0 -.46em; padding-left: 30px; }
.article-prose li { padding-left: 0; margin: 1.14em 0 -.46em; }
.article-prose li:first-child { margin-top: 0; }
.article-prose li > p { margin-top: 0; }
.article-prose figure { width: 100%; margin: 56px 0; }
.article-prose figure div { width: 100%; }
.article-prose img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.article-prose figcaption { color: #6b6b6b; text-align: center; font: 400 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; margin-top: 10px; }
.article-prose blockquote { font: italic 400 20px/32px source-serif-pro, Georgia, serif; letter-spacing: -.003em; border-left: 3px solid #242424; padding: 0 0 0 23px; margin: 2.14em 0 -.46em -23px; }
.article-prose blockquote p { margin-top: 0; }
.article-prose iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.article-prose hr { border: 0; text-align: center; margin: 52px 0; }
.article-prose hr::after { content: '···'; letter-spacing: 16px; }
.article-prose pre { overflow: auto; padding: 24px; background: #f5f5f5; font: 15px/24px monospace; }
.article-contact { margin-top: 0; }
.article-contact .container { position: relative; max-width: 940px; }
.article-contact .form-block { max-width: 680px; margin: 32px auto 0; }
.article-contact .image-26, .article-contact .image-27 { pointer-events: none; }
.article-contact .text-field-3 { font-size: 16px; }
@media (max-width: 900px) {
  .article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-watercolor { left: min(calc(50% - 50vw), calc(100% - 620px)); width: 620px; }
}
@media (max-width: 727px) {
  .reading-main { padding-top: 32px; }
  .article-header h1 { font-size: 32px; line-height: 38px; letter-spacing: -.014em; margin-bottom: 24px; }
  .article-subtitle { font-size: 20px; line-height: 28px; margin-top: -8px; }
  .article-cover { margin-bottom: 32px; }
  .article-prose { font-size: 18px; line-height: 28px; }
  .article-prose p { margin-top: 1.56em; }
  .article-prose h2 { font-size: 22px; line-height: 28px; margin-top: 1.45em; }
  .article-prose h3, .article-prose h4 { font-size: 20px; line-height: 24px; margin-top: 1.23em; }
  .article-prose h2 + p, .article-prose h3 + p, .article-prose h4 + p { margin-top: .67em; }
  .article-prose ul, .article-prose ol { margin-top: 1.56em; }
  .article-prose li { margin-top: .56em; }
  .article-prose blockquote { font-size: 18px; line-height: 28px; margin-top: 1.56em; margin-left: -16px; padding-left: 13px; }
  .article-prose figure { margin: 40px 0; }
}
@media (max-width: 600px) {
  .article-contact .container { padding-left: 20px; padding-right: 20px; }
  .article-index { padding: 38px 20px 64px; }
  .article-index-heading h1 { font-size: 48px; }
  .article-index-heading { margin-bottom: 36px; }
  .archive-note { font-size: 21px; }
  .article-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .article-card-image { aspect-ratio: 4 / 3; }
  .article-card-text { padding-top: 18px; }
}

/* The original white rabbit follows reading progress, independently of form length. */
.reading-toolbar { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #0000001f; }
.reading-toolbar-inner { display: flex; align-items: center; gap: 32px; max-width: 1280px; margin: auto; padding: 18px 60px; min-height: 76px; }
.reading-toolbar-back { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; color: #111f46; font: 600 16px/24px Karla, sans-serif; text-decoration: none; }
.reading-toolbar-back span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reading-toolbar-back:hover { text-decoration: underline; }
.reading-progress { position: relative; height: 12px; flex: 1; border-radius: 999px; background: #e4e4e4; --reading-progress: 0; }
.reading-progress-fill { height: 100%; border-radius: inherit; background: #81e359; transform-origin: left; transform: scaleX(var(--reading-progress)); }
.reading-rabbit { position: absolute; width: 40px; height: 40px; max-width: none; top: -16px; left: calc(100% * var(--reading-progress)); transform: translate(-50%, var(--rabbit-hop, 0px)) rotate(var(--rabbit-tilt, 0deg)); transform-origin: 50% 75%; }
@media (max-width: 727px) {
  .reading-toolbar-inner { padding: 16px 24px; gap: 20px; min-height: 64px; }
  .reading-toolbar-back { flex: 0 0 auto; }
  .reading-toolbar-back { font-size: 15px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-rabbit { transform: translateX(-50%); }
}

.article-lock-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.94); color: #14224b; font: 700 16px/1.4 Karla,sans-serif; white-space: nowrap; }
.locked-cover { max-height: 220px; overflow: hidden; border-radius: 12px; }
.locked-cover img { width: 100%; height: 220px; object-fit: cover; }
.article-unlock { margin: 24px 0 40px; padding: 28px; border: 1px solid #dce1eb; border-radius: 12px; background: #f8faff; }
.article-unlock h2 { margin: 0 0 10px; }
.article-unlock label { display: block; margin-bottom: 8px; font-weight: 600; }
.article-unlock input { box-sizing: border-box; display: block; width: 100%; padding: 12px; margin-bottom: 16px; border: 1px solid #aeb8ca; border-radius: 5px; font: inherit; }
.article-unlock button { padding: 12px 20px; background: #076bff; color: white; border: 0; border-radius: 6px; font: 600 16px/1.4 Karla,sans-serif; cursor: pointer; }
.article-unlock button:disabled { opacity: .6; cursor: wait; }
.article-unlock :focus-visible { outline: 3px solid #14224b; outline-offset: 3px; }
.private-unlocked { margin: 0; }
.article-prose sup { font-size: .7em; vertical-align: super; line-height: 0; }
.article-prose sup a { text-decoration: none; padding: 0 2px; }
.article-references { border-top: 1px solid #dce1eb; margin-top: 48px; padding-top: 24px; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.article-references li { margin: 12px 0; scroll-margin-top: 120px; }
.reading-page:has([data-unlock-article]) .reading-progress { visibility: hidden; }
.article-references li, .citation { scroll-margin-top: 160px; }