:root {
  --teal: #087888;
  --ink: #34586a;
  --muted: #71838c;
  --orange: #EB9200;
  --line: #c7dfe4;
  --bg: #f6f8f8;
}
* {
  box-sizing: border-box;
}
html.access-locked,
html.access-locked body {
  overflow: hidden;
}
.access-gate {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #07516a, #4ca1a6);
}
html.access-locked .access-gate {
  display: flex;
}
html.access-locked #site-content {
  display: none;
}
.access-gate__panel {
  width: min(100%, 430px);
  padding: 38px;
  border-radius: 10px;
  background: #fff;
  color: #34586a;
  box-shadow: 0 16px 50px rgba(0, 30, 45, .2);
}
.access-gate__logo {
  width: 70px;
  margin-bottom: 20px;
}
.access-gate__eyebrow {
  margin: 0 0 7px;
  color: #eb9200;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.access-gate h1 {
  margin: 0 0 12px;
  color: #2d5e77;
  font-size: 25px;
  line-height: 1.2;
}
.access-gate p {
  margin: 0 0 20px;
}
.access-gate label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}
.access-gate input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #c7dfe4;
  border-radius: 4px;
  font: inherit;
}
.access-gate button {
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border: 0;
  border-radius: 4px;
  background: #eb9200;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.access-gate__error {
  margin: 10px 0 0 !important;
  color: #b33b2e;
  font-size: 12px;
}
.access-gate small {
  display: block;
  margin-top: 22px;
  color: #71838c;
  font-size: 11px;
  line-height: 1.4;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
.topbar {
  background: #fff;
  border-bottom: 1px solid #dbe5e7;
  height: 48px;
}
.topbar__inner {
  max-width: 1110px;
  height: 100%;
  margin: auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sobi {
  font-size: 12px;
  color: #687c83;
  text-decoration: none;
}
.digest-brand {
  font-size: 14px;
  color: #849399;
  text-decoration: none;
  border-left: 1px solid #d8e1e3;
  padding-left: 12px;
}
.digest-brand strong {
  color: #1e90a0;
}
.oc-mark {
  color: #ef8738;
  font-weight: bold;
  font-size: 20px;
  vertical-align: -2px;
}
.topbar nav {
  margin-left: auto;
  display: flex;
  gap: 25px;
  font-size: 10px;
}
.topbar nav a {
  color: #667b82;
  text-decoration: none;
}
.hero {
  background:url("../img/circle-image.png"), linear-gradient(90deg, #4CA1A6 0%, #2D5E77 100%);
  background-repeat: no-repeat;
  background-position: left center;
  backgground-size: 50%;
  color: white;
  border-bottom: 1px solid #c5dce0;
  padding: 3em;
}
.hero__inner {
  max-width: 1110px;
  margin: auto;
  padding: 32px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  min-height: 210px;
}
.hero__copy {
  max-width: 560px;
}
.hero__kicker {
  font-size: 2em;
  letter-spacing: 0.07em;
  margin: 0 0 10px;
  color: #fff;
}
.hero h1 {
  font-size: 2em;
  line-height: 1.25;
  margin: 0 0 11px;
}
.hero p:not(.hero__kicker) {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  color: #fff;
}
.player {
  width: 400px;
  height: 225px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #c6d8dd;
}

button.podcast {
  background-color: #EB9200;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  border: 0;
  font: inherit;
  cursor: pointer;
}
button.podcast:hover,
button.podcast:focus-visible {
  background-color: #d98200;
}
.podcast-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.layout {
  max-width: 1110px;
  margin: auto;
  padding: 25px 55px 65px;
  display: grid;
  grid-template-columns: minmax(0, 700px) 250px;
  gap: 50px;
  background: white;
}
.content section {
  margin: 0 0 30px;
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 7px;
  margin-bottom: 10px;
}
.section-heading h2 {
  font-size: 2.5rem;
  color: #2D5E77;
  margin: 0;
  line-height: 1.05;
}
.section-heading small {
  display: block;
  color: var(--orange);
  font-size: 0.75em;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  font-size: 14px;
  margin: 0 0 8px;
  color: #506b77;
}
.snapshot-list {
  margin: 0;
  padding-left: 21px;
  color: #60727b;
}
.snapshot-list li {
  margin: 4px 0;
}
.card {
  border: 1px solid #4CA1A6;
  border-radius: 5px;
  padding: 14px 17px;
  margin: 10px 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 65, 80, 0.04);
}
.card h3 {
  font-size: 1.5em;
  color: #2C2A29;
  margin: 0 0 8px;
}

.card h3 .number{
  padding-right: 0.75em;
  padding-top: 0.4em;
}
.card p {
  margin: 4px 0;
  color: #585854;
  font-size: 1em;
  line-height: 1.45;
}
.card .meta {
  font-size: 1em;
  font-weight: bold;
  color: #2C2A29;
  margin-top: 8px;
}
.card .orange {
  color: #F15A22;
}
.toc {
  color: #67808a;
  padding-top: 15px;
}
.toc p {
  font-size: 1em;
  margin: 0 0 8px;
  color: #2C2A29;
}
.toc a {
  font-size: 13px;
  display: block;
  color: #2D5E77;
  text-decoration: underline;
  padding: 5px 0;
}
.toc ol {
	padding-left: 1rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #697e85;
}
th,
td {
  text-align: left;
  padding: 7px 9px;
  border: 1px solid #d9e6e8;
}
th {
  color: #3c6874;
  background: #f2f8f8;
}
.note {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  margin-top: 15px;
  color: #6f828a;
  font-size: 11px;
}
.note span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3bb4bd;
  color: white;
  font-weight: bold;
  margin-right: 8px;
}
.feedback {
  background: #f2f5f8;
  border-bottom: 2px solid #2d6b83;
  padding: 24px max(30px, calc((100% - 1000px) / 2)) 22px;
}
.feedback__copy { max-width: 1000px; }
.feedback h2 {
  margin: 0 0 3px;
  color: #2d5e77;
  font-size: 30px;
  line-height: 1.15;
}
.feedback__intro {
  max-width: 950px;
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .14em;
  line-height: 1.55;
}
.feedback__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.feedback-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #cfd7dc;
  border-radius: 4px;
  background: #fff;
  color: #3f4142;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
}
.feedback-button:hover, .feedback-button:focus-visible, .feedback-button[aria-pressed="true"] { border-color: #2d6b83; background: #e7f1f3; }
.feedback-button img { width: 13px; height: 13px; object-fit: contain; }
.feedback__status { min-height: 17px; margin: 0 0 2px; color: #2d6b83; font-size: 11px; }
.feedback-dialog { width: min(92vw, 480px); padding: 0; border: 0; border-radius: 6px; box-shadow: 0 15px 45px rgba(0, 30, 45, .25); color: #34586a; }
.feedback-dialog::backdrop { background: rgba(20, 43, 53, .45); }
.feedback-dialog form { position: relative; padding: 28px; }
.feedback-dialog h2 { margin-bottom: 18px; font-size: 22px; }
.feedback-dialog label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: bold; }
.feedback-dialog textarea { width: 100%; resize: vertical; border: 1px solid #c7dfe4; border-radius: 4px; padding: 9px; font: inherit; }
.feedback-dialog__close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: #71838c; font-size: 26px; cursor: pointer; }
.feedback-dialog__submit { margin-top: 12px; padding: 9px 14px; border: 0; border-radius: 4px; background: var(--orange); color: #fff; font-weight: bold; cursor: pointer; }
footer {
  background: #07516a;
  color: #bcd3d8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px max(30px, calc((100% - 1000px) / 2));
  font-size: 10px;
}
.footer-divider {
  margin: 0 12px;
  color: #75a3ae;
}
aside {
  position: sticky;
  top: 20px;
  border: 1px solid #E5E6E6;
  height: max-content;
  padding: 1.5em
}
@media (max-width: 800px) {
  .topbar__inner {
    padding: 0 15px;
  }
  .topbar nav {
    gap: 10px;
  }
  .hero__inner {
    padding: 28px 20px;
    display: block;
  }
  .hero h1 {
    font-size: 23px;
  }
  .player {
    margin-top: 20px;
    width: 100%;
    max-width: 330px;
  }
  .layout {
    display: block;
    padding: 25px 18px;
  }
  .toc {
    display: none;
  }
  .section-heading h2 {
    font-size: 17px;
  }
  .feedback {
    padding: 22px 18px;
  }
  footer {
    padding: 16px 18px;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  .digest-brand {
    font-size: 11px;
  }
  .topbar nav {
    font-size: 9px;
  }
  .topbar__inner {
    gap: 7px;
  }
  .hero__kicker {
    font-size: 8px;
  }
  .hero h1 {
    font-size: 21px;
  }
  .card {
    padding: 12px;
  }
  .card h3 {
    font-size: 14px;
  }
}