/* Figures inside notes (injected at build time by note_figures.mjs).
   Selectors are scoped under .note-content .note-body to beat the generic note image rules
   (max-height:600px; object-fit:contain), which would shrink tall diagrams. */
.note-content .note-body .heb-fig { margin: 1rem 0 1.5rem; padding: 0; display: flow-root; } /* flow-root: sit beside the floated "In this note" box instead of dropping below it */
.note-content .note-body .heb-fig img {
  display: block; width: 100%; height: auto; max-width: 960px; max-height: none;
  margin: 0; object-fit: initial; border-radius: 14px;
}
.note-content .note-body .heb-fig-link { display: block; cursor: zoom-in; color: inherit; }
.note-content .note-body .heb-fig figcaption {
  font-family: var(--sans); font-size: .82rem; line-height: 1.45; color: var(--ink-faint);
  margin: .45rem .25rem 0; max-width: 960px;
}
.note-content .note-body .heb-fig .heb-fig-tap { display: none; }
/* Header illustration: a wide, calm banner under the note title */
.note-content .note-body .heb-fig-hero { margin: .25rem 0 1.25rem; }
.note-content .note-body .heb-fig-hero img {
  max-width: none; aspect-ratio: 21 / 7; object-fit: cover; object-position: 75% 50%;
}
@media (max-width: 640px) {
  .note-content .note-body .heb-fig-hero img { aspect-ratio: 2 / 1; object-position: 85% 50%; }
  .note-content .note-body .heb-fig .heb-fig-tap { display: inline; font-weight: 600; color: var(--accent); }
}
/* Dark mode: diagrams keep their white card; soften it slightly so it does not glare */
html.heb-dark .note-content .note-body .heb-fig:not(.heb-fig-hero) img { filter: brightness(.94); box-shadow: 0 0 0 1px var(--line); }
@media print {
  .note-content .note-body .heb-fig-hero { display: none; }
  .note-content .note-body .heb-fig { break-inside: avoid; }
}
/* Title banner: the header illustration moves to the top of the note and carries the title on its empty left side
   (all header images are generated with the subject on the right). Built by heroTitle() in notes/index.html. */
.note-content .heb-hero{position:relative;overflow:hidden;border-radius:16px;margin:0 0 .75rem;background:#0b1630;aspect-ratio:21/7;}
.note-content .heb-hero>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:100% 50%;margin:0;border-radius:0;}
.note-content .heb-hero-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:1.75rem 2.25rem;width:62%;
  background:linear-gradient(90deg,rgba(8,17,38,.92) 0%,rgba(8,17,38,.75) 55%,rgba(8,17,38,0) 100%);}
.note-content .heb-hero h1.note-title{color:#fff;margin:0;font-size:clamp(1.45rem,2.6vw,2.15rem);line-height:1.15;letter-spacing:-.015em;text-shadow:0 1px 12px rgba(0,0,0,.35);}
.note-content .heb-hero .note-meta{color:rgba(255,255,255,.78);border:0;margin:0;padding:0;font-size:.78rem;letter-spacing:.02em;}
.note-content .heb-hero .note-meta .dot{color:rgba(255,255,255,.45);}
.note-content .heb-hero .note-meta .heb-dl{flex-basis:100%;margin:.35rem 0 0;}
.note-content .heb-hero .heb-dl a,.note-content .heb-hero .heb-dl button{color:rgba(255,255,255,.9)!important;border-color:rgba(255,255,255,.38)!important;background:rgba(255,255,255,.07)!important;}
.note-content .heb-hero .heb-dl b,.note-content .heb-hero .heb-dl svg{color:#fff!important;}
.note-content .heb-hero .heb-dl-msg{color:rgba(255,255,255,.75)!important;text-align:left;}
.note-content .note-header-row.has-hero{justify-content:flex-end;margin:0 0 1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line);}
@media (max-width:640px){
  .note-content .heb-hero{aspect-ratio:auto;display:flex;flex-direction:column;}
  .note-content .heb-hero>img{position:relative;inset:auto;height:auto;aspect-ratio:2/1;object-position:85% 50%;}
  .note-content .heb-hero-text{position:relative;width:auto;padding:1rem 1.1rem 1.1rem;background:#0b1630;gap:.4rem;}
  .note-content .heb-hero h1.note-title{font-size:1.25rem;}
  .note-content .heb-hero .note-meta{font-size:.72rem;}
}
@media print{
  .note-content .heb-hero{aspect-ratio:auto;background:none;border-radius:0;}
  .note-content .heb-hero>img{display:none;}
  .note-content .heb-hero-text{position:static;width:auto;padding:0;background:none;}
  .note-content .heb-hero h1.note-title{color:#000;text-shadow:none;}
  .note-content .heb-hero .note-meta{color:#444;}
}