:root {
  --bg:#eee8dd;
  --text:#212b33;
  --text-secondary:#3a4a57;
  --link:#2a6496;
  --rule:#c9c1b5;
  --accent:#9e6d43;
  --paper:#f8f4ec;
  --olive:#6c7055;
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Serif',Georgia,serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}
a {
  color:var(--link);
  text-decoration:none
}
a:hover {
  text-decoration:underline;
  text-underline-offset:.2em
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--link);
  outline-offset:4px
}
h1,h2,h3 {
  font-family:'Shippori Mincho B1',Georgia,serif;
  font-weight:400;
  line-height:1.35
}
h1 {
  font-size:clamp(2rem,4vw,3.1rem);
  letter-spacing:-.025em
}
h2 {
  font-size:1.7rem
}
img,svg,video {
  max-width:100%;
  height:auto
}
button,input,select {
  font:inherit
}
.site-header {
  max-width:1160px;
  margin:auto;
  padding:1.75rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  border-bottom:1px solid var(--rule)
}
.brand {
  display:flex;
  align-items:center;
  gap:.9rem;
  color:var(--text);
  font-size:1.5rem
}
.brand img {
  width:52px;
  height:52px
}
.site-header nav {
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  font-size:.85rem
}
.site-header nav a[aria-current] {
  color:var(--text);
  text-decoration:underline
}
.blog-main {
  max-width:1160px;
  margin:0 auto;
  padding:3.5rem 2rem
}
.archive-header {
  max-width:700px;
  margin:0 0 3rem
}
.archive-header h1 {
  margin:.4rem 0 1rem
}
.archive-header>p:last-child {
  color:var(--text-secondary);
  font-size:1.1rem
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-family:system-ui,sans-serif;
  font-size:.72rem;
  font-weight:600;
  color:var(--olive)
}
.post-list {
  max-width:850px
}
.featured-writing {
  max-width:850px;
  margin:0 0 2.5rem;
  padding:1.25rem 1.5rem;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:4px
}
.featured-writing h2 {
  margin:0 0 .75rem;
  font-size:1.1rem
}
.featured-writing ul {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.75rem;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.85rem
}
.documentation-note {
  font-size:.85rem;
  color:var(--text-secondary)
}
.post-card {
  padding:1.9rem 0;
  border-top:1px solid var(--rule)
}
.post-card h2 {
  margin:.5rem 0 .8rem
}
.post-card h2 a {
  color:var(--text)
}
.post-meta,.card-authors,.author-note {
  font-size:.8rem;
  color:var(--text-secondary)
}
.post-meta {
  font-family:system-ui,sans-serif
}
.post-label {
  margin-left:1rem;
  color:var(--olive)
}
.post-summary {
  font-size:.93rem;
  max-width:760px;
  margin:.7rem 0
}
.card-authors {
  margin:.7rem 0 0
}
.post {
  max-width:850px;
  margin:auto
}
.post-header {
  padding-bottom:2.4rem
}
.post-header h1 {
  margin:.65rem 0 1.2rem
}
.back-link {
  font-size:.8rem
}
.post-header .eyebrow {
  margin-top:2.5rem
}
.source-note {
  font-family:system-ui,sans-serif;
  font-size:.85rem;
  line-height:1.6;
  border-left:2px solid var(--accent);
  padding:.6rem 1rem;
  margin:1.5rem 0 0;
  color:var(--text-secondary)
}
.site-footer {
  max-width:1160px;
  margin:0 auto;
  padding:2rem;
  border-top:1px solid var(--rule);
  font-size:.8rem;
  color:var(--text-secondary)
}
.post-end {
  border-top:1px solid var(--rule);
  margin-top:3rem;
  padding-top:1.5rem;
  font-size:.85rem
}
.skip-link {
  position:absolute;
  top:-100px;
  left:1rem;
  background:var(--paper);
  padding:.5rem;
  z-index:2000
}
.skip-link:focus {
  top:.5rem
}
.post-authors p {
  margin:.4rem 0;
  font-size:.9rem
}
/* Keep public OA figure styles inside the article and use Marin typography/paper. */
.oa-mirror {
  --bg-paper:var(--paper);
  --dark:var(--text);
  --text-light:#6e7168;
  --tag-bg:#d7dcc8;
  --border:#c9c1b5;
  --border-secondary:#c9c1b540;
  --button-bg:#ddd3c5;
  --font-heading:'Shippori Mincho B1',Georgia,serif;
  --font-body:'Noto Serif',Georgia,serif;
  --side-pad:24px;
  --max-width:1160px;
  color:var(--text);
  overflow-wrap:anywhere
}
.oa-mirror .blog-post-body {
  display:block!important
}
/* Both native Markdown and preserved source HTML use the same article design.
   The scoped OA stylesheet remains only for specialized interactive figures. */
