/* ==========================================================================
   DW WiFi · post.css · the blog post template
   Owned by the POST piece (src/templates/post.html + this file + post.js).
   Builds on site.css section 13 (prose) and 14 (post baseline). Colours are hex.

    1 Hero (navy studio band; the picture straddles its end on phones, sits on the content line on desktop)
    2 Layout (sticky rail on desktop, single column below 1100px)
    3 Rail: signal meter, contents, call card
    4 Inline contents (below 1100px)
    5 Body refinements (the prose vocabulary from POST-NOTES section 3)
   5b Figures drawn by post.js, 5c Tables
    6 Article end, CTA band, related articles
    7 Reading progress (below 1100px)
    8 Motion, reduced motion, print
   ========================================================================== */

.is-post {
  --post-col: 34.5rem;        /* the reading column: median 66 to 67 characters a line of Red Hat Text at 18px on all 12 posts; 2 of 1,100 full lines reach 76 to 77 */
  --post-rail: 15rem;
  --post-gap: clamp(2.5rem, 4vw, 3.5rem);
  --toc-ink: #33475B;         /* contents labels: 9.4:1 on white, darker than slate, still a step under navy */
}


/* 1 Hero ------------------------------------------------------------------- */
/* The covers are one studio set: a navy paper sweep, subject right of centre,
   left third empty. The band is the same sweep, so the cover melts into it and
   the headline sits where the photograph left room for it. */
.post-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(110% 85% at 12% 0%, #163B62 0%, rgba(22, 59, 98, 0) 60%),
    linear-gradient(180deg, #0C2B4D 0%, #0A2643 100%);
  color: var(--white);
}
.post-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: clamp(.5rem, .2rem + 1.2vw, 1.75rem);
  padding-bottom: clamp(1.5rem, .8rem + 2.6vw, 3.5rem);
}
/* one row: the way back, then what the article is about */
.post-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.post-hero .back-link { color: var(--fog); }
.post-hero .back-link:hover { color: var(--white); }
.post-hero .chip { background: rgba(255, 255, 255, .1); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.post-title {
  margin-top: clamp(.6rem, .3rem + 1vw, 1.25rem);
  font-size: clamp(2rem, 1.3rem + 2.7vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--white);
}
.post-standfirst {
  margin-top: 1.15rem;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.5;
  color: #C9D4E0;
  text-wrap: pretty;
}

/* byline: DW mark + author, date and read time */
.post-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  font-size: .9375rem;
  color: var(--fog);
}
.post-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--white);
}
.post-hero .post-avatar { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 20px -10px rgba(0, 0, 0, .6); }
.post-meta-text { display: flex; flex-direction: column; gap: .15rem; margin: 0; line-height: 1.4; }
.post-byline { color: var(--fog); }
.post-author { font-weight: 600; color: var(--white); }
.post-author-role { color: var(--fog); }
.post-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
/* dates and times are UI text, in the body face (only the figures' instruments use the mono) */
.post-hero .post-meta time { font-family: var(--font-text); font-size: 1em; font-weight: 500; font-variant-numeric: tabular-nums; color: #DCE4EC; }
.post-meta-sep { color: rgba(185, 198, 212, .6); }

/* cover: one picture, art-directed per screen (see post.html) */
.post-cover { position: relative; z-index: 0; margin: 0; max-width: none; }
.post-cover picture { display: contents; }
.post-cover img {
  display: block;
  width: 100%;
  border-radius: 0;
  background: transparent;
}

/* Phones and tablets: ONE legible picture (4:3), inset to the text edges and
   straddling the end of the navy band, with its caption on the page below it.
   The band ends level with the middle of the picture (a white panel behind its
   lower half), so the picture links the headline to the article. */
@media (max-width: 959px) {
  .post-hero-inner { padding-bottom: 0; }
  .post-meta { margin-top: 1.1rem; }
  .post-meta .post-avatar { width: 40px; height: 40px; border-radius: 10px; }
  .post-cover { margin: 1.35rem var(--gutter) 0; }
  .post-cover::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-1 * var(--gutter));
    right: -100vw;              /* to the window edge on tablets too; the hero clips it */
    top: calc(min(100vw - 2 * var(--gutter), 36rem) * .375);
    bottom: 0;
    background: var(--white);
  }
  .post-cover img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(12, 43, 77, .1), 0 22px 40px -24px rgba(4, 21, 39, .75);
  }
  @supports not (aspect-ratio: 1) { .post-cover img { height: calc((100vw - 2 * var(--gutter)) * .75); } }
}
@media (min-width: 640px) and (max-width: 959px) {
  /* tablets: keep the picture to the reading measure, not a 900px slab */
  .post-cover { max-width: 36rem; }
}

