/* Caveat (700, latin subset) is hosted in assets/fonts, so the cursive sign-off needs no third-party request.
   Declared once, here, for every page; ht-guides.css only uses it through --script. */
@font-face {
  font-family:'Caveat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/caveat-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --navy:#0C2E5C;
  --navy-light:#183D6D;
  --white:#fff;
  --paper:#f5f7f8;
  --ink:#334456;
  --slate:#5b6b7c;
  --gold:#C29B38;
  --gold-hover:#B18A2F;
  --line:#dce2e7;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --script:'Caveat','Dancing Script','Segoe Script','Snell Roundhand','Brush Script MT',cursive;
  --wrap:1160px;
  --read:760px;
  --shadow:0 4px 12px rgba(11,27,61,0.08);
  /* Layout tokens. The gutter never drops below 20px; the crest and the byline seal are locked squares. */
  --gutter:20px;
  --crest-size:49px;
  --crest-font:14px;
  --seal-size:56px;
  color-scheme:only light}
@supports (padding:clamp(1px,2vw,3px)) {
  :root {
  --gutter:clamp(20px,4.6vw,30px)}
}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%}
body {
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  overflow-x:clip}
a {
  color:var(--navy);
  text-underline-offset:4px}
a,button {
  touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #316797;
  outline-offset:5px}
img {
  display:block;
  max-width:100%;
  height:auto}
svg,video,canvas,iframe,embed,object {
  max-width:100%}
iframe {
  border:0}
button,input {
  font:inherit}
button {
  cursor:pointer}
p {
  margin:0 0 22px}
h1,h2,h3 {
  color:var(--navy);
  line-height:1.17;
  font-weight:400}
h1,h2 {
  font-family:var(--serif)}
h1 {
  font-size:clamp(2.2rem,4.2vw,3.55rem);
  letter-spacing:-.025em;
  margin:18px 0 24px}
h2 {
  font-size:clamp(1.8rem,3vw,2.55rem);
  letter-spacing:-.015em;
  margin:14px 0 22px}
h3 {
  font-size:1.16rem;
  font-weight:700;
  margin:12px 0 14px}
ul,ol {
  padding-left:24px}
li {
  margin-bottom:12px}
/* Page containers: centered, capped, and never closer than the gutter (min 20px) to the screen edge.
   The plain 20px line is the fallback for engines without max()/env(); safe-area insets cover notched phones. */
.wrap,.reading-column {
  width:100%;
  margin:0 auto;
  padding:0 20px;
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.wrap {
  max-width:var(--wrap)}
.reading-column {
  max-width:var(--read)}
.skip-link {
  position:absolute;
  top:-100px;
  left:12px;
  background:#fff;
  padding:12px;
  z-index:9}
.skip-link:focus {
  top:12px}
.topline {
  background:var(--navy);
  color:#e4eaf0;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:10px 0}
.topline .wrap {
  display:flex;
  gap:20px;
  justify-content:space-between}
.masthead {
  border-bottom:1px solid var(--line)}
.masthead-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 26px;
  padding-top:27px;
  padding-bottom:27px}
/* Brand lockup: crest + name. .chl-brand is an alias so either class name styles the same element. */
.brand,.chl-brand {
  font-family:var(--serif);
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  max-width:100%;
  text-decoration:none;
  font-size:1.5rem;
  line-height:1.2;
  color:var(--navy)}
.brand-text {
  display:block;
  min-width:0}
.brand-name {
  display:block}
.brand small {
  display:block;
  font-family:var(--sans);
  font-size:10px;
  line-height:1.35;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:normal;
  color:var(--slate);
  margin-top:9px}
/* The crest is a locked square: one size token drives width, height, flex-basis and type size, so it can
   neither squash nor stretch. The 1px gold border stays on whole pixels; the text is centered on both axes
   (the left padding offsets the trailing letter-space so CHL sits optically in the middle). */
.crest,.chl-crest {
  box-sizing:border-box;
  flex:0 0 var(--crest-size);
  flex-shrink:0;
  width:var(--crest-size);
  height:var(--crest-size);
  min-width:var(--crest-size);
  min-height:var(--crest-size);
  max-width:var(--crest-size);
  max-height:var(--crest-size);
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 0 .03em;
  border:1px solid var(--gold);
  font-family:var(--serif);
  font-size:var(--crest-font);
  font-weight:400;
  line-height:1;
  letter-spacing:.03em;
  text-align:center;
  white-space:nowrap;
  color:var(--navy);
  background:transparent;
  -webkit-user-select:none;
  user-select:none}
#site-nav {
  display:flex;
  align-items:center;
  gap:28px}
