/* Common Viewpoint: calm color, clear controls, and readable shared content. */
:root {
  --bg: #e4eeec;
  --paper: #f0f6f1;
  --ink: #253c43;
  --muted: #4b6267;
  --line: #bfd1c9;
  --accent: #256e6b;
  --soft: #dfede9;
  --warm: #f0e2bd;
}
body {
  background: linear-gradient(145deg, #d6e9e5 0%, #e6edf0 52%, #e9eee1 100%);
  color: var(--ink);
}
body > header {
  background: linear-gradient(115deg, #164f5c, #347869);
  border-bottom-color: #417c77;
}
body > header .brand {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.2;
  color: #eef6ef;
}
body > header .who { color: #eef6ef; }
body > header > nav:not(.cv-nav-controls) {
  flex-wrap: wrap;
  overflow: visible;
}
body > header > nav:not(.cv-nav-controls) > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line, #d9d5ce);
  border-radius: 10px;
  background: #deede7;
  color: var(--ink, #282b2d);
  white-space: normal;
}
body > header.cv-header {
  position: relative;
  z-index: 30;
  display: block;
  padding: 12px max(14px, calc((100% - 1100px) / 2));
  background: linear-gradient(115deg, #164f5c, #347869);
  border-bottom: 1px solid #417c77;
}
.cv-header .cv-nav-controls {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  order: initial;
  flex-basis: auto;
}
.cv-header .cv-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 9px 10px;
  border: 1.5px solid #94b7ab;
  border-radius: 12px;
  background: #deede7;
  color: #214b53;
  box-shadow: 0 2px 0 rgba(42, 70, 76, .1);
  font: 650 16px/1.18 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(66, 93, 98, .12);
}
.cv-header .cv-nav-button[aria-current="page"],
.cv-header .cv-menu-current,
.cv-header .cv-nav-menu[open] > .cv-menu-toggle {
  border-color: #e4bf75;
  background: linear-gradient(120deg, #f2d99d, #e6bd79);
  color: #294651;
  box-shadow: none;
}
.cv-header .cv-nav-menu { min-width: 0; }
.cv-header .cv-menu-toggle { height: 100%; list-style: none; }
.cv-header .cv-menu-toggle::-webkit-details-marker { display: none; }
.cv-header .cv-menu-arrow {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.cv-header .cv-nav-menu[open] .cv-menu-arrow { transform: translateY(2px) rotate(225deg); }
.cv-header .cv-menu-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border: 1px solid #87aaa2;
  border-radius: 16px;
  background: #eaf3ee;
  box-shadow: 0 14px 35px rgba(30, 47, 51, .22);
}
.cv-header .cv-nav-menu:not([open]) > .cv-menu-panel { display: none; }
.cv-header .cv-menu-group { padding: 5px 2px 8px; }
.cv-header .cv-menu-group + .cv-menu-group {
  border-top: 1px solid var(--line, #d9d5ce);
  padding-top: 12px;
}
.cv-header .cv-menu-heading {
  margin: 0 9px 6px;
  color: #3c6967;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cv-header .cv-menu-account {
  margin: 0 9px 10px;
  color: var(--ink);
  font-size: 14px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cv-header .cv-menu-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 12px;
  margin: 4px 0;
  border: 1px solid #bad0c7;
  border-radius: 10px;
  background: #dfeee7;
  color: #294b51;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cv-header .cv-menu-link[aria-current="page"] {
  border-color: #256e6b;
  background: #256e6b;
  color: #fff;
}
.cv-header a:focus-visible,
.cv-header summary:focus-visible {
  outline: 3px solid #bd8837;
  outline-offset: 3px;
}
.cv-duplicate-shortcut[hidden] { display: none !important; }
@media (hover: hover) {
  .cv-header .cv-nav-button:hover,
  .cv-header .cv-menu-link:hover { border-color: #294b51; }
  .cv-header a.cv-nav-button:not([aria-current="page"]):hover,
  .cv-header .cv-nav-menu:not([open]) > .cv-menu-toggle:not(.cv-menu-current):hover,
  .cv-header .cv-menu-link:not([aria-current="page"]):hover { background: #cee3da; color: #214b53; }
}
@media (min-width: 700px) {
  .cv-header .cv-nav-controls { grid-template-columns: .75fr 1.4fr 1fr .75fr; }
  .cv-header .cv-menu-panel { left: auto; width: min(360px, 100%); max-height: calc(100dvh - 110px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .cv-header .cv-menu-panel { max-height: calc(100dvh - 130px); }
}

/* Color stays on page surfaces and controls. Both people's writing uses
   the same quiet, high-contrast treatment. */
main > h1 { color: #1c5962; }
main h2, main h3 { color: #25464c; }
main .card {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 5px 18px rgba(24, 70, 64, .06);
}
main .card .card { background: #edf5f2; box-shadow: none; }
main .perspective { border-top-color: #4d9286; }
main .topic-rule { background: #dbece8; border-left-color: #618f80; }
body.home-page .hero-copy { background: linear-gradient(135deg, #d7ece5, #e7efe3); }
body.home-page .hero-copy .tag { background: #efdfb1; color: #554520; border-color: #ceae69; }
body.home-page main > h2::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: .95em;
  margin-right: 9px;
  border-radius: 3px;
  background: #ad873f;
  vertical-align: -.04em;
}
body.home-page main > .grid > article.card {
  border-top: 4px solid #6b9b8d;
  background: linear-gradient(145deg, #deeeea, #eef4f0);
}
body.home-page main > .grid > article.card:nth-child(3n + 2) {
  border-top-color: #7896af;
  background: linear-gradient(145deg, #e0e9f0, #edf2f5);
}
body.home-page main > .grid > article.card:nth-child(3n) {
  border-top-color: #b49c5a;
  background: linear-gradient(145deg, #efe1bf, #f1eadc);
}
main a.button, main button {
  background: linear-gradient(120deg, #216267, #367e71);
  color: #fff;
  box-shadow: 0 2px 5px rgba(24, 70, 64, .1);
}
main a.button.secondary, main button.secondary {
  background: #d7e8e1 !important;
  color: #204f55 !important;
  border: 1px solid #9bbdb0;
  box-shadow: none;
}
main input, main textarea, main select {
  border-color: #a8c2b8;
  background: #f2f8f4;
  color: var(--ink);
}
main a.button:focus-visible, main button:focus-visible,
main input:focus-visible, main textarea:focus-visible, main select:focus-visible {
  outline: 3px solid #ad873f;
  outline-offset: 3px;
}