/* ============================================================
   blocks-b.css — media + dynamic block partials (blocks-b slice)
   image · video · tile_grid · doc_list · card_grid · promo_card ·
   form · hero · community_grid · map_embed · html_embed
   Golden Hour vocabulary (tokens.css / components.css). Mobile-first;
   motion is 200–400ms ease-out and prefers-reduced-motion is respected
   globally via tokens.css.
   ============================================================ */

/* ---------- shared vertical rhythm for this slice ---------- */
.blk--image, .blk--video, .blk--tile_grid, .blk--doc_list,
.blk--card_grid, .blk--form, .blk--map_embed { padding-block: var(--space-8); }
.blk--promo_card, .blk--community_grid { padding-block: var(--space-12); }
@media (min-width: 1024px) {
  .blk--image, .blk--video, .blk--tile_grid, .blk--doc_list,
  .blk--card_grid, .blk--form, .blk--map_embed { padding-block: var(--space-12); }
  .blk--promo_card, .blk--community_grid { padding-block: var(--space-16); }
}

/* ---------- image ---------- */
.img-fig { margin: 0 auto; }
.img-fig--full { max-width: none; }
.img-fig--wide { max-width: var(--container-lg); }
.img-fig--medium { max-width: var(--container-md); }
.img-fig--small { max-width: var(--container-sm); }
.img-fig img { width: 100%; height: auto; border-radius: var(--radius-md);
  border: var(--border-soft); background: var(--sand); }
.img-fig__link { display: block; border-radius: var(--radius-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.img-fig__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.img-fig__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.img-fig__cap { margin-top: var(--space-3); font-size: var(--fs-caption);
  color: var(--ink-muted); text-align: center; }

/* ---------- video ---------- */
.blk--video .video-embed { background: var(--ground); }
.video-lb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-lb__blank { position: absolute; inset: 0;
  background: linear-gradient(135deg, #1E1433, var(--ground)); }
.video-lb__play { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 76px; height: 76px;
  border: 0; border-radius: 50%; background: var(--brass); color: #1C1B19;
  cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-2);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.video-lb__play svg { width: 30px; height: 30px; margin-left: 3px; }
.video-lb__play::after { content: ""; position: absolute; inset: -10px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
.video-lb__play:hover { background: var(--brass-deep); color: #fff;
  transform: translate(-50%, -50%) scale(1.07); }
.video-lb__play:focus-visible { outline: none;
  box-shadow: var(--focus-ring), var(--shadow-2); }
.video-embed--file video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; }

/* ---------- tile_grid (the resources signature) ---------- */
.tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) {
  .tiles--3 { grid-template-columns: repeat(3, 1fr); }
  .tiles--4 { grid-template-columns: repeat(4, 1fr); }
  .tiles--5 { grid-template-columns: repeat(5, 1fr); }
  .tiles--6 { grid-template-columns: repeat(6, 1fr); }
}
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center; min-height: 120px; color: var(--ink);
  background: var(--surface); border: var(--border-hair); border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.tile:hover { transform: translateY(-2px); border-color: var(--brass);
  box-shadow: var(--shadow-1); color: var(--ink); }
.tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tile__logo { height: 64px; display: flex; align-items: center; justify-content: center; }
.tile__logo img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
.tile__cap { font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
  line-height: 1.35; color: var(--ink-soft); }
.tile:hover .tile__cap { color: var(--ink); }

/* ---------- doc_list ---------- */
.doclist { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair); }
.doclist__item { border-bottom: var(--border-hair); }
.doclist__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4);
  align-items: center; padding: var(--space-4) var(--space-2); color: var(--ink);
  transition: background-color .2s var(--ease), padding-left .2s var(--ease); }
.doclist__row:hover { background: var(--surface); padding-left: var(--space-3); color: var(--ink); }
.doclist__row:focus-visible { outline: none; box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm); }
.doclist__ic { width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(58,42,114,.14); color: var(--brass-deep);
  display: grid; place-items: center; }
.doclist__ic svg { width: 22px; height: 22px; }
.doclist__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doclist__label { font-weight: 700; font-size: var(--fs-sm); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); }
.doclist__sub { font-size: var(--fs-caption); color: var(--ink-muted); }
.doclist__arr { font-family: var(--font-serif); color: var(--brass);
  transition: transform .2s var(--ease); }
.doclist__row:hover .doclist__arr { transform: translateX(4px); }

/* ---------- card_grid ---------- */
.cgrid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .cgrid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .cgrid--3 { grid-template-columns: repeat(3, 1fr); } }
.cgrid__card { display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--space-8) var(--space-6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cgrid__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cgrid__title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500;
  letter-spacing: -.01em; margin-bottom: var(--space-3); }
.cgrid__body { font-size: var(--fs-sm); color: var(--ink-soft); flex: 1;
  margin-bottom: var(--space-6); }
.cgrid__cta { align-self: flex-start; margin-top: auto; }

/* ---------- promo_card ---------- */
.promo { background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); overflow: hidden; display: grid; }
@media (min-width: 900px) {
  .promo--has-img { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
}
.promo__body { padding: clamp(var(--space-8), 5vw, var(--space-16)); }
.promo__body .eyebrow { margin-bottom: var(--space-4); }
.promo__title { font-size: var(--fs-h2); margin-bottom: var(--space-4); }
.promo__copy { color: var(--ink-soft); max-width: 58ch; }
.promo__copy :last-child { margin-bottom: 0; }
.promo__bullets { list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; gap: var(--space-3); }
.promo__bullets li { display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--ink-soft); }
.promo__tick { width: 22px; height: 22px; flex: none; margin-top: 1px;
  border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-deep);
  display: grid; place-items: center; }
