/* ==========================================================================
   Blog: the article list (/blog/) and article pages (/blog/<slug>)
   Built only from the brand tokens in main.css: Manrope, --paper, --ink,
   --orange, --line, --pad, the 800 / -.065em display type and the 11px
   letter-spaced labels. Articles have no photos: a typographic cover
   (.post-cover) stands in for the image, and every section of an article
   carries a type-only figure (goal chips, tiles, call-out, checklists).
   ========================================================================== */

.visually-hidden {
  position:absolute!important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- Meta line: CATEGORY / DATE / READING TIME ---------- */
.post-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#777;
}

.post-meta>*+*:before {
  content:'/';
  margin-right:12px;
  color:#bbb;
}

.post-meta>:first-child {
  color:var(--orange);
}

/* ==========================================================================
   Typographic cover: display words, an outlined number, a fine grid and the
   orange click cursor. Colours come from the theme class.
   ========================================================================== */
.post-cover {
  --cover-bg:var(--ink);
  --cover-fg:var(--paper);
  --cover-muted:#9b9890;
  --cover-accent:var(--orange);
  --cover-rule:rgba(245,243,238,.06);
  --cover-stroke:rgba(245,243,238,.16);
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  aspect-ratio:4/3;
  padding:clamp(18px,2.2vw,34px);
  border-radius:10px;
  background-color:var(--cover-bg);
  background-image:linear-gradient(var(--cover-rule) 1px,transparent 1px),linear-gradient(90deg,var(--cover-rule) 1px,transparent 1px);
  background-size:12.5% 16.667%;
  color:var(--cover-fg);
}

.post-cover--orange {
  --cover-bg:var(--orange);
  --cover-fg:var(--ink);
  --cover-muted:rgba(23,23,20,.62);
  --cover-accent:var(--paper);
  --cover-rule:rgba(23,23,20,.07);
  --cover-stroke:rgba(23,23,20,.2);
}

.post-cover--sand {
  --cover-bg:#e9e7e1;
  --cover-fg:var(--ink);
  --cover-muted:#777;
  --cover-accent:var(--orange);
  --cover-rule:rgba(23,23,20,.05);
  --cover-stroke:rgba(23,23,20,.13);
}

.post-cover-top,.post-cover-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cover-muted);
}

.post-cover-word {
  font-size:clamp(40px,19cqw,200px);
  font-weight:800;
  letter-spacing:-.065em;
  line-height:.86;
  text-transform:uppercase;
}

.post-cover-word em {
  display:inline-block;
  color:var(--cover-accent);
  transition:transform .6s cubic-bezier(.2,.75,.2,1);
}

.post-cover-num {
  position:absolute;
  z-index:-1;
  right:-.02em;
  top:50%;
  transform:translateY(-50%);
  font-size:64cqw;
  font-weight:800;
  letter-spacing:-.08em;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.5px var(--cover-stroke);
  pointer-events:none;
  user-select:none;
}

.post-cover-click {
  position:relative;
  flex:none;
  width:26px;
}

.post-cover-click img {
  width:100%;
  height:auto;
  transform-origin:12% 8%;
  transition:transform .4s cubic-bezier(.2,.75,.2,1);
}

.post-cover--orange .post-cover-click img {
  filter:brightness(0);
}

/* A ring that "clicks" at the cursor tip */
.post-cover-click:before {
  content:'';
  position:absolute;
  left:-11px;
  top:-11px;
  width:22px;
  height:22px;
  border:1.5px solid var(--cover-accent);
  border-radius:50%;
  opacity:0;
}

@media(prefers-reduced-motion:no-preference) {
  .post-cover-click:before {
    animation:post-click-ring 2.6s ease-out infinite;
  }
}

@keyframes post-click-ring {
  0% { transform:scale(.3); opacity:.9; }
  65%,100% { transform:scale(1.9); opacity:0; }
}

/* ==========================================================================
   Blog list (/blog/)
   ========================================================================== */
.blog-list {
  padding-top:30px;
}

.post-card {
  position:relative;
}

/* The title link covers the whole card */
.post-card-title a:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
}

.post-card-title {
  margin:18px 0 16px;
  font-size:clamp(24px,2vw,32px);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.05;
}

