/* ============================================================
   HM 2026 — "The Trade" component styles
   Design system tokens live in theme.json; this file carries the
   magazine-specific components (header, cards, category modules,
   single article, sidebar, ad slots, footer).
   ============================================================ */

:root{
  --hm-bg:#fbfaf8; --hm-surface:#f1f0ec; --hm-ink:#14181a; --hm-body:#33383a;
  --hm-mut:#71767a; --hm-line:#e2e1dd; --hm-cerise:#c51e5d;
  --hm-mono:ui-monospace,Menlo,Consolas,monospace;
  --hm-display:"Optima","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* frame borders like the mockup — drawn as an overlay so full-bleed images never cross them */
.wp-site-blocks{max-width:1300px;margin-inline:auto;background:var(--hm-bg);position:relative}
.wp-site-blocks::after{content:"";position:absolute;inset:0;border-inline:1px solid var(--hm-line);pointer-events:none;z-index:4}

/* ---------- utility labels ---------- */
.hm-kicker,.hm-meta{font-family:var(--hm-mono);letter-spacing:.14em;text-transform:uppercase}
.hm-kicker{font-size:.625rem;color:var(--hm-cerise)}
.hm-meta{font-size:.625rem;color:var(--hm-mut);font-variant-numeric:tabular-nums}

/* category eyebrow — filled badge (matches the hero tag) */
.hm-cat{display:inline-block;background:var(--hm-cerise);color:#fff;font-family:var(--hm-mono);
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;
  text-decoration:none;line-height:1.1}
.hm-cat:hover{background:var(--hm-ink)}
/* spacing when the badge sits above a title */
.hm-cards .hm-cat,.hm-featstack .hm-cat,.hm-feature .hm-cat{margin-bottom:10px}
/* card grids (Latest features etc.): plain cerise text, NOT a full-width badge */
.hm-cards .hm-cat{background:transparent;color:var(--hm-cerise);padding:0;align-self:flex-start}
.hm-cards .hm-cat:hover{background:transparent;text-decoration:underline}

/* ---------- top bar ---------- */
.hm-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px var(--wp--preset--spacing--40);border-bottom:2px solid var(--hm-ink);
  font-family:var(--hm-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-mut)}
.hm-topbar b{color:var(--hm-cerise)}

/* ---------- masthead / header ---------- */
.hm-masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:13px;margin-block-start:0 !important}   /* kill the 24px topbar->masthead gap so above-logo == below-logo */
.hm-masthead .wp-block-site-logo{margin:0 auto 0 0}   /* hard left */
.hm-masthead .wp-block-site-logo img{width:115px;height:auto;max-width:none}
/* --- KILL the 24px block-gaps that dominate the title-bar height --- */
/* (padding tweaks were invisible because these gaps, not padding, made the space) */
.hm-header{--wp--style--block-gap:0px;border-bottom:1px solid var(--hm-line)}   /* topbar & masthead sit flush; pale rule encloses the navbar (bold rule up top from topbar) on every template */
.wp-site-blocks > main{margin-block-start:0}    /* no gap between header and hero */
.hm-masthead .wp-block-navigation{font-family:var(--hm-display);font-weight:600;font-size:13px}
.hm-masthead .wp-block-navigation a{color:var(--hm-ink)}
.hm-masthead .wp-block-navigation a:hover{color:var(--hm-cerise)}

/* ---------- section headers ---------- */
.hm-sechead{display:flex;align-items:center;gap:14px;
  padding-bottom:16px;border-bottom:2px solid var(--hm-ink);margin-bottom:24px}
.hm-sechead::before{content:"";width:14px;height:14px;background:var(--hm-cerise);flex:0 0 auto}
.hm-sechead h2,.hm-sechead h3{margin:0;font-size:clamp(20px,2.6vw,27px)}
.hm-sechead .hm-viewall{margin-left:auto;font-family:var(--hm-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hm-cerise);text-decoration:none}

