/* ==========================================================================
   dcsoto.github.io — visual identity layer on top of Beautiful Jekyll
   Load after the theme via `site-css` in _config.yml.
   Palette: warm-grey paper, ink, blue accent, pink drop caps, mustard.
   Type:    Outfit 800 (display) · Lora (body) · IBM Plex Mono (labels)
   ========================================================================== */

:root {
  --dc-cream: #f4f2ec;
  --dc-card: #f9f7f1;
  --dc-ink: #23201c;
  --dc-body: #3a332b;
  --dc-muted: #5c5346;
  --dc-rule: #cfc6b2;
  --dc-blue: #3b6fcf;
  --dc-pink: #e8517a;
  --dc-mustard: #e9a93a;
  --dc-display: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --dc-serif: 'Lora', Georgia, serif;
  --dc-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
  --dc-max: 1100px;
  --dc-gutter: 72px;
}
@media (max-width: 767px) { :root { --dc-gutter: 20px; } }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  background: var(--dc-cream);
  color: var(--dc-ink);
  font-family: var(--dc-serif);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus { color: var(--dc-blue); text-decoration: none; }
main a:not(.dc-btn):not(.dc-card):not(.dc-bar):not(.dc-topic):not(.res-row):not(.pub-card):not(.bl-card):not(.press-item):not(.res-card):not(.dc-btn-outline):not(.bl-filters a) { color: var(--dc-blue); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--dc-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--dc-ink); }
main h2 { font-size: 26px; letter-spacing: -0.02em; border-bottom: 2px solid var(--dc-ink); padding-bottom: 8px; margin: 48px 0 20px; }
main h3 { font-size: 20px; margin: 32px 0 12px; }
main p, main li { color: var(--dc-body); }
hr { border-top: 2px solid var(--dc-ink); }
code { font-family: var(--dc-mono); font-size: 0.85em; background: #e9e3d3; border: 1px solid var(--dc-rule); padding: 1px 6px; border-radius: 0; color: var(--dc-ink); }
pre, .highlight pre, div.highlighter-rouge {
  background: var(--dc-ink) !important; color: var(--dc-cream);
  border: 2px solid var(--dc-ink); border-radius: 0;
  box-shadow: 5px 5px 0 var(--dc-blue);
  font-family: var(--dc-mono); font-size: 13px; line-height: 1.6;
}
pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; }
.highlight .c, .highlight .c1 { color: #b9b09c; }
img.img-fluid, .blog-post img, main img:not(.altmetric-embed img):not(.dc-wave) { border: 2px solid var(--dc-ink); box-shadow: 6px 6px 0 var(--dc-ink); }
.altmetric-embed img, .altmetric-embed a { border: 0 !important; box-shadow: none !important; }
blockquote { border-left: 2px solid var(--dc-pink); font-style: italic; color: var(--dc-muted); padding-left: 16px; }
table { border-collapse: collapse; width: 100%; }
table td, table th { border-bottom: 1px solid var(--dc-rule); padding: 12px 8px; vertical-align: top; }

/* Utility labels used across pages */
.dc-eyebrow, .dc-mono { font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-muted); }
.dc-accent { color: var(--dc-blue); }
.dc-dropcap { font-family: var(--dc-display); font-weight: 800; font-size: 1.9em; line-height: 0; color: var(--dc-pink); vertical-align: -0.1em; margin-right: 2px; }
.dc-stamp { display: inline-block; border: 3px double #8a7f6d; padding: 10px 14px; font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); }
.dc-note { border: 3px double #8a7f6d; padding: 14px 18px; display: flex; gap: 14px; align-items: baseline; font-size: 15px; color: var(--dc-muted); }
.dc-note > .dc-mono { color: var(--dc-pink); white-space: nowrap; }

/* --------------------------------------------------------------------------
   One column width everywhere: 1100px max, 72px gutters (same as the landing page).
   Neutralises Bootstrap's containers / offset columns that Beautiful Jekyll wraps around
   the nav, page header, content and footer.
   -------------------------------------------------------------------------- */
/* ONE content column for nav, page header, main and footer.
   Markup (Beautiful Jekyll 6 / Bootstrap 4):
     nav.navbar-custom · header.header-section > .intro-header > .container-md > .row > .col-xl-8.offset-xl-2
     main.container-md > .row > .col-xl-8.offset-xl-2 · footer > .container-md > .row > .col-xl-8.offset-xl-2
   Each outer box is made exactly the content width (1100 - 2*72 = 956px) and every Bootstrap wrapper inside is 100%. */
.navbar-custom, .intro-header, main.container-md, main.container, main.main-content, footer {
  box-sizing: border-box;
  max-width: calc(var(--dc-max) - 2 * var(--dc-gutter)) !important;
  width: calc(100% - 2 * var(--dc-gutter)) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.header-section, #header-section { background: none !important; padding: 0 !important; margin: 0 !important; }
.intro-header .container-md, .intro-header .row, .intro-header .row > [class*="col-"],
main > .row, main > .row > [class*="col-"],
footer .container-md, footer .row, footer .row > [class*="col-"] {
  max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important;
  padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}
main.container-md, main.container, main.main-content { padding-top: 32px !important; padding-bottom: 24px !important; min-height: 0 !important; }
main > .row > [class*="col-"] > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
main > .row > [class*="col-"] > :last-child > :last-child:not(a):not(.res-row):not(.press-item):not(.pub-card):not(.bl-card) { margin-bottom: 0 !important; }
/* Whatever a page starts with (a heading on Resources, a post card on Blog, a paragraph on Research) sits at the same distance from the title */
main > .row > [class*="col-"] > :first-child, main > .row > [class*="col-"] > script:first-child + *, .posts-list, .posts-list > :first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* --------------------------------------------------------------------------
   Navbar (Beautiful Jekyll .navbar-custom)
   -------------------------------------------------------------------------- */
.navbar-custom {
  position: static !important;          /* scrolls with the page instead of floating over it */
  background: var(--dc-cream) !important;
  border-bottom: 2px solid var(--dc-ink) !important;
  box-shadow: none;
  font-family: var(--dc-mono);
  /* the bar itself is exactly the content width, so its rule lines up with the title underline */
  padding: 0 !important;
  max-width: calc(var(--dc-max) - 2 * var(--dc-gutter)); margin: 0 auto; width: calc(100% - 2 * var(--dc-gutter));
  min-height: 64px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.navbar-custom .navbar-collapse { flex-grow: 1; }
.navbar-custom .navbar-nav { margin-left: auto !important; }
.navbar-custom .navbar-nav .nav-item:last-child .nav-link, .navbar-custom .navbar-nav .nav-item:last-child > a { padding-right: 0 !important; }
body { padding-top: 0 !important; }     /* the theme reserves space for the fixed bar; not needed now */
.navbar-custom .navbar-nav .nav-link, .navbar-custom .navbar-nav .nav-item > a { padding-top: 22px; padding-bottom: 22px; }
.navbar-custom .navbar-brand {
  font-family: var(--dc-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--dc-ink) !important;
  display: flex; align-items: center; gap: 10px; padding: 0 !important; margin: 0 !important;
}
.navbar-custom .navbar-brand::before { content: ""; width: 14px; height: 14px; background: var(--dc-blue); border: 2px solid var(--dc-ink); flex: none; }
.navbar-custom .navbar-nav .nav-link, .navbar-custom .navbar-nav .nav-item > a {
  font-family: var(--dc-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-ink) !important; padding: 20px 13px;
}
.navbar-custom .navbar-nav .nav-link:hover, .navbar-custom .navbar-nav .nav-item.active > a { color: var(--dc-blue) !important; }
.navbar-custom .navbar-nav .nav-item.active > a { box-shadow: inset 0 -2px 0 var(--dc-blue); }
.navbar-custom .dropdown-menu { background: var(--dc-card); border: 2px solid var(--dc-ink); border-radius: 0; box-shadow: 4px 4px 0 var(--dc-ink); }
.navbar-custom .dropdown-item { font-family: var(--dc-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-ink) !important; }
.navbar-custom .dropdown-item:hover { background: var(--dc-blue) !important; color: var(--dc-cream) !important; }
.navbar-custom .avatar-container { display: none; }           /* the mark replaces the round avatar */
.navbar-custom .navbar-toggler { border: 2px solid var(--dc-ink); border-radius: 0; }
.navbar-custom .nav-item.search { display: none; }            /* remove if you want to keep search */
.top-nav-short .navbar-brand, .top-nav-regular .navbar-brand { font-size: 24px !important; }

/* --------------------------------------------------------------------------
   Page headers (layout: page / post) — replaces the grey banner
   -------------------------------------------------------------------------- */
.intro-header, .header-section .intro-header {
  background: none !important; color: var(--dc-ink) !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 48px !important; padding-bottom: 0 !important;
}
.intro-header .page-heading, .intro-header .post-heading { margin: 0 !important; }
.intro-header .page-heading, .intro-header .post-heading { padding: 0; max-width: none; text-align: left; }
.intro-header .page-heading hr, .intro-header .post-heading hr, .intro-header hr.small { display: none; }
.intro-header .page-heading, .intro-header .post-heading { border-bottom: 2px solid var(--dc-ink); padding-bottom: 28px; }
.intro-header .page-heading h1 { font-size: 68px; line-height: 0.95; letter-spacing: -0.035em; margin: 0; }
.intro-header .post-heading h1 { font-size: 48px; line-height: 1; letter-spacing: -0.03em; max-width: 860px; text-wrap: balance; margin: 0 0 18px; }
.intro-header .page-heading .page-subheading, .intro-header .post-heading .post-subheading,
.intro-header .page-subheading, .intro-header .post-subheading {
  font-family: var(--dc-mono) !important; font-size: 10.5px !important; font-weight: 400 !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-muted) !important;
  margin: 0 0 12px !important; display: block; order: -1; line-height: 1.5;
}
.intro-header .page-heading { display: flex; flex-direction: column; }
.intro-header .post-heading .post-meta {
  font-family: var(--dc-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dc-muted); font-style: normal;
}
.intro-header .post-heading .post-meta::before { content: ""; }
.intro-header.big-img { background-image: none !important; }
.intro-header.big-img .img-desc { display: none; }
.header-section.has-img .intro-header.no-img { display: none; }
@media (max-width: 767px) { .intro-header .page-heading h1 { font-size: 44px; } .intro-header .post-heading h1 { font-size: 34px; } }

/* --------------------------------------------------------------------------
   Main content column
   -------------------------------------------------------------------------- */
.blog-post { max-width: none; }
.blog-post > p:first-of-type::first-letter {
  font-family: var(--dc-display); font-weight: 800; font-size: 2.2em; line-height: 0.9; color: var(--dc-pink); float: left; margin: 6px 8px 0 0;
}
.blog-post h2 { font-size: 28px; border: 0; padding: 20px 0 0; margin: 20px 0 12px; }
.blog-post h2 .step, .blog-post h2 > em:first-child { font-style: normal; color: var(--dc-blue); margin-right: 14px; }
.blog-post figcaption, .blog-post .caption { font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); margin-top: 10px; }

/* Tags + social share below a post */
.blog-tags { font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); margin-top: 40px; padding-top: 20px; border-top: 2px solid var(--dc-ink); }
.blog-tags a { display: inline-block; border: 1.5px solid var(--dc-ink); padding: 4px 8px; margin-left: 6px; color: var(--dc-ink) !important; text-decoration: none !important; }
.blog-tags a:hover { background: var(--dc-ink); color: var(--dc-cream) !important; }
.blog-post + .blog-tags, .social-share { border-bottom: 1px solid var(--dc-rule); padding-bottom: 20px; }
.social-share .btn { background: none; border: 0; color: var(--dc-muted); font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; padding: 0 8px; }

/* Prev / next pager as cards */
ul.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
ul.pager li a {
  display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--dc-ink); border-radius: 0; background: var(--dc-card);
  box-shadow: 4px 4px 0 var(--dc-ink); padding: 18px 22px; color: var(--dc-ink); font-family: var(--dc-display); font-weight: 800; font-size: 18px; line-height: 1.1; text-transform: none; letter-spacing: -0.01em;
}
ul.pager li.next a { text-align: right; align-items: flex-end; box-shadow: 4px 4px 0 var(--dc-blue); }
ul.pager li a:hover { background: var(--dc-cream); color: var(--dc-blue); }
@media (max-width: 767px) { ul.pager { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Blog index (layout: home → .post-preview) as cards
   -------------------------------------------------------------------------- */
.post-preview {
  border: 2px solid var(--dc-ink); background: var(--dc-card); box-shadow: 4px 4px 0 var(--dc-ink);
  padding: 20px 24px; margin: 0 0 16px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start;
}
.post-preview .post-meta, .post-preview .blog-tags {
  grid-column: 1; margin: 0; padding: 0; border: 0; font-family: var(--dc-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dc-blue);
}
.post-preview .post-meta { border-right: 2px solid var(--dc-ink); padding-right: 18px; align-self: stretch; }
.post-preview .blog-tags { font-size: 10px; color: var(--dc-pink); grid-row: 2; }
.post-preview .blog-tags a { border: 0; padding: 0; margin: 0; color: var(--dc-pink) !important; }
.post-preview > a, .post-preview .post-entry-container { grid-column: 2; grid-row: 1 / span 2; }
.post-preview .post-title { font-family: var(--dc-display); font-weight: 800; font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--dc-ink); }
.post-preview .post-subtitle { font-family: var(--dc-serif); font-style: italic; font-size: 14px; color: var(--dc-muted); font-weight: 400; margin: 0 0 6px; }
.post-preview .post-entry { font-size: 14.5px; line-height: 1.55; color: var(--dc-body); max-width: 640px; }
.post-preview .post-read-more { color: var(--dc-blue); font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.post-preview .post-image { display: none; }
.post-preview:hover .post-title { color: var(--dc-blue); }
@media (max-width: 767px) { .post-preview { grid-template-columns: 1fr; } .post-preview .post-meta { border-right: 0; border-bottom: 1px solid var(--dc-rule); padding: 0 0 8px; } .post-preview > a { grid-column: 1; grid-row: auto; } }
.pagination .page-link, .pagination a { border: 2px solid var(--dc-ink); border-radius: 0; background: var(--dc-card); color: var(--dc-ink); font-family: var(--dc-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer, footer.footer-min {
  background: var(--dc-cream) !important; color: var(--dc-muted) !important;
  /* same trick as the nav: the footer box IS the content width, so its rule lines up with everything else */
  border-top: 2px solid var(--dc-ink) !important;
  max-width: calc(var(--dc-max) - 2 * var(--dc-gutter)); width: calc(100% - 2 * var(--dc-gutter));
  margin: 40px auto 0 !important; padding: 20px 0 40px !important;
  font-family: var(--dc-serif); font-size: 13px;
}
footer .container-md, footer .container, footer .beautiful-jekyll-footer { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
footer .row { margin: 0 !important; width: 100%; }
footer [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; display: block !important; }
footer .footer-links { border: 0 !important; padding: 0 !important; margin: 0 !important; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 18px; }
footer .footer-links .list-inline-item { margin: 0; }
footer .footer-links a { color: var(--dc-muted) !important; text-decoration: underline; font-size: 13px; font-family: var(--dc-serif) !important; font-weight: 400; }
footer .footer-links a:hover { color: var(--dc-blue) !important; }
footer .footer-links .fa-stack, footer .footer-links .fa-lg, footer .footer-links i { display: none !important; }   /* icons → text */
footer .footer-links .sr-only, footer .footer-links .visually-hidden {
  position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important;
}
footer .copyright, footer .footer-copyright, footer .theme-by { display: none !important; }   /* replaced by footer-extra.html */
footer .footer-custom-content { margin: 10px 0 0; text-align: left; font-size: 13px; color: var(--dc-muted) !important; }
footer .footer-custom-content p, footer .dc-footer-line { margin: 0; color: var(--dc-muted) !important; font-family: var(--dc-serif) !important; font-size: 13px; }
footer .footer-custom-content a { color: var(--dc-ink) !important; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Landing page (index.html, layout: base)
   -------------------------------------------------------------------------- */
.dc-landing { max-width: var(--dc-max); margin: 0 auto; padding: 0 var(--dc-gutter) 0; }
.dc-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto; gap: 20px 64px; padding-top: 64px; }
.dc-hero-text { display: flex; flex-direction: column; gap: 14px; }
.dc-hero-text .dc-eyebrow { line-height: 1.3; margin: 0 0 10px; }
.dc-h1 { position: relative; align-self: flex-start; font-size: 108px; line-height: 0.92; letter-spacing: -0.035em; margin: 0; white-space: nowrap; cursor: default; }
.dc-wave {
  position: absolute; left: -66px; bottom: calc(50% - 20px); width: 56px; height: 56px; border: 0 !important; box-shadow: none !important;
  opacity: 0; pointer-events: none; transform-origin: 50% 100%;
}
.dc-h1:hover .dc-wave { opacity: 1; animation: dc-wave 1.4s ease-in-out both; }
@keyframes dc-wave {
  0% { transform: scale(0.6) rotate(0); opacity: 0; } 20% { transform: scale(1) rotate(0); opacity: 1; }
  40% { transform: rotate(-10deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-8deg); } 100% { transform: rotate(0); opacity: 1; }
}
.dc-intro { font-size: 18px; line-height: 1.6; color: var(--dc-body); max-width: 560px; margin: 0; text-wrap: pretty; }
.dc-portrait { grid-column: 2; grid-row: 1 / span 2; position: relative; min-height: 0; }
.dc-portrait img { position: absolute; right: 0; bottom: 0; height: 100%; aspect-ratio: 1; width: auto; max-width: 100%; object-fit: cover; border: 2px solid var(--dc-ink); box-shadow: none !important; }
.dc-actions { grid-column: 1; display: flex; gap: 28px; align-items: center; margin-top: 6px; }
.dc-btn { background: var(--dc-ink); color: var(--dc-cream) !important; padding: 14px 24px; font-family: var(--dc-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 5px 5px 0 var(--dc-blue); text-decoration: none !important; }
.dc-btn:hover { background: var(--dc-blue); box-shadow: 5px 5px 0 var(--dc-ink); }
.dc-cv { border-left: 2px solid var(--dc-ink); padding-left: 16px; display: flex; flex-direction: column; gap: 2px; text-decoration: none !important; color: var(--dc-ink) !important; }
.dc-cv span { font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-muted); }
.dc-cv strong { font-family: var(--dc-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--dc-blue); }
.dc-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
/* 4a: inline tags under the intro (replaces .dc-actions + .dc-topics on the landing page) */
.dc-tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; align-self: flex-start; }
.dc-tags .dc-topic { padding: 6px 12px; font-size: 9.5px; text-align: left; box-shadow: none; }
.dc-topic { border: 2px solid var(--dc-ink); padding: 12px 0; text-align: center; font-family: var(--dc-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-cream) !important; text-decoration: none !important; }
.dc-topic:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--dc-ink); }
.dc-topic.dc-bg-cream, .dc-bg-cream { background: var(--dc-cream) !important; color: var(--dc-ink) !important; }
.dc-bg-blue { background: var(--dc-blue); } .dc-bg-pink { background: var(--dc-pink); } .dc-bg-mustard { background: var(--dc-mustard); color: var(--dc-ink) !important; } .dc-bg-ink { background: var(--dc-ink); }
.dc-section { padding-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.dc-section + .dc-section { padding-top: 64px; }
.dc-h2 { font-size: 26px; letter-spacing: -0.02em; border-bottom: 2px solid var(--dc-ink); padding-bottom: 8px; margin: 0; display: flex; justify-content: space-between; align-items: baseline; }
.dc-h2 a { font-family: var(--dc-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.dc-card { border: 2px solid var(--dc-ink); background: var(--dc-card); padding: 32px 36px; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; color: var(--dc-ink) !important; text-decoration: none !important; transition: transform 120ms ease, box-shadow 120ms ease; }
.dc-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--dc-blue); }
.dc-card-title { font-family: var(--dc-display); font-weight: 800; font-size: 36px; line-height: 1.05; letter-spacing: -0.035em; color: var(--dc-blue); text-wrap: balance; }
.dc-card-sub { font-style: italic; font-size: 17px; color: var(--dc-muted); margin-top: 10px; }
.dc-card-excerpt { font-size: 15.5px; line-height: 1.6; color: var(--dc-body); max-width: 560px; margin-top: 16px; }
.dc-card-meta { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); }
.dc-card-meta .dc-tag { color: var(--dc-pink); }
.dc-card-meta .dc-arrow { font-size: 26px; letter-spacing: 0; }
.dc-bars { display: flex; flex-direction: column; gap: 16px; }
.dc-bar { border: 2px solid var(--dc-ink); background: var(--dc-card); padding: 16px 22px; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 22px; align-items: center; color: var(--dc-ink) !important; text-decoration: none !important; transition: transform 120ms ease, box-shadow 120ms ease; }
.dc-bar:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--dc-ink); }
.dc-bar-date { font-family: var(--dc-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dc-blue); border-right: 2px solid var(--dc-ink); padding-right: 18px; align-self: stretch; display: flex; align-items: center; white-space: nowrap; }
.dc-bar-title { font-size: 17px; line-height: 1.3; }
.dc-bar-sub { display: block; font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dc-muted); margin-top: 2px; }
.dc-bar-arrow { font-size: 22px; }
.dc-landing-footer { margin-top: 72px; }
@media (max-width: 900px) {
  .dc-hero { grid-template-columns: 1fr; }
  .dc-portrait { grid-column: 1; grid-row: auto; height: 320px; }
  .dc-portrait img { position: static; height: 100%; }
  .dc-h1 { font-size: 64px; white-space: normal; }
  .dc-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-card { grid-template-columns: 1fr; }
  .dc-card-meta { flex-direction: row; align-items: center; }
  .dc-bar { grid-template-columns: 1fr; gap: 8px; }
  .dc-bar-date { border-right: 0; }
}