.promo__tick svg { width: 12px; height: 12px; }
.promo__actions { margin-top: var(--space-8); }
.promo__media { min-height: 260px; background: var(--sand); }
.promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) {
  .promo--has-img .promo__media { order: -1; aspect-ratio: 16/9; min-height: 0; }
}

/* ---------- form ---------- */
.formblk__heading { margin-bottom: var(--space-6); }
.formblk__ok { margin-bottom: var(--space-6); }
.formblk__err { background: var(--danger-bg); color: var(--danger);
  font-size: var(--fs-sm); font-weight: 500; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); margin-bottom: var(--space-6); }
.hp-field { position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.formblk__inline { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.formblk__inline input[type=email] { flex: 1 1 240px; font: inherit;
  font-size: var(--fs-body); color: var(--ink); background: var(--surface);
  border: var(--border-soft); border-radius: var(--radius-pill);
  padding: 13px var(--space-6);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.formblk__inline input[type=email]::placeholder { color: var(--ink-muted); }
.formblk__inline input[type=email]:hover { border-color: var(--ink-muted); }
.formblk__inline input[type=email]:focus { outline: none; border-color: var(--brass);
  box-shadow: var(--focus-ring); }
.formblk--contact .field textarea { min-height: 140px; }
.formblk__submit { margin-top: var(--space-2); }

/* ---------- hero (block-scoped heights on the .hero vocabulary) ---------- */
.blk--hero { background: var(--ground); }
.blk--hero.hero { min-height: 560px; min-height: max(72vh, 560px); min-height: max(72svh, 560px); }
.blk--hero.hero--blk-short { min-height: 380px; min-height: max(44vh, 380px); min-height: max(44svh, 380px); }
.blk--hero .hero__inner { padding-block: var(--space-24) var(--space-12); }
.hero--blk-short .hero__inner { padding-block: var(--space-16) var(--space-8); }
.hero--blk-short .hero__title { font-size: var(--fs-display); }

/* ---------- community_grid (portal launcher cards) ---------- */
.pcard { height: 100%; display: flex; flex-direction: column;
  background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--space-6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2);
  border-color: var(--brass); }
.pcard__name { font-family: var(--font-serif); font-size: var(--fs-h3);
  font-weight: 500; letter-spacing: -.01em; margin-bottom: 2px; }
.pcard__loc { font-size: var(--fs-sm); color: var(--ink-muted);
  margin-bottom: var(--space-6); }
.pcard__act { margin-top: auto; display: grid; gap: var(--space-2); }
.pcard__note { font-size: var(--fs-caption); color: var(--ink-muted); margin: 0; }

/* ---------- map_embed ---------- */
.map-frame { background: var(--sand); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- html_embed ---------- */
.blk--html_embed { overflow-x: auto; }

/* tile monogram fallback (integration patch): brass initial when a tile has no logo image */
.tile__monogram {
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-line, #5C4E96) 14%, transparent);
  color: var(--brass-deep, #12003A);
  display: grid; place-items: center;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.4rem; font-weight: 600;
}

/* ---------- Two-column rows ----------------------------------------------
   render_blocks() wraps a run of `col`-marked blocks in .blk-row. The blocks
   inside keep their own vertical rhythm, so the row only sets the tracks and
   pulls the section padding in — otherwise two stacked sections inside a
   column would double the gap against the one beside it. */
.blk-row { display: grid; gap: var(--space-8); align-items: start; }
.blk-row__col { min-width: 0; }                 /* let a wide table or image shrink */
.blk-row__col > .blk { padding-block: 0; }
.blk-row__col > .blk + .blk { margin-top: var(--space-6); }
/* Inside a column the container is already inset by the row — a second inset
   would leave the two columns oddly narrow. */
.blk-row__col .container { width: 100%; max-width: none; padding-inline: 0; }
.blk-row { padding-block: var(--space-16); }
.blk-row > .blk-row__col:first-child { }
@media (min-width: 860px) {
  .blk-row--50-50 { grid-template-columns: 1fr 1fr; }
  .blk-row--66-33 { grid-template-columns: 2fr 1fr; }
  .blk-row--33-66 { grid-template-columns: 1fr 2fr; }
  .blk-row { gap: var(--space-12); }
}
/* The row itself needs the page gutter, since its columns dropped theirs. */
.blk-row { padding-inline: var(--gutter); max-width: var(--container-xl); margin-inline: auto; }

/* ---------- Section jump bar ("ghosted") ---------------------------------
   Low contrast by intent: present for anyone looking for it, quiet for
   everyone else. Contrast climbs to full ink on hover/focus and for the
   section you are in, so it never fails the 4.5:1 floor at the moment it is
   actually being read. */
/* .blk gives every block generous section padding; a jump bar is chrome, not a
   section, so it opts out and sets its own tight rhythm. */
/* Minimal footprint: no rules above or below. The bottom border in particular was
   drawing a line between the bar and the first graphic, which made a piece of chrome
   look like a section divider. It keeps a translucent background only because it is
   sticky and content has to pass cleanly underneath it. */
.secnav { border: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); }
/* !important because .blk's section padding and .container's own block padding both
   apply here at equal specificity, and a jump bar is chrome — it should be one tight
   strip regardless of what the generic block rhythm wants. */
/* The bar has no internal padding of its own — but it must NOT lose the clearance that
   `main > .blk:first-child` grants for the fixed header, or it renders behind it. Padding
   is zeroed on the inner container only; the outer keeps whatever top offset it is given. */
.secnav > .container { padding-block: 0; }
.secnav:not(:first-child) { padding-block: 0; }
/* Sticks BELOW the fixed header rather than at the very top, so the two never overlap. */
.secnav--sticky { position: sticky; top: var(--fpg-nav-h); z-index: 40; backdrop-filter: blur(10px) saturate(140%); }
/* As the page's first block it must clear the fixed header — but it takes that as MARGIN,
   so the bar itself stays a thin strip instead of a 128px padded band. The `:not()` matches
   the specificity of the generic first-block rule in blocks-a.css, which would otherwise
   win and put the padding straight back. */
main > .secnav:first-child:not(.blk--cta_band) {
  padding-block: 0;
  margin-top: calc(var(--fpg-nav-h) + 8px);
}
.secnav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-8); flex-wrap: nowrap;
  /* `safe center` centres the row but falls back to flex-start the moment it overflows,
     so a narrow screen never hides the first item off the left edge. Older engines that
     do not know `safe` fall through to the plain `center` above. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;                         /* the row scrolls on small screens */
}
.secnav__list::-webkit-scrollbar { display: none; }
.secnav__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 0; font-size: var(--fs-caption);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-muted); opacity: .62;
  border-bottom: 2px solid transparent;
  transition: opacity .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.secnav__link:hover,
