/* S-58: Home design principles, scoped to the four information pages. */
.detail-main > .section { padding-bottom: var(--s-8); }
.detail-main > .hero:not(.fhero) { padding-block: var(--s-8); }
.detail-main > .hero:not(.fhero) + .section { padding-top: 0; }
.detail-main .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.detail-main .hero__grid > *, .detail-main .hero__aside { grid-column: auto; padding-top: 0; }
.detail-main .hero__aside { max-width: 44rem; }
.detail-main .hero__aside .lead { max-width: none; }
.detail-main h2 { max-width: none; }
.detail-main .split { row-gap: var(--s-5); }
.detail-main .split__head h2 { margin-bottom: 0; }
.detail-main .section__rule { margin-bottom: var(--s-6); }
.detail-main .panel { padding: var(--s-6); }
.detail-main .panel__intro { margin-top: var(--s-4); }
.detail-main .panel .rows { margin-top: var(--s-7); }
.detail-main .panel__note { margin-top: var(--s-6); }
.detail-main .detail-close { padding-top: var(--s-6); padding-bottom: var(--s-8); }
.detail-close > .wrap { display: grid; gap: var(--s-5) var(--s-6); align-items: center; }
.detail-close .statement { margin: 0; max-width: none; font-size: var(--fs-2); line-height: var(--lh-2); letter-spacing: var(--ls-2); }
.detail-close .btn-row, .detail-close .close__ask { margin: 0; }
.detail-close .close__ask { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .detail-main .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--s-8); }
  .detail-main .split > * { grid-column: auto; }
  .detail-close > .wrap { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 759px) {
  .detail-main > .hero:not(.fhero) { padding-block: var(--s-7); }
  .detail-main > .section { padding-bottom: var(--s-7); }
  .detail-main .panel { padding: var(--s-5); }
}
.detail-main .index-list--row { column-gap: var(--s-5); }
.detail-main .index-list--row a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-2); min-height: 64px; }
.detail-main .index-list--row a:hover { background: var(--paper-2); }
.detail-main .index-list__no { min-width: 1em; }
.detail-main .index-list .arrow { flex: none; margin-left: auto; }
/* CSS-only group entrances, opaque copy, static fallbacks and settled keyboard targets. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js .detail-main > .section :is(.label, h2) { animation: detail-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    html.js .detail-main [data-enter] { view-timeline-name: --detail-entry; view-timeline-axis: block; }
    html.js .detail-main [data-enter] > * { animation: detail-rise linear both; animation-timeline: --detail-entry; animation-range: entry 0% cover 25%; }
    html.js .detail-main [data-enter] :is(h2, .label) { animation: none; }
    html.js .detail-main [data-enter]:focus-within * { animation: none; }
  }
}
@keyframes detail-rise { from { transform: translateY(28px); } to { transform: translateY(0); } }
@media (max-width: 759px) { @keyframes detail-rise { from { transform: translateY(20px); } to { transform: translateY(0); } } }