/* what the picture shows (real screens only; the still lifes need no caption) */
.post-cover-cap { display: none; }
.post-cover-cap:not([hidden]) {
  display: block;
  font-size: .8125rem;
  line-height: 1.45;
}
.post-cover-cap .cap-wide { display: none; }
@media (max-width: 959px) {
  .post-cover-cap:not([hidden]) { padding-top: .7rem; color: var(--slate); }
  /* the article starts close under the picture, so its opening lines share the first screen */
  .post-hero + .post-layout .post-body.prose { padding-top: 1.5rem; }
}
/* the signal-level scale printed on the map itself (TamoGraph's own legend) */
.post-cover-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; margin-bottom: .3rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--navy-900); }
.post-cover-scale i {
  display: block;
  height: .5rem;
  border-radius: 99px;
  background: linear-gradient(90deg, #FF0000, #FF6A00 9%, #FFBB22 18%, #EEFF22 27%, #99FF22 36%, #33FF22 45%, #00EE44 55%, #00FF99 64%, #00FFDD 73%, #00DDFF 82%, #0099FF 91%, #0055FF);
  box-shadow: inset 0 0 0 1px rgba(12, 43, 77, .12);
}

/* Desktop: headline left, the picture in the right of the band. The figure is
   anchored to the CONTENT line, not the window edge: its last 8% is backdrop that
   fades into the band, so the windows and objects (which end at 92% of every hero
   picture) stop exactly where the header's "Book a survey" button does. */
@media (min-width: 960px) {
  .post-hero { min-height: clamp(32rem, calc(min(58vw, 70rem) / 1.6), 44rem); display: flex; }
  .post-hero-inner { flex: 1 1 auto; }
  .post-hero-copy { width: min(40rem, 52%); margin-block: auto; padding-block: 1.5rem .5rem; }
  .post-cover {
    --cover-w: min(58%, 70rem);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(max(var(--gutter), (100% - var(--container)) / 2) - var(--cover-w) * .08);
    width: var(--cover-w);
  }
  .post-cover img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 34%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 34%, #000 93%, transparent 100%);
  }
  .post-cover-cap:not([hidden]) {
    position: absolute;
    z-index: 1;
    right: 8%;
    bottom: .9rem;
    max-width: min(30rem, 80%);
    color: var(--fog);
    text-align: right;
    text-shadow: 0 1px 2px rgba(4, 21, 39, .6);
  }
  .post-cover-cap .cap-wide { display: inline; }
  .post-cover-cap .cap-m, .post-cover-scale { display: none; }
  /* the two survey PHOTOS keep bleeding off the window edge (a photo has no
     object edge to align; fading it short of the edge reads as a mistake) */
  .post[data-slug="enhancing-business-operations-with-wifi-surveys"] .post-cover,
  .post[data-slug="wifi-surveys"] .post-cover { right: 0; }
  .post[data-slug="enhancing-business-operations-with-wifi-surveys"] .post-cover img,
  .post[data-slug="wifi-surveys"] .post-cover img {
    object-position: 45% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 13%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 13%, #000 30%);
  }
  .post[data-slug="enhancing-business-operations-with-wifi-surveys"] .post-cover-cap,
  .post[data-slug="wifi-surveys"] .post-cover-cap { right: max(var(--gutter), calc((100vw - var(--container)) / 2 - 8px)); }
}


/* 2 Layout ------------------------------------------------------------------ */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.post-rail { display: none; }

/* the body is its own grid: a reading column CENTRED in the space it has, with
   figures, diagrams, videos and tables breaking out evenly on both sides (POST-NOTES
   "WIDE"). On desktop that space is everything right of the contents rail, so the
   text sits in the middle of it and the pictures run about 900px wide. */
.post-body.prose {
  --flow: 1.2em;
  max-width: none;
  display: grid;
  grid-template-columns: [wide-start content-start] minmax(0, 1fr) [content-end wide-end];
  padding-block: clamp(2.25rem, 1.4rem + 3vw, 4.5rem) 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.post-body > * { grid-column: content; min-width: 0; }
.post-toc-inline, .post-end { width: 100%; }

@media (min-width: 720px) {
  .post-body.prose {
    font-size: 1.125rem;
    grid-template-columns: [wide-start] minmax(0, 1fr) [content-start] minmax(0, var(--post-col)) [content-end] minmax(0, 1fr) [wide-end];
  }
  .post-body > .wide, .post-body > figure.diagram, .post-body > figure.video, .post-body > .table-wrap.wide { grid-column: wide; }
  .post-toc-inline, .post-end { max-width: var(--post-col); margin-inline: auto; }
}

@media (min-width: 1100px) {
  .post-layout {
    grid-template-columns: [rail-start] var(--post-rail) [rail-end] var(--post-gap) [main-start] minmax(0, 1fr) [main-end];
  }
  .post-rail { display: block; grid-column: rail; grid-row: 1 / span 3; }
  .post-toc-inline, .post-body, .post-end { grid-column: main; }
  .post-toc-inline { display: none !important; }
}


/* 3 Rail ---------------------------------------------------------------------- */
/* The rail is one compact column: reading progress, the contents, then the call
   card straight under them (r12: no dead gap between the contents and the card). */
.post-rail-inner {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  margin: calc(clamp(2.25rem, 1.4rem + 3vw, 4.5rem) - 6px) -6px 0;
  padding: 6px;
  max-height: calc(100vh - var(--header-h) - 3.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.post-rail-top { display: grid; gap: 1.75rem; }

/* signal meter: the logo's five steps, lit as the article is read */
.post-meter { display: flex; align-items: center; gap: .75rem; }
.post-meter-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; flex: none; }
.post-meter-bars i { display: block; width: 6px; border-radius: 2px; background: var(--rule-strong); transition: background-color .35s ease; }
.post-meter-bars i:nth-child(1) { height: 20%; }
.post-meter-bars i:nth-child(2) { height: 40%; }
.post-meter-bars i:nth-child(3) { height: 60%; }
.post-meter-bars i:nth-child(4) { height: 80%; }
.post-meter-bars i:nth-child(5) { height: 100%; }
.post-meter-bars i.is-on { background: var(--lime-500); }
.post-meter-text { font-size: .9375rem; font-weight: 500; color: var(--toc-ink); font-variant-numeric: tabular-nums; }

/* contents */
.post-toc-label { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy-900); margin-bottom: .7rem; }
.post-toc-list { list-style: none; margin: 0; padding: 0; }
.post-rail .post-toc-list { border-left: 2px solid var(--rule); }
.post-toc-list a {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  align-items: baseline;
  padding: .45rem 0 .45rem .9rem;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--toc-ink);
  text-decoration: none;
  text-wrap: pretty;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.post-toc-num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--slate); }
