@font-face { font-family: "Roboto"; src: url("/assets/roboto.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@scope ([data-sw="article"]) {
  :scope { background: #fff; }
  .in { max-width: 970px; margin: 0 auto; padding: 58px 0 100px; box-sizing: border-box; }
  h1 { margin: 0; text-align: center; font: 500 44.8px/53.76px "Advent Pro", sans-serif; letter-spacing: 2px; color: #29292a; text-wrap: balance; }
  .meta { display: flex; justify-content: center; align-items: center; margin: 24px 0 58px; font: 300 16px/24px "Quicksand", sans-serif; letter-spacing: 1px; color: #29292a; }
  .meta span + span { margin-left: 32px; padding-left: 32px; border-left: 1px solid #29292a; }
  .hero { display: flex; justify-content: center; height: 450px; margin-bottom: 50px; }
  .hero img { height: 450px; width: auto; max-width: 100%; object-fit: cover; display: block; }
  .body p, .body li { font: 300 17.6px/35.2px "Inter", sans-serif; letter-spacing: 1px; color: #29292a; text-align: justify; }
  .body p { margin: 0 0 14.4px; } .body ul, .body ol { margin: 0 0 14.4px; padding-left: 40px; }
  .body h3 { margin: 22px 0 6px; font: 400 17.6px/35.2px "Inter", sans-serif; letter-spacing: 1px; color: #29292a; text-wrap: initial; }
  .body strong, .body b { font-weight: 400; } .body em { font-style: italic; }
  .body img { display: block; max-width: 100%; height: auto; margin: 18px auto; }
  .body a { color: #29292a; text-decoration: underline; }
  .body a:hover { color: #016B6E; }
  .nav { display: flex; justify-content: space-between; margin-top: 78px; padding-top: 28px; border-top: 1px solid #29292a; font: 300 14.4px/24px "Quicksand", sans-serif; letter-spacing: 1px; }
  .nav a { color: #29292a; text-decoration: underline; } .nav a:hover { color: #016B6E; }
  .share { display: flex; align-items: center; gap: 18px; margin-top: 30px; font: 300 14.4px/24px "Quicksand", sans-serif; letter-spacing: 1px; color: #29292a; }
  .share a { color: #016B6E; font: 400 20px/20px "FA Brands"; text-decoration: none; display: block; } .share svg { width: 18px; height: 18px; display: block; }
  h2 { margin: 60px 0 40px; text-align: center; font: 500 35.2px/42px "Advent Pro", sans-serif; letter-spacing: 2px; color: #29292a; text-wrap: initial; }
  .rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .rel img { width: 100%; height: 292px; object-fit: cover; display: block; }
  .rel h3 { margin: 22px 0 8px; font: 600 20.8px/25px "Inter", sans-serif; letter-spacing: 1px; color: #29292a; text-wrap: initial; } .rel h3 a { color: inherit; text-decoration: none; }
  .rel .more { font: italic 300 14.4px/20px "Quicksand", sans-serif; letter-spacing: 1px; color: #016B6E; text-decoration: underline; }
  @media (max-width: 640px) { .body p, .body li { text-align: left; letter-spacing: .3px; } }
  @media (max-width: 1100px) { .in { padding: 36px 24px 60px; } h1 { font-size: 32px; line-height: 1.2; } .hero { height: auto; } .hero img { height: auto; } .rel { grid-template-columns: minmax(0, 1fr); } .nav { margin-top: 40px; } }
}