.post-card-title a {
  background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 3px;
  transition:background-size .5s cubic-bezier(.2,.75,.2,1);
}

.post-card-body>p:not(.post-meta) {
  font-size:15px;
  line-height:1.75;
  color:#4a4a44;
  max-width:54ch;
}

.post-card-cta {
  display:inline-flex;
  align-items:center;
  gap:34px;
  margin-top:28px;
  padding:15px 22px;
  border-radius:40px;
  background:var(--ink);
  color:var(--paper);
  font-size:12px;
  font-weight:600;
  transition:background .3s,color .3s;
}

.post-card-cta span {
  font-size:18px;
  line-height:.7;
  color:var(--orange);
  transition:transform .3s,color .3s;
}

.post-card:hover .post-card-title a,.post-card:focus-within .post-card-title a {
  background-size:100% 3px;
}

.post-card:hover .post-cover-word em,.post-card:focus-within .post-cover-word em {
  transform:translateX(.1em);
}

.post-card:hover .post-cover-click img,.post-card:focus-within .post-cover-click img {
  transform:scale(1.3) rotate(-12deg);
}

.post-card:hover .post-card-cta,.post-card:focus-within .post-card-cta {
  background:var(--orange);
  color:var(--ink);
}

.post-card:hover .post-card-cta span,.post-card:focus-within .post-card-cta span {
  color:var(--ink);
  transform:translate(3px,-3px);
}

/* Newest article: cover and text side by side */
.post-card--featured {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,5vw,90px);
  align-items:end;
}

.post-card--featured .post-card-title {
  font-size:clamp(30px,3.4vw,58px);
  letter-spacing:-.055em;
  line-height:1;
  margin:22px 0 22px;
}

.post-card--featured .post-card-body>p:not(.post-meta) {
  font-size:16px;
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:60px clamp(20px,2.4vw,40px);
  margin-top:80px;
  padding-top:60px;
  border-top:1px solid var(--line);
}

.blog-grid .post-card-body {
  padding-top:6px;
}

.blog-note {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 30px;
  margin-top:70px;
  padding-top:26px;
  border-top:1px solid var(--line);
}

.blog-note p {
  font-size:clamp(18px,1.6vw,24px);
  font-weight:600;
  letter-spacing:-.035em;
}

.blog-note button {
  display:flex;
  gap:50px;
  padding:12px 0;
  border-bottom:1px solid var(--ink);
  font-size:16px;
  font-weight:700;
}

.blog-note button span {
  color:var(--orange);
  transition:transform .3s;
}

.blog-note button:hover span {
  transform:translate(4px,-4px);
}

/* ==========================================================================
   Article page
   ========================================================================== */

/* Reading progress: a thin orange line across the top of the screen */
.post-progress {
  position:fixed;
  z-index:60;
  top:0;
  left:0;
  width:100%;
  height:3px;
  pointer-events:none;
}

.post-progress span {
  display:block;
  height:100%;
  background:var(--orange);
  transform:scaleX(var(--progress,0));
  transform-origin:left;
}

/* ---------- Hero ---------- */
.post-hero {
  padding:150px var(--pad) 60px;
}

.post-crumbs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:55px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#777;
}

.post-crumbs a {
  position:relative;
  color:var(--ink);
}

.post-crumbs a:after {
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:1px;
  background:var(--orange);
  transition:width .3s;
}

.post-crumbs a:hover:after {
  width:100%;
}

.post-crumbs [aria-current] {
  color:var(--orange);
}

.post-eyebrow {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
  text-transform:uppercase;
}

.post-eyebrow i {
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:10px;
  border-radius:50%;
  background:var(--orange);
  vertical-align:middle;
}

.post-title {
  font-size:clamp(40px,6.6vw,118px);
  line-height:.94;
  text-transform:uppercase;
}

.post-hero-foot {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:8vw;
  align-items:end;
  margin-top:65px;
  padding-top:30px;
  border-top:1px solid var(--line);
}

.post-lede {
  font-size:clamp(20px,1.9vw,30px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.3;
}

.post-facts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin:0;
}

.post-facts dt {
  margin-bottom:10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  color:#777;
}

.post-facts dd {
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}