#site-nav a {
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:var(--slate);
  padding:12px 0}
#site-nav a:hover {
  color:var(--navy)}
.nav-toggle {
  display:none;
  flex:0 0 auto;
  margin-left:auto;
  min-height:44px;
  white-space:nowrap;
  background:#fff;
  color:var(--navy);
  border:1px solid var(--line);
  font-size:11px;
  letter-spacing:.05em;
  padding:10px 12px}
.nav-toggle span {
  margin-left:8px}
.eyebrow,.section-number {
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:700;
  line-height:1.5}
.eyebrow {
  margin-bottom:14px}
.section-number {
  display:block;
  margin-bottom:18px;
  color:#82651F}
.deck {
  font-size:1.15rem;
  line-height:1.65;
  max-width:61ch}
.fine {
  font-size:12px;
  color:var(--slate);
  line-height:1.65;
  margin:14px 0 0}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--gold);
  color:var(--navy);
  padding:17px 21px;
  min-height:54px;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
  letter-spacing:.055em;
  text-align:center;
  text-decoration:none;
  border:1px solid var(--gold);
  border-radius:2px;
  transition:background .18s}
.button:hover {
  background:var(--gold-hover);
  border-color:var(--gold-hover)}
.button span {
  font-size:20px;
  line-height:1}
.button-outline {
  background:#fff;
  border-color:var(--line)}
.button-outline:hover {
  background:var(--paper);
  border-color:var(--slate)}
.text-link {
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  letter-spacing:.04em;
  line-height:1.6;
  display:inline-block}
.text-link:hover {
  text-decoration:underline}
.home-hero {
  padding:70px 0 64px;
  border-bottom:1px solid var(--line)}
.home-hero h1 {
  font-size:clamp(3rem,6.7vw,5.4rem);
  max-width:840px;
  margin:20px 0 35px;
  line-height:1.05}
.hero-bottom {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:70px;
  align-items:start}
.hero-bottom .deck {
  max-width:600px;
  margin:0;
  font-size:1.17rem}
.hero-actions {
  display:flex;
  flex-direction:column;
  gap:12px}
.hero-actions .fine {
  margin:0}
.featured-section {
  padding-top:68px;
  padding-bottom:68px}
.section-head {
  max-width:760px;
  margin-bottom:32px}
.section-head>p:last-child {
  color:var(--slate);
  font-size:16px}
.featured-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px}
.featured {
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  background:#fff}
.featured-media {
  position:relative;
  border-bottom:1px solid var(--line);
  padding:24px 30px 43px}
.featured-media img {
  height:265px;
  width:100%;
  object-fit:contain}
.product-tag {
  position:absolute;
  bottom:16px;
  left:27px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--slate)}
.featured-copy {
  padding:30px;
  display:flex;
  flex-direction:column;
  flex:1}
.featured-copy h2 {
  font-size:1.85rem;
  max-width:390px;
  margin-top:0}
.featured-copy>p {
  font-size:16px}
.featured-copy .featured-note {
  font-family:var(--serif);
  font-size:18px;
  color:var(--navy);
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-top:auto}
.featured-copy .button {
  align-self:start}
.editorial-strip {
  background:var(--navy);
  color:#fff;
  padding:42px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);
  gap:30px;
  align-items:center}
