/* Homepage resource selections and the related navigation disclosure. */
#resources { padding: 54px 0 58px; background: #fbfaf6; border-block: 1px solid #e3e8e6; }
#resources .resource-header { display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
#resources h2 { margin: 0; font-size: 34px; line-height: 1.4; color: #1c2f36; }
#resources .resource-intro { margin-top: 12px; max-width: 730px; color: #5e6d72; font-size: 15px; line-height: 1.9; }
#resources .resource-all { white-space: nowrap; }
#resources .resource-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
#resources .resource-layout.has-more { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
#resources .resource-featured { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 36px; align-items: center; padding-top: 28px; border-top: 1px solid #cdd8da; }
#resources h3 { margin: 10px 0 12px; font-size: 24px; line-height: 1.5; text-wrap: balance; color: #1c2f36; }
#resources h3 a { color: inherit; text-decoration: none; }
#resources h3 a:hover { color: #006b96; }
#resources .resource-edition { display: block; margin-top: 4px; color: #5e6d72; font-size: 15px; font-weight: 400; }
#resources .resource-summary { max-width: 740px; color: #5e6d72; font-size: 15px; line-height: 1.95; }
#resources .resource-tags { color: #bc453c; font-size: 12px; line-height: 1.6; }
#resources .resource-meta { margin: 16px 0 18px; color: #5e6d72; font-size: 12px; line-height: 1.8; }
#resources .resource-actions { display: flex; gap: 12px 28px; flex-wrap: wrap; }
#resources .resource-cover { display: block; background: #fff; border: 1px solid #d6dddf; box-shadow: 0 8px 24px #1c2f3614; }
#resources .resource-cover img { display: block; width: 100%; height: auto; }
#resources .resource-latest { display: grid; align-content: start; gap: 20px; padding: 28px 0 0 28px; border-left: 1px solid #d6dddf; }
#resources .resource-latest h3 { font-size: 18px; margin: 0 0 8px; }
#resources .resource-latest article + article { border-top: 1px solid #d6dddf; padding-top: 20px; }
#resources .resource-latest p { color: #5e6d72; font-size: 13px; line-height: 1.8; }
#navbar .about-nav { position: relative; }
#navbar .about-nav > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 500; color: #4a5c62; white-space: nowrap; padding: 10px 0; }
#navbar .about-nav > summary::-webkit-details-marker { display: none; }
#navbar .about-nav > summary::after { content: '⌄'; display: inline-block; margin-left: 5px; font-size: 12px; }
#navbar .about-nav[open] > summary::after { transform: rotate(180deg); }
#navbar .about-nav:has(a[aria-current="location"]) > summary { color: #006b96; }
#navbar .about-nav summary:focus-visible { outline: 2px solid #006b96; outline-offset: 4px; }
#navbar .about-panel { position: absolute; top: 100%; left: -18px; min-width: 148px; padding: 8px; background: white; border: 1px solid #d6dddf; border-radius: 4px; box-shadow: 0 12px 24px #1c2f3618; }
#navbar .about-panel a { display: block; padding: 11px 12px; font-size: 13px; color: #4a5c62; white-space: nowrap; }
#navbar .about-panel a:hover { color: #006b96; background: #f3f6f6; }
#mobile-menu .about-nav > summary { font-size: 16px; padding: 8px 0; }
#mobile-menu .about-panel { position: static; box-shadow: none; border: 0; border-left: 2px solid #d6dddf; border-radius: 0; margin: 4px 0 8px; padding: 0 12px; }
#mobile-menu .about-panel a { font-size: 14px; }
@media (max-width: 900px) {
  #resources .resource-layout.has-more { grid-template-columns: 1fr; }
  #resources .resource-latest { padding: 20px 0 0; border-left: 0; border-top: 1px solid #d6dddf; }
}
@media (max-width: 767px) {
  #resources { padding: 40px 0; }
  #resources h2 { font-size: 28px; }
  #resources h3 { font-size: 22px; }
  #resources .resource-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  #resources .resource-featured { grid-template-columns: minmax(0, 1fr) 115px; gap: 22px; }
}
@media (max-width: 480px) {
  #resources .resource-featured { grid-template-columns: 1fr; }
  #resources .resource-cover { width: 125px; }
}