/* ---------- Shortlist: the five factors, in place of a cover photo ---------- */
.post-shortlist {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:clamp(30px,6vw,110px);
  align-items:center;
  margin:0 12px;
  padding:clamp(34px,5.4vw,90px) calc(var(--pad) - 12px);
  border-radius:10px;
  background-color:var(--ink);
  background-image:linear-gradient(rgba(245,243,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,243,238,.05) 1px,transparent 1px);
  background-size:80px 80px;
  color:var(--paper);
}

.post-shortlist-count strong {
  display:block;
  font-size:clamp(150px,22vw,390px);
  font-weight:800;
  letter-spacing:-.08em;
  line-height:.78;
  color:var(--orange);
}

.post-shortlist-count span {
  display:block;
  margin-top:28px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.7;
  color:#9b9890;
}

.post-shortlist ol {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #42423d;
}

.post-shortlist li a {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:22px 0;
  border-bottom:1px solid #42423d;
  font-size:clamp(18px,1.75vw,28px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.2;
  transition:color .3s,padding .45s cubic-bezier(.2,.75,.2,1);
}

.post-shortlist li a>span {
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--orange);
}

.post-shortlist li a i {
  font-style:normal;
  color:var(--orange);
  transition:transform .35s;
}

.post-shortlist li a:hover {
  color:var(--orange);
  padding-left:12px;
}

.post-shortlist li a:hover i {
  transform:translate(4px,4px);
}

/* ---------- Article layout: contents list beside the text ---------- */
.post-layout {
  display:grid;
  grid-template-columns:minmax(200px,270px) minmax(0,1fr);
  gap:clamp(40px,7vw,140px);
  align-items:start;
  padding:110px var(--pad) 100px;
}

.post-aside {
  position:sticky;
  top:calc(var(--nav-compact) + 32px);
}

.post-aside-label {
  margin-bottom:18px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:#777;
}

.post-toc ol {
  list-style:none;
  margin:0;
  padding:0;
  border-left:1px solid var(--line);
}

.post-toc a {
  display:flex;
  gap:10px;
  margin-left:-1px;
  padding:9px 0 9px 18px;
  border-left:2px solid transparent;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  color:#777;
  transition:color .3s,border-color .3s;
}

.post-toc a span {
  flex:none;
  padding-top:1px;
  font-size:11px;
  color:var(--orange);
}

.post-toc a:hover,.post-toc a.is-active {
  color:var(--ink);
}

.post-toc a.is-active {
  border-left-color:var(--orange);
}

.post-aside-back {
  display:inline-block;
  margin-top:34px;
  padding-bottom:4px;
  border-bottom:1px solid var(--ink);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- Article text ---------- */
.post-body {
  min-width:0;
  max-width:780px;
}

.post-body p {
  font-size:18px;
  line-height:1.85;
  color:#2d2d29;
}

.post-body p+p {
  margin-top:22px;
}

.post-section {
  scroll-margin-top:110px;
}

.post-section+.post-section {
  margin-top:110px;
}

/* Small label above each heading: FACTOR 01 / 05 ———— */
.post-step,.post-body h2.post-step {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 24px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.4;
  text-transform:uppercase;
  color:#777;
}

.post-step b {
  font-weight:600;
  color:var(--orange);
}

.post-step:after {
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}

.post-body h2 {
  margin-bottom:32px;
  font-size:clamp(32px,3.4vw,56px);
  letter-spacing:-.055em;
  line-height:.98;
  text-transform:uppercase;
}

.post-body .post-intro-lede {
  margin-bottom:26px;
  font-size:clamp(23px,2.2vw,32px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.28;
  color:var(--ink);
}

/* ---------- Figures: type-only visuals inside the sections ---------- */
.post-figure {
  margin:40px 0;
}

.post-body .post-figure-label {
  margin-bottom:16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.5;
  text-transform:uppercase;
  color:#777;
}

/* 01: objectives as pills */
.post-goals {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0;
  padding:0;
}

.post-goals li {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  border:1px solid var(--ink);
  border-radius:60px;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
}

.post-goals li:before {
  content:'';
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
}

/* 02: services as numbered tiles */
.post-tiles {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:0;
}

.post-tiles li {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
  min-height:150px;
  padding:20px 22px;
  border-radius:8px;
  background:#e9e7e1;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.2;
}

.post-tiles li span {
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--orange);
}

/* 03: what to look for, with an orange rule on top */
.post-look {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,30px);
  margin:0;
  padding:0;
}