/* --------------------------------------------------------------------------
   Publications page (publications.html)
   -------------------------------------------------------------------------- */
.pub-year { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; margin-bottom: 40px; }
.pub-year > h2 { font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--dc-blue); border: 0; padding: 0; margin: 0; white-space: nowrap; }
.pub-list { display: flex; flex-direction: column; gap: 14px; }
.pub-card { border: 2px solid var(--dc-ink); background: var(--dc-card); padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; transition: transform 120ms ease, box-shadow 120ms ease; }
.pub-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--dc-ink); }
.pub-title { font-size: 16px; line-height: 1.4; font-weight: 600; }
.pub-title a { color: var(--dc-ink) !important; text-decoration: none !important; }
.pub-card:hover .pub-title a { color: var(--dc-blue) !important; }
.pub-authors { display: block; font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--dc-muted); line-height: 1.5; margin-top: 6px; }
.pub-authors b { color: var(--dc-ink); }
.pub-journal { display: block; font-style: italic; font-size: 13px; color: var(--dc-body); margin-top: 4px; }
.pub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pub-badge { font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-cream); background: var(--dc-pink); border: 1.5px solid var(--dc-ink); padding: 3px 7px; white-space: nowrap; }
.pub-legend { font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--dc-muted); margin: 0; }
.pub-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -8px 0 32px; }
.dc-btn-outline { border: 2px solid var(--dc-ink); padding: 9px 14px; font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-ink) !important; text-decoration: none !important; box-shadow: 3px 3px 0 var(--dc-ink); white-space: nowrap; background: var(--dc-card); }
.dc-btn-outline:hover { background: var(--dc-ink); color: var(--dc-cream) !important; }
@media (max-width: 767px) { .pub-year { grid-template-columns: 1fr; gap: 12px; } .pub-card { grid-template-columns: 1fr; } .pub-side { flex-direction: row; } }

