/* Editorial home: a calculation notebook, distinct from the shared tool-page system. */
.virtus-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(270px, .75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4.5rem);
  overflow: hidden;
  color: #f7faf8;
  background: #12324a;
  border-radius: 0 0 2px 2px;
}
.virtus-intro::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(110deg, #000 0%, transparent 72%);
}
.virtus-intro > * { position: relative; }
.virtus-intro-copy { max-width: 710px; }
.virtus-intro .eyebrow { margin: 0 0 1.1rem; color: #ffc29e; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.virtus-intro h1 { max-width: 13ch; margin: 0; color: #fff; font: 750 clamp(2.75rem, 6.2vw, 5.5rem)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.virtus-intro h1 span { color: #ffc29e; }
.virtus-intro-copy > p:not(.eyebrow) { max-width: 57ch; margin: 1.5rem 0 0; color: #d3e0e4; font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.72; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; margin-top: 2rem; }
.intro-actions a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 800; }
.intro-primary { padding: .7rem 1.05rem; color: #172d37; background: #ffc29e; border: 1px solid #ffc29e; }
.intro-primary:hover { background: #ffd4ba; }
.intro-secondary { color: #fff; text-decoration: underline !important; text-underline-offset: 5px; }
.method-note { max-width: 390px; justify-self: end; padding: clamp(1.2rem, 2.6vw, 2rem); color: #203d4b; background: #f4f1e8; border: 1px solid rgba(255,255,255,.44); box-shadow: 10px 10px 0 rgba(4,19,29,.23); transform: rotate(1.2deg); }
.method-note-label { color: #a74324; font: 800 .69rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; text-transform: uppercase; }
.method-equation { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: 1.3rem 0 1rem; font: 700 clamp(1rem, 2vw, 1.28rem)/1.3 Georgia, serif; }
.method-equation b { color: #c54c2d; font: 800 1.25rem/1 ui-monospace, monospace; }
.method-equation strong { color: #a74324; }
.method-note > p:last-child { margin: 0; color: #4c626b; font-size: .88rem; line-height: 1.65; }

.calculation-notes { padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.notes-heading { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.notes-heading .eyebrow { color: #a74324; font: 800 .72rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }
.notes-heading .eyebrow span { color: #60747b; }
.notes-heading h2 { max-width: 17ch; margin: .8rem auto; color: #12324a; font: 750 clamp(2rem, 4vw, 3.35rem)/1.03 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.notes-heading > p:last-child { max-width: 61ch; margin: 0 auto; color: #526970; font-size: 1rem; line-height: 1.7; }
.worked-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #aebfc0; border-bottom: 1px solid #aebfc0; }
.worked-example { min-width: 0; padding: clamp(1.2rem, 2vw, 1.8rem); display: flex; flex-direction: column; background: rgba(255,255,255,.6); }
.worked-example + .worked-example { border-left: 1px solid #aebfc0; }
.example-index { display: flex; align-items: center; gap: .7rem; color: #a74324; font: 800 .72rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.example-index span { color: #526970; letter-spacing: .08em; }
.worked-example h3 { margin: 1.05rem 0 .7rem; color: #12324a; font: 700 clamp(1.3rem, 2vw, 1.65rem)/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.example-input { min-height: 4.5em; margin: 0 0 1rem; color: #526970; font-size: .9rem; line-height: 1.6; }
.example-input strong { color: #12324a; font-weight: 800; }
.calculation-line { padding: .8rem 0; display: grid; grid-template-columns: 1fr auto; gap: .1rem .7rem; align-items: baseline; border-top: 1px solid #d4dedd; font: 700 1rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.calculation-line b { color: #bf431d; }
.calculation-line strong { color: #08785d; text-align: right; }
.calculation-line small { grid-column: 1 / -1; color: #6a7b7f; font: 500 .72rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
.calculation-result { min-height: 61px; padding: .8rem 0; display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; border-top: 1px solid #d4dedd; border-bottom: 1px solid #d4dedd; color: #526970; font: 700 .82rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.calculation-result b { color: #bf431d; }
.calculation-result strong { color: #08785d; font: 800 1.08rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
.example-limit { margin: .8rem 0 1rem; color: #61747a; font-size: .78rem; line-height: 1.55; }
.example-link { margin-top: auto; padding-top: .85rem; display: flex; justify-content: space-between; gap: .8rem; border-top: 1px solid #d4dedd; color: #a74324; font-size: .84rem; font-weight: 800; line-height: 1.45; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.example-link span { flex: 0 0 auto; font-size: 1rem; }
.related-paths { margin-top: 1.35rem; padding: 1.2rem clamp(1rem, 2.5vw, 1.7rem); display: grid; grid-template-columns: 1fr auto; gap: .75rem 1.4rem; align-items: center; background: #fff; border: 1px solid #cbd7d9; }
.related-paths p { max-width: 70ch; margin: 0; color: #526970; font-size: .84rem; line-height: 1.55; }
.related-paths p strong { color: #12324a; }
.related-paths div { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.related-paths a { color: #a74324; font-size: .8rem; font-weight: 800; text-underline-offset: 3px; white-space: nowrap; }
.reading-guide { margin-top: clamp(1.4rem, 3vw, 2.3rem); padding: clamp(1.2rem, 2.8vw, 2rem); display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 2rem; align-items: center; background: #e8efec; border-left: 4px solid #bf431d; }
.reading-guide .eyebrow { margin: 0 0 .45rem; color: #a74324; font: 800 .68rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.reading-guide h3 { margin: 0; color: #12324a; font: 700 1.35rem/1.2 Georgia, "Times New Roman", serif; }
.reading-guide ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; color: #455e66; font-size: .87rem; line-height: 1.55; }
.reading-guide li::marker { color: #bf431d; }
.reading-guide strong { color: #12324a; }

.showcase-card:focus-visible, .example-link:focus-visible, .related-paths a:focus-visible, .intro-actions a:focus-visible, .category-menu a:focus-visible { outline: 3px solid #bf431d; outline-offset: 4px; }
@media (max-width: 720px) {
  .site-header .catalog-nav { justify-content: flex-start; flex-wrap: wrap; column-gap: .9rem; row-gap: .35rem; }
  .site-header .catalog-nav a { flex: 0 1 auto; }
}

@media (max-width: 850px) {
  .virtus-intro { grid-template-columns: minmax(0, 1fr) minmax(230px, .7fr); gap: 1.4rem; padding-inline: 1.5rem; }
  .worked-examples { grid-template-columns: 1fr; }
  .worked-example + .worked-example { border-top: 1px solid #aebfc0; border-left: 0; }
  .example-input { min-height: 0; }
}
@media (max-width: 620px) {
  .virtus-intro { grid-template-columns: 1fr; padding: 3rem 1.25rem; }
  .virtus-intro h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .method-note { width: min(100%, 390px); justify-self: start; transform: none; }
  .notes-heading { text-align: left; }
  .notes-heading h2 { margin-left: 0; }
  .reading-guide { grid-template-columns: 1fr; gap: 1rem; }
  .related-paths { grid-template-columns: 1fr; }
  .calculation-result { grid-template-columns: 1fr auto; }
  .calculation-result strong { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .virtus-intro *, .calculation-notes * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}