.post-look li {
  padding-top:20px;
  border-top:2px solid var(--orange);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.2;
}

.post-look li span {
  display:block;
  margin-bottom:14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:#777;
}

/* 04: orange call-out */
.post-callout {
  padding:clamp(26px,3.4vw,48px);
  border-radius:10px;
  background:var(--orange);
}

.post-body .post-callout .post-figure-label {
  color:rgba(23,23,20,.62);
}

.post-body .post-callout p:not(.post-figure-label) {
  margin:0;
  font-size:clamp(20px,1.9vw,27px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.35;
  color:var(--ink);
}

/* 05: checklists */
.post-checks {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.post-checks>div {
  padding:26px 26px 14px;
  border:1px solid var(--line);
  border-radius:10px;
}

.post-checks ul {
  list-style:none;
  margin:0;
  padding:0;
}

.post-checks li {
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 0;
  border-top:1px solid var(--line);
  font-size:15px;
  font-weight:600;
  line-height:1.4;
}

.post-checks li:before {
  content:'✓';
  display:grid;
  place-items:center;
  flex:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--orange);
  color:var(--ink);
  font-size:12px;
  font-weight:800;
}

/* ---------- Final thoughts: dark panel with the call to action ---------- */
.post-final {
  padding:clamp(30px,4.6vw,66px);
  border-radius:10px;
  background:var(--ink);
  color:var(--paper);
}

.post-final .post-step {
  color:#9b9890;
}

.post-final .post-step:after {
  background:#42423d;
}

.post-body .post-final p {
  color:#d6d3cc;
}

.post-final-cta {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:24px 30px;
  margin-top:46px;
  padding-top:32px;
  border-top:1px solid #42423d;
}

.post-body .post-final .post-final-line {
  font-size:clamp(22px,2.1vw,32px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.1;
  color:var(--paper);
}

.post-final-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 28px;
}

.post-final .pill {
  background:var(--orange);
  color:var(--ink);
  transition:background .3s,color .3s;
}

.post-final .pill:hover {
  background:var(--paper);
}

/* ---------- Questions ---------- */
.post-faq-list {
  border-top:1px solid var(--ink);
}

.post-faq details {
  border-bottom:1px solid var(--line);
}

.post-faq summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:26px 0;
  list-style:none;
  cursor:pointer;
}

.post-faq summary::-webkit-details-marker {
  display:none;
}

.post-faq summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px;
}

