/* ============================================================
   JDHAB HTML ARTICLE STANDARD v2.0
   Journal of Digital Health and Advanced Biomaterials
   Unified visual layer for HTML galleys
   Insert as the LAST stylesheet before </head>
   ============================================================ */

:root {
  --jdhab-blue: #123A5D;
  --jdhab-blue-dark: #0B243B;
  --jdhab-ink: #2F3C47;
  --jdhab-muted: #65717C;
  --jdhab-accent: #6C7468;
  --jdhab-line: #E2DFD8;
  --jdhab-line-strong: #C9CEC5;
  --jdhab-paper: #FCFBF8;
  --jdhab-white: #FFFFFF;
  --jdhab-sans: Arial, Helvetica, sans-serif;
  --jdhab-serif: Georgia, "Times New Roman", serif;
  --jdhab-reading: 760px;
  --jdhab-shell: 1180px;
}


/* ============================================================
   BASE
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  background: #F7F7F5 !important;
  color: var(--jdhab-ink) !important;
  font-family: var(--jdhab-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--jdhab-blue);
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--jdhab-blue-dark);
}

p,
li {
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  overflow-wrap: break-word;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;

  padding: 14px 22px !important;

  background: #132126 !important;
  background-image: none !important;

  color: #FFFFFF !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;

  box-shadow: none !important;
}

.topbar::before,
.topbar::after {
  display: none !important;
  content: none !important;
}

.topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  max-width: var(--jdhab-shell) !important;

  margin: 0 auto !important;
  gap: 26px !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;

  min-width: 0 !important;

  color: #FFFFFF !important;
  text-decoration: none !important;
}

.brand img {
  display: block !important;
  width: auto !important;
  max-width: 154px !important;
  max-height: 52px !important;
  object-fit: contain !important;
}

.brand-copy {
  display: none !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;

  gap: 7px !important;
}

.top-actions a,
.top-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 34px !important;

  padding: 7px 11px !important;

  background: transparent !important;

  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 2px !important;

  color: #FFFFFF !important;

  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;

  box-shadow: none !important;
  transform: none !important;
}

.top-actions a:hover,
.top-actions a:focus,
.top-actions button:hover,
.top-actions button:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #FFFFFF !important;
}

.jdhab-action-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 5px !important;
}

.jdhab-action-icon svg {
  width: 15px !important;
  height: 15px !important;
}


/* ============================================================
   PAGE / SHELL
   ============================================================ */

.page {
  width: 100% !important;
  max-width: var(--jdhab-shell) !important;

  margin: 28px auto 44px !important;
  padding: 0 20px !important;
}

.shell {
  overflow: hidden !important;

  background: #FFFFFF !important;

  border: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative !important;

  padding: 38px 44px 34px !important;

  background: var(--jdhab-paper) !important;
  background-image: none !important;

  border: 0 !important;
  border-left: 3px solid var(--jdhab-accent) !important;
  border-bottom: 1px solid var(--jdhab-line) !important;

  box-shadow: none !important;
}

.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}