.editorial-strip .section-number {
  color:var(--gold);
  margin:0}
.editorial-strip p {
  font-family:var(--serif);
  font-size:1.5rem;
  line-height:1.45;
  margin:0}
.editorial-strip a {
  color:var(--gold)}
.profile-section {
  padding-top:70px;
  padding-bottom:20px}
.profile-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 36px}
.profile-card {
  border-top:1px solid var(--line);
  padding:28px 0;
  display:flex;
  gap:20px;
  text-decoration:none}
.profile-card:hover h3 {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px}
.profile-number {
  font-family:var(--serif);
  color:#82651F;
  font-size:1.5rem;
  min-width:29px;
  line-height:1.2}
.profile-card h3 {
  font-family:var(--serif);
  font-size:1.44rem;
  font-weight:400;
  margin:0 0 12px}
.profile-card p {
  font-size:12px;
  color:var(--slate);
  margin:0 0 14px}
.profile-card .eyebrow {
  font-size:10px;
  margin-bottom:12px}
.card-cta {
  font-size:10px;
  font-weight:700;
  letter-spacing:.055em;
  display:inline-block;
  color:var(--navy)}
.standards-section {
  background:var(--paper);
  margin-top:64px;
  padding:60px 0}
.standards-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px}
.standards-grid p {
  font-size:15px;
  margin:0;
  color:var(--slate)}
.standards-grid .section-number {
  margin-bottom:10px}
.standards-grid h3 {
  font-size:1.1rem}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:var(--slate);
  padding:22px 0 0;
  flex-wrap:wrap}
.breadcrumb a {
  text-decoration:none}
.guide-hero {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:60px;
  align-items:center;
  padding:45px 0 64px}
.guide-hero .byline {
  margin-top:24px}
.byline {
  border-top:1px solid var(--line);
  padding-top:17px;
  font-size:11px;
  line-height:1.8;
  margin:22px 0 27px}
.byline span {
  display:block}
.byline span:first-child {
  color:var(--navy);
  font-weight:700}
.byline span:last-child {
  color:var(--slate)}
.product-figure {
  margin:0;
  border:1px solid var(--line);
  padding:25px;
  background:#fff}
.product-image {
  width:100%;
  object-fit:contain}
.product-figure img {
  height:330px}
.product-figure figcaption {
  font-size:11px;
  color:var(--slate);
  text-align:center;
  line-height:1.6;
  margin-top:18px}
.article-section {
  padding:40px 0;
  border-top:1px solid var(--line)}
.article-section p:last-child {
  margin-bottom:0}
.routine-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--slate)}
.button-quiet {
  border:1px solid #aebac4;
  color:var(--navy);
  background:transparent;
  padding:11px 14px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  min-height:44px}
.evidence-note {
  border-left:2px solid var(--gold);
  padding:0 0 0 24px;
  margin:0 0 48px;
  font-size:14px;
  color:var(--slate)}
.evidence-note h3 {
  font-size:16px}
.evidence-note a {
  font-size:12px}
.next-step {
  padding:35px;
  background:var(--navy);
  color:#d8e1e9;
  margin:40px 0}
