:root {
  --cm-ink: #18303d;
  --cm-ink-soft: #53636a;
  --cm-paper: #f7f3eb;
  --cm-paper-deep: #ece5d8;
  --cm-line: #d6cec0;
  --cm-blue: #1b5b70;
  --cm-orange: #e06e4d;
  --cm-yellow: #f0c36a;
  --cm-night: #102a35;
  --cm-white: #fffdf9;
  --cm-display: Georgia, "Times New Roman", serif;
  --cm-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cm-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --cm-max: 1240px;
  --cm-gutter: clamp(1rem, 3.5vw, 3rem);
  --cm-gap: clamp(1.1rem, 2.4vw, 2rem);
  --cm-radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cm-paper); color: var(--cm-ink); font-family: var(--cm-body); line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--cm-blue); text-underline-offset: .18em; }
a:hover { color: var(--cm-orange); }
:focus-visible { outline: 3px solid var(--cm-yellow); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--cm-display); line-height: 1.08; letter-spacing: -.02em; }
h1, h2, h3, p { margin-top: 0; }
p { max-width: 68ch; }
ul, ol { padding-left: 1.25rem; }
.cm-shell { width: min(100% - 2 * var(--cm-gutter), var(--cm-max)); margin-inline: auto; }
.cm-skip { position: absolute; left: -9999px; top: .5rem; z-index: 10; padding: .65rem 1rem; background: var(--cm-yellow); color: var(--cm-ink); }
.cm-skip:focus { left: .75rem; }

.cm-header { background: var(--cm-white); border-bottom: 1px solid var(--cm-line); }
.cm-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 76px; padding-block: .85rem; }
.cm-brand { color: var(--cm-ink); text-decoration: none; }
.cm-brand__name { display: block; font-family: var(--cm-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 700; }
.cm-brand__tag { display: block; margin-top: .18rem; color: var(--cm-ink-soft); font-family: var(--cm-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.cm-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem .95rem; margin: 0; padding: 0; list-style: none; }
.cm-nav a { display: inline-block; padding: .35rem 0; color: var(--cm-ink); font-family: var(--cm-mono); font-size: .75rem; text-decoration: none; }
.cm-nav a:hover, .cm-nav a[aria-current="page"] { color: var(--cm-orange); border-bottom: 2px solid currentColor; }

.cm-hero { position: relative; min-height: 335px; overflow: hidden; background: var(--cm-night); color: var(--cm-white); }
.cm-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-hero__veil { position: absolute; inset: 0; background: rgba(16, 42, 53, .82); }
.cm-hero__content { position: relative; display: flex; min-height: 335px; flex-direction: column; justify-content: center; max-width: 760px; padding-block: 2.5rem; }
.cm-kicker { margin-bottom: .75rem; color: var(--cm-yellow); font-family: var(--cm-mono); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.cm-hero h1 { max-width: 12ch; margin-bottom: .7rem; color: var(--cm-white); font-size: clamp(2.5rem, 4.8vw, 4.8rem); }
.cm-hero__intro { max-width: 58ch; margin-bottom: 1.25rem; color: #e9eee9; font-size: clamp(1rem, .92rem + .35vw, 1.2rem); }
.cm-stats { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; margin: 0; padding: 0; list-style: none; color: #d9e5e3; font-family: var(--cm-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.cm-stats strong { color: var(--cm-yellow); font-size: 1rem; }

.cm-main { padding-block: 1.4rem 4rem; }
.cm-breadcrumb { margin: 0 auto 1.25rem; padding-top: .75rem; color: var(--cm-ink-soft); font-family: var(--cm-mono); font-size: .72rem; }
.cm-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin: 0; padding: 0; list-style: none; }
.cm-breadcrumb li + li::before { content: "/"; margin-right: .75rem; color: var(--cm-line); }
.cm-breadcrumb a { color: var(--cm-ink-soft); }
.cm-section { margin-top: clamp(1.5rem, 3vw, 3rem); }
.cm-section__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 2px solid var(--cm-ink); }
.cm-section__heading h2 { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem); }
.cm-section__heading p { margin: 0; color: var(--cm-ink-soft); font-family: var(--cm-mono); font-size: .72rem; text-align: right; }
.cm-section__lead { max-width: 66ch; color: var(--cm-ink-soft); }

.cm-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.cm-topic { position: relative; min-height: 154px; overflow: hidden; background: var(--cm-blue); color: var(--cm-white); }
.cm-topic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .52; transition: transform .35s ease, opacity .35s ease; }
.cm-topic:hover img { transform: scale(1.04); opacity: .66; }
.cm-topic__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 42, 53, .12), rgba(16, 42, 53, .88)); }
.cm-topic__body { position: relative; display: flex; min-height: 154px; flex-direction: column; justify-content: end; padding: 1rem; }
.cm-topic__body h3 { margin: 0; font-size: 1.45rem; }
.cm-topic__body h3 a { color: var(--cm-white); text-decoration: none; }
.cm-topic__body p { margin: .25rem 0 0; color: #e9eee9; font-family: var(--cm-mono); font-size: .7rem; }

.cm-feed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cm-gap); }
.cm-card { min-width: 0; }
.cm-card__media { aspect-ratio: 1.48; overflow: hidden; background: var(--cm-paper-deep); }
.cm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cm-card:hover .cm-card__media img { transform: scale(1.035); }
.cm-card__body { padding-top: .72rem; }
.cm-card__meta, .cm-meta { margin: 0 0 .35rem; color: var(--cm-orange); font-family: var(--cm-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.cm-card h3 { margin-bottom: .35rem; font-size: 1.34rem; }
.cm-card h3 a { color: var(--cm-ink); text-decoration: none; }
.cm-card h3 a:hover { color: var(--cm-orange); }
.cm-card__dek { margin-bottom: .35rem; color: var(--cm-ink-soft); font-size: .9rem; line-height: 1.45; }
.cm-card time { color: var(--cm-ink-soft); font-family: var(--cm-mono); font-size: .7rem; }

.cm-page-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 2rem; align-items: end; padding: 1.5rem 0 2rem; border-bottom: 2px solid var(--cm-ink); }
.cm-page-head h1 { max-width: 15ch; margin-bottom: .65rem; font-size: clamp(2.3rem, 4.5vw, 4.4rem); }
.cm-page-head__dek { margin: 0; color: var(--cm-ink-soft); font-size: 1.05rem; }
.cm-page-head__image { aspect-ratio: 1.72; overflow: hidden; }
.cm-page-head__image img { width: 100%; height: 100%; object-fit: cover; }
.cm-article { max-width: 780px; margin: 0 auto; }
.cm-article__head { padding-top: 2rem; }
.cm-article__head h1 { margin-bottom: .7rem; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.cm-article__chapo { color: var(--cm-ink-soft); font-size: 1.2rem; }
.cm-article__byline { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin: 1rem 0 1.5rem; color: var(--cm-ink-soft); font-family: var(--cm-mono); font-size: .72rem; }
.cm-article__byline a { color: var(--cm-blue); }
.cm-article__hero { margin: 0 calc(var(--cm-gutter) * -1) 1.8rem; }
.cm-article__hero img { width: 100%; max-height: 510px; object-fit: cover; }
.cm-article__hero figcaption, .cm-figure figcaption { padding-top: .45rem; color: var(--cm-ink-soft); font-size: .78rem; font-style: italic; }
.cm-prose { font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; }
.cm-prose p, .cm-prose li { max-width: 68ch; }
.cm-prose h2 { margin: 2.2rem 0 .7rem; color: var(--cm-blue); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem); }
.cm-prose ol, .cm-prose ul { padding-left: 1.35rem; }
.cm-prose li + li { margin-top: .4rem; }
.cm-pull { margin: 2rem 0; padding: 1.25rem 1.4rem; border-left: 5px solid var(--cm-orange); background: var(--cm-paper-deep); color: var(--cm-blue); font-size: 1.35rem; font-style: italic; }
.cm-figure { margin: 2rem 0; }
.cm-figure img { width: 100%; max-height: 440px; object-fit: cover; }
.cm-diptych { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 2rem 0; }
.cm-diptych img { width: 100%; aspect-ratio: 1.55; object-fit: cover; }
.cm-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.4rem; padding-top: 1rem; border-top: 2px solid var(--cm-ink); }
.cm-related h2 { grid-column: 1 / -1; margin: 0; font-size: 1.7rem; }
.cm-related a { font-family: var(--cm-display); font-size: 1.2rem; }
.cm-callout { margin-top: 2rem; padding: 1.25rem; background: var(--cm-blue); color: var(--cm-white); }
.cm-callout h2 { color: var(--cm-yellow); }
.cm-callout a { color: var(--cm-white); }

.cm-trust { max-width: 760px; margin: 0 auto; padding-block: 1.5rem 3rem; }
.cm-trust h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); }
.cm-trust h2 { margin-top: 2rem; color: var(--cm-blue); font-size: 1.7rem; }
.cm-trust p, .cm-trust li { max-width: 70ch; }
.cm-contact { display: inline-block; margin: .5rem 0 1rem; padding: .65rem .85rem; background: var(--cm-yellow); color: var(--cm-ink); font-family: var(--cm-mono); text-decoration: none; }

.cm-footer { margin-top: 3rem; padding-block: 2.5rem 1.25rem; background: var(--cm-night); color: #d9e5e3; }
.cm-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 2rem; }
.cm-footer h2 { margin-bottom: .45rem; color: var(--cm-white); font-size: 1.25rem; }
.cm-footer p { color: #b8cbc9; font-size: .9rem; }
.cm-footer ul { margin: 0; padding: 0; list-style: none; }
.cm-footer li + li { margin-top: .25rem; }
.cm-footer a { color: #d9e5e3; }
.cm-footer__base { margin: 2rem 0 0; padding-top: .85rem; border-top: 1px solid rgba(217, 229, 227, .2); color: #9fb5b4; font-family: var(--cm-mono); font-size: .7rem; }

@media (max-width: 900px) {
  .cm-header__row { align-items: flex-start; flex-direction: column; }
  .cm-nav ul { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; max-width: 100%; padding-bottom: .2rem; }
  .cm-topics, .cm-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-page-head { grid-template-columns: 1fr; }
  .cm-page-head__image { max-width: 560px; }
}
@media (max-width: 560px) {
  .cm-hero, .cm-hero__content { min-height: 315px; }
  .cm-hero h1 { font-size: 2.65rem; }
  .cm-topics, .cm-feed, .cm-related, .cm-diptych, .cm-footer__grid { grid-template-columns: 1fr; }
  .cm-section__heading { align-items: flex-start; flex-direction: column; }
  .cm-section__heading p { text-align: left; }
  .cm-topic, .cm-topic__body { min-height: 138px; }
  .cm-article__hero { margin-inline: 0; }
  .cm-article__hero img { max-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}