.secnav__link:focus-visible { opacity: 1; color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 640px) { .secnav__list { gap: var(--space-4); } }

/* A sticky bar must not park itself on top of the heading it just jumped to. */
.blk--heading[id] { scroll-margin-top: 84px; }

/* Icons are ghosted a step further than the label — they are a wayfinding cue, not the
   content, and at 15px a full-contrast glyph next to small caps reads as clutter. They
   come up to full strength with their link. */
.secnav__ic { display: inline-flex; flex: none; }
.secnav__ic svg { width: 15px; height: 15px; stroke-width: 1.6; opacity: .8; }
.secnav__link:hover .secnav__ic svg,
.secnav__link:focus-visible .secnav__ic svg { opacity: 1; }
@media (max-width: 640px) { .secnav__ic { display: none; } }   /* label alone at narrow widths */

/* With the bar's rules gone, the following block's usual section padding reads as a gap
   rather than as spacing. A small, deliberate one instead of the full block rhythm. */
.secnav + .blk { padding-top: var(--space-4); }

/* ---------- Per-page width -----------------------------------------------
   /resources is a working dashboard — 19 login tiles, document lists, two-column
   rows — and it earns more of the screen than an editorial page does. 28% wider
   than the standard 1280 container. Scoped to <main> so the nav and footer keep
   the same measure they have on every other page; widening those too would make
   the shell jump around as you moved between pages. */
[data-page="resources"] main .container,
[data-page="resources"] .blk-row { max-width: 1638px; }

/* ---------- "View full screen" + image lightbox --------------------------
   The affordance is deliberately the quietest thing on the page: same ghosted
   treatment as the jump bar, sitting tight under the figure with no padding of
   its own, so it reads as a footnote to the graphic rather than a control. */
.img-full {
  /* inline-block, not block: as a block the focus ring drew a box the full width of the
     figure. The wrapper below does the right-alignment instead. */
  display: inline-block; margin-top: 4px;
  font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-muted); opacity: .55;
  transition: opacity .14s var(--ease), color .14s var(--ease);
}
.img-full:hover, .img-full:focus-visible { opacity: 1; color: var(--ink); }
.img-fig--full, .img-fig--wide { text-align: left; }
.img-fig--full .img-full, .img-fig--wide .img-full { float: right; }
.img-fig::after { content: ""; display: table; clear: both; }

/* The overlay itself. `width:100%` of the viewport with nothing around it — the
   graphic is the content, so the chrome gets out of the way entirely. */
dialog.imglb {
  padding: 0; border: 0; margin: 0;
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  background: var(--ground); color: #fff;
  overflow: auto; overscroll-behavior: contain;
}
dialog.imglb::backdrop { background: rgb(10 4 26 / .92); }
.imglb__img { display: block; width: 100%; height: auto; margin: 0; }
/* Close sits over the graphic rather than in a bar, so nothing steals height. */
.imglb__close {
  position: fixed; top: 12px; right: 12px; z-index: 2;
  appearance: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: rgb(10 4 26 / .72); color: #fff; font-size: 22px; line-height: 1;
  backdrop-filter: blur(6px);
  transition: background .14s var(--ease);
}
.imglb__close:hover, .imglb__close:focus-visible { background: rgb(10 4 26 / .95); }
.imglb__hint {
  position: fixed; left: 12px; bottom: 12px; z-index: 2;
  font-size: var(--fs-caption); color: rgb(255 255 255 / .55);
  background: rgb(10 4 26 / .6); padding: 4px 10px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  dialog.imglb[open] { animation: imglb-in 160ms var(--ease); }
  @keyframes imglb-in { from { opacity: 0 } to { opacity: 1 } }
}

