:root {
  --ink: #173238;
  --deep: #0d3439;
  --teal: #187875;
  --teal-dark: #105d5b;
  --article-link: #006f96;
  --mint: #e3f0eb;
  --paper: #f7f6f1;
  --white: #fff;
  --line: #cbd7d2;
  --muted: #52696d;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.6 Arial,
    Helvetica,
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
.utility-bar {
  min-height: 36px;
  padding: 7px 5vw;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  background: var(--deep);
  color: #dbe8e4;
  font-size: 14px;
}
.utility-bar div {
  display: flex;
  gap: 22px;
}
.utility-bar a:hover,
.utility-bar a:focus {
  color: #fff;
}
.site-header {
  min-height: 78px;
  padding: 16px 5vw;
  display: flex;
  align-items: center;
  gap: 40px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 21px;
  letter-spacing: -0.035em;
}
.wordmark strong {
  font-weight: 400;
}
.wordmark-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: #fff;
  font:
    bold 18px Georgia,
    serif;
  border-radius: 3px;
}
.site-header nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
}
.site-header nav a {
  padding: 7px 0;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover,
.site-header nav a:focus {
  color: var(--teal);
  border-color: var(--teal);
}
.hero {
  padding: 68px 7vw;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.65fr);
  gap: 8vw;
  background: linear-gradient(100deg, var(--paper) 0 68%, #e6efeb 68%);
}
.hero-copy {
  max-width: 780px;
}
.eyebrow {
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--teal);
}
.hero h1,
.page-intro h1 {
  font:
    700 clamp(40px, 4.2vw, 54px)/1.1 Georgia,
    serif;
  letter-spacing: -0.02em;
  margin: 16px 0 20px;
}
.hero-copy > p,
.page-intro > p {
  font:
    19px/1.6 Georgia,
    serif;
  color: var(--muted);
  max-width: 760px;
}
.button {
  display: inline-block;
  margin-top: 12px;
  padding: 13px 18px;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 2px;
}
.button:hover,
.button:focus {
  background: var(--teal-dark);
}
.hero-note {
  align-self: end;
  background: var(--white);
  border-top: 4px solid var(--teal);
  padding: 27px;
}
.hero-note > span {
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--teal);
}
.hero-note h2 {
  font:
    28px/1.2 Georgia,
    serif;
  margin: 18px 0 12px;
}
.hero-note p {
  color: var(--muted);
  margin: 0;
}
.home-masthead {
  background: #fbf5e8;
  border-bottom: 1px solid var(--line);
}
.home-masthead img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}
.welcome-section {
  padding: 58px 7vw 64px;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 8vw;
  background: var(--white);
}
.welcome-title h1 {
  font:
    700 clamp(38px, 4vw, 52px)/1.1 Georgia,
    serif;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.welcome-copy {
  max-width: 760px;
}
.welcome-copy > p {
  font:
    18px/1.72 Georgia,
    serif;
  color: #29474b;
}
.welcome-signoff {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.welcome-signoff strong {
  font:
    italic 18px Georgia,
    serif;
  color: var(--muted);
}
.welcome-signoff span {
  font:
    24px/1.25 Georgia,
    serif;
  margin-top: 13px;
  color: var(--teal);
}
.welcome-signoff small {
  font-size: 14px;
  color: var(--muted);
  margin-top: 3px;
}
.whats-new {
  padding: 58px 7vw 64px;
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
  gap: 7vw;
  background: var(--mint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.whats-new > header h2 {
  font:
    36px/1.15 Georgia,
    serif;
  margin: 9px 0 13px;
}
.whats-new > header p {
  color: var(--muted);
  margin-bottom: 20px;
}
.whats-new > header > a {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
}
.update-list {
  border-top: 1px solid #a9c1ba;
}
.update-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #a9c1ba;
}
.update-item:hover,
.update-item:focus {
  background: rgba(255, 255, 255, 0.5);
}
.update-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.update-meta b {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--teal);
}
.update-meta span,
.update-meta time {
  font-size: 13px;
  color: var(--muted);
}
.update-meta span {
  margin-top: 4px;
}
.update-meta time {
  margin-top: auto;
  padding-top: 12px;
}
.update-item h3 {
  font:
    15px/1.25 Arial,
    Helvetica,
    sans-serif;
  margin: 0;
}
.update-item p {
  color: #38575a;
  margin: 0 0 11px;
}
.update-item strong {
  font-size: 13px;
  color: var(--teal);
}
.home-links {
  padding: 64px 7vw;
  background: var(--paper);
}
.section-heading {
  margin-bottom: 30px;
}
.section-heading h2 {
  font:
    38px/1.15 Georgia,
    serif;
  margin: 8px 0 0;
}
.section-heading.centred {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
}
.section-heading.centred p {
  font:
    17px Georgia,
    serif;
  color: var(--muted);
  margin: 12px 0 0;
}
.home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.home-card-grid a {
  min-height: 270px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-card-grid a:hover,
.home-card-grid a:focus {
  background: var(--mint);
}
.home-card-grid span {
  font:
    italic 17px Georgia,
    serif;
  color: var(--teal);
}
.home-card-grid h3 {
  font:
    26px/1.2 Georgia,
    serif;
  margin: 28px 0 12px;
}
.home-card-grid p {
  color: var(--muted);
  margin: 0;
}
.home-card-grid b {
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  color: var(--teal);
}
.learning-entry {
  text-align: center;
  margin-top: 28px;
}
.principle-strip {
  padding: 50px 7vw;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8vw;
  background: var(--mint);
}
.principle-strip h2 {
  font:
    32px/1.2 Georgia,
    serif;
  margin: 0;
}
.principle-strip p {
  font:
    18px/1.65 Georgia,
    serif;
  color: #38575a;
  margin: 0;
}
.page-intro {
  padding: 58px 7vw 48px;
  border-bottom: 1px solid var(--line);
}
.page-intro h1 {
  max-width: 860px;
}
.learning-panels {
  padding: 56px 5vw 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  background: var(--white);
}
.learning-panel {
  scroll-margin-top: 25px;
  display: flex;
  flex-direction: column;
  min-height: 650px;
  padding: 28px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--teal);
  background: var(--paper);
}
.panel-number {
  font:
    italic 18px Georgia,
    serif;
  color: var(--teal);
}
.learning-panel h2 {
  font:
    29px/1.18 Georgia,
    serif;
  margin: 22px 0 14px;
}
.learning-panel > p {
  color: var(--muted);
}
.learning-panel ul {
  list-style: none;
  margin: 18px 0 26px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.learning-panel li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}
.learning-panel li.available-topic {
  display: block;
  padding: 0;
}
.available-topic a {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 5px;
  padding: 13px 10px;
  border-left: 3px solid var(--teal);
  background: var(--mint);
  font-weight: 700;
}
.available-topic a:hover,
.available-topic a:focus {
  background: #d3e8df;
}
.coming-soon {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
}
.learning-panel li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 9px;
}
.topic-id {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--teal);
  white-space: nowrap;
}
.available-topic .topic-title {
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
}
.available-topic .read-topic {
  grid-column: 2;
  font-size: 12px;
  color: var(--teal);
  white-space: nowrap;
}
.utility-search {
  font-weight: 700;
  color: #a8dfd2;
}
.learning-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 6vw;
  align-items: start;
}
.learning-page-intro > div {
  max-width: 760px;
}
.learning-search {
  scroll-margin-top: 20px;
  padding: 22px 24px;
  background: var(--mint);
  border: 1px solid var(--line);
}
.learning-search-heading .eyebrow {
  font-size: 11px;
}
.learning-search-heading h2 {
  font:
    25px/1.18 Georgia,
    serif;
  margin: 6px 0 9px;
}
.learning-search-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.learning-search-form {
  margin-top: 17px;
}
.learning-search-form > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}
.learning-search-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.learning-search-form input {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #91aaa4;
  border-right: 0;
  background: var(--white);
  color: var(--ink);
  font:
    14px Arial,
    Helvetica,
    sans-serif;
}
.learning-search-form input:focus {
  position: relative;
  outline: 3px solid rgba(24, 120, 117, 0.2);
  border-color: var(--teal);
}
.learning-search-form button {
  padding: 10px 15px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font:
    700 14px Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
}
.learning-search-form button:hover,
.learning-search-form button:focus {
  background: var(--teal-dark);
}
.search-feedback {
  min-height: 25px;
  margin-top: 9px;
}
.search-feedback p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.search-results {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 15px;
  border-top: 1px solid #aac1ba;
  border-left: 1px solid #aac1ba;
}
.search-result {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 11px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.62);
  border-right: 1px solid #aac1ba;
  border-bottom: 1px solid #aac1ba;
}
.search-result:hover,
.search-result:focus {
  background: var(--white);
}
.search-result > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.search-result > span b {
  color: var(--teal);
  font-size: 13px;
}
.search-result small {
  font-size: 9px;
  line-height: 1.35;
  color: var(--muted);
  text-transform: uppercase;
}
.search-result h3 {
  font:
    17px/1.25 Georgia,
    serif;
  margin: 0 0 5px;
}
.search-result p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 7px;
}
.search-result div > strong {
  font-size: 12px;
  color: var(--teal);
}
@media (max-width: 900px) {
  .learning-page-intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .learning-search {
    max-width: 620px;
  }
  .search-results {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .utility-bar div {
    gap: 15px;
  }
  .learning-search {
    width: 100%;
    padding: 20px;
  }
  .learning-search-form > div {
    grid-template-columns: 1fr;
  }
  .learning-search-form input {
    border-right: 1px solid #91aaa4;
  }
  .learning-search-form button {
    width: 100%;
  }
  .search-result {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    padding: 13px 11px;
  }
}
.topic-groups {
  margin: 20px 0 26px;
}
.topic-group + .topic-group {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 2px solid var(--line);
}
.learning-panel .topic-group h3 {
  margin: 0 0 8px;
  font:
    700 17px/1.3 Arial,
    Helvetica,
    sans-serif;
  color: var(--ink);
}
.learning-panel .topic-group ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.practice-hub {
  scroll-margin-top: 25px;
  padding: 64px 7vw 76px;
  background: var(--deep);
  color: #fff;
}
.practice-hub > header {
  display: grid;
  grid-template-columns: 80px minmax(0, 760px);
  gap: 22px;
  align-items: start;
  margin-bottom: 38px;
}
.practice-hub .panel-number,
.practice-hub .eyebrow {
  color: #a8dfd2;
}
.practice-hub h2 {
  font:
    clamp(34px, 4vw, 48px)/1.08 Georgia,
    serif;
  margin: 8px 0 15px;
}
.practice-hub header p {
  max-width: 720px;
  margin: 0;
  color: #c4d6d2;
  font:
    18px/1.65 Georgia,
    serif;
}
.practice-routes {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: 22px;
}
.practice-routes > article {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.range-label {
  font:
    italic 16px Georgia,
    serif;
  color: #a8dfd2;
}
.practice-routes h3 {
  font:
    29px/1.2 Georgia,
    serif;
  margin: 17px 0 12px;
}
.practice-routes p {
  margin: 0 0 24px;
  color: #c4d6d2;
  line-height: 1.65;
}
.practice-range {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.practice-range span {
  color: #a8dfd2;
}
.published-practice > a,
.case-study-list > a {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 7px 12px;
  padding: 19px;
  background: #e3f0eb;
  color: var(--ink);
  border-left: 5px solid #69c0af;
}
.published-practice > a b,
.case-study-list > a b {
  color: var(--teal);
}
.published-practice > a strong,
.case-study-list > a strong {
  grid-column: 2;
  color: var(--teal);
  font-size: 13px;
}
.published-practice > a:hover,
.published-practice > a:focus,
.case-study-list > a:hover,
.case-study-list > a:focus {
  background: #fff;
}
.case-study-list {
  display: grid;
  gap: 10px;
}
.case-study-list > a {
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
}
.case-study-list > a strong {
  grid-column: 3;
}
.practice-status {
  margin-top: auto;
  padding-top: 24px;
  color: #a8dfd2;
  font-size: 14px;
  font-weight: 700;
}
.worked-example-link {
  margin-top: 25px;
  padding: 24px 26px;
  background: #edf5f2;
  border-left: 5px solid var(--teal);
}
.worked-example-link .eyebrow {
  font-size: 11px;
}
.worked-example-link h3 {
  margin: 7px 0 8px;
  font-size: 23px;
}
.worked-example-link p {
  margin: 0 0 13px;
  font-size: 15px;
}
.worked-example-link a {
  color: var(--teal);
  font-weight: 700;
}
.article-hero {
  padding: 56px 7vw 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 7vw;
  align-items: end;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.article-hero > div {
  max-width: 880px;
}
.breadcrumb {
  display: block;
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
}
.breadcrumb::before {
  content: "←";
  margin-right: 7px;
}
.article-hero h1 {
  font:
    700 clamp(40px, 4.2vw, 54px)/1.08 Georgia,
    serif;
  letter-spacing: -0.025em;
  margin: 15px 0 20px;
}
.article-hero p {
  max-width: 790px;
  font:
    19px/1.6 Georgia,
    serif;
  color: var(--muted);
  margin: 0;
}
.article-hero aside {
  padding: 22px;
  border-top: 4px solid var(--teal);
  background: var(--white);
}
.article-hero aside strong,
.article-hero aside span {
  display: block;
}
.article-hero aside strong {
  font:
    22px/1.2 Georgia,
    serif;
}
.article-hero aside span {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.article-shell {
  padding: 58px 7vw 78px;
  display: grid;
  grid-template-columns: 220px minmax(0, 820px);
  gap: 7vw;
  justify-content: center;
  background: var(--white);
}
.article-contents {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--teal);
}
.article-contents strong {
  padding: 17px 0 10px;
  font:
    20px Georgia,
    serif;
}
.article-contents a {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.article-contents a:hover,
.article-contents a:focus {
  color: var(--teal);
}
.learning-article > section {
  scroll-margin-top: 25px;
  padding: 0 0 54px;
  margin: 0 0 52px;
  border-bottom: 1px solid var(--line);
}
.learning-article .article-opening {
  padding: 25px 28px;
  margin-bottom: 52px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  background: var(--paper);
}
.learning-article .article-opening h2 {
  font-size: 26px;
  margin-bottom: 10px;
}
.learning-article .article-opening p {
  margin: 0;
}
.section-number {
  display: block;
  margin-bottom: 9px;
  font:
    italic 16px Georgia,
    serif;
  color: var(--teal);
}
.learning-article h2 {
  font:
    34px/1.2 Georgia,
    serif;
  margin: 0 0 18px;
}
.learning-article h3 {
  font:
    24px/1.25 Georgia,
    serif;
}
.learning-article p,
.learning-article li {
  font-size: 17px;
  line-height: 1.72;
  color: #29474b;
}
.lifecycle-ribbon {
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.lifecycle-ribbon div {
  min-height: 105px;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.lifecycle-ribbon span,
.lifecycle-ribbon b {
  display: block;
}
.lifecycle-ribbon span {
  font:
    italic 15px Georgia,
    serif;
  color: var(--teal);
}
.lifecycle-ribbon b {
  margin-top: 17px;
  font-size: 13px;
  line-height: 1.25;
}
.principle-callout {
  margin-top: 28px;
  padding: 24px 26px;
  background: var(--mint);
  border-left: 5px solid var(--teal);
}
.principle-callout > strong {
  font:
    22px Georgia,
    serif;
}
.principle-callout p {
  margin: 7px 0 0;
}
.stage-list {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.stage-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 27px 0;
  border-bottom: 1px solid var(--line);
}
.stage-card > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: #fff;
  font:
    22px Georgia,
    serif;
}
.stage-card h3 {
  margin: 0 0 5px;
}
.stage-card div > b {
  display: block;
  margin-bottom: 9px;
  color: var(--teal-dark);
}
.stage-card p {
  margin-bottom: 12px;
}
.stage-card small {
  display: block;
  padding: 12px 15px;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.thread-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.thread-grid article {
  padding: 21px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.thread-grid h3 {
  font-size: 21px;
  margin: 0 0 7px;
}
.thread-grid p {
  font-size: 15px;
  margin: 0;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}
.check-list li {
  position: relative;
  padding: 11px 12px 11px 40px;
  border-bottom: 1px solid var(--line);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 10px;
  color: var(--teal);
  font-weight: 700;
}
.myth-list {
  margin-top: 25px;
}
.myth-list article {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.myth-list h3 {
  font-size: 21px;
  margin-bottom: 6px;
}
.myth-list p {
  margin: 0;
}
.learning-article .takeaway-panel {
  padding: 30px;
  background: var(--deep);
  border: 0;
  color: #fff;
}
.takeaway-panel .section-number {
  color: #a8dfd2;
}
.takeaway-panel h2 {
  color: #fff;
}
.takeaway-panel ol {
  padding-left: 24px;
  margin-bottom: 0;
}
.takeaway-panel li {
  padding: 5px 0;
  color: #e4efec;
}
.references ul {
  padding-left: 22px;
}
.references li {
  margin: 9px 0;
}
.references a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-end-nav {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding-top: 5px;
  font-size: 14px;
  font-weight: 700;
}
.article-end-nav a {
  color: var(--teal);
}
.article-end-nav span {
  color: var(--muted);
  text-align: right;
}
.clause-list {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.clause-card {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 26px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.clause-card > span {
  display: block;
  white-space: nowrap;
  line-height: 1.35;
  font:
    700 14px Arial,
    Helvetica,
    sans-serif;
  color: var(--teal);
}
.clause-card h3 {
  margin: 0 0 7px;
}
.clause-card p {
  margin: 0 0 11px;
}
.clause-card small {
  display: block;
  padding: 11px 14px;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.evidence-chain {
  margin: 28px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.evidence-chain div {
  min-height: 135px;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.evidence-chain b,
.evidence-chain span {
  display: block;
}
.evidence-chain b {
  font:
    20px/1.25 Georgia,
    serif;
}
.evidence-chain span {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.about-profile {
  padding: 60px 7vw;
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 8vw;
  background: var(--mint);
}
.profile-heading {
  align-self: start;
}
.profile-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  background: var(--teal);
  color: #fff;
  font:
    28px Georgia,
    serif;
  border-radius: 3px;
}
.profile-heading h2 {
  font:
    34px/1.15 Georgia,
    serif;
  margin: 9px 0 6px;
}
.profile-heading p {
  color: var(--muted);
  margin: 0;
}
.profile-copy p {
  font:
    17px/1.75 Georgia,
    serif;
  color: #29474b;
}
.profile-copy blockquote {
  margin: 28px 0 0;
  padding: 22px 25px;
  border-left: 4px solid var(--teal);
  background: var(--white);
  font:
    italic 18px/1.65 Georgia,
    serif;
  color: #29474b;
}
.two-column-content {
  padding: 58px 7vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7vw;
  background: var(--white);
}
.two-column-content h2,
.contact-layout h2,
.simple-cta h2 {
  font:
    30px/1.2 Georgia,
    serif;
}
.two-column-content p {
  font:
    17px/1.75 Georgia,
    serif;
  color: var(--muted);
}
.two-column-content a {
  color: var(--teal);
  font-weight: 700;
}
.simple-cta {
  padding: 42px 7vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  background: var(--mint);
}
.simple-cta h2 {
  margin-bottom: 8px;
}
.simple-cta p {
  margin: 0;
  color: var(--muted);
}
.simple-cta .button {
  margin: 0;
  white-space: nowrap;
}
.contact-layout {
  padding: 58px 7vw 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 7vw;
  background: var(--white);
}
.form-panel > h2 {
  margin: 10px 0 24px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
}
.contact-form label small {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #9cafaa;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.45 Arial,
    Helvetica,
    sans-serif;
}
.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid rgba(24, 120, 117, 0.18);
  border-color: var(--teal);
}
.contact-form button {
  align-self: flex-start;
  padding: 13px 20px;
  border: 0;
  border-radius: 2px;
  background: var(--teal);
  color: #fff;
  font:
    700 15px Arial,
    Helvetica,
    sans-serif;
  cursor: pointer;
}
.contact-form button:hover,
.contact-form button:focus {
  background: var(--teal-dark);
}
.form-note {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-details section {
  padding: 26px;
  background: var(--mint);
}
.contact-details h2 {
  margin: 10px 0 12px;
}
.contact-details p {
  color: var(--muted);
}
.email-link {
  display: inline-block;
  color: var(--teal);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.contact-details section:last-child > a {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-top: 1px solid #b5cbc4;
}
.contact-details section:last-child strong {
  font:
    20px Georgia,
    serif;
  color: var(--teal);
}
.contact-details section:last-child span {
  margin-top: 5px;
  color: var(--muted);
}
.site-footer {
  padding: 46px 5vw 28px;
  background: var(--deep);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px 60px;
}
.wordmark.inverse .wordmark-icon {
  background: #a8dfd2;
  color: var(--deep);
}
.site-footer p {
  font:
    16px Georgia,
    serif;
  color: #b9ceca;
  margin: 13px 0 0;
}
.site-footer nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 9px 28px;
  font-size: 14px;
}
.site-footer nav a:hover,
.site-footer nav a:focus {
  color: #a8dfd2;
}
.site-footer small {
  grid-column: 1/-1;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  color: #9db6b2;
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    background: var(--paper);
  }
  .hero-note {
    max-width: 620px;
  }
  .welcome-section,
  .about-profile,
  .whats-new {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .home-card-grid {
    grid-template-columns: 1fr;
  }
  .home-card-grid a {
    min-height: 0;
  }
  .learning-panels {
    grid-template-columns: 1fr;
  }
  .learning-panel {
    min-height: 0;
  }
  .principle-strip,
  .two-column-content,
  .contact-layout,
  .article-hero {
    grid-template-columns: 1fr;
  }
  .article-hero aside {
    max-width: 500px;
  }
  .article-shell {
    grid-template-columns: 1fr;
  }
  .article-contents {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .article-contents strong {
    grid-column: 1/-1;
  }
  .article-contents a {
    margin-right: 18px;
  }
  .lifecycle-ribbon {
    grid-template-columns: repeat(3, 1fr);
  }
  .evidence-chain {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-header {
    align-items: flex-start;
  }
  .site-header nav {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .utility-bar > span {
    display: none;
  }
  .utility-bar {
    justify-content: flex-end;
  }
  .site-header {
    padding: 13px 5vw;
    flex-direction: column;
    gap: 10px;
  }
  .site-header nav {
    width: 100%;
    margin: 0;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
  }
  .hero,
  .welcome-section,
  .whats-new,
  .home-links,
  .principle-strip,
  .page-intro,
  .learning-panels,
  .about-profile,
  .two-column-content,
  .simple-cta,
  .contact-layout,
  .article-hero,
  .article-shell {
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .home-masthead img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .welcome-section {
    padding-top: 42px;
    padding-bottom: 48px;
  }
  .welcome-title h1,
  .hero h1,
  .page-intro h1,
  .article-hero h1 {
    font-size: 38px;
  }
  .hero-copy > p,
  .page-intro > p,
  .article-hero p {
    font-size: 18px;
  }
  .section-heading h2 {
    font-size: 32px;
  }
  .update-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
  }
  .update-meta time {
    padding-top: 4px;
  }
  .learning-panel h2 {
    font-size: 27px;
  }
  .principle-strip {
    gap: 20px;
  }
  .principle-strip h2 {
    font-size: 29px;
  }
  .form-row,
  .thread-grid,
  .evidence-chain {
    grid-template-columns: 1fr;
  }
  .article-contents {
    grid-template-columns: 1fr;
  }
  .article-contents strong {
    grid-column: auto;
  }
  .lifecycle-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
  .learning-article h2 {
    font-size: 30px;
  }
  .stage-card {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }
  .clause-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .article-end-nav {
    flex-direction: column;
  }
  .article-end-nav span {
    text-align: left;
  }
  .simple-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .site-footer {
    grid-template-columns: 1fr;
  }
  .site-footer nav {
    grid-template-columns: 1fr 1fr;
  }
}

.standard-article-nav {
  display: grid;
  grid-template-columns: minmax(145px, 0.7fr) repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.standard-article-nav > a {
  display: flex;
  min-width: 0;
  min-height: 96px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 17px 20px;
  border-right: 1px solid var(--line);
}
.standard-article-nav > a:last-of-type {
  border-right: 0;
}
.standard-article-nav strong {
  font:
    700 15px/1.4 Arial,
    sans-serif;
  color: var(--teal);
  overflow-wrap: anywhere;
}
.standard-article-nav .up-to-section strong {
  text-align: center;
}
.standard-article-nav .next-topic strong {
  text-align: right;
}
.standard-article-nav a:hover strong,
.standard-article-nav a:focus strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .practice-routes {
    grid-template-columns: 1fr;
  }
  .practice-routes > article {
    min-height: 0;
  }
  .practice-hub > header {
    grid-template-columns: 58px minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .practice-hub {
    padding: 48px 5vw 58px;
  }
  .practice-hub > header {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .practice-routes > article {
    padding: 23px;
  }
  .practice-range {
    flex-direction: column;
    gap: 5px;
  }
  .published-practice > a,
  .case-study-list > a {
    grid-template-columns: 66px minmax(0, 1fr);
  }
  .case-study-list > a strong {
    grid-column: 2;
  }
}

@media (max-width: 600px) {
  .standard-article-nav {
    grid-template-columns: 1fr;
    margin-top: 8px;
  }
  .standard-article-nav > a {
    min-height: 0;
    padding: 15px 17px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .standard-article-nav > a:last-of-type {
    border-bottom: 0;
  }
  .standard-article-nav .up-to-section strong,
  .standard-article-nav .next-topic strong {
    text-align: left;
  }
}

.learning-page-intro > div > p {
  font:
    19px/1.6 Georgia,
    serif;
  color: var(--muted);
  max-width: 760px;
}
@media (max-width: 600px) {
  .learning-page-intro > div > p {
    font-size: 18px;
  }
}

/* Ensure the shared article copy rule cannot reduce contrast inside dark takeaway panels. */
.learning-article .takeaway-panel p,
.learning-article .takeaway-panel li {
  color: #fff;
}
.home-masthead{position:relative}
.masthead-learning-button{position:absolute;left:7vw;bottom:32px;padding:14px 20px;background:var(--teal);color:#fff;font-size:15px;font-weight:700;border-radius:2px;box-shadow:0 4px 16px rgba(13,52,57,.18)}
.masthead-learning-button:hover,.masthead-learning-button:focus{background:var(--teal-dark)}
.home-intro-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(290px,1fr);background:var(--white)}
.home-intro-grid .welcome-section{padding:52px 4vw 56px 7vw;grid-template-columns:1fr;gap:26px;border-right:1px solid var(--line)}
.home-intro-grid .welcome-copy{max-width:680px}
.home-intro-grid .welcome-copy>p{margin-bottom:1.25em}
.home-intro-grid .whats-new{align-self:start;padding:12px 2.5vw 14px 2vw;display:block;border-top:0;border-bottom:0}
.home-intro-grid .whats-new>header{display:block;margin-bottom:6px}
.home-intro-grid .whats-new>header .eyebrow{display:none}
.home-intro-grid .whats-new>header .eyebrow,.home-intro-grid .whats-new>header h2{grid-column:1}
.home-intro-grid .whats-new>header h2{margin-bottom:0}
.home-intro-grid .whats-new>header p{display:none}
.home-intro-grid .whats-new>header>a{display:inline-block;margin-top:2px}
.home-intro-grid .update-list{grid-template-columns:1fr}
.update-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #a9c1ba;border-left:1px solid #a9c1ba}
.update-item{min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-right:1px solid #a9c1ba;border-bottom:1px solid #a9c1ba;background:rgba(255,255,255,.22)}
.update-item:hover,.update-item:focus{background:rgba(255,255,255,.68)}
.update-item>b{font-size:15px;letter-spacing:.015em;color:var(--teal)}
.update-item h3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font:15px/1.25 Arial,Helvetica,sans-serif;margin:0}
.update-item>strong{display:none}
.eyebrow,.utility-bar,.whats-new>header>a,.topic-id,.available-topic .read-topic,.article-contents a,.contact-form label small,.site-footer small{font-size:14px}
.related-topics>div{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.related-topics a{min-width:0;display:flex;flex-direction:column;padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.related-topics a:hover,.related-topics a:focus{background:var(--mint)}
.related-topics a b{font-size:14px;color:var(--teal)}
.related-topics a span{margin:9px 0 18px;font:19px/1.25 Georgia,serif;color:var(--article-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.related-topics a strong{margin-top:auto;font-size:14px;color:var(--article-link)}
.learning-article a[href^="/learning/"],.learning-article a:not([href^="http"])[href$=".html"]{color:var(--article-link);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.learning-article a[href^="/learning/"]:hover,.learning-article a[href^="/learning/"]:focus,.learning-article a:not([href^="http"])[href$=".html"]:hover,.learning-article a:not([href^="http"])[href$=".html"]:focus{color:#004e6a}
.learning-article>section>p{margin-bottom:1.2em}
.learning-article .thread-grid,.learning-article .evidence-chain,.learning-article .clause-list,.learning-article .stage-list{margin-bottom:24px}
.learning-article .principle-callout{margin-bottom:24px}
body .learning-article>section{padding-bottom:30px;margin-bottom:30px}
@media(max-width:1000px){.home-intro-grid{grid-template-columns:1fr}.home-intro-grid .welcome-section{padding:48px 7vw;border-right:0}.home-intro-grid .whats-new{padding:42px 7vw 48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}}
@media(max-width:900px){.related-topics>div{grid-template-columns:1fr}}
@media(max-width:600px){.masthead-learning-button{left:5vw;right:5vw;bottom:18px;text-align:center}.update-list{grid-template-columns:1fr}.update-item{grid-template-columns:58px minmax(0,1fr)}}