.post-rail .post-toc-list a { margin-left: -2px; border-left: 2px solid transparent; }
.post-toc-list a:hover { color: var(--navy-900); }
.post-toc-list a[aria-current="true"] { color: var(--navy-900); font-weight: 600; }
.post-toc-list a[aria-current="true"] .post-toc-num { color: var(--lime-ink); }
.post-rail .post-toc-list a[aria-current="true"] { border-left-color: var(--navy-900); }

/* call card: a navy tile with the service, the phone number and a real button,
   so it reads as the way to act, not as a footnote */
.post-rail-cta {
  flex: none;
  display: grid;
  justify-items: start;
  gap: .3rem;
  padding: 1.2rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, #16406A 0%, rgba(22, 64, 106, 0) 60%),
    var(--navy-900);
  color: var(--white);
}
.post-rail-cta-title {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 32px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  text-decoration: none;
}
.post-rail-cta-title .icon { flex: none; width: 1.05em; height: 1.05em; color: var(--lime-500); transition: transform var(--dur-fast) var(--ease-out); }
.post-rail-cta-title:hover .icon { transform: translateX(3px); }
.post-rail-cta-text { font-size: .875rem; line-height: 1.45; color: var(--fog); }
.post-rail-tel {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  text-decoration: none;
}
.post-rail-tel .icon { width: 18px; height: 18px; color: var(--lime-500); }
.post-rail-tel:hover { text-decoration: underline; text-decoration-color: var(--lime-500); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.post-rail-cta .btn { margin-top: .2rem; }


/* 4 Inline contents (phones and tablets) ------------------------------------- */
.post-toc-inline {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--white);
}
.post-toc-inline summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.post-toc-inline summary::-webkit-details-marker { display: none; }
.post-toc-count { font-size: .875rem; font-weight: 500; color: var(--slate); font-variant-numeric: tabular-nums; }
.post-toc-inline summary .icon { margin-left: auto; transition: transform var(--dur-fast) ease; }
.post-toc-inline[open] summary .icon { transform: rotate(180deg); }
.post-toc-inline .post-toc-list { padding: 0 .5rem .6rem; border-top: 1px solid var(--rule); }
.post-toc-inline .post-toc-list a { min-height: 44px; align-items: center; padding: .55rem .5rem; font-size: .9375rem; border-radius: var(--radius-sm); }
.post-toc-inline + .post-body.prose { padding-top: clamp(1.75rem, 1rem + 2vw, 2.5rem); }


/* post.js moves the disclosure into the article after the opening paragraph on
   phones, so the first screen reads: headline, picture, opening, contents */
.post-body > .post-toc-inline { margin-top: 1.75rem; }
.post-body > .post-toc-inline + * { margin-top: 1.75rem; }
.post-toc-inline .post-toc-list li + li { margin-top: 0; }
.post-toc-inline .post-toc-list { list-style: none; }

/* 5 Body refinements ------------------------------------------------------------ */
.post-body h2 {
  margin-top: 2.4em;
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
}
.post-body h3 { margin-top: 1.9em; }
/* "1. Coverage": post.js lifts the writer's number into a navy tile, echoing the
   DW tile in the logo (the full stop stays, visually hidden, for screen readers) */
.post-h-num {
  display: inline-block;   /* not grid/flex: the number and its hidden full stop stay one run of text */
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  margin-right: .55em;
  border-radius: .34em;
  background: var(--navy-900);
  color: var(--lime-300);
  font-family: var(--font-display);
  font-size: .6em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  letter-spacing: 0;
  vertical-align: .3em;
}
.post-h-dot { display: inline-block; width: 0; overflow: hidden; vertical-align: top; }
.post-body h2 + *, .post-body h3 + * { margin-top: .65em; }
.post-body > :first-child { margin-top: 0; }
.post-body p.lead { font-size: 1.2em; line-height: 1.55; }
/* Values in running text (-67 dBm, 50%, 3 Mbps, channel 1, 6 and 11) are set in
   the body face, semibold with tabular figures: they stand out as the numbers to
   remember without grey code chips breaking the reading rhythm. The mono voice is
   kept for the instruments, inside the Fig. diagrams only. */