/* --------------------------------------------------------------------------
   Research page (research.html)
   -------------------------------------------------------------------------- */
.rs-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 40px; max-width: none; }
.rs-quotes > span, .rs-quotes blockquote { position: relative; display: block; border: 2px solid var(--dc-ink); background: var(--dc-card); padding: 18px 18px 14px 20px; font-style: italic; font-size: 14px; line-height: 1.45; color: var(--dc-body); margin: 0; overflow: visible; white-space: normal; text-wrap: pretty; transition: transform 120ms ease, box-shadow 120ms ease; }
.rs-quotes > span::before, .rs-quotes blockquote::before { content: "\201C"; position: absolute; top: -11px; left: 14px; font-family: var(--dc-display); font-weight: 800; font-style: normal; font-size: 36px; line-height: 0.8; height: 18px; overflow: hidden; color: var(--dc-pink); background: var(--dc-cream); padding: 0 6px; }
.rs-quotes > span:nth-child(2)::before { color: var(--dc-blue); }
.rs-quotes > span:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--dc-ink); }
.rs-quotes cite, .rs-quotes .rs-cite { display: block; margin-top: 6px; font-family: var(--dc-mono); font-style: normal; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); }
.rs-lead { font-size: 26px; line-height: 1.4; font-weight: 600; color: var(--dc-ink) !important; max-width: none; text-wrap: pretty; margin: 0 0 24px; }
.rs-intro { font-size: 17px; line-height: 1.7; max-width: none; margin: 0 0 8px; }
@media (max-width: 767px) { .rs-quotes { grid-template-columns: 1fr; } }
.rs-area { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; border-top: 2px solid var(--dc-ink); padding-top: 24px; margin-top: 40px; }
.rs-num { font-family: var(--dc-display); font-weight: 800; font-size: 48px; line-height: 0.9; letter-spacing: -0.03em; }
main .rs-area h2 { font-size: 28px; border: 0; padding: 0; margin: 0 0 16px; text-wrap: balance; }
.rs-area p { font-size: 16px; line-height: 1.7; margin: 0 0 16px; max-width: 760px; text-wrap: pretty; }
.rs-refs { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; background: none !important; color: inherit !important; }
.rs-refs li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--dc-muted); }
.rs-refs li::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border: 1.5px solid var(--dc-ink); background: var(--dc-blue); }
.rs-refs.dc-bg-pink li::before { background: var(--dc-pink); } .rs-refs.dc-bg-mustard li::before { background: var(--dc-mustard); } .rs-refs.dc-bg-ink li::before { background: var(--dc-ink); }
.dc-c-blue { color: var(--dc-blue); } .dc-c-pink { color: var(--dc-pink); } .dc-c-mustard { color: var(--dc-mustard); } .dc-c-ink { color: var(--dc-ink); }
@media (max-width: 767px) { .rs-area { grid-template-columns: 1fr; gap: 12px; } }