.next-step h2 {
  color:#fff}
.next-step .section-number {
  color:var(--gold)}
.next-step p {
  font-size:16px}
.next-step .fine {
  color:#c3d0dc;
  font-size:11px}
.next-step .button {
  width:100%}
details {
  border-top:1px solid var(--line);
  padding:19px 0;
  font-size:15px}
summary {
  cursor:pointer;
  color:var(--navy);
  font-size:16px;
  font-weight:600;
  line-height:1.5}
details p {
  margin:18px 0 0}
.presentation-heading {
  max-width:890px;
  margin:38px auto 36px;
  text-align:center}
.presentation-heading .deck {
  margin:0 auto 20px}
.presentation-heading .byline {
  max-width:640px;
  margin:22px auto}
.presentation-layout {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:50px;
  align-items:start;
  border-top:1px solid var(--line);
  padding:38px 0 48px}
.video-column {
  text-align:center}
.video-frame {
  max-width:400px;
  min-height:500px;
  margin:auto;
  background:#0b1420}
.video-frame vturb-smartplayer {
  width:100%}
.presentation-aside {
  padding:26px 30px;
  border:1px solid var(--line);
  text-align:center}
.presentation-aside img {
  height:245px;
  margin:10px 0 22px}
.presentation-aside h2 {
  font-size:1.6rem}
.presentation-aside p {
  font-size:15px}
.presentation-aside .button {
  width:100%;
  margin:0 0 18px}
.presentation-aside .text-link {
  font-size:10px}
.presentation-details {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:55px;
  border-top:1px solid var(--line);
  padding:45px 0}
.presentation-details h2 {
  font-size:1.9rem}
.presentation-details p {
  font-size:16px}
.package-section {
  border-top:1px solid var(--line);
  padding:48px 0}
.package-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px}
.package {
  border:1px solid var(--line);
  padding:28px 24px;
  display:flex;
  flex-direction:column}
.package h3 {
  font-family:var(--serif);
  font-size:2rem;
  font-weight:400;
  margin:0 0 15px}
.package>p {
  font-size:14px}
.package ul {
  font-size:12px;
  margin:0 0 25px;
  padding-left:17px;
  color:var(--slate)}
.package .button {
  margin-top:auto}
.decision-grid {
  border-top:1px solid var(--line);
  padding:45px 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:55px}
.decision-grid h2 {
  font-size:1.9rem}
.decision-grid li,.decision-grid p {
  font-size:16px}
.faq-section {
  max-width:820px;
  margin:10px auto 55px}
.site-footer {
  border-top:1px solid var(--line);
  padding:42px 0 22px;
  margin-top:55px;
  background:#fff}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:35px;
  align-items:start;
  padding-bottom:26px}
.footer-top .brand {
  font-size:1.25rem}
.footer-top p {
  font-size:13px;
  margin:12px 0 0;
  color:var(--slate)}
.footer-top nav {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  max-width:430px;
  font-size:11px}
.footer-top nav a {
  color:var(--slate);
  text-decoration:none}
.disclosure {
  max-width:1040px;
  font-size:11px;
  color:var(--slate);
  line-height:1.75;
  border-top:1px solid var(--line);
  padding-top:25px}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  color:var(--slate);
  padding-top:12px}
.legal-page {
  padding-top:50px;
  padding-bottom:30px}
.legal-page h1 {
  margin-bottom:20px}
.legal-page .article-section {
  padding:30px 0}
.legal-page .article-section h2 {
  font-size:1.6rem}

@media(max-width:940px) {
  .hero-bottom {
  gap:35px}
.guide-hero {
  gap:32px}
.masthead-inner {
  gap:16px}
.brand {
  font-size:1.25rem}
#site-nav {
  gap:20px}
.presentation-layout {
  gap:28px}
.standards-grid {
  gap:28px}
.editorial-strip {
  grid-template-columns:1fr 1.5fr}
.editorial-strip a {
  grid-column:2}
.package-grid {
  gap:14px}
.package {
  padding:23px 18px}
}

/* Tablet portrait and below: dense multi-column blocks stack instead of squeezing. */
@media(max-width:900px) {
  .hero-bottom {
  grid-template-columns:minmax(0,1fr);
  gap:28px}
.hero-actions {
  max-width:600px}
.presentation-layout {
  grid-template-columns:minmax(0,1fr);
  gap:32px}
.package-grid {
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto}
.standards-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:28px 36px}
}