.eyebrow {
  display: block !important;

  margin: 0 0 10px !important;

  color: var(--jdhab-accent) !important;

  font-family: var(--jdhab-sans) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.issue-line {
  margin: 0 0 10px !important;

  color: var(--jdhab-muted) !important;

  font-size: 12.5px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

.hero h1,
.hero > h1,
h1.article-title {
  max-width: 980px !important;

  margin: 0 0 12px !important;

  color: var(--jdhab-blue) !important;

  font-family: var(--jdhab-serif) !important;
  font-size: clamp(2rem, 3vw, 2.72rem) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

.subtitle,
.hero .subtitle {
  max-width: 920px !important;

  margin: 0 !important;

  color: #52606B !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}


/* ============================================================
   AUTHORS
   ============================================================ */

.author-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .34fr) !important;

  gap: 26px !important;

  margin-top: 26px !important;
  padding-top: 22px !important;

  border-top: 1px solid var(--jdhab-line) !important;
}

.author-main,
.author-side {
  color: #4F5C66 !important;

  font-family: var(--jdhab-sans) !important;
  font-size: 12.8px !important;
  line-height: 1.62 !important;
}

.author-main strong,
.author-side strong,
.author-name {
  color: var(--jdhab-blue) !important;
  font-weight: 700 !important;
}

.author-block a,
.author-block a[href*="orcid.org"] {
  color: var(--jdhab-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--jdhab-line-strong) !important;
}

.author-block a:hover,
.author-block a:focus {
  border-bottom-color: var(--jdhab-blue) !important;
}


/* ============================================================
   MAIN CONTENT LAYOUT
   ============================================================ */

.content-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 270px !important;

  gap: 38px !important;

  padding: 36px 42px 46px !important;

  background: #FFFFFF !important;
}

.main {
  min-width: 0 !important;
}

.article-body {
  max-width: var(--jdhab-reading) !important;

  color: var(--jdhab-ink) !important;

  font-family: var(--jdhab-sans) !important;
  font-size: 15px !important;
  line-height: 1.78 !important;
}

.article-body p,
.main > p,
.main section > p {
  margin: 0 0 17px !important;

  color: var(--jdhab-ink) !important;

  text-align: left !important;
}

@media (min-width: 900px) {
  .article-body p,
  .main > p,
  .main section > p {
    text-align: justify !important;
    text-justify: inter-word !important;
  }
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.article-body h2,
.main h2 {
  margin: 34px 0 14px !important;
  padding: 0 0 8px !important;

  color: var(--jdhab-blue) !important;

  border: 0 !important;
  border-bottom: 1px solid var(--jdhab-line) !important;

  font-family: var(--jdhab-serif) !important;
  font-size: 20px !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

.article-body h3,
.main h3 {
  margin: 24px 0 9px !important;

  color: var(--jdhab-blue) !important;

  font-family: var(--jdhab-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

.article-body h4,
.main h4 {
  margin: 20px 0 8px !important;

  color: #3F4E59 !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}


/* ============================================================
   ABSTRACT / AUDIO / CALLOUTS
   ============================================================ */

.abstract-card,
.audio-summary-card,
.callout,
.final-statement {
  margin: 0 0 28px !important;
  padding: 21px 22px 23px !important;

  background: var(--jdhab-paper) !important;
  background-image: none !important;

  border: 1px solid var(--jdhab-line) !important;
  border-top: 2px solid var(--jdhab-accent) !important;
  border-left: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;

  color: var(--jdhab-ink) !important;

  box-shadow: none !important;
}

.abstract-card h2,
.audio-summary-card h2,
.callout h2,
.final-statement h2 {
  margin-top: 0 !important;
}

.abstract-card p,
.audio-summary-card p,
.callout p,
.final-statement p {
  margin: 0 0 11px !important;
  color: var(--jdhab-ink) !important;
  text-align: left !important;
}

.abstract-card p:last-child,
.audio-summary-card p:last-child,
.callout p:last-child,
.final-statement p:last-child {
  margin-bottom: 0 !important;
}

.audio-summary-card audio {
  width: 100% !important;
  margin-top: 10px !important;
}

.audio-transcript {
  margin-top: 13px !important;
  padding-top: 12px !important;

  border-top: 1px solid var(--jdhab-line) !important;
}

.audio-transcript summary {
  color: var(--jdhab-blue) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}


/* ============================================================
   LISTS
   ============================================================ */

.article-body ul,
.article-body ol:not(.refs),
.main ul,
.main ol:not(.refs) {
  margin: 0 0 18px 22px !important;
  padding: 0 !important;
}

.article-body li,
.main li {
  margin: 0 0 7px !important;
  line-height: 1.7 !important;
}


/* ============================================================
   FIGURES
   ============================================================ */

.article-body figure,
.main figure {
  margin: 30px 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

.article-body figure img,
.main figure img,
.figure-panel img {
  display: block !important;

  width: auto !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 auto !important;

  border: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

.article-body figcaption,
.main figcaption {
  margin-top: 9px !important;

  color: var(--jdhab-muted) !important;

  font-size: 11.8px !important;
  line-height: 1.62 !important;
  text-align: left !important;
}


/* ============================================================
   TABLES
   ============================================================ */

.table-wrap,
.table-responsive {
  width: 100% !important;

  margin: 26px 0 !important;

  overflow-x: auto !important;

  -webkit-overflow-scrolling: touch;
}

.article-body table,
.main table {
  width: 100% !important;

  border-collapse: collapse !important;
  border-spacing: 0 !important;

  color: var(--jdhab-ink) !important;

  font-size: 12.3px !important;
  line-height: 1.5 !important;
}

.article-body th,
.main th {
  padding: 10px 9px !important;

  background: #F5F5F1 !important;

  color: var(--jdhab-blue) !important;

  border: 1px solid var(--jdhab-line) !important;

  font-weight: 700 !important;
  text-align: left !important;
  vertical-align: top !important;
}

.article-body td,
.main td {
  padding: 9px !important;

  background: #FFFFFF !important;

  border: 1px solid var(--jdhab-line) !important;

  vertical-align: top !important;
}

.article-body caption,
.main caption {
  margin-bottom: 8px !important;

  color: var(--jdhab-blue) !important;

  font-size: 12px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  text-align: left !important;
}


/* ============================================================
   REQUIRED STATEMENTS / DEFINITION LISTS
   ============================================================ */

.statement-list,
.article-body dl,
.main dl {
  margin: 0 0 24px !important;
}

.statement-list dt,
.article-body dt,
.main dt {
  margin: 13px 0 3px !important;

  color: var(--jdhab-blue) !important;

  font-weight: 700 !important;
}

.statement-list dd,
.article-body dd,
.main dd {
  margin: 0 0 9px !important;

  color: var(--jdhab-ink) !important;

  line-height: 1.68 !important;
}


/* ============================================================
   REFERENCES
   ============================================================ */

#references {
  scroll-margin-top: 84px !important;
}

ol.refs,
.article-body ol.refs,
.main ol.refs {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  counter-reset: jdhabref !important;
}

ol.refs > li,
.article-body ol.refs > li,
.main ol.refs > li {
  position: relative !important;

  counter-increment: jdhabref !important;

  margin: 0 0 14px !important;
  padding: 0 0 0 31px !important;

  color: var(--jdhab-ink) !important;

  font-size: 12.8px !important;
  line-height: 1.65 !important;
}

ol.refs > li::before,
.article-body ol.refs > li::before,
.main ol.refs > li::before {
  content: counter(jdhabref) "." !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 23px !important;

  color: var(--jdhab-accent) !important;

  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-align: right !important;
}

ol.refs a,
#references a,
.reference-doi {
  color: var(--jdhab-blue) !important;

  font-weight: 600 !important;
  text-decoration: none !important;

  border-bottom: 1px solid var(--jdhab-line-strong) !important;

  overflow-wrap: anywhere !important;
}

ol.refs a:hover,
ol.refs a:focus,
#references a:hover,
#references a:focus,
.reference-doi:hover,
.reference-doi:focus {
  color: var(--jdhab-blue-dark) !important;
  border-bottom-color: var(--jdhab-blue) !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  min-width: 0 !important;
}

.sidebar-box {
  margin: 0 0 18px !important;
  padding: 17px 0 18px !important;

  background: transparent !important;

  border: 0 !important;
  border-bottom: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;

  color: #4F5C66 !important;

  font-family: var(--jdhab-sans) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;

  box-shadow: none !important;
}

.sidebar-box:first-child {
  padding-top: 0 !important;
}

.sidebar-box:last-child {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

.sidebar-box h2 {
  margin: 0 0 10px !important;

  color: var(--jdhab-blue) !important;

  font-family: var(--jdhab-sans) !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.sidebar-box p {
  margin: 0 0 9px !important;
  color: #4F5C66 !important;
}

.sidebar-box p:last-child {
  margin-bottom: 0 !important;
}

.contents-list {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.contents-list li {
  margin: 0 !important;
  padding: 0 !important;

  border-top: 1px solid #ECE9E3 !important;
}

.contents-list li:first-child {
  border-top: 0 !important;
}

.contents-list a {
  display: block !important;

  padding: 8px 0 !important;

  color: #42515D !important;

  font-size: 11.8px !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
}

.contents-list a:hover,
.contents-list a:focus {
  color: var(--jdhab-blue) !important;
}

.info-row {
  display: flex !important;
  justify-content: space-between !important;

  gap: 16px !important;

  padding: 8px 0 !important;

  border-top: 1px solid #ECE9E3 !important;
}

.info-row:first-of-type {
  border-top: 0 !important;
}

.info-label {
  color: var(--jdhab-muted) !important;
  font-weight: 600 !important;
}

.info-value {
  color: #33404A !important;
  font-weight: 600 !important;
  text-align: right !important;
}

.citation-text,
.license-note {
  color: #53606B !important;

  font-size: 11.5px !important;
  line-height: 1.6 !important;
}


/* ============================================================
   SIGNATURE / CLOSING TEXT
   ============================================================ */

.signature {
  margin-top: 30px !important;
  padding: 20px 0 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-top: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;

  color: #4F5C66 !important;

  font-family: var(--jdhab-sans) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;

  box-shadow: none !important;
}


/* ============================================================
   FOOTER NOTE
   ============================================================ */

.footer-note {
  margin-top: 34px !important;
  padding-top: 16px !important;

  border-top: 1px solid var(--jdhab-line) !important;

  color: var(--jdhab-muted) !important;

  font-size: 10.8px !important;
  line-height: 1.55 !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 980px) {

  .topbar-inner {
    flex-wrap: wrap !important;
  }

  .top-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .page {
    margin-top: 18px !important;
    padding: 0 14px !important;
  }

  .hero {
    padding: 32px 28px 28px !important;
  }

  .content-wrap {
    grid-template-columns: 1fr !important;
    gap: 30px !important;

    padding: 30px 28px 38px !important;
  }

  .article-body {
    max-width: none !important;
  }

  .sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .sidebar-box,
  .sidebar-box:first-child,
  .sidebar-box:last-child {
    margin: 0 !important;
    padding: 16px 0 !important;

    border-bottom: 1px solid var(--jdhab-line) !important;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 740px) {

  .topbar {
    position: static !important;
    padding: 14px !important;
  }

  .topbar-inner {
    display: block !important;
  }

  .brand {
    margin-bottom: 13px !important;
  }

  .brand img {
    max-height: 42px !important;
    max-width: 145px !important;
  }

  .top-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;
  }

  .top-actions a,
  .top-actions button {
    width: 100% !important;
    min-height: 42px !important;

    padding: 8px 9px !important;

    font-size: 11px !important;
  }

  .top-actions a.back-current {
    grid-column: 1 / -1 !important;
  }

  .page {
    margin: 0 auto 28px !important;
    padding: 0 !important;
  }

  .shell {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .hero {
    padding: 27px 19px 24px !important;
    border-left-width: 0 !important;
  }

  .eyebrow {
    font-size: 9.5px !important;
  }

  .issue-line {
    font-size: 11.5px !important;
  }

  .hero h1,
  .hero > h1,
  h1.article-title {
    font-size: 1.78rem !important;
    line-height: 1.16 !important;
  }

  .subtitle,
  .hero .subtitle {
    font-size: 13.3px !important;
    line-height: 1.5 !important;
  }

  .author-block {
    grid-template-columns: 1fr !important;
    gap: 13px !important;

    margin-top: 20px !important;
    padding-top: 18px !important;
  }

  .content-wrap {
    display: block !important;
    padding: 24px 18px 34px !important;
  }

  .article-body {
    max-width: none !important;

    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }

  .article-body p,
  .main > p,
  .main section > p,
  .article-body li,
  .main li {
    text-align: left !important;
  }

  .article-body h2,
  .main h2 {
    margin-top: 29px !important;

    font-size: 18px !important;
  }

  .article-body h3,
  .main h3 {
    font-size: 14.5px !important;
  }

  .abstract-card,
  .audio-summary-card,
  .callout,
  .final-statement {
    padding: 17px 15px 18px !important;
  }

  .sidebar {
    display: block !important;

    margin-top: 28px !important;
  }

  .sidebar-box,
  .sidebar-box:first-child,
  .sidebar-box:last-child {
    padding: 15px 0 !important;
    border-bottom: 1px solid var(--jdhab-line) !important;
  }

  .sidebar-box:last-child {
    border-bottom: 0 !important;
  }

  ol.refs > li,
  .article-body ol.refs > li,
  .main ol.refs > li {
    padding-left: 27px !important;

    font-size: 12.2px !important;
    line-height: 1.6 !important;
  }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

  .topbar,
  .sidebar,
  .audio-summary-card,
  audio {
    display: none !important;
  }

  body {
    background: #FFFFFF !important;
  }

  .page {
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .shell {
    border: 0 !important;
    box-shadow: none !important;
  }

  .hero {
    padding: 0 0 18pt !important;

    background: #FFFFFF !important;

    border: 0 !important;
    border-bottom: 1px solid #CCCCCC !important;
  }

  .content-wrap {
    display: block !important;
    padding: 18pt 0 0 !important;
  }

  .article-body {
    max-width: none !important;

    font-size: 10.5pt !important;
    line-height: 1.55 !important;
  }

  .article-body p {
    text-align: justify !important;
  }

  .hero h1,
  .hero > h1,
  h1.article-title {
    font-size: 24pt !important;
  }

  .abstract-card,
  .callout,
  .final-statement {
    break-inside: avoid !important;

    background: #FFFFFF !important;

    border: 1px solid #CCCCCC !important;
  }

  figure,
  table {
    break-inside: avoid !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
  }

  .footer-note {
    display: none !important;
  }
}


/* ============================================================
   JDHAB HTML ARTICLE STANDARD v2.1
   GLOBAL UNIFORMIZATION PATCH — Vol. 1 / No. 1
   Approved direction: editorial, restrained, PDF-aligned
   ============================================================ */

body.jdhab-html-article-v2 {
  --jdhab-shell: 1240px;
  --jdhab-reading: 790px;
}

/* One fixed desktop canvas for every article */
body.jdhab-html-article-v2 .page {
  width: 100% !important;
  max-width: var(--jdhab-shell) !important;
  margin: 28px auto 48px !important;
  padding: 0 24px !important;
}

body.jdhab-html-article-v2 .shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

/* Standardized hero proportions */
body.jdhab-html-article-v2 .hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 40px 54px 36px !important;
  background: var(--jdhab-paper) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 3px solid var(--jdhab-accent) !important;
  border-bottom: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.jdhab-html-article-v2 .eyebrow {
  margin: 0 0 10px !important;
  color: var(--jdhab-accent) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

body.jdhab-html-article-v2 .issue-line {
  margin: 0 0 14px !important;
  color: #5E6B75 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

/* Every title follows exactly the same hierarchy and alignment */
body.jdhab-html-article-v2 .hero h1,
body.jdhab-html-article-v2 .hero > h1,
body.jdhab-html-article-v2 h1.article-title {
  display: block !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 0 15px !important;
  padding: 0 !important;
  color: var(--jdhab-blue) !important;
  font-family: var(--jdhab-serif) !important;
  font-size: clamp(2.35rem, 3.25vw, 3.12rem) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  text-align: left !important;
  text-wrap: balance;
}

body.jdhab-html-article-v2 .hero .subtitle,
body.jdhab-html-article-v2 .subtitle {
  width: 100% !important;
  max-width: 940px !important;
  margin: 0 !important;
  color: #4F5E69 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  text-align: left !important;
}

/* Author panel: same geometry across every article */
body.jdhab-html-article-v2 .author-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  align-items: start !important;
  gap: 30px !important;
  width: 100% !important;
  margin: 30px 0 0 !important;
  padding: 24px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--jdhab-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.jdhab-html-article-v2 .author-main,
body.jdhab-html-article-v2 .author-side {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #4D5B65 !important;
  font-family: var(--jdhab-sans) !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
  background: transparent !important;
  border: 0 !important;
}

body.jdhab-html-article-v2 .author-side {
  padding-left: 28px !important;
  border-left: 1px solid var(--jdhab-line) !important;
}

body.jdhab-html-article-v2 .author-main p,
body.jdhab-html-article-v2 .author-side p {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #4D5B65 !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
  text-align: left !important;
}

body.jdhab-html-article-v2 .author-main > strong,
body.jdhab-html-article-v2 .author-main p > strong:first-child,
body.jdhab-html-article-v2 .author-name {
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--jdhab-blue) !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body.jdhab-html-article-v2 .author-side strong {
  color: var(--jdhab-blue) !important;
  font-weight: 700 !important;
}

/* Prevent long emails from creating a visibly different column */
body.jdhab-html-article-v2 .author-side a[href^="mailto:"],
body.jdhab-html-article-v2 .author-side a[href*="mailto:"] {
  display: inline !important;
  color: var(--jdhab-blue) !important;
  font-weight: 700 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Uniform ORCID badge */
body.jdhab-html-article-v2 .author-block a.orcid,
body.jdhab-html-article-v2 .author-block a[href*="orcid.org"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 36px !important;
  margin: 4px 0 0 !important;
  padding: 7px 12px !important;
  border: 1px solid #CFE2CF !important;
  border-radius: 999px !important;
  background: #F3F8F2 !important;
  color: var(--jdhab-blue) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.jdhab-html-article-v2 .author-block a.orcid svg,
body.jdhab-html-article-v2 .author-block a[href*="orcid.org"] svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

/* Main article begins on the same grid as the hero */
body.jdhab-html-article-v2 .content-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 38px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 36px 54px 48px !important;
  background: #FFFFFF !important;
}

body.jdhab-html-article-v2 .main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove decorative remnants from older article versions */
body.jdhab-html-article-v2 .hero::before,
body.jdhab-html-article-v2 .hero::after,
body.jdhab-html-article-v2 .main h2::before,
body.jdhab-html-article-v2 .article-body h2::before {
  display: none !important;
  content: none !important;
}

/* Desktop editorial consistency */
@media (min-width: 1100px) {
  body.jdhab-html-article-v2 .hero h1,
  body.jdhab-html-article-v2 h1.article-title {
    min-height: 0 !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  body.jdhab-html-article-v2 .page {
    padding: 0 16px !important;
  }

  body.jdhab-html-article-v2 .hero {
    padding: 34px 34px 30px !important;
  }

  body.jdhab-html-article-v2 .hero h1,
  body.jdhab-html-article-v2 h1.article-title {
    max-width: none !important;
    font-size: clamp(2rem, 5.1vw, 2.65rem) !important;
  }

  body.jdhab-html-article-v2 .author-block {
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 24px !important;
  }

  body.jdhab-html-article-v2 .content-wrap {
    grid-template-columns: minmax(0, 1fr) 240px !important;
    gap: 28px !important;
    padding: 30px 34px 40px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  body.jdhab-html-article-v2 .page {
    margin: 14px auto 30px !important;
    padding: 0 10px !important;
  }

  body.jdhab-html-article-v2 .hero {
    padding: 26px 20px 24px !important;
  }

  body.jdhab-html-article-v2 .hero h1,
  body.jdhab-html-article-v2 h1.article-title {
    font-size: clamp(1.72rem, 8.5vw, 2.18rem) !important;
    line-height: 1.10 !important;
    text-wrap: pretty;
  }

  body.jdhab-html-article-v2 .hero .subtitle,
  body.jdhab-html-article-v2 .subtitle {
    font-size: 14px !important;
  }

  body.jdhab-html-article-v2 .author-block {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
  }

  body.jdhab-html-article-v2 .author-side {
    padding: 18px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--jdhab-line) !important;
  }

  body.jdhab-html-article-v2 .content-wrap {
    display: block !important;
    padding: 26px 20px 34px !important;
  }

  body.jdhab-html-article-v2 .content-wrap > aside,
  body.jdhab-html-article-v2 aside#contents,
  body.jdhab-html-article-v2 .sidebar {
    margin-top: 30px !important;
  }
}