/* --------------------------------------------------------------------------
   Blog index (blog.html) — cards + tag filter
   -------------------------------------------------------------------------- */
.bl-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.bl-filters a { border: 1.5px solid var(--dc-ink); padding: 5px 10px; color: var(--dc-ink) !important; text-decoration: none !important; }
.bl-filters a.is-active, .bl-filters a:hover { background: var(--dc-ink); color: var(--dc-cream) !important; }
.bl-list { display: flex; flex-direction: column; gap: 16px; }
.bl-card { border: 2px solid var(--dc-ink); background: var(--dc-card); padding: 20px 24px; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 24px; align-items: start; color: var(--dc-ink) !important; text-decoration: none !important; transition: transform 120ms ease, box-shadow 120ms ease; }
.bl-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--dc-ink); }
.bl-meta { display: flex; flex-direction: column; gap: 6px; border-right: 2px solid var(--dc-ink); padding-right: 18px; align-self: stretch; }
.bl-date { font-family: var(--dc-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dc-blue); white-space: nowrap; }
.bl-tag { font-family: var(--dc-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dc-pink); }
.bl-title { display: block; font-family: var(--dc-display); font-weight: 800; font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.bl-sub { display: block; font-style: italic; font-size: 14px; color: var(--dc-muted); margin-top: 6px; }
.bl-excerpt { display: block; font-size: 14.5px; line-height: 1.55; color: var(--dc-body); max-width: 640px; margin-top: 10px; text-wrap: pretty; }
.bl-arrow { font-size: 22px; }
@media (max-width: 767px) { .bl-card { grid-template-columns: 1fr; } .bl-meta { border-right: 0; border-bottom: 1px solid var(--dc-rule); padding: 0 0 8px; } }

/* --------------------------------------------------------------------------
   Press page (press.html)
   -------------------------------------------------------------------------- */
.press-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.press-list a.press-item:first-child { border-top: 1px solid var(--dc-rule); }
.press-list a.press-item:hover .press-title { color: var(--dc-blue); }
/* --------------------------------------------------------------------------
   Press page (press.html) — optional markup, see README
   -------------------------------------------------------------------------- */
.press-list a.press-item { display: grid; grid-template-columns: 100px 130px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--dc-rule); color: var(--dc-ink) !important; text-decoration: none !important; }
.press-date { font-family: var(--dc-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--dc-blue); }
.press-type { justify-self: start; border: 1.5px solid var(--dc-ink); padding: 4px 8px; font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--dc-cream); }
.press-title { font-size: 16px; line-height: 1.4; font-weight: 600; }
.press-outlet { display: block; font-size: 13px; color: var(--dc-muted); font-style: italic; font-weight: 400; }
.press-source { font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); white-space: nowrap; }
@media (max-width: 767px) { .press-list a.press-item { grid-template-columns: 1fr; gap: 6px; } }