/* ============================================================
   Property contact sheet — community_grid mode="contact"
   Staff reference behind /property-contact, not marketing.

   The three figures somebody opens this page for are unit count,
   mailing address and phone, so those are the only things set
   large; the property name is a headline but a quiet one, and the
   manager sits last because you read it after you have found the
   property. No photography, no accent colour per community: this
   is a page you scan under time pressure, and twelve competing
   hues would slow that down. Ink on white with one indigo rule.
   ============================================================ */
.pcontact{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-4);
}
.pc-card{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:var(--border-hair);
  border-top:3px solid var(--indigo);
  border-radius:var(--radius-md);
  padding:var(--space-6);
}
.pc-card__head{ margin-bottom:var(--space-4) }
.pc-card__name{
  font-family:var(--font-serif);
  font-size:1.35rem; line-height:1.15; margin:0; color:var(--ink);
}
.pc-card__place{
  margin:2px 0 0; font-size:var(--fs-caption);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
}

/* The two figures that carry the page. Tabular numerals so the unit
   counts line up down the column and can be compared at a glance. */
.pc-figs{
  display:flex; gap:var(--space-6); flex-wrap:wrap;
  padding:var(--space-4) 0; border-top:var(--border-hair); border-bottom:var(--border-hair);
}
.pc-fig{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.pc-fig--tel{ margin-left:auto; text-align:right }
.pc-fig__n{
  font-family:var(--font-serif);
  font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1;
  color:var(--indigo); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.pc-fig__n--tel{
  font-size:clamp(1.15rem,2vw,1.4rem);
  text-decoration:none; border-bottom:1px solid var(--indigo-line);
}
.pc-fig__n--tel:hover{ color:var(--accent-deep); border-bottom-color:currentColor }
.pc-fig__l{
  font-size:var(--fs-overline); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);
}

/* Mailing address: the thing most often copied off this page, so it is
   set as a block of readable lines rather than one run-on string. */
.pc-mail{ padding:var(--space-4) 0 0 }
.pc-mail__l{
  display:block; font-size:var(--fs-overline); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:var(--space-2);
}
.pc-mail__a{ font-style:normal; display:grid; gap:1px }
.pc-mail__a span{
  font-size:1.0625rem; line-height:1.45; color:var(--ink); font-weight:500;
}
.pc-mail__warn{
  margin:var(--space-3) 0 0; padding:var(--space-2) var(--space-3);
  background:var(--warning-bg); color:var(--warning);
  border-radius:var(--radius-sm);
  font-size:var(--fs-caption); line-height:1.4; font-weight:600;
}

.pc-card__mgr{
  margin-top:auto; padding-top:var(--space-4);
  display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap;
}
.pc-card__mgrl{
  font-size:var(--fs-overline); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);
}
.pc-card__mgrn{ font-size:var(--fs-body); font-weight:600; color:var(--ink) }
.pc-card__mgrt{ font-size:var(--fs-caption); color:var(--ink-muted) }

@media print{
  .pcontact{ grid-template-columns:repeat(2,1fr); gap:10px }
  .pc-card{ break-inside:avoid; border:1px solid #999; border-top-width:2px; padding:10px }
  .pc-fig__n{ font-size:1.6rem }
  .pc-fig__n--tel{ border-bottom:0 }
}

/* Vendor line on the property contact sheet.
   Deliberately quieter than the office number above it — same row shape as the
   manager beneath, because both are "who else you might need" rather than the
   three figures the page exists to answer. */
.pc-vendor{
  display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap;
  padding-top:var(--space-3);
}
.pc-vendor__l{
  font-size:var(--fs-overline); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);
}
.pc-vendor__n{
  font-size:var(--fs-body); font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; text-decoration:none;
  border-bottom:1px solid var(--indigo-line);
}
a.pc-vendor__n:hover{ color:var(--accent-deep); border-bottom-color:currentColor }
@media print{ .pc-vendor__n{ border-bottom:0 } }

/* Both halves of the vendor pair. The destination is set a step back from the
   number that gets dialled — they are not equals, and printing them the same
   weight invites somebody to ring the wrong one. */