/* ---------- card grid (Query Loop → is-style cards) ---------- */
.hm-cards .wp-block-post{display:flex;flex-direction:column}
.hm-cards .wp-block-post-featured-image{margin-bottom:14px;border:1px solid var(--hm-line);overflow:hidden}
.hm-cards .wp-block-post-featured-image img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .5s ease}
.hm-cards .wp-block-post-featured-image:hover img{transform:scale(1.04)}
.hm-cards .wp-block-post-terms{font-family:var(--hm-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hm-mut);margin:0 0 8px}
.hm-cards .wp-block-post-title{font-size:19px;line-height:1.12;margin:0 0 8px}
.hm-cards .wp-block-post-title a{color:var(--hm-ink);text-decoration:none}
.hm-cards .wp-block-post-title a:hover{color:var(--hm-cerise)}
.hm-cards .wp-block-post-excerpt{font-family:Georgia,serif;color:var(--hm-body);font-size:14px;line-height:1.5;margin:0}
.hm-cards .wp-block-post-excerpt__more-text{display:none}
.hm-cards .wp-block-post-date{font-family:var(--hm-mono);font-size:10px;letter-spacing:.08em;
  color:var(--hm-mut);margin-top:10px;font-variant-numeric:tabular-nums}

/* ---------- category lead + list module ---------- */
.hm-lead .wp-block-post-featured-image{border:1px solid var(--hm-line);margin-bottom:16px}
.hm-lead .wp-block-post-featured-image img{aspect-ratio:16/9;object-fit:cover;width:100%}
.hm-lead .wp-block-post-title{font-size:clamp(21px,2.5vw,26px);line-height:1.05;margin:0 0 10px}
.hm-lead .wp-block-post-title a{color:var(--hm-ink);text-decoration:none}
.hm-lead .wp-block-post-excerpt{font-family:Georgia,serif;color:var(--hm-body);font-size:15px;line-height:1.5}
.hm-list .wp-block-post{display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:16px 0;border-top:1px solid var(--hm-line)}
.hm-list .wp-block-post:first-child{border-top:0;padding-top:0}
.hm-list .wp-block-post-title{font-size:16px;line-height:1.2;margin:0}
.hm-list .wp-block-post-title a{color:var(--hm-ink);text-decoration:none}
.hm-list .wp-block-post-title a:hover{color:var(--hm-cerise)}
.hm-list .wp-block-post-date{font-family:var(--hm-mono);font-size:10px;color:var(--hm-mut);margin-top:5px}

/* ---------- sidebar widgets ---------- */
.hm-rail{display:flex;flex-direction:column;gap:30px}
.hm-widget .wp-block-heading{display:flex;align-items:center;gap:10px;font-size:15px;text-transform:uppercase;
  margin:0 0 16px;padding-bottom:14px;border-bottom:2px solid var(--hm-ink)}
.hm-widget .wp-block-heading::before{content:"";width:12px;height:12px;background:var(--hm-cerise);flex:0 0 auto}
/* homepage band 1: line the first rail-widget underline up with the adjacent section
   header ("Technology" ↔ "The wire") — the section head is taller, so match its height */
.hm-band .hm-rail .hm-widget:first-child .wp-block-heading{min-height:46px;box-sizing:border-box}
/* compact sidebar list (category widgets) — keeps widgets short so the ad sits sandwiched */
/* kill the query-loop flow block-gap (a 24px margin-top on each row that dumped all the
   white space below each item, pushing the divider hard against the next image) — spacing
   now comes only from the symmetric row padding, so top & bottom of the divider match */
.hm-mini .wp-block-post{display:grid;grid-template-columns:105px 1fr;gap:14px;align-items:center;
  padding:11px 0;margin-block-start:0;border-top:1px solid var(--hm-line)}
.hm-mini .wp-block-post:first-child{border-top:0;padding-top:0}
/* zero the featured-image's default ~17px block-gap margin-bottom: it inflated the image's
   grid-cell box so align-items:center left the picture top-heavy (dead space below it) */