@media(max-width:760px) {
  :root {
  --crest-size:40px;
  --crest-font:12px}
.topline .wrap {
  justify-content:center}
.topline span:first-child {
  display:none}
.topline {
  font-size:9px}
.masthead-inner {
  flex-wrap:wrap;
  padding-top:22px;
  padding-bottom:22px}
.brand {
  flex:1 1 0%;
  font-size:1.2rem;
  gap:10px}
.brand small {
  font-size:8px;
  letter-spacing:.08em}
.nav-toggle {
  display:block}
#site-nav {
  display:none;
  width:100%;
  padding-top:10px;
  border-top:1px solid var(--line);
  gap:26px}
#site-nav.is-open {
  display:flex}
.home-hero {
  padding:45px 0}
.home-hero h1 {
  font-size:3.15rem;
  line-height:1.08;
  margin-bottom:28px}
.hero-bottom {
  grid-template-columns:1fr;
  gap:28px}
.hero-bottom .deck {
  font-size:1.1rem}
.hero-actions .button {
  width:100%}
.featured-section {
  padding-top:45px;
  padding-bottom:45px}
.featured-grid {
  grid-template-columns:1fr;
  gap:26px}
.featured-media img {
  height:225px}
.featured-copy {
  padding:25px}
.featured-copy h2 {
  font-size:1.85rem}
.featured-copy .button {
  width:100%}
.editorial-strip {
  padding:28px;
  grid-template-columns:1fr;
  gap:18px}
.editorial-strip a {
  grid-column:auto}
.editorial-strip p {
  font-size:1.5rem}
.profile-section {
  padding-top:45px}
.profile-grid {
  grid-template-columns:1fr}
.profile-card {
  padding:25px 0}
.profile-card h3 {
  font-size:1.4rem}
.standards-section {
  padding:42px 0;
  margin-top:30px}
.standards-grid {
  grid-template-columns:1fr;
  gap:28px}
.guide-hero {
  grid-template-columns:1fr;
  padding:30px 0 40px;
  gap:30px}
.guide-hero h1 {
  font-size:2.35rem}
.guide-hero .button {
  width:100%}
.product-figure img {
  height:240px}
.deck {
  font-size:1.1rem}
.article-section {
  padding:32px 0}
.next-step {
  padding:28px}
.next-step .button {
  font-size:11px}
.evidence-note {
  padding-left:19px}
.presentation-heading {
  text-align:left;
  margin-top:28px}
.presentation-heading h1 {
  font-size:2.35rem}
.presentation-heading .deck {
  max-width:none}
.presentation-layout {
  grid-template-columns:1fr;
  gap:32px;
  padding-top:28px}
.video-frame {
  min-height:0}
.presentation-aside {
  padding:25px}
.presentation-aside img {
  height:230px}
.presentation-details,.decision-grid {
  grid-template-columns:1fr;
  gap:28px;
  padding:32px 0}
.package-grid {
  grid-template-columns:1fr}
.package {
  padding:26px}
.package .button {
  width:100%}
.footer-top {
  flex-direction:column;
  gap:25px}
.footer-bottom {
  flex-direction:column;
  gap:5px}
.site-footer {
  margin-top:35px}
.routine-tools {
  gap:12px}
.section-head h2 {
  font-size:1.9rem}
h2 {
  font-size:1.85rem}
body {
  font-size:18px}
}

@media(max-width:390px) {
  :root {
  --crest-size:36px;
  --crest-font:11px}
.brand {
  font-size:1.03rem}
.brand small {
  font-size:8px;
  letter-spacing:.06em}
.nav-toggle {
  padding:9px 10px}
.home-hero h1 {
  font-size:2.85rem}
.button {
  font-size:11px;
  padding-left:14px;
  padding-right:14px}
.guide-hero h1,.presentation-heading h1 {
  font-size:2.15rem}
}

.button {
  font-size:14px;
  letter-spacing:.035em}
.fine {
  font-size:13px}
.byline {
  font-size:12px}
.text-link {
  font-size:13px}
.card-cta {
  font-size:12px}
.nav-toggle {
  font-size:12px}
.next-step .fine {
  font-size:12px}