.pc-vendor__pair{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.pc-vendor__arr{color:var(--ink-muted);font-size:var(--fs-caption)}
.pc-vendor__n--to{font-weight:500;color:var(--ink-soft);border-bottom-color:var(--sand)}
.pc-vendor__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============================================================
   Step challenge — "The Walk for Homes", October 2026
   Every colour is declared HERE and nowhere else; nothing below
   names one directly. The values are sampled from the event
   banner: deep pine on cream, with marigold and burnt orange as
   the only accents. Note the lead is GREEN, not brown — the
   banner is a green campaign, and the earlier brown palette read
   as a different event sitting beside it.
   ============================================================ */
.hc{
  --hc-pine:#1E3B2A;       /* the banner's lead: headline, bottom band, the shoes */
  --hc-pine-deep:#15291D;
  --hc-pine-soft:#3E5C48;
  --hc-ember:#BE5A24;      /* the script "for", the date rule, the heart */
  --hc-ember-deep:#96421A;
  --hc-amber:#D08A22;      /* milestones reached */
  --hc-gold:#D89B2C;       /* the "COMING SOON" band and the swashes */
  --hc-gold-soft:#EBC77E;
  --hc-bark:#2E4433;       /* secondary figures — kept in the green family */
  --hc-parch:#F7F1E4;      /* the banner's ground, not the site's white */
  --hc-parch-edge:#E7DDC8;
  --hc-ink:#1B2E22;        /* a green-black, so body copy belongs to the campaign */
}
.hc__h{font-family:var(--font-serif);font-size:var(--fs-h2);color:var(--hc-ink);margin:0 0 var(--space-3)}
.hc__intro{color:var(--ink-soft);margin-bottom:var(--space-6);max-width:60ch}
.hc-empty{color:var(--ink-muted);font-style:italic;padding:var(--space-8) 0}

/* ── progress ─────────────────────────────────────────────── */
.hc-prog{
  background:var(--hc-parch); border:1px solid var(--hc-parch-edge);
  border-radius:var(--radius-lg); padding:var(--space-8) var(--space-8) var(--space-6);
}
.hc-figs{display:flex;gap:var(--space-12);flex-wrap:wrap;align-items:baseline;margin-bottom:var(--space-8)}
.hc-fig{display:flex;flex-direction:column;gap:2px}
.hc-fig__n{
  font-family:var(--font-serif);font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;
  color:var(--hc-bark);font-variant-numeric:tabular-nums;
}
.hc-fig--hero .hc-fig__n{font-size:clamp(2.6rem,7vw,4.6rem);color:var(--hc-pine)}
.hc-fig__l{font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}

/* the trail */
.hc-trail{position:relative;padding:var(--space-12) 0 var(--space-12)}

/* The banner is a path of footprints leading to a house, so the trail ends at
   one rather than at a flag or a bare 100%. It is the whole point of the
   challenge stated in one glyph: the steps are going somewhere. Dormant until
   the goal is met, then it lights. */
.hc-trail__home{
  position:absolute; right:-4px; top:2px; width:34px; height:30px;
  color:#A2957A; transition:color 600ms ease, transform 600ms ease;
}
.hc-trail__home svg{ display:block; width:100%; height:100% }
.hc-trail__home .hc-home__lit{ opacity:0; transition:opacity 600ms ease }
.hc-trail.is-home .hc-trail__home{
  color:var(--hc-pine); transform:translateY(-2px);
  filter:drop-shadow(0 2px 5px rgb(216 155 44 / .55));
}
.hc-trail.is-home .hc-home__lit{ opacity:1; color:var(--hc-gold) }
.hc-trail__track{
  position:relative;height:14px;border-radius:999px;
  background:linear-gradient(180deg,#EFE8D8,#E1D8C1);
  box-shadow:inset 0 1px 2px rgb(27 46 34 / .20);
}
.hc-trail__fill{
  position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,var(--hc-pine),var(--hc-pine-soft) 22%,var(--hc-gold) 62%,var(--hc-ember));
  transition:width 900ms cubic-bezier(.22,.61,.36,1);
  min-width:14px;
}
.hc-trail__walker{
  position:absolute;top:50%;transform:translate(-50%,-58%);
  color:var(--hc-ember-deep);
  transition:left 900ms cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 1px 1px rgb(21 41 29 / .40));
}
.hc-trail__marks{list-style:none;margin:0;padding:0;position:relative;height:34px}
.hc-mark{position:absolute;top:6px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.hc-mark__dot{
  display:block;width:9px;height:9px;margin:0 auto 5px;border-radius:50%;
  background:#CBC0A6;box-shadow:0 0 0 3px var(--hc-parch);
}
.hc-mark.is-done .hc-mark__dot{background:var(--hc-amber)}
.hc-mark__n{font-size:11px;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.hc-mark.is-done .hc-mark__n{color:var(--hc-ember-deep)}
.hc-mark__u{font-weight:400;opacity:.7;margin-left:1px}
.hc-prog__foot{margin:0;font-size:var(--fs-sm);color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ── counter — the step total as a charging battery ───────── */
.hc-ct{
  background:var(--hc-parch); border:1px solid var(--hc-parch-edge);
  border-radius:var(--radius-lg); padding:var(--space-8) var(--space-8) var(--space-12);
  text-align:center; container-type:inline-size;
}
.hc-ct__kicker{
  display:block; font-size:var(--fs-overline); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hc-pine-soft); line-height:1.5;
}
.hc-ct__name{
  display:block; margin-top:var(--space-2); color:var(--hc-pine);
  font:800 clamp(1.5rem,5.6cqi,2.7rem)/1.05 var(--font-sans);
  letter-spacing:-.01em; text-transform:uppercase;
}
.hc-ct__for{
  font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:.92em;
  text-transform:lowercase; letter-spacing:0; color:var(--hc-ember); margin:0 .3em 0 .26em;
}
.hc-ct__ticket{
  display:inline-block; margin-top:var(--space-4);
  padding:7px 18px 6px; border:2px dashed var(--hc-ember); border-radius:var(--radius-pill);
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--hc-pine);
}

.hc-ct__svg{
  display:block; width:100%; max-width:520px; height:auto;
  margin:var(--space-8) auto var(--space-6);
}
.hc-ct__empty { fill:#EAE0CB }
.hc-ct__charge{ fill:var(--hc-ember) }
/* One rectangle, scaled on X from the track's left edge. The rounded corners
   live in the clip path, which is never transformed, so nothing squashes as
   the charge grows. */
.hc-ct__charge{ transform-box:view-box; transition:transform 1100ms cubic-bezier(.22,.61,.36,1) }
.hc-ct__shell{ fill:none; stroke:var(--hc-pine); stroke-width:11 }
.hc-ct__nub  { fill:var(--hc-pine) }

.hc-ct__total{
  margin:0; color:var(--hc-pine); font-variant-numeric:tabular-nums;
  font:800 clamp(2.4rem,9cqi,4rem)/1 var(--font-sans); letter-spacing:-.02em;
}
.hc-ct__totlab{
  margin:var(--space-2) 0 0; color:var(--hc-pine);
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
}
.hc-ct__pct{
  margin:var(--space-4) 0 0; color:var(--hc-ember-deep);
  font:800 clamp(1.05rem,3.4cqi,1.4rem)/1.2 var(--font-sans);
  letter-spacing:.06em; text-transform:uppercase; font-variant-numeric:tabular-nums;
}
.hc-ct__goal{
  display:inline-block; margin:var(--space-6) 0 0;
  padding:8px 20px; border-radius:var(--radius-pill);
  background:var(--hc-pine); color:#F7F1E4;
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* Anyone who has asked for less motion gets the finished charge, not a
   1.1-second climb to it. */
@media (prefers-reduced-motion:reduce){
  .hc-ct__charge{ transition:none }
}

/* ── form ─────────────────────────────────────────────────── */
.hc-form{
  background:var(--surface);border:1px solid var(--sand);border-radius:var(--radius-lg);
  padding:var(--space-8);display:grid;gap:var(--space-6);max-width:52rem;
}
.hc-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6)}
.hc-field{display:grid;gap:5px;min-width:0}
.hc-label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.hc-opt{font-weight:400;color:var(--ink-muted);font-size:var(--fs-caption)}
.hc-input{
  width:100%;padding:11px 13px;font:inherit;font-size:var(--fs-body);color:var(--ink);
  background:var(--surface);border:1px solid var(--sand);border-radius:var(--radius-sm);
}
.hc-input:focus-visible{outline:none;border-color:var(--hc-ember);box-shadow:0 0 0 3px rgb(190 90 36 / .22)}
.hc-input--steps{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:600;max-width:12rem}
/* The native file control cannot be styled and prints "No file chosen" in a system
   font, which is the one thing in the panel that looks like a different decade. The
   real input is laid over this face at full size and opacity 0 — it is still the
   element that receives focus, still keyboard operable, still what opens the picker.
   Hiding it with display:none would break all three. */
.hc-file{ position:relative; display:block }
.hc-file input[type=file]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
.hc-file__face{
  display:flex; align-items:center; gap:8px;
  padding:11px 13px; border:1px dashed var(--sand); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink-muted); font-size:var(--fs-sm);
  transition:border-color 150ms var(--ease), color 150ms var(--ease);
}
.hc-file:hover .hc-file__face,
.hc-file input[type=file]:focus-visible + .hc-file__face{
  border-color:var(--hc-ember); color:var(--hc-ember-deep);
}
.hc-file__face svg{ width:15px; height:15px; flex:none }