.post .post-content {
  font-family:'Noto Serif',Georgia,serif;
  font-size:1rem;
  line-height:1.8;
  color:var(--text);
  overflow-wrap:anywhere
}
.post .post-content :is(.blog-post-content,.retrospective-content,.project-detail-body) {
  max-width:none;
  margin:0;
  padding:0;
  font-size:inherit;
  line-height:inherit
}
.post .post-content :is(h1,h2,h3,h4,h5,h6) {
  font-family:'Shippori Mincho B1',Georgia,serif;
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.01em;
  scroll-margin-top:1.5rem
}
.post .post-content :is(h1,h2) { font-size:1.7rem; margin:2.7rem 0 1rem }
.post .post-content h3 { font-size:1.3rem; margin:2rem 0 1rem }
.post .post-content :is(h4,h5,h6) { font-size:1.1rem; margin:1.5rem 0 .75rem }
.post .post-content p { margin:0 0 1.25rem }
.post .post-content a { color:var(--link); text-decoration:underline; text-underline-offset:.15em }
.post .post-content :is(ul,ol) { margin:0 0 1.25rem; padding-left:1.5rem }
.post .post-content li { margin-bottom:.35rem }
.post .post-content ul { list-style:disc }
.post .post-content ol { list-style:decimal }
.post .post-content blockquote {
  background:var(--paper); border-left:2px solid var(--accent);
  border-radius:0; margin:1.5rem 0; padding:1rem 1.5rem; color:var(--text-secondary)
}
.post .post-content blockquote p { font-size:inherit; color:inherit }
.post .post-content blockquote p:last-child { margin-bottom:0 }
.post .post-content :is(pre,code) { font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.post .post-content code { font-size:.85em; padding:.1em .3em; border:1px solid var(--rule); border-radius:3px; background:var(--paper); color:var(--text) }
.post .post-content pre { margin:1.5rem 0; padding:1rem; overflow:auto; border:1px solid var(--rule); border-radius:4px; background:var(--paper); font-size:.85rem; line-height:1.6 }
.post .post-content pre code { font-size:inherit; border:0; padding:0; background:transparent; color:inherit }
.post .post-content .highlight { background:transparent }
.post .post-content table:not(.rouge-table):not(.d3-bucket-grid table):not(.d3-correlation-mobile-table) { display:block; width:100%; max-width:100%; overflow:auto; table-layout:auto; overflow-wrap:normal; border-collapse:collapse; border-spacing:0; margin:1.5rem 0; background:var(--paper); border:1px solid var(--rule); border-radius:0; font-size:.85rem }
.post .post-content :is(th,td):not(.rouge-table *):not(.d3-bucket-grid *):not(.d3-correlation-mobile-table *) { padding:.6rem .75rem; border:1px solid var(--rule); text-align:left; font-family:inherit; font-size:inherit; line-height:inherit; letter-spacing:normal; text-transform:none }
.post .post-content th:not(.rouge-table *):not(.d3-bucket-grid *):not(.d3-correlation-mobile-table *) { background:#e6e0d4; font-weight:500 }
.post .post-content .table-scroll { max-width:100%; margin:1.5rem 0; overflow:auto }
.post .post-content .table-scroll table { margin:0 }
.post .post-content figure { margin:2rem 0; padding:1rem; border:1px solid var(--rule); border-radius:4px; background:var(--paper); text-align:left }
.post .post-content img { display:block; max-width:100%; height:auto; border-radius:0; box-shadow:none; margin:0 auto }
.post .post-content img:not(figure img) { margin:1.5rem auto; border:1px solid var(--rule); border-radius:4px; padding:1rem; background:var(--paper) }
.post .post-content :is(figcaption,.image-caption) { margin:.75rem 0 0; font-size:.8rem; line-height:1.6; color:var(--text-secondary); text-align:left!important }
.post .post-content iframe { max-width:100% }
.post .post-content :is(.headerlink,.heading-anchor) { display:none }
.post .post-content a.section-link { margin-left:.4em; font-size:.7em; font-weight:400; opacity:.45; text-decoration:none }
.post .post-content a.section-link:hover,.post .post-content a.section-link:focus-visible { opacity:1 }
.post .post-content .blog-toc { display:none }
.post .post-content .plotly-frame-title { font-family:var(--font-heading) }
.post-toc { margin-top:1.5rem; padding:.75rem 1rem; border:1px solid var(--rule); border-radius:4px; font-size:.85rem }
.post-toc summary { cursor:pointer }
.post-toc ul { margin:.75rem 0 0; padding-left:1.25rem }
.post-toc li { margin:.25rem 0 }
.post-toc .toc-subsection { margin-left:1rem }
@media(max-width:600px) {
  .site-header {
    padding:1.25rem;
    align-items:flex-start;
    flex-direction:column;
    gap:1rem
  }
  .site-header nav {
    gap:1rem
  }
  .blog-main {
    padding:2rem 1.25rem
  }
  .site-footer {
    padding:1.5rem 1.25rem
  }
  .post-label {
    display:inline-block
  }
  .post-card h2 {
    font-size:1.4rem
  }
  .post .post-content figure,.post .post-content img:not(figure img) { padding:.6rem }
  .post .post-content { font-size:.95rem }
  .source-note { padding:.5rem .75rem }
}