@media(max-width:760px) {
  .button,.next-step .button {
  font-size:13px}
.nav-toggle {
  font-size:11px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.button {
  transition:none}
}

@media print {
  .topline,.masthead,.skip-link,.breadcrumb,.product-figure,.button,.routine-tools,.site-footer,.video-column,.presentation-aside {
  display:none}
body {
  font-size:11pt;
  line-height:1.5}
.wrap,.reading-column {
  max-width:none;
  padding:0}
.guide-hero {
  display:block;
  padding:0}
.guide-hero h1 {
  font-size:24pt}
.next-step {
  background:#fff;
  color:#000;
  padding:15px;
  border:1px solid #ccc}
.next-step h2 {
  color:#000}
h2 {
  font-size:17pt}
.article-section,.evidence-note,.next-step {
  break-inside:avoid;
  margin:15px 0;
  padding-top:15px;
  padding-bottom:15px}
.fine {
  font-size:9pt}
}


/* Shared premium surface treatment. */
.featured,.package,.product-figure,.presentation-aside {
  box-shadow:var(--shadow)}

.button {
  box-shadow:var(--shadow)}

.profile-card {
  border:1px solid var(--line);
  padding:26px;
  background:var(--white);
  margin-bottom:22px;
  box-shadow:var(--shadow)}

@media(max-width:760px) {
  .profile-card {
  padding:24px 20px;
  margin-bottom:18px}
}

@media print {
  .featured,.package,.profile-card,.product-figure,.presentation-aside,.button {
  box-shadow:none}
}


/* ==========================================================================
   Phase 2 additions (home page): editorial photography on the featured cards
   and reader-guide cards. Additive only.
   ========================================================================== */
.featured-media.is-photo {
  padding: 0;
  border-bottom: 0;
  overflow: hidden;
}
.featured-media.is-photo img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}
.featured-media.is-photo .product-tag {
  left: 18px;
  bottom: 18px;
  padding: 7px 12px;
  color: var(--navy);
  background: rgba(255, 255, 255, .95);
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.profile-card {
  align-items: flex-start;
}
.profile-card .thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.profile-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-card h3 {
  line-height: 1.25;
}
@media (max-width: 760px) {
  .featured-media.is-photo img {
    height: 230px;
  }
  .profile-card .thumb {
    width: 76px;
    height: 76px;
  }
}

/* Balanced headings avoid one-word last lines (progressive enhancement). */
h1,h2,h3,.pull,.profile-card h3 {
  text-wrap: balance;
}
.deck,.featured-copy>p,.article-section>p {
  text-wrap: pretty;
}

/* ==========================================================================
   Robustness layer. Grid and flex children may shrink below their content,
   long words wrap instead of pushing the page sideways, and embeds never
   outgrow their column. Nothing here changes how the layout looks when it fits.
   ========================================================================== */
.hero-bottom>*,.featured-grid>*,.profile-grid>*,.standards-grid>*,.package-grid>*,
.presentation-layout>*,.presentation-details>*,.decision-grid>*,.editorial-strip>*,
.guide-hero>*,.footer-top>*,.footer-bottom>*,.topline .wrap>*,.breadcrumb>*,.routine-tools>*,
.profile-card>div,.featured-copy {
  min-width:0}
h1,h2,h3,summary,.eyebrow,.card-cta,.button,.product-tag {
  overflow-wrap:break-word}
.sources a,.disclosure,.footer-top nav a,.byline,.fine {
  overflow-wrap:anywhere}
.video-frame {
  max-width:min(400px,100%)}
.video-frame vturb-smartplayer {
  max-width:100%}

/* Cursive signature. .signoff-block .sig (ht-guides.css) is what the guides use;
   .avatar-signature is the legacy class name and gets the same face. */
.avatar-signature {
  display:block;
  font-family:var(--script);
  font-weight:700;
  font-size:clamp(2rem,6vw,2.6rem);
  line-height:1.1;
  color:var(--navy);
  transform:rotate(-1.5deg);
  transform-origin:left center}