/* ===== CMD message — selectors prefixed .cmd so they don't clash with the old #cmd_img / #welcome_msg rules ===== */
.cmd {
  --cmd-gold: #ecb454;       /* accent, same gold as the Daily Health Nugget */
  --cmd-green: #1E5C4C;      /* primary green, same as News & Updates */
  --cmd-green-deep: #164438;
  --cmd-pill: #DCEEE1;
  --cmd-ink: #1B2B25;
  --cmd-muted: #5C6E66;
  --cmd-line: #D8E7DE;
  --cmd-ease: cubic-bezier(.22, .61, .36, 1);

  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  background: #fff;
  color: var(--cmd-ink);
}
.cmd *, .cmd *::before, .cmd *::after { box-sizing: border-box; }

.cmd-wrap {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .cmd-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- Portrait ---------- */
.cmd-portrait { margin: 0; justify-self: center; width: 100%; max-width: 400px; position: relative; isolation: isolate; }
.cmd-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: var(--cmd-pill);
  box-shadow: 0 18px 50px rgba(22, 68, 56, .22);
  isolation: isolate;
}
.cmd-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 1.2s var(--cmd-ease);
}
.cmd-portrait:hover .cmd-photo img { transform: scale(1.035); }

/* offset frame that slides out from behind the photo */
.cmd-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--cmd-gold);
  border-radius: 22px;
  transform: translate(14px, 14px);
  z-index: -1;
}

.cmd-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.25rem 1.1rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(22, 68, 56, 0) 0%, rgba(22, 68, 56, .88) 70%);
  z-index: 1;
}
.cmd-plate strong { display: block; font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.25; }
.cmd-plate span { display: block; margin-top: .25rem; font-size: .9rem; font-weight: 600; color: var(--cmd-gold); }

/* ---------- Message ---------- */
.cmd-copy { min-width: 0; }
.cmd-title {
  margin: 0 0 1.25rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--cmd-green-deep);
  text-align: left;
}
.cmd-title::after {
  content: "";
  display: block;
  width: 3.5rem; height: 3px;
  margin-top: .9rem;
  border-radius: 2px;
  background: var(--cmd-gold);
}
.cmd-copy p { margin: 0 0 1rem; max-width: 66ch; font-size: clamp(1rem, 1.8vw, 1.08rem); line-height: 1.8; text-align: left; color: #3a4d45; }
.cmd-copy .cmd-lede { font-size: clamp(1.08rem, 2vw, 1.22rem); color: var(--cmd-ink); }

.cmd-more { display: grid; grid-template-rows: 1fr; }
.cmd-more > div { min-height: 0; overflow: hidden; }

.cmd-toggle {
  display: none;
  align-items: center; gap: .5rem;
  margin: .25rem 0 .5rem;
  padding: .7rem 1.1rem;
  font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--cmd-green);
  background: #fff;
  border: 1.5px solid var(--cmd-green);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cmd-toggle:hover { background: var(--cmd-green); color: #fff; }
.cmd-toggle:focus-visible { outline: 3px solid rgba(30, 92, 76, .45); outline-offset: 3px; }
.cmd-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.cmd-copy.is-open .cmd-toggle svg { transform: rotate(180deg); }

/* phones: show the opening paragraph, fold the rest behind a button (only when JS is running) */
@media (max-width: 640px) {
  .cmd-js .cmd-toggle { display: inline-flex; }
  .cmd-js .cmd-more { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--cmd-ease); }
  .cmd-js .cmd-copy.is-open .cmd-more { grid-template-rows: 1fr; }
}

.cmd-sign { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cmd-line); display: flex; flex-direction: column; gap: .15rem; }
.cmd-sign-name { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 700; font-style: italic; color: var(--cmd-green-deep); }
.cmd-sign-role { font-size: .9rem; color: var(--cmd-muted); }

/* ---------- One entrance sequence, runs once (only when JS is running) ---------- */
.cmd-js .cmd-photo { opacity: 0; transform: translateY(24px); }
.cmd-js .cmd-portrait::before { transform: translate(0, 0); opacity: 0; }
.cmd-js .cmd-copy > * { opacity: 0; transform: translateY(16px); }

.cmd-js.is-in .cmd-photo { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s var(--cmd-ease); }
.cmd-js.is-in .cmd-portrait::before { opacity: 1; transform: translate(14px, 14px); transition: opacity .6s ease .5s, transform .9s var(--cmd-ease) .5s; }
.cmd-js.is-in .cmd-copy > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s var(--cmd-ease); }
.cmd-js.is-in .cmd-copy > :nth-child(1) { transition-delay: .2s; }
.cmd-js.is-in .cmd-copy > :nth-child(2) { transition-delay: .35s; }
.cmd-js.is-in .cmd-copy > :nth-child(3) { transition-delay: .5s; }
.cmd-js.is-in .cmd-copy > :nth-child(4) { transition-delay: .6s; }
.cmd-js.is-in .cmd-copy > :nth-child(5) { transition-delay: .7s; }

/* keep the frame inside the screen on very narrow devices */
@media (max-width: 480px) {
  .cmd-portrait { max-width: 86%; }
  .cmd-portrait::before { transform: translate(10px, 10px); }
  .cmd-js.is-in .cmd-portrait::before { transform: translate(10px, 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .cmd *, .cmd *::before, .cmd *::after { transition: none !important; animation: none !important; }
  .cmd-js .cmd-photo, .cmd-js .cmd-copy > *, .cmd-js .cmd-portrait::before { opacity: 1; transform: none; }
  .cmd-js .cmd-portrait::before { transform: translate(14px, 14px); }
}