.hm-mini .wp-block-post-featured-image{border:1px solid var(--hm-line);overflow:hidden;margin:0}
.hm-mini .wp-block-post-featured-image img{aspect-ratio:1/1;object-fit:cover;width:100%}
.hm-mini .wp-block-post-title{font-size:14px;line-height:1.18;margin:0}
.hm-mini .wp-block-post-title a{color:var(--hm-ink);text-decoration:none}
.hm-mini .wp-block-post-title a:hover{color:var(--hm-cerise)}

/* beneath-featured articles — large thumbnails filling the column */
.hm-featstack .wp-block-post{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;
  padding:24px 0;border-top:1px solid var(--hm-line)}
.hm-featstack .wp-block-post:first-child{border-top:0;padding-top:0}
.hm-featstack .wp-block-post-featured-image{border:1px solid var(--hm-line);overflow:hidden}
.hm-featstack .wp-block-post-featured-image img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .5s ease}
.hm-featstack .wp-block-post:hover .wp-block-post-featured-image img{transform:scale(1.03)}
.hm-featstack .wp-block-post-title{font-size:21px;line-height:1.1;letter-spacing:-.02em;margin:10px 0 8px}
.hm-featstack .wp-block-post-title a{color:var(--hm-ink);text-decoration:none}
.hm-featstack .wp-block-post-title a:hover{color:var(--hm-cerise)}
.hm-featstack .wp-block-post-excerpt{font-family:Georgia,serif;color:var(--hm-body);font-size:14px;line-height:1.5;margin:0 0 8px}
.hm-featstack .wp-block-post-excerpt__more-text{display:none}
.hm-featstack .wp-block-post-date{font-family:var(--hm-mono);font-size:10px;letter-spacing:.08em;color:var(--hm-mut)}
@media(max-width:620px){.hm-featstack .wp-block-post{grid-template-columns:1fr}}
/* when a featstack list follows the "second feature" (band 1 "The wire"), draw a divider
   above the first list item so the hero image + its title read as one unit, separate from
   the list — matches the thin rules between the list items below it */
.hm-feature + .hm-featstack{border-top:1px solid var(--hm-line);margin-top:28px;padding-top:4px}
.hm-feature + .hm-featstack .wp-block-post:first-child{padding-top:24px}

/* ---------- header search (magnifier that expands to a field) ---------- */
.hm-masthead__right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hm-search{margin:0}
.hm-search .wp-block-search__button{background:none;border:0;padding:4px;color:var(--hm-ink);cursor:pointer;min-width:0}
.hm-search .wp-block-search__button:hover{background:none;color:var(--hm-cerise)}
.hm-search .wp-block-search__button svg{width:20px;height:20px;fill:currentColor}
.hm-search .wp-block-search__input{border:1px solid var(--hm-line);border-radius:0;background:#fff;color:var(--hm-ink);
  font-family:var(--hm-mono);font-size:12px;letter-spacing:.04em;padding:9px 11px}
.hm-search .wp-block-search__input:focus{outline:1px solid var(--hm-cerise);outline-offset:-1px}