/* --------------------------------------------------------------------------
   Resources page cards (resources.md) — optional markup, see README
   -------------------------------------------------------------------------- */
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.res-card { border: 2px solid var(--dc-ink); background: var(--dc-card); box-shadow: 4px 4px 0 var(--dc-ink); padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 18px; color: var(--dc-ink) !important; text-decoration: none !important; }
.res-card::before { content: ""; width: 20px; height: 20px; background: var(--dc-blue); border: 1.5px solid var(--dc-ink); }
.res-card strong { font-family: var(--dc-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; line-height: 1.1; display: block; margin-bottom: 6px; }
.res-card span { font-size: 14px; line-height: 1.5; color: var(--dc-muted); }
@media (max-width: 767px) { .res-grid { grid-template-columns: 1fr; } }
/* Resources list rows (resources.html) — same structure as Press */
.res-list { display: flex; flex-direction: column; margin: 0 0 16px; }
.res-list a.res-row:first-child { border-top: 1px solid var(--dc-rule); }
.res-list a.res-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 0;  border-bottom: 1px solid var(--dc-rule); color: var(--dc-ink) !important; text-decoration: none !important; font-weight: 400; }
.res-list a.res-row:hover .res-title { color: var(--dc-blue); }
.res-list .res-type { justify-self: start; border: 1.5px solid var(--dc-ink); padding: 4px 8px; font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--dc-cream); }
.res-list .res-type.dc-bg-mustard, .res-head-tags .dc-bg-mustard { color: var(--dc-ink); }
.res-list .res-type.dc-bg-cream, .res-head-tags .dc-bg-cream { background: var(--dc-cream) !important; color: var(--dc-ink) !important; }
.res-list .res-body { display: block; }
.res-list .res-title { display: block; font-size: 16px; line-height: 1.8; font-weight: 600; text-wrap: pretty; }
.res-list .res-desc { display: block; font-size: 13px; line-height: 1.7; color: var(--dc-muted); font-style: italic; font-weight: 400; }
.res-list .res-source { font-family: var(--dc-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); white-space: nowrap; }
.res-head-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.res-head-tags span { border: 1.5px solid var(--dc-ink); padding: 4px 8px; font-family: var(--dc-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-cream); }
@media (max-width: 767px) { .res-list a.res-row { grid-template-columns: 1fr; gap: 6px; } }