.blogpost {width:1280px;margin:0 auto;}
.hero {display:block;float:left;width: 1280px;height:640px;position: relative;margin-top:50px;}
.hero-img {display:block;float:left;width: 1280px;height:640px;z-index: 0;}
.hero-content {position: absolute;bottom:0;right: 50px;z-index: 1;width: 460px;height:auto;display: flex;flex-direction:column;gap:16px;padding: 60px 40px 60px 40px;background-color:#284257;color:#fff;}
.hero_title {display:block;float:left;width:100%;font-weight:400;font-size:38px;margin:0 0 20px 0;line-height:110%;text-align:left;}
.hero_title span {display:block;float:left;width:100%;font-size:20px;font-weight:500;margin-bottom:20px;line-height: 100%;}
.hero-taxonomy {display:flex;align-items:center;gap:10px;}
.hero-category {font-size:14px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#9fb4c9;}
.hero-tag {font-size:14px;font-weight:500;color:#fff;}
.hero-dot {display:inline-block;width:4px;height:4px;border-radius:50%;background:#5c7996;}
.hero-description {font-size:16px;font-weight:300;line-height:150%;color:#dbe4ec;text-align:left;}
.hero-dates {font-size:14px;font-weight:300;}
.hero-date-published {color:#9fb4c9;}
.hero-date-sep {color:#5c7996;margin:0 8px;}
.hero-date-updated {color:#cfe0f0;}
/* On the dark hero panel the stars are white. They used to be text, so a colour
   was enough; as SVG backgrounds the shade has to be baked into the image. */
.hero-rating .coretypes-rating__stars-bg {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.25' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");}
.hero-rating .coretypes-rating__stars-fg {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");}
.hero-rating .coretypes-rating__value {font-size:16px;color:#fff;}
.article {display:block;float:left;width: 100%;margin:50px 0;}
.leftcontent {display:block;float:left;width: 200px;}
.toc-toggle {display:block;font-size:14px;font-weight:600;color:#284257;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:16px;}
.toc-arrow {display:none;}
.post-toc {list-style:none;font-weight:300;font-size:14px;margin:0;padding:0;}
.post-toc li {margin-bottom:12px;}
.post-toc li:hover {font-weight:500;}
.content {display:block;float:left;width: 710px;margin:0 60px;text-align:justify;}
.content h2, .content h3, .content h4, .content h5 {color:#284257;font-weight:400;margin:50px 0 30px 0;padding:0;line-height:120%;text-align:left;}
.content h2 {font-size:28px;}
.content h3 {font-size:24px;}
.content h4 {font-size:20px;}
.content p {margin:0 0 30px 0;}
.fullsize {display:block;float:left;width:100%;height:auto;margin:10px 0 20px 0;}
.content table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 24px 0; text-align: left; }
.content table, .content table thead, .content table tbody, .content table tr, .content table td { box-sizing: border-box; background: transparent; border: none; }
.content table td { color: #5A6A85; padding: 18px 12px; border: 1px solid #EDEDED; vertical-align: middle; }
.content table tr:first-child td { font-weight: 600; font-size: 18px; color: #284257; padding: 16px 12px; border-bottom: 2px solid #284257; }
.content table tr:last-child td { border-bottom: none; }

.content ol, .content ul { margin: 0 0 30px 0; padding-left: 0; list-style: none; counter-reset: ol-counter; }
.content ol li, .content ul li { position: relative; padding-left: 30px; margin-bottom: 15px; }
.content ol li::before { counter-increment: ol-counter; content: counter(ol-counter) "."; position: absolute; left: 0; top: 0; color: #284257; font-weight: 600; }
.content ul li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Ccircle cx='4.28599' cy='1.42857' r='1.42857' fill='%23284257'/%3E%3Ccircle cx='4.28599' cy='8.57143' r='1.42857' fill='%23284257'/%3E%3Ccircle cx='7.8571' cy='4.99954' r='1.42857' fill='%23284257'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.content ol li strong, .content ul li strong { color: #284257; font-weight: 700; }

.rightcontent {display:block;float:left;width: 250px;}
.author {display:block;float:left;width: 100%;}
.author_img {display:block;float:right;width: 80px;height:80px;}
.author_name {display:block;float:left;width: 150px;font-size:24px;font-weight:600;color:#284257;margin-bottom:10px;}
.author_role {display:block;float:left;width: 150px;font-size:14px;font-style:italic;color:#6B7280;line-height:120%;}
.author_desc {display:block;float:left;width: 100%;font-size:14px;text-align:left;line-height:120%;margin-top:20px;}

@media (max-width: 1279px) {
.blogpost {width:100%;margin:0;display:block;float:left;overflow:hidden;}
.hero {width: 100%;height:auto;margin-top:20px;overflow:hidden;}
/* aspect-ratio holds the height open while the file loads, so the card below
   doesn't jump. Both the full and the mobile image are 2:1. */
.hero-img {float:left;width: 100%;height:auto;aspect-ratio: 2 / 1;object-fit: cover; object-position: 0% center; transform: scale(1.6); transform-origin: left center;}
.hero-content {float:left;width: 90%;height:auto;padding: 20px 5% 20px 5%;background-color:#284257;color:#fff;position:relative;top:0;left:0;}
.hero_title {font-size:32px;line-height:120%;}
.hero_title span {font-size:16px;}

.article {width:90%;margin:30px 0;padding:0 5%;}
.leftcontent {display:block;float:left;width:100%;margin-bottom:30px;}
.toc-toggle {display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;padding:12px 0;border-bottom:1px solid #EDEDED;margin-bottom:0;}
.toc-arrow {display:inline-block;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid #284257;transition:transform 0.2s ease;}
.toc-wrap.is-open .toc-arrow {transform:rotate(180deg);}
.post-toc {display:none;flex-wrap:wrap;gap:8px 20px;padding-top:12px;}
.toc-wrap.is-open .post-toc {display:flex;}
.content {display:block;float:left;width:100%;margin:0 0 40px 0;text-align:left;}
.content h2 {font-size:24px;}
.content h3 {font-size:20px;}
.content h4 {font-size:18px;}
.content table td {font-size:14px;padding:12px 8px;}
.rightcontent {display:block;float:left;width:100%;}
.author {display:block;float:left;width:100%;}
.author_img {display:block;float:left;width:60px;height:60px;margin:0 15px 15px 0;}
.author_name {display:block;float:left;width:calc(100% - 75px);font-size:20px;margin-bottom:5px;}
.author_role {display:block;float:left;width:calc(100% - 75px);font-size:13px;}
.author_desc {display:block;float:left;width:100%;font-size:14px;text-align:left;margin-top:0;}

}