/* ---------- advertisement zones ---------- */
.hm-ad{display:flex;flex-direction:column;align-items:center;gap:8px;padding-block:36px}
.hm-ad__label{font-family:var(--hm-mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#a7aaa6}
.hm-ad img{width:100%;height:auto;display:block;border:1px solid var(--hm-line)}
.hm-ad a{display:block;line-height:0;width:100%}
.hm-ad--banner a{max-width:1180px;margin-inline:auto}
.hm-ad--banner img{max-width:100%}
.hm-ad--vert{padding:0}
/* hide ad slots that render empty (e.g. before AdRotate is populated) so there's no orphan
   "Advertisement" label; the slot reappears automatically once an ad actually serves */
.hm-ad--vert:not(:has(img)):not(:has(iframe)),
.hm-ad--banner:not(:has(img)):not(:has(iframe)){display:none}

/* two distinctly-shaped rail slots so each holds a consistent asset (no mixed sizes):
   slot 1 = magazine-cover portrait (~2:3), slot 2 = tall strip (~1:2.5) */
.hm-ad--cover img{aspect-ratio:2/3;object-fit:cover;width:100%}
.hm-ad--strip img{aspect-ratio:1/2.5;object-fit:cover;width:100%}
.hm-ad__ph{width:100%;max-width:970px;min-height:120px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;background:var(--hm-surface);
  border:1px solid var(--hm-line);color:var(--hm-mut);font-family:var(--hm-mono);font-size:11px;letter-spacing:.1em}

/* ---------- hero (hm/featured slot=hero) — split text panel + large image ---------- */
.hm-hero{display:grid;grid-template-columns:1fr 1.08fr;align-items:stretch;border-bottom:1px solid var(--hm-line)}   /* top rule now comes from .hm-header, avoid doubling */
.hm-hero__text{padding:clamp(28px,4vw,58px) var(--wp--preset--spacing--40);
  display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--hm-line)}
.hm-hero__title{font-family:var(--hm-display);font-weight:800;color:var(--hm-ink);
  font-size:clamp(30px,3.7vw,52px);line-height:.98;letter-spacing:-.03em;margin:16px 0 14px}
.hm-hero__title a{color:var(--hm-ink);text-decoration:none}
.hm-hero__title a:hover{color:var(--hm-cerise)}
.hm-hero__dek{font-family:Georgia,serif;color:var(--hm-body);font-size:clamp(16px,1.5vw,19px);line-height:1.5;max-width:48ch;margin:0}
.hm-hero__meta{margin-top:22px;font-family:var(--hm-mono);font-size:11px;letter-spacing:.1em;color:var(--hm-mut)}
.hm-hero__media{display:block;line-height:0;overflow:hidden}
.hm-hero__media img{width:100%;height:100%;min-height:360px;object-fit:cover}
.hm-tag{align-self:flex-start;display:inline-block;background:var(--hm-cerise);color:#fff;font-family:var(--hm-mono);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
@media(max-width:820px){.hm-hero{grid-template-columns:1fr}.hm-hero__text{border-right:0;border-bottom:1px solid var(--hm-line)}.hm-hero__media img{min-height:240px}}

/* ---------- second feature (hm/featured slot=second) ---------- */
.hm-feature__img{display:block;border:1px solid var(--hm-line);margin-bottom:16px;overflow:hidden;line-height:0}
.hm-feature__img img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.hm-feature__img:hover img{transform:scale(1.03)}
.hm-feature__title{font-family:var(--hm-display);font-weight:800;font-size:clamp(24px,3vw,32px);
  line-height:1.02;letter-spacing:-.03em;margin:8px 0 10px}
.hm-feature__title a{color:var(--hm-ink);text-decoration:none}
.hm-feature__title a:hover{color:var(--hm-cerise)}
.hm-feature__dek{font-family:Georgia,serif;color:var(--hm-body);font-size:16px;line-height:1.55;margin:0 0 10px;max-width:60ch}

/* ---------- single-post page: article (left, widened) + rail (right) ---------- */
.hm-single{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(30px,3.2vw,48px);align-items:start;
  max-width:1300px;margin-inline:auto;padding-inline:var(--wp--preset--spacing--40)}
/* fill the widened main column: override the constrained-layout width vars locally so
   body copy, headings, wide & full blocks all stretch to the column (~15% wider than the
   760 default) and sit left, instead of centering at 760. */
.hm-single__main{min-width:0;--wp--style--global--content-size:100%;--wp--style--global--wide-size:100%}
.hm-single__main .alignfull{margin-inline:0;max-width:100%}   /* keep full-bleed inside the column, off the rail */
.hm-single__rail{min-width:0;position:sticky;top:20px}
@media(max-width:980px){
  .hm-single{grid-template-columns:1fr}
  .hm-single__rail{position:static;max-width:640px;margin-inline:auto}
}

/* ---------- single article (editorial body) ---------- */
.hm-article-head{padding-block:40px 12px}
.hm-article-head .wp-block-post-title{font-size:clamp(30px,5vw,52px);line-height:1;margin:8px 0 14px}
.hm-article-meta{display:flex;flex-wrap:wrap;gap:20px;font-family:var(--hm-mono);
  font-size:11px;letter-spacing:.08em;color:var(--hm-mut)}
.hm-article .wp-block-post-content{font-family:Georgia,serif;font-size:1.15rem;line-height:1.75;color:var(--hm-body)}
.hm-article .wp-block-post-content p{margin:0 0 1.4em}
.hm-article .wp-block-post-content h2,
.hm-article .wp-block-post-content h3{font-family:var(--hm-display);color:var(--hm-ink);margin:1.8em 0 .5em}
.hm-article .wp-block-post-content a{color:var(--hm-cerise)}
/* cap ALL content images to their container — legacy/classic `size-full` images carry an
   intrinsic width (e.g. 2560px) + max-width:none and otherwise blow past the column, the
   rail and the viewport edge */
.hm-article .wp-block-post-content img{max-width:100%;height:auto}
.hm-article .wp-block-post-content blockquote{border-left:3px solid var(--hm-cerise);
  margin:1.6em 0;padding:.2em 0 .2em 1.2em;font-style:italic;color:var(--hm-ink)}
/* eyebrow + pull-quote helpers usable inside classic content */
.hm-eyebrow{font-family:var(--hm-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hm-cerise)}

/* ---------- footer ---------- */
.hm-footer{border-top:2px solid var(--hm-ink);padding-block:32px;margin-top:52px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hm-footer .wp-block-site-logo{margin:0;align-self:flex-start}
.hm-footer .wp-block-site-logo img{width:120px;height:auto;max-width:none}
.hm-footer p{font-family:var(--hm-mono);font-size:11px;letter-spacing:.1em;color:var(--hm-mut);margin:0}

/* ---------- responsive: nav + grids ---------- */
@media (max-width:980px){ .hm-rail{position:static} }
@media (prefers-reduced-motion:reduce){ .hm-cards .wp-block-post-featured-image img{transition:none} }

/* ============================================================
   EDITORIAL SINGLE-POST KIT — "The Trade" magazine components
   Ported from the MiCasa mockup, remapped onto HM tokens
   (Helvetica display / Georgia body / mono labels, cerise accent).
   Authored as block patterns (see /patterns) over native core blocks:
   image align full/left/right = full-bleed / weave, columns = split text.
   All scoped to .hm-article so it never leaks into homepage modules.
   ============================================================ */

/* --- standfirst + byline (sit at the top of the body) --- */
.hm-article .hm-standfirst{font-family:Georgia,serif;font-style:italic;
  font-size:clamp(18px,2vw,23px);line-height:1.5;color:var(--hm-mut);max-width:56ch;margin:0 0 .7em}
.hm-article .hm-byline{font-family:var(--hm-mono);font-size:12px;letter-spacing:.05em;
  color:var(--hm-mut);border-top:1px solid var(--hm-line);padding-top:14px;display:inline-block}
.hm-article .hm-byline b{color:var(--hm-ink);font-weight:600}

/* --- in-article section header (kicker + H2, stacked & left) — overrides the homepage
   .hm-sechead (flex row + cerise bullet + underline) which shares the class name --- */
.hm-article .hm-sechead{display:block;gap:0;border-bottom:0;padding-bottom:0;margin:2.6em 0 1.1em;clear:both}
.hm-article .hm-sechead::before{display:none}
.hm-article .hm-sechead > .hm-kicker{display:block;margin:0 0 6px}
/* margin:0 !important both kills the 1.8em top margin the base post-content h2 rule adds
   (which pushed the title far from the eyebrow) AND beats WP's constrained-layout
   `margin-inline:auto !important` that would otherwise centre a max-width'd H2. */
.hm-article .hm-sechead h2{margin:0 !important;max-width:30ch;
  font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.02em}
.hm-article .hm-standfirst{margin-inline:0 !important}
.hm-article .wp-block-post-content h2 em,
.hm-article .hm-sechead h2 em{font-style:normal;color:var(--hm-cerise)}

/* structural blocks always start on a clean line — never wrap beside a leftover
   weave float (fixes two-column text / bands squeezing next to a floated image) */
.hm-article .hm-sechead,
.hm-article .wp-block-post-content > .wp-block-columns,
.hm-article .hm-stats,
.hm-article .hm-dockets,
.hm-article .hm-faq,
.hm-article .wp-block-post-content > .wp-block-pullquote,
.hm-article .wp-block-post-content > .alignfull{clear:both}

/* --- floated images (core align=left/right) — the magazine "weave" --- */
.hm-article .wp-block-post-content figure.alignleft,
.hm-article .wp-block-post-content .alignleft{margin:.35em 2.4em 1.3em 0;max-width:min(57%,560px)}
.hm-article .wp-block-post-content figure.alignright,
.hm-article .wp-block-post-content .alignright{margin:.35em 0 1.3em 2.4em;max-width:min(57%,560px)}
.hm-article .wp-block-post-content .wp-block-image img{width:100%;display:block}
/* captions — mono, cerise marker, matches homepage figure treatment */
.hm-article figcaption,
.hm-article .wp-element-caption{font-family:var(--hm-mono);font-size:12px;letter-spacing:.02em;
  color:var(--hm-mut);line-height:1.5;padding-top:8px;text-align:left;margin:0}
.hm-article figcaption::before,
.hm-article .wp-element-caption::before{content:"\25B8 ";color:var(--hm-cerise)}

/* --- two-column body text (core columns) — hairline rule between --- */
.hm-article .wp-block-columns.is-style-hm-ruled{gap:44px}
.hm-article .wp-block-columns.is-style-hm-ruled > .wp-block-column + .wp-block-column{
  border-left:1px solid var(--hm-line);padding-left:44px}
@media(max-width:781px){
  .hm-article .wp-block-columns.is-style-hm-ruled > .wp-block-column + .wp-block-column{
    border-left:0;padding-left:0}
}

/* --- drop cap (paragraph block style) --- */
.hm-article p.is-style-hm-dropcap::first-letter{font-family:var(--hm-display);font-weight:800;
  float:left;font-size:76px;line-height:.72;padding:8px 12px 0 0;color:var(--hm-cerise)}

/* --- kicker / eyebrow (paragraph block style) --- */
.hm-article p.is-style-hm-kicker{font-family:var(--hm-mono);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--hm-cerise);margin:0 0 .5em}

/* --- pull quote — "The Trade" centred, rules top & bottom (block style) --- */
.hm-article .wp-block-pullquote.is-style-hm-trade{text-align:center;border:0;padding:1.8em 0;background:none}
.hm-article .wp-block-pullquote.is-style-hm-trade blockquote{max-width:none;margin-inline:0;
  border-block:1px solid var(--hm-line);padding:1.05em 0}
/* one notch below the section H2 (max 36px) so it reads as a quote, not a heading */
.hm-article .wp-block-pullquote.is-style-hm-trade p{font-family:var(--hm-display);font-weight:700;
  font-size:clamp(21px,2.6vw,30px);line-height:1.14;letter-spacing:-.02em;color:var(--hm-ink);margin:0}
.hm-article .wp-block-pullquote.is-style-hm-trade em{font-style:normal;color:var(--hm-cerise)}
.hm-article .wp-block-pullquote.is-style-hm-trade cite{display:block;margin-top:16px;
  font-family:var(--hm-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hm-mut);font-style:normal}

/* --- stat strip (ink band, cerise top rule) — optional; delete to collapse --- */
.hm-stats{background:linear-gradient(135deg,#222a38 0%,#12161d 100%);
  border-top:3px solid var(--hm-cerise);
  margin:2.4em 0;padding:clamp(22px,2.6vw,30px) clamp(22px,4vw,38px)}
.hm-stats .wp-block-columns{margin:0;gap:30px}
.hm-stat__num{font-family:var(--hm-display);font-weight:800;font-size:clamp(30px,3.4vw,44px);
  line-height:1;color:#fff;margin:0}
.hm-stat__num span{font-size:.5em;letter-spacing:0}
.hm-stat__lab{font-family:var(--hm-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:#b9bdbf;margin:.7em 0 0;line-height:1.5}
.hm-stat__lab b{color:var(--hm-cerise);font-weight:600}

/* --- spec dockets (3 fact cards) --- */
.hm-dockets{background:var(--hm-surface);border-top:1px solid var(--hm-line);
  margin:2.6em 0;padding:clamp(30px,4vw,44px) clamp(22px,4vw,36px)}
.hm-dockets .wp-block-columns{margin:0;gap:22px}
.hm-docket{background:#fff;border:1px solid var(--hm-line);border-top:3px solid var(--hm-cerise);padding:22px 22px 24px}
.hm-docket__num{font-family:var(--hm-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hm-cerise);margin:0}
.hm-docket__title{font-family:var(--hm-display);font-weight:800;font-size:20px;color:var(--hm-ink);margin:6px 0 12px;line-height:1.05}
.hm-docket ul{list-style:none;margin:0;padding:0}
.hm-docket li{font-family:var(--hm-mono);font-size:12.5px;line-height:1.55;color:var(--hm-mut);
  padding:7px 0;border-bottom:1px dotted var(--hm-line);display:flex;justify-content:space-between;gap:14px}
.hm-docket li:last-child{border-bottom:0}
.hm-docket li b{color:var(--hm-ink);font-weight:600;font-family:Georgia,serif;white-space:nowrap;flex-shrink:0}
.hm-docket li span{text-align:right}

/* --- FAQ (core/details accordion) --- */
.hm-faq{border-top:1px solid var(--hm-line);margin-top:2.6em;padding-top:1.2em}
.hm-article .wp-block-details{border-bottom:1px solid var(--hm-line);padding:2px 0}
.hm-article .wp-block-details summary{font-family:var(--hm-display);font-weight:700;font-size:18px;
  color:var(--hm-ink);cursor:pointer;padding:15px 0;list-style:none}
.hm-article .wp-block-details summary::-webkit-details-marker{display:none}
.hm-article .wp-block-details summary::after{content:"+";float:right;color:var(--hm-cerise);font-size:24px;line-height:1;font-weight:700}
.hm-article .wp-block-details[open] summary::after{content:"\2013"}
.hm-article .wp-block-details > *:not(summary){font-size:1rem;color:var(--hm-mut);margin:0 0 14px;max-width:72ch}

/* --- section CTA (sponsored features): ink button, cerise text; inverts to white on hover.
   The post-content `a{color:cerise}` rule outranks a plain `color`, so scope the text colour
   under .wp-block-post-content too (equal specificity, later wins) — otherwise cerise-on-ink. */
.hm-article .wp-block-post-content .wp-block-button__link,
.hm-article .wp-block-button__link{background:var(--hm-ink);color:var(--hm-cerise);
  border:1px solid var(--hm-ink);border-radius:0;
  font-family:var(--hm-display);font-weight:700;font-size:16px;letter-spacing:.01em;padding:14px 28px;
  transition:background .18s,color .18s,border-color .18s}
.hm-article .wp-block-post-content .wp-block-button__link:hover,
.hm-article .wp-block-post-content .wp-block-button__link:focus-visible,
.hm-article .wp-block-button__link:hover{background:#fff;color:var(--hm-cerise);border-color:var(--hm-cerise)}
.hm-article .hm-cta-note{font-family:var(--hm-mono);font-size:11px;letter-spacing:.02em;color:var(--hm-mut);margin:.7em 0 0}

/* --- sponsor / trade-feature colophon note (optional footer of a sponsored piece) --- */
.hm-article .hm-colophon{background:var(--hm-ink);color:#c7cbc9;margin-top:2.6em;
  padding:clamp(26px,3.5vw,40px) clamp(22px,4vw,40px)}
.hm-article .hm-colophon p{font-family:var(--hm-mono);font-size:11.5px;letter-spacing:.05em;line-height:1.7;color:#c7cbc9;margin:0}
.hm-article .hm-colophon a{color:var(--hm-cerise)}

/* --- responsive: weave floats go full width when the column gets tight --- */
@media(max-width:640px){
  .hm-article .wp-block-post-content figure.alignleft,
  .hm-article .wp-block-post-content .alignleft,
  .hm-article .wp-block-post-content figure.alignright,
  .hm-article .wp-block-post-content .alignright{float:none;max-width:100%;margin:1.3em 0}
}