.post-body .readout {
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  color: var(--fg);
  white-space: nowrap;
}
.post-body ul > li::marker { color: var(--lime-ink); font-size: 1.1em; }
/* list numbers and step badges in the text faces too (site.css sets them in mono) */
.post-body ol > li::marker { font-family: var(--font-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.post-body ol.steps > li::before { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.post-body li { padding-left: .2em; }
.post-body blockquote {
  position: relative;
  padding: 1.6em 1.6em 1.4em 3.4em;
  border-radius: var(--radius-lg);
}
.post-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: .5em;
  top: .25em;
  font-family: var(--font-display);
  font-size: 3.2em;
  font-weight: 700;
  line-height: 1;
  color: var(--lime-ink-deep);
}
.post-body aside.note { padding: 1.15em 1.35em; border-radius: var(--radius-lg); }
.post-body figure { margin-top: 2.25em; }
.post-body figure img { border-radius: var(--radius-lg); }
.post-body figure.diagram .pan, .post-body figure.shot img { border-radius: var(--radius); }
.post-body figure .pan img { border-radius: 0; }
.post-body figure.video .yt { border-radius: var(--radius-lg); }
.post-body .table-wrap { border-radius: var(--radius); }
.post-body hr { margin-block: 3em; }

/* term lists (specs, survey types, Wi-Fi generations) read as a ruled sheet */
.post-body dl { border-top: 1px solid var(--rule-strong); }
.post-body dl > dt { padding-top: .8em; font-family: var(--font-display); font-weight: 700; color: var(--fg); }
.post-body dl > dd { margin: .15em 0 0; padding-bottom: .8em; border-bottom: 1px solid var(--rule); color: var(--fg); }
@media (min-width: 560px) {
  .post-body dl { display: grid; grid-template-columns: minmax(7.5rem, 30%) minmax(0, 1fr); column-gap: 1.5rem; }
  .post-body dl > dt { padding-bottom: .8em; border-bottom: 1px solid var(--rule); }
  .post-body dl > dd { margin: 0; padding-top: .8em; }
}

/* section ends get a touch more air before the article sign-off */
.post-body > :last-child { margin-bottom: 0; }


/* Each numbered factor opens the same way: what to aim for and what usually
   breaks it, restated from the post's own summary table by post.js (r12 critic:
   "give every factor the same structure, a target chip at the section head"). */
.post-body > .post-aim {
  display: grid;
  gap: 1px;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rule);
  box-shadow: 0 0 0 1px var(--rule);
  font-size: 1rem;
  line-height: 1.5;
}
.post-aim > div { padding: .8rem 1rem .85rem; background: var(--white); }
.post-aim > .is-aim { background: #EEF4E3; }
.post-body .post-aim dt { padding: 0; border: 0; font-family: var(--font-text); font-size: .8125rem; font-weight: 600; color: var(--slate); }
.post-body .post-aim .is-aim dt { color: var(--lime-ink-deep); }
.post-body .post-aim dt .pf-ic { display: inline-block; width: 1rem; height: 1rem; margin: 0 .35rem 0 0; vertical-align: -.15rem; }
.post-body .post-aim dd { margin: .15rem 0 0; padding: 0; border: 0; font-weight: 500; color: var(--navy-900); text-wrap: pretty; }
.post-aim .is-aim dd { font-weight: 600; }
@media (min-width: 560px) {
  .post-body > .post-aim { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.post-body > h2 + .post-aim { margin-top: 1.1rem; }
.post-body > .post-aim + * { margin-top: 1.5rem; }

/* A list whose every item opens with a bold sentence ("The device has to
   answer. A scanner has less...") reads as a set of points, not a run of grey
   text: post.js marks it and it becomes a grid of cards in the wide column. */
.post-body > ul.post-points { display: grid; gap: .75rem; padding: 0; list-style: none; }
.post-body > ul.post-points > li {
  margin: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.6;
}
.post-body > ul.post-points > li::marker { content: none; }
.post-body > ul.post-points > li > strong:first-child {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
}
@media (min-width: 720px) {
  .post-body > ul.post-points { grid-column: wide; gap: 1rem; }
  .post-body > ul.post-points.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-body > ul.post-points.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-body > ul.post-points.cols-2 > li.span-all { grid-column: 1 / -1; }
  /* five points: three over two, the second row sharing the full width (no empty cell) */
  .post-body > ul.post-points.cols-3.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .post-body > ul.post-points.cols-3.n5 > li { grid-column: span 2; }
  .post-body > ul.post-points.cols-3.n5 > li:nth-child(n+4) { grid-column: span 3; }
  .post-body > ul.post-points > li { padding: 1.35rem 1.5rem 1.45rem; }
}
.post-body > ul.post-points + * { margin-top: 1.6rem; }

/* 5b Figures ------------------------------------------------------------------- */
/* post.js draws one diagram per section from the numbers the writer's own text
   states (and leaves it out if the text stops stating them). Each sits right
   under its heading and runs into the wide column, so the right of the page
   carries the pictures. Navy plates are the instruments (coverage, SNR,
   channels), paper plates the spec sheets (speed, security). */
.post-body > .post-fig { margin-top: 2.75rem; }
.post-body > h2 + .post-fig { margin-top: 1.35rem; }
.post-body > .post-fig + * { margin-top: 2rem; }
.post-fig-plate {
  position: relative;
  padding: clamp(1.15rem, .6rem + 1.6vw, 2rem);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  line-height: 1.5;
}
.post-fig-navy .post-fig-plate {
  --fg: var(--white);
  --fg-muted: var(--fog);
  background:
    radial-gradient(110% 80% at 0% 0%, #123A63 0%, rgba(18, 58, 99, 0) 58%),
    var(--navy-950);
  color: var(--white);
}
.post-fig-paper .post-fig-plate { --fg: var(--navy-900); --fg-muted: var(--slate); background: var(--paper); color: var(--navy-900); }
.post-fig-head { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem 1.25rem; margin-bottom: clamp(1rem, .75rem + .9vw, 1.5rem); }
.post-fig-title { font-family: var(--font-display); font-size: clamp(1.0625rem, .96rem + .45vw, 1.3125rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.post-fig-no { flex: none; font-size: .8125rem; color: var(--fg-muted); }
.post-fig figcaption { max-width: var(--post-col); }
.post-fig b { font-weight: 600; }
/* inside a figure, values keep the instrument voice (mono, slashed zero) */
.post-body .post-fig .readout { font-family: var(--font-mono); font-size: .94em; font-weight: 500; font-variant-numeric: tabular-nums slashed-zero; color: inherit; }
/* the figures' lists are layouts, not prose lists: no prose indent (site.css .prose ul) */
.post-body .post-fig ul.pf-key, .post-body .post-fig ul.pf-ssids { padding-left: 0; }
.post-body .post-fig li { padding-left: 0; }
.post-body .post-fig li + li { margin-top: 0; }

.pf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-svg text { font-family: var(--font-mono); font-size: 12px; font-weight: 500; fill: #B9C6D4; font-variant-numeric: tabular-nums slashed-zero; }
.pf-art { width: 100%; min-height: 10rem; }

/* key: swatch + value + what it means */
.pf-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr)); gap: .85rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.38; }
.pf-key li { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.pf-key li > span:last-child { color: var(--fg-muted); }
.pf-key b { display: block; color: var(--fg); }
.pf-sw { width: 1.05rem; height: 1.05rem; margin-top: .12rem; border-radius: 4px; background: var(--sw, transparent); }
.pf-sw-dead { background: repeating-linear-gradient(45deg, rgba(185, 198, 212, .45) 0 1.5px, rgba(7, 27, 49, 1) 1.5px 5px); box-shadow: inset 0 0 0 1px rgba(185, 198, 212, .4); }
.pf-sw-ap { border-radius: 50%; background: radial-gradient(circle, #88AE3E 0 24%, #FFFFFF 27% 100%); box-shadow: 0 0 0 2px #071B31, 0 0 0 3px rgba(207, 223, 178, .55); transform: scale(.82); }
.pf-sw-line { box-shadow: inset 0 0 0 1.5px rgba(185, 198, 212, .7); }
.pf-sw-dash { border: 1.5px dashed rgba(185, 198, 212, .9); }
.pf-sw-noise { background: rgba(143, 163, 184, .45); box-shadow: inset 0 2px 0 #B9C6D4; }
.pf-sw-target { height: 0; margin-top: .55rem; border-top: 2px dashed #CFDFB2; border-radius: 0; }

/* Fig: coverage on a floor plan */
.pf-cov { display: grid; gap: 1.25rem 2rem; }
.pf-cov-plan { position: relative; }
.pf-plan { aspect-ratio: 600 / 330; }
.pf-hatch-line { stroke: #B9C6D4; stroke-opacity: .2; stroke-width: 1.6; }
.pf-rack { fill: #0B2440; stroke: #B9C6D4; stroke-opacity: .5; stroke-width: 1; }
.pf-bay { stroke: #B9C6D4; stroke-opacity: .28; stroke-width: 1; }
.pf-desk { fill: rgba(7, 27, 49, .35); stroke: #B9C6D4; stroke-opacity: .32; }
.pf-wall { fill: none; stroke: #DCE4EC; stroke-opacity: .9; stroke-width: 3; stroke-linecap: square; }
.pf-wall-in { stroke-width: 2; stroke-linecap: butt; }
.pf-dock { stroke: #B9C6D4; stroke-opacity: .55; stroke-width: 3; }
.pf-ap-body { fill: #FFFFFF; stroke: #071B31; stroke-width: 2; }
.pf-ap-led { fill: #88AE3E; }
.pf-ping { fill: none; stroke: #CFDFB2; stroke-width: 1.5; opacity: 0; }
.pf-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  background: rgba(7, 27, 49, .88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  white-space: nowrap;
}
@media (min-width: 760px) {
  .pf-cov { grid-template-columns: minmax(0, 1fr) 13rem; align-items: center; }
  .pf-cov .pf-key { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* Fig: speed (three cells on a paper plate) */
.pf-cells { display: grid; gap: .75rem; }
.pf-cell {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(12, 43, 77, .07);
}
.pf-cell-label { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--navy-900); }
.pf-cell-note { margin-top: auto; font-size: .875rem; line-height: 1.45; color: var(--slate); }
.pf-cell-note b { color: var(--navy-900); }
.pf-tablets { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; max-width: 15rem; }
.pf-tablets i { display: block; aspect-ratio: 3 / 4; border: 2px solid var(--navy-900); border-radius: 3px; background: linear-gradient(180deg, #CFDFB2, #88AE3E); }
.pf-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; font-size: 1.0625rem; color: var(--navy-900); }
.post-body .pf-sum strong.readout { font-size: 2.125rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.pf-util { position: relative; display: flex; height: 3rem; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(12, 43, 77, .1); }
.pf-util > span:not(.pf-util-mark) { flex: 1; display: flex; align-items: center; padding-inline: .7rem; }
.pf-util i { font-size: .8125rem; font-style: normal; font-weight: 600; line-height: 1.2; }
.pf-util-ok { background: linear-gradient(90deg, #E7EFD8, #A5C16C); color: var(--navy-900); }
.pf-util-busy { justify-content: flex-end; background: repeating-linear-gradient(135deg, rgba(74, 90, 107, .16) 0 5px, rgba(74, 90, 107, .05) 5px 10px); color: var(--slate); }
.pf-util-mark { position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--navy-900); }
.pf-util-scale { display: flex; justify-content: space-between; margin-top: -.45rem; font-size: .75rem; color: var(--slate); }
.post-body dl.pf-targets { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; margin: 0; border-top: 0; }
.pf-targets > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.pf-targets > div:first-child { padding-top: 0; }
.pf-targets dt { font-size: .875rem; color: var(--slate); }
.pf-targets dd { margin: 0; font-size: 1rem; color: var(--navy-900); }
@media (min-width: 760px) { .pf-cells { grid-template-columns: 1.2fr 1fr 1fr; } }

/* Fig: security (WPA2 against WPA3, and the SSID split) */
.pf-sec { display: grid; gap: .75rem; }
.pf-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(12, 43, 77, .07);
  font-size: .9375rem;
  line-height: 1.4;
}
.pf-matrix th, .pf-matrix td { padding: .75rem .9rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.pf-matrix tbody tr:last-child > * { border-bottom: 0; }
.pf-matrix thead th { padding-block: .7rem; font-size: .9375rem; font-weight: 500; color: var(--navy-900); }
.pf-matrix tbody th { font-weight: 500; color: var(--navy-900); }
.pf-matrix tr > :not(:first-child) { width: 4.25rem; text-align: center; }
.pf-matrix tr > :last-child { background: rgba(136, 174, 62, .1); }
.pf-matrix thead tr > :last-child { border-top-right-radius: var(--radius); }
.pf-matrix tbody tr:last-child > :last-child { border-bottom-right-radius: var(--radius); }
.pf-matrix td .pf-ic { margin-inline: auto; }
.pf-ssids { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.post-body .post-fig .pf-ssids li { padding: .9rem 1.05rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px rgba(12, 43, 77, .07); font-size: .875rem; line-height: 1.42; color: var(--slate); }
.pf-ssids b { display: block; margin-bottom: .15rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy-900); }
@media (min-width: 760px) { .pf-sec { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 1rem; } }

/* icons */
.pf-ic { display: block; flex: none; width: 1.3rem; height: 1.3rem; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-ic-yes circle { fill: var(--lime-ink-deep); }
.pf-ic-yes path { stroke: #FFFFFF; }
.pf-ic-no circle { fill: none; stroke: #C9D3DD; stroke-width: 1.5; }
.pf-ic-no path { stroke: var(--slate); }
.post-fig-navy .pf-ic-yes circle { fill: #88AE3E; }
.post-fig-navy .pf-ic-yes path { stroke: #071B31; }
.pf-ic-warn circle { fill: none; stroke: #B9C6D4; stroke-width: 1.5; }
.pf-ic-warn path { stroke: #FFFFFF; stroke-width: 2.2; }

/* Fig: SNR */
.pf-snr .pf-col { fill: rgba(255, 255, 255, .035); }
.pf-grid { stroke: #B9C6D4; stroke-opacity: .14; stroke-width: 1; }
.pf-svg .pf-axis { font-size: 11px; fill: #B9C6D4; fill-opacity: .9; }
.pf-svg .pf-axis-unit { fill-opacity: .7; }
.pf-sig { fill: #88AE3E; }
.pf-svg .pf-lab { font-size: 12px; fill: #DCE4EC; }
.pf-svg .pf-lab-sig { fill: #A5C16C; }
.pf-svg .pf-lab-noise { fill: #FFFFFF; }
.pf-target { stroke: #CFDFB2; stroke-opacity: .75; stroke-width: 1.25; stroke-dasharray: 5 4; }
.pf-noise { fill: #8FA3B8; fill-opacity: .3; }
.pf-noise-edge { fill: none; stroke: #B9C6D4; stroke-opacity: .75; stroke-width: 1.25; stroke-linejoin: round; }
.pf-dim { fill: none; stroke: #FFFFFF; stroke-opacity: .8; stroke-width: 1.25; }
.pf-svg .pf-val { font-size: 26px; font-weight: 500; fill: #FFFFFF; letter-spacing: -0.02em; }
.pf-svg .pf-val.is-ok { fill: #A5C16C; }
.pf-svg.is-narrow .pf-val { font-size: 17px; }
.pf-svg.is-narrow .pf-lab { font-size: 11px; }
.pf-svg.is-narrow .pf-axis { font-size: 11px; }
.pf-snr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .9rem; font-size: .875rem; line-height: 1.38; }
.pf-snr-cols p { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .55rem; align-items: start; color: var(--fog); }
.pf-snr-cols b { display: block; color: var(--white); }
.pf-snr-cols .is-ok span { color: var(--lime-300); }

/* Fig: 2.4 GHz channels */
.pf-ch-fill { fill: url(#pf-chan-g); }
.pf-ch { fill: none; stroke: #B9C6D4; stroke-opacity: .55; stroke-width: 1.25; }
.pf-ch-us { stroke-dasharray: 4 3; stroke-opacity: .85; }
.pf-ch.pf-ch-on { stroke: #CFDFB2; stroke-opacity: 1; stroke-width: 1.75; }
.pf-base { stroke: #B9C6D4; stroke-opacity: .45; stroke-width: 1; }
.pf-svg .pf-chn { font-size: 12px; fill: #B9C6D4; fill-opacity: .85; }
.pf-svg .pf-chn.is-on { fill: #FFFFFF; fill-opacity: 1; font-weight: 600; }
.pf-svg.is-narrow .pf-chn { font-size: 11px; }
.pf-key-row { margin-top: 1.15rem; }
@media (min-width: 760px) { .pf-key-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* phones: the plates run edge to edge, like the cover above them */
@media (max-width: 719px) {
  .post-body > .post-fig { margin-inline: calc(-1 * var(--gutter)); }
  .post-fig-plate { padding: 1.25rem var(--gutter) 1.35rem; border-radius: 0; }
  .post-fig figcaption { padding-inline: var(--gutter); }
}


/* 5c Tables --------------------------------------------------------------------- */
/* Navy header row, the first column set in the display face. From 720px they take
   the wide column; below 600px post.js turns simple two or three column tables into
   labelled cards (wide or many-column tables keep scrolling inside themselves). */
.post-body .table-wrap { border-color: var(--rule-strong); }
.post-body .table-wrap :is(th, td) { padding: .85rem 1.05rem; }
.post-body .table-wrap thead th { background: var(--navy-900); color: var(--white); font-size: .875rem; font-weight: 600; border-bottom: 0; }
.post-body .table-wrap tbody > tr > :first-child { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); }
.post-body .table-wrap tbody tr:nth-child(even) > * { background: #FAFBF9; }
@media (min-width: 720px) {
  .post-body > .table-wrap { grid-column: wide; }
}
@media (max-width: 599px) {
  .post-body .table-wrap.is-stack { overflow: visible; border: 0; border-radius: 0; }
  .post-body .is-stack > table { display: block; min-width: 0; }
  .post-body .is-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .post-body .is-stack tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .post-body .is-stack tbody tr { min-width: 0; }
  .post-body .is-stack .readout { white-space: normal; }
  .post-body .is-stack tbody tr { display: block; padding: .85rem 1rem .9rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--white); }
  .post-body .is-stack tbody tr > * { display: block; padding: 0; border: 0; background: none !important; }
  .post-body .is-stack tbody tr > :first-child { font-size: 1.0625rem; line-height: 1.3; }
  .post-body .is-stack tbody tr > :not(:first-child) { margin-top: .35rem; line-height: 1.5; }
  .post-body .is-stack tbody tr > :not(:first-child)::before {
    content: attr(data-label) ": ";
    font-size: .875em;
    font-weight: 600;
    color: var(--slate);
  }
}


/* 6 Article end, CTA, related ------------------------------------------------------ */
.post-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.post-signoff { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.post-signoff .post-avatar { box-shadow: 0 0 0 1px var(--rule-strong); }
.post-signoff p { margin: 0; line-height: 1.4; }
.post-signoff-name { display: block; font-weight: 600; color: var(--fg); }
.post-signoff-name .post-author-role { color: var(--fg-muted); font-weight: 400; }
.post-signoff-meta { display: block; margin-top: .1rem; font-size: .875rem; color: var(--fg-muted); }
.post-signoff-meta time { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }

.post-cta { margin-top: clamp(3.5rem, 2rem + 5vw, 7rem); }
.post-cta-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 2.25rem 3rem;
  padding: clamp(1.75rem, 1rem + 3.2vw, 4rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 120% at 100% 0%, #16406A 0%, rgba(22, 64, 106, 0) 55%),
    var(--navy-900);
}
.post-cta-copy { max-width: 40rem; }
.post-cta-title { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.625rem); line-height: 1.1; letter-spacing: -0.018em; }
.post-cta-copy p { margin-top: .9rem; max-width: 44ch; color: var(--fog); font-size: 1.0625rem; }
.post-cta-copy .btn-row { margin-top: 1.75rem; }
.post-cta-direct { display: grid; gap: .35rem 2rem; margin: 0; align-content: end; }
.post-cta-direct > div { display: grid; gap: 0; }
.post-cta-direct dt { font-size: .8125rem; font-weight: 500; color: var(--fog); }
.post-cta-direct dd { margin: 0; }
.post-cta-direct a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(136, 174, 62, .55);
  text-decoration-thickness: 2px;
  text-underline-offset: .28em;
  overflow-wrap: anywhere;
}
.post-cta-direct a:hover { text-decoration-color: var(--lime-500); }
@media (min-width: 640px) and (max-width: 959px) {
  .post-cta-direct { grid-template-columns: repeat(3, auto); justify-content: start; }
}
@media (min-width: 960px) {
  .post-cta-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .post-cta-direct { padding-left: 2.5rem; border-left: 1px solid rgba(255, 255, 255, .14); }
}

.post-more { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem) var(--section-y); }
/* card dates in the UI face, like the byline above (site.css sets them in mono) */
.post-more .post-card-meta time { font-family: var(--font-text); font-size: 1em; font-weight: 500; font-variant-numeric: tabular-nums; }
.post-more-head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.post-more-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }

/* Related cards show the same picture as the post they open (checklist tpl-related).
   post.js points them at assets/img/post/cover-<slug>; without JS the card template
   still names BLOG's card file, so the picture is swapped here (and the unredacted
   cnMaestro screen in BLOG's XE3-4 card is never shown under a post). */
.no-js .post-more .post-card-media img[src*="card-business-wifi-surveys-"] { content: url("../img/post/cover-business-wifi-surveys-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-common-wifi-mistakes-"] { content: url("../img/post/cover-common-wifi-mistakes-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-enhancing-business-operations-with-wifi-surveys-"] { content: url("../img/post/cover-enhancing-business-operations-with-wifi-surveys-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-essential-wifi-security-measures-for-your-business-"] { content: url("../img/post/cover-essential-wifi-security-measures-for-your-business-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-new-deployment-of-cambium-xe3-4-access-points-"] { content: url("../img/post/cover-new-deployment-of-cambium-xe3-4-access-points-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-solving-common-wifi-issues-"] { content: url("../img/post/cover-solving-common-wifi-issues-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-the-essential-guide-to-wifi-surveys-"] { content: url("../img/post/cover-the-essential-guide-to-wifi-surveys-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-the-evolution-of-wi-fi-from-wi-fi-1-ieee-802-11b-to-the-present-day-"] { content: url("../img/post/cover-the-evolution-of-wi-fi-from-wi-fi-1-ieee-802-11b-to-the-present-day-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-understanding-wifi-channels-"] { content: url("../img/post/cover-understanding-wifi-channels-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-what-defines-wifi-quality-"] { content: url("../img/post/cover-what-defines-wifi-quality-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-wifi-surveys-"] { content: url("../img/post/cover-wifi-surveys-800.webp"); }
.no-js .post-more .post-card-media img[src*="card-wifi-troubleshooting-guide-"] { content: url("../img/post/cover-wifi-troubleshooting-guide-800.webp"); }


/* 7 Reading progress (phones and tablets; the rail meter does this on desktop) -- */
.post-progress { display: none; }
@media (max-width: 1099px) {
  .js .post-progress {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 89;
    height: 3px;
    pointer-events: none;
  }
  .post-progress-fill {
    display: block;
    height: 100%;
    background: var(--lime-500);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
}


/* 8 Motion, reduced motion, print ------------------------------------------------- */
/* The headline settles in once on load (never waits on an observer); the cover
   eases out of a slight push-in. Both are skipped for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .post-hero-copy > * { animation: post-rise .7s var(--ease-out) both; }
  .js .post-hero-copy > :nth-child(2) { animation-delay: .05s; }
  .js .post-hero-copy > :nth-child(3) { animation-delay: .1s; }
  .js .post-hero-copy > :nth-child(4) { animation-delay: .15s; }
  .js .post-cover img { animation: post-settle 1.6s var(--ease-out) both; }
}
@media (prefers-reduced-motion: no-preference) {
  .pf-ping { transform-box: fill-box; transform-origin: center; animation: pf-ping 3.6s var(--ease-out) infinite; animation-delay: calc(var(--i, 0) * .7s); }
}
@keyframes pf-ping { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes post-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes post-settle { from { transform: scale(1.035); } }

@media print {
  .post-rail, .post-toc-inline, .post-progress, .post-cta, .post-more, .post-back { display: none !important; }
  .post-hero { background: none !important; color: #000 !important; min-height: 0 !important; }
  .post-title, .post-author { color: #000 !important; }
  .post-cover { position: static !important; width: 100% !important; }
  .post-cover img { -webkit-mask-image: none !important; mask-image: none !important; height: auto !important; aspect-ratio: auto !important; }
}