.hc-input--file{padding:9px 11px;font-size:var(--fs-sm)}
.hc-help{font-size:var(--fs-caption);color:var(--ink-muted);line-height:1.45}
.hc-btn{
  justify-self:start;appearance:none;border:0;cursor:pointer;
  padding:13px 30px;border-radius:var(--radius-sm);
  background:var(--hc-pine);color:#fff;font:600 var(--fs-body)/1 var(--font-sans);letter-spacing:.01em;
  transition:background var(--t-fast,150ms) var(--ease);
}
.hc-btn:hover{background:var(--hc-pine-deep)}
.hc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgb(190 90 36 / .34)}
.hc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hc-flash{
  margin:0 0 var(--space-6);padding:12px 16px;border-radius:var(--radius-sm);
  font-size:var(--fs-body);line-height:1.5;border-left:3px solid;
}
.hc-flash--ok{background:#EEF5EE;border-left-color:var(--success);color:#20502F}
.hc-flash--err{background:#FBEDE8;border-left-color:var(--hc-ember);color:var(--hc-ember-deep)}

/* ── photo wall ───────────────────────────────────────────── */
.hc-wall{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hc-wall__i{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--hc-parch);
  border:1px solid var(--hc-parch-edge)}
.hc-wall__i img{display:block;width:100%;height:190px;object-fit:cover}
.hc-wall__cap{
  display:block;padding:9px 12px 11px;font-size:var(--fs-caption);color:var(--ink-soft);
  background:var(--hc-parch);
}
.hc-wall__cap strong{color:var(--hc-ink)}

/* ── leaderboard ──────────────────────────────────────────── */
.hc-board{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--sand);
  border:1px solid var(--sand);border-radius:var(--radius-md);overflow:hidden}
.hc-board__r{
  display:grid;grid-template-columns:2.2rem 1fr auto auto;gap:var(--space-4);
  align-items:center;padding:12px var(--space-4);background:var(--surface);
}
.hc-board__r.is-top{background:var(--hc-parch)}
.hc-board__pos{
  font-family:var(--font-serif);font-size:1.15rem;color:var(--ink-muted);
  font-variant-numeric:tabular-nums;text-align:center;
}
.hc-board__r.is-top .hc-board__pos{color:var(--hc-ember)}
.hc-board__who{display:flex;flex-direction:column;gap:1px;min-width:0}
.hc-board__who strong{color:var(--ink);font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-board__cm{font-size:var(--fs-caption);color:var(--ink-muted)}
.hc-board__mi{font-weight:600;color:var(--hc-ember-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-board__st{color:var(--ink-muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-board__more{margin:var(--space-3) 0 0;font-size:var(--fs-sm);color:var(--ink-muted)}

@media (max-width:520px){
  .hc-board__r{grid-template-columns:2rem 1fr auto}
  .hc-board__st{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hc-trail__fill,.hc-trail__walker{transition-duration:1ms}
}

/* ============================================================
   Step challenge — the 16:9 module
   For Resources, where this is one card among a page of other
   things rather than the page itself. Same palette, same data,
   packed into a panel: figures and trail across the top, form
   and activity feed side by side beneath.
   ============================================================ */
.hc-mod{
  background:var(--hc-parch); border:1px solid var(--hc-parch-edge);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
  container-type:inline-size;
}
/* The ratio is held only where it is usable. Below this, a 16:9 box is a
   200px-tall slot with four inputs in it, so the panel grows instead — the same
   content, in an order a thumb can work through. */
@media (min-width:820px){
  .hc-mod{ aspect-ratio:16/9; min-height:400px; }
}

/* The event artwork, when a path to it is set on the block. Full-bleed above
   the panel rather than inside it: the banner is roughly 2:1, and dropping it
   into a 16:9 box leaves the live half of the module about 90px tall. */
.hc-banner{
  display:block; margin:0 0 var(--space-6); overflow:hidden;
  border-radius:var(--radius-lg); border:1px solid var(--hc-parch-edge);
  background:var(--hc-parch);
}
.hc-banner img{ display:block; width:100%; height:auto }

/* The campaign band. Without it the panel is a step counter that could belong
   to any employer; the banner has a name, a date and two logos, and the module
   is the thing people will actually look at every day in October. */
.hc-mast{
  flex:none; display:flex; align-items:center; gap:var(--space-6);
  padding:11px var(--space-8) 12px;
  background:var(--hc-pine); border-bottom:3px solid var(--hc-gold);
}
.hc-mast__l{ flex:1; min-width:0 }
.hc-mast__eyebrow{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hc-gold-soft);
}
.hc-mast__name{
  display:block; margin-top:2px; color:#F7F1E4;
  font:800 clamp(1.02rem,2.4cqi,1.45rem)/1.05 var(--font-sans);
  letter-spacing:-.005em; text-transform:uppercase;
}
/* The banner sets "for" as a script word inside the caps headline. The site has
   no script face, so the serif italic carries it — same job, honestly done, and
   it keeps the word from reading as a fourth capital. */
.hc-mast__for{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:.92em; text-transform:lowercase; letter-spacing:0;
  color:var(--hc-gold); margin:0 .3em 0 .26em;
}
.hc-mast__tag{
  display:block; margin-top:3px; font-family:var(--font-serif); font-style:italic;
  font-size:var(--fs-caption); color:var(--hc-gold-soft); letter-spacing:.01em;
}
.hc-mast__r{ flex:none; text-align:right }
.hc-mast__when{
  display:block; color:#F7F1E4; font-size:var(--fs-caption); font-weight:700;
  letter-spacing:.05em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hc-mast__who{
  display:block; margin-top:4px; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgb(247 241 228 / .70); white-space:nowrap;
}
@container (max-width:560px){
  .hc-mast{ flex-wrap:wrap; gap:var(--space-2) var(--space-4); padding-inline:var(--space-6) }
  .hc-mast__r{ text-align:left }
  .hc-mast__who{ margin-top:2px }
  /* The slash divides "steps" from the mileage. Once the figures row wraps it
     divides nothing and trails off the end of the first line as a stray mark. */
  .hc-mod__sep{ display:none }
  .hc-mod__pct{ margin-left:auto }
}

.hc-mod__top{ padding:var(--space-6) var(--space-8) 0; flex:none }
.hc-mod__figs{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap }
.hc-mod__hero{
  font-family:var(--font-serif); font-size:clamp(2rem,4.6cqi,3.2rem); line-height:1;
  color:var(--hc-pine); font-variant-numeric:tabular-nums;
}
/* A caption beside a 51px figure, not a peer of it. At --fs-sm it was the same
   size as the form inputs and read as a second heading. */
.hc-mod__unit{ font-size:var(--fs-overline); color:var(--ink-muted); letter-spacing:.1em;
  text-transform:uppercase; align-self:flex-end; padding-bottom:5px }
.hc-mod__sep{ color:var(--hc-parch-edge); font-size:1.5rem; align-self:flex-end; padding-bottom:3px }
.hc-mod__mi{ font-size:var(--fs-body); color:var(--hc-bark); font-weight:600; font-variant-numeric:tabular-nums }
/* The percentage is the trail's caption, so it sits with the trail rather than
   floating at the far end of the figures row. */
.hc-mod__pct{
  margin-left:auto; font-size:var(--fs-body); font-weight:700; color:var(--hc-ember-deep);
  font-variant-numeric:tabular-nums; align-self:flex-end; padding-bottom:3px;
}
.hc-trail--tight{ padding:var(--space-8) 0 var(--space-6) }
.hc-trail--tight .hc-trail__home{ width:31px; height:27px; top:0; right:-3px }
.hc-trail--tight .hc-trail__track{ height:11px }
.hc-trail--tight .hc-trail__marks{ height:24px }
.hc-trail--tight .hc-mark__dot{ width:7px; height:7px; margin-bottom:4px }
.hc-trail--tight .hc-mark__n{ font-size:10.5px; letter-spacing:.02em }
/* "25" alone is ambiguous next to a step count in the hundreds of thousands.
   The unit is added by CSS so the markup stays a plain number. */
.hc-trail--tight .hc-mark:last-child .hc-mark__n::after{ content:" mi"; font-weight:400; opacity:.65 }

.hc-mod__body{
  flex:1; min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  border-top:1px solid var(--hc-parch-edge);
}
/* --space-5 does not exist in tokens.css — the scale is 1,2,3,4,6,8,12,16,24,32.
   An undefined custom property makes the whole declaration invalid, so this pane
   had NO padding and the form sat flush against the panel edge. Nothing warns you:
   the CSS parses, the rule just evaporates. */
.hc-mod__pane{ padding:var(--space-6); min-width:0; display:flex; flex-direction:column }
/* The feed overflows by design, but a row cut cleanly in half at the panel edge
   looks broken. The fade says "scroll" without spending a scrollbar on it. */
.hc-mod__pane--feed{ position:relative }
.hc-mod__pane--feed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:36px;
  background:linear-gradient(180deg, rgb(247 241 228 / 0), var(--hc-parch) 84%);
  pointer-events:none;
}
.hc-mod__pane--form{ border-right:1px solid var(--hc-parch-edge); background:rgb(255 255 255 / .55) }
.hc-mod__t{
  margin:0 0 var(--space-3); font-size:var(--fs-caption); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted);
  display:flex; align-items:baseline; gap:var(--space-2);
}
.hc-mod__count{ margin-left:auto; font-weight:500; letter-spacing:0; text-transform:none }
/* At zero the panel is mostly a flat bar and two noughts, which reads as broken
   rather than as not-started. Centring the message in the space the feed will fill
   makes the emptiness look intended. */
.hc-mod__empty{
  color:var(--ink-muted); font-size:var(--fs-sm); margin:0; flex:1;
  display:grid; place-items:center; text-align:center; line-height:1.6;
  border:1px dashed var(--hc-parch-edge); border-radius:var(--radius-md);
  padding:var(--space-6);
}

/* Micro-labels, not placeholders. A placeholder disappears the moment the field
   has focus, so anyone pausing halfway down the form loses the only clue about
   what they are filling in — and it takes the accessible name with it on some
   screen readers. These stay put. */
.hc-mform{ display:grid; gap:var(--space-4); align-content:start }
.hc-mfield{ display:grid; gap:4px; min-width:0 }
.hc-mlab{
  font-size:var(--fs-overline); font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted);
}
.hc-mlab span{ font-weight:400; text-transform:none; letter-spacing:0; opacity:.8 }
.hc-mform__row{ display:grid; grid-template-columns:1fr .8fr; gap:var(--space-3) }
.hc-input--sm{ padding:8px 10px; font-size:var(--fs-sm); border-radius:var(--radius-sm) }
.hc-input--num{ font-variant-numeric:tabular-nums; font-weight:600 }
/* Matched to the 43px inputs above it. At 9px padding it came out 33px and read
   as a smaller, weaker sibling of the fields it submits. */
.hc-btn--sm{ padding:12px 20px; font-size:var(--fs-body); justify-self:stretch;
  text-align:center; margin-top:var(--space-1) }
.hc-flash--sm{ margin:0 0 var(--space-3); padding:8px 11px; font-size:var(--fs-caption) }
.hc-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* the feed scrolls inside the panel rather than stretching it */
.hc-feed{
  list-style:none; margin:0; padding:0 var(--space-2) 0 0;
  display:grid; gap:2px; overflow-y:auto; min-height:0; flex:1;
  scrollbar-width:thin;
}
.hc-feed__i{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:var(--space-3);
  align-items:center; padding:7px 0; border-bottom:1px solid rgb(27 46 34 / .09);
}
.hc-feed__i:first-child{ padding-top:0 }
.hc-feed__i:last-child{ border-bottom:0 }
.hc-feed__ph{ width:34px; height:34px; border-radius:var(--radius-sm); object-fit:cover; display:block }
/* An entry without a photo gets initials rather than an empty grey square, so the
   column reads as a list of people either way. */
.hc-feed__ph--none{
  background:rgb(30 59 42 / .09); border-radius:var(--radius-sm);
  display:grid; place-items:center; color:var(--hc-pine);
  font:600 11px/1 var(--font-sans); letter-spacing:.02em;
}
.hc-feed__txt{ display:flex; flex-direction:column; gap:0; min-width:0 }
/* Name at 13px, the step figure emphasised beneath it. The name says who; the
   number is what anyone is actually scanning the column for. At 15px/600 the
   names were the loudest thing in the panel after the hero. */
.hc-feed__txt strong{
  font-size:13px; color:var(--hc-ink); font-weight:600; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hc-feed__meta{
  font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hc-feed__n{ font-weight:600; color:var(--hc-ember-deep) }
.hc-feed__ago{ font-size:11px; color:var(--ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap }

@media (max-width:819px){
  .hc-mod__body{ grid-template-columns:1fr }
  /* The one control a thumb has to hit. At the compact size it came out 33px,
     shorter than the inputs above it and under the 44px touch minimum — fine
     with a mouse, a nuisance on a phone, which is where most people will log
     steps straight after a walk. */
  .hc-btn--sm{ padding:13px 20px; font-size:var(--fs-body) }
  .hc-mod__pane--form{ border-right:0; border-bottom:1px solid var(--hc-parch-edge) }
  .hc-feed{ max-height:280px }
}