.post-faq summary h3 {
  margin:0;
  font-size:clamp(18px,1.6vw,23px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.3;
}

.post-faq-icon {
  position:relative;
  flex:none;
  width:42px;
  height:42px;
  border:1px solid var(--ink);
  border-radius:50%;
  transition:background .3s,border-color .3s;
}

.post-faq-icon:before,.post-faq-icon:after {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:1.5px;
  background:var(--ink);
  translate:-50% -50%;
}

.post-faq-icon:after {
  rotate:90deg;
  transition:rotate .3s;
}

.post-faq summary:hover .post-faq-icon {
  border-color:var(--orange);
}

.post-faq details[open] .post-faq-icon {
  background:var(--orange);
  border-color:var(--orange);
}

.post-faq details[open] .post-faq-icon:after {
  rotate:0deg;
}

.post-faq details>div {
  padding:0 72px 28px 0;
}

.post-body .post-faq details p {
  font-size:17px;
  line-height:1.8;
}

/* ---------- End of article: back link and sharing ---------- */
.post-end {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:90px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

.post-end-back {
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid var(--ink);
}

.post-share {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.post-share>span:first-child {
  margin-right:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:#777;
}

.post-share a,.post-share button {
  padding:10px 16px;
  border:1px solid var(--ink);
  border-radius:40px;
  font-size:12px;
  font-weight:700;
  transition:background .3s,color .3s;
}

.post-share a:hover,.post-share button:hover {
  background:var(--ink);
  color:var(--paper);
}

/* ==========================================================================
   Tablets and phones
   ========================================================================== */
@media(max-width:1000px) {
  .post-card--featured {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  .blog-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .post-hero-foot {
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }
  .post-shortlist {
    grid-template-columns:minmax(0,1fr);
  }
  .post-shortlist-count {
    display:flex;
    align-items:flex-end;
    gap:26px;
  }
  .post-shortlist-count strong {
    font-size:clamp(110px,24vw,200px);
  }
  .post-layout {
    grid-template-columns:minmax(0,1fr);
    padding-top:80px;
  }
  /* The shortlist above already lists the factors; the side list returns on wide screens */
  .post-aside {
    display:none;
  }
  .post-body {
    max-width:none;
  }
}

@media(max-width:700px) {
  .blog-list {
    padding-top:10px;
  }
  .blog-grid {
    grid-template-columns:minmax(0,1fr);
    gap:44px;
    margin-top:44px;
    padding-top:44px;
  }
  .post-card-title,.post-card--featured .post-card-title {
    font-size:clamp(26px,7.4vw,34px);
    margin:16px 0 12px;
  }
  .post-card-cta {
    margin-top:20px;
  }
  .blog-note {
    margin-top:44px;
  }
  .post-hero {
    padding:100px var(--pad) 32px;
  }
  .post-crumbs {
    margin-bottom:30px;
  }
  .post-crumbs [aria-current] {
    display:none;
  }
  .post-crumbs span:nth-last-child(2) {
    display:none;
  }
  .post-eyebrow {
    margin-bottom:18px;
  }
  .post-title {
    font-size:10.6vw;
  }
  .post-hero-foot {
    margin-top:30px;
    padding-top:22px;
    gap:26px;
  }
  .post-lede {
    font-size:19px;
  }
  .post-facts {
    gap:18px;
  }
  .post-shortlist {
    margin:0 8px;
    padding:30px 20px 18px;
    gap:22px;
  }
  .post-shortlist-count {
    gap:18px;
  }
  .post-shortlist-count strong {
    font-size:104px;
  }
  .post-shortlist-count span {
    margin:0 0 6px;
    font-size:10px;
  }
  .post-shortlist li a {
    grid-template-columns:30px minmax(0,1fr) auto;
    gap:10px;
    padding:16px 0;
    font-size:17px;
  }
  .post-shortlist li:last-child a {
    border-bottom:0;
  }
  .post-layout {
    padding:56px var(--pad) 50px;
  }
  .post-body p {
    font-size:16px;
    line-height:1.75;
  }
  .post-body p+p {
    margin-top:16px;
  }
  .post-section+.post-section {
    margin-top:64px;
  }
  .post-body h2 {
    margin-bottom:22px;
    font-size:clamp(28px,8.4vw,38px);
  }
  .post-body .post-intro-lede {
    font-size:21px;
  }
  .post-figure {
    margin:28px 0;
  }
  .post-goals {
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  .post-goals li {
    padding:14px 18px;
  }
  .post-tiles {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .post-tiles li {
    min-height:116px;
    padding:16px;
    font-size:15px;
  }
  .post-look {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .post-look li {
    display:flex;
    align-items:baseline;
    gap:14px;
    padding-top:14px;
    font-size:17px;
  }
  .post-look li span {
    margin:0;
  }
  .post-checks {
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  .post-checks>div {
    padding:20px 18px 8px;
  }
  .post-final {
    margin-left:calc(var(--pad) * -1 + 8px);
    margin-right:calc(var(--pad) * -1 + 8px);
    padding:30px 22px;
  }
  .post-final-cta {
    margin-top:32px;
    padding-top:24px;
  }
  .post-faq summary {
    padding:20px 0;
  }
  .post-faq-icon {
    width:36px;
    height:36px;
  }
  .post-faq details>div {
    padding-right:0;
    padding-bottom:22px;
  }
  .post-body .post-faq details p {
    font-size:16px;
  }
  .post-end {
    flex-direction:column;
    align-items:flex-start;
    margin-top:60px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .post-cover-word em,.post-cover-click img,.post-shortlist li a,.post-shortlist li a i,.post-card-title a {
    transition:none;
  }
}