/* =============================================================================
   Hexagon Life Planning Services, blog.css (builder W3). The blog, the 12 articles and the nine town pages.
   Prefixes: bl- (blog and shared), ar- (an article), tw- (a town). Tokens only (tokens.css); nothing here restyles a device of
   devices.css. One breakpoint: phone to 1023px, desktop from 1024px. No shadows, no glass; paper ground, ink, one accent.
   ========================================================================== */

:root { --bl-pad: calc(var(--pad-sec) * .75); }

/* ---- shared ------------------------------------------------------------------------------------------------------ */
.bl-lbl { display: block; margin: 0 0 var(--gap-16); font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh);
  font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); color: var(--ink-quiet); }
.bl-lede { margin: 0; max-width: 36ch; font-family: var(--body); font-size: var(--t-p1-size); line-height: 1.35; font-weight: 400;
  letter-spacing: -.005em; color: var(--ink); }
.bl-x { margin: 0; max-width: 52ch; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.1); line-height: 1.55; font-weight: 400;
  letter-spacing: .005em; color: var(--ink-quiet); }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-8) var(--gap-16); margin: 0 0 var(--gap-16);
  font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); color: var(--ink-quiet); }
.bl-meta__by + time::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: var(--gap-16); vertical-align: middle;
  border-radius: var(--r-circle); background: currentColor; }
.bl-mist.band { background: var(--tint); }
.bl-link { padding-block: .22em; color: inherit; text-decoration: underline; text-decoration-color: var(--spruce); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.bl-link:hover { text-decoration-thickness: 3px; }
.bl-sh { margin: 0 0 var(--gap-32); }

/* a whole block is one link: the title's link stretches over its card */
.bl-stretch { color: inherit; text-decoration: none; }
.bl-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bl-stretch:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* the round corner arrow of a card: fills with ink when the card is hovered */
.bl-go { display: inline-grid; place-items: center; flex: none; width: var(--circ); height: var(--circ); border-radius: var(--r-circle);
  border: 1px solid var(--line); color: var(--ink); transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io); }
.bl-go svg { width: var(--icon); height: var(--icon); }
.bl-feat:hover .bl-go, .bl-row:hover .bl-go, .ar-card:hover .bl-go { background: var(--ground-dark); color: var(--ink-invert); }

/* the licence credit of a CC photo, a small white tag on the photo, shown wherever the photo shows */
.bl-credit, .tw-credit { position: absolute; z-index: 2; right: var(--gap-12); bottom: var(--gap-12); margin: 0; max-width: calc(100% - 2 * var(--gap-12));
  padding: var(--gap-8) var(--gap-12); border-radius: var(--r-pill); background: var(--white); color: var(--ink);
  font-family: var(--t-c3-family); font-size: var(--t-c3-size); line-height: var(--t-c3-lh); font-weight: var(--t-c3-weight); }
.tw-credit { bottom: auto; top: var(--gap-16); right: var(--gap-16); }

/* ---- the blog index -------------------------------------------------------------------------------------------- */
.bl-head { padding: calc(var(--hdr-h) + var(--gap-48)) 0 var(--gap-48); }
.bl-head__h { margin: 0; }
.bl-head__row { display: flex; margin-top: var(--gap-32); }

.bl-feature { padding-bottom: var(--bl-pad); }
.bl-feat { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-48); align-items: end; }
.bl-feat__pic, .bl-row__pic, .ar-card__pic { position: relative; margin: 0; overflow: hidden; background: var(--tint); }
.bl-feat__pic { aspect-ratio: 3 / 2; border-radius: var(--r-frame); }
.bl-feat__pic img, .bl-row__pic img, .ar-card__pic img, .ar-pic img, .tw-hero__pic img, .tw-home__pic img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .9s var(--ease-out); }
.bl-feat:hover .bl-feat__pic img, .bl-row:hover .bl-row__pic img, .ar-card:hover .ar-card__pic img { transform: scale(1.025); }
.bl-feat__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-24); padding-bottom: var(--gap-8); }
.bl-feat__body .bl-lbl, .bl-feat__body .bl-meta { margin-bottom: 0; }
.bl-feat__t { margin: 0; }
.bl-more { display: inline-flex; align-items: center; gap: var(--gap-16); font-family: var(--t-p2-family); font-size: var(--t-p2-size);
  font-weight: var(--t-p2-weight); color: var(--ink); }

.bl-archive { padding-bottom: var(--bl-pad); }
.bl-year { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--gap-32); padding-top: var(--gap-40); border-top: 1px solid var(--hairline-light); }
.bl-year + .bl-year { margin-top: var(--gap-64); }
.bl-year__n { margin: 0; align-self: start; position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); }
.bl-list { margin: 0; padding: 0; list-style: none; }
.bl-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 23vw, 340px) var(--circ); gap: var(--gap-32);
  align-items: center; padding: var(--gap-32) 0; border-top: 1px solid var(--hairline-light); }
.bl-list > .bl-row:first-child { border-top: 0; padding-top: 0; }
.bl-row__body { display: grid; gap: var(--gap-16); align-content: center; }
.bl-row__body .bl-meta { margin: 0; }
.bl-row__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-h5-size); line-height: 1.02; letter-spacing: var(--t-h5-track); }
.bl-row__pic { aspect-ratio: 3 / 2; border-radius: var(--r-img); }

/* ---- an article: the header ------------------------------------------------------------------------------------ */
.ar-head { padding: calc(var(--hdr-h) + var(--gap-48)) 0 var(--bl-pad); }
.bl-h { margin: 0; }
.split-h.bl-h--xl { font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-track); }
.split-h.bl-h--md { font-size: calc(var(--t-h2-size) * .74); line-height: .98; }
.ar-head__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-48); align-items: end; margin: var(--gap-40) 0 var(--gap-48); }
.ar-head__row--solo { grid-template-columns: minmax(0, 1fr); }
.ar-topics .bl-lbl { margin-bottom: var(--gap-12); }
.ar-topics__pills { display: flex; flex-wrap: wrap; gap: var(--gap-12); }
.ar-pic { position: relative; margin: 0 auto; max-width: var(--cap, none); aspect-ratio: 21 / 9; border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }

/* ---- an article: the reading column ---------------------------------------------------------------------------- */
.ar-body { padding-bottom: var(--bl-pad); }
.ar-body__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-64); align-items: start; }
.ar-side { position: sticky; top: calc(var(--hdr-h) + var(--gap-24)); }
.ar-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.ar-toc__list li { counter-increment: toc; border-top: 1px solid var(--hairline-light); }
.ar-toc__list li:last-child { border-bottom: 1px solid var(--hairline-light); }
.ar-toc__list a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: var(--gap-8); padding: var(--gap-12) 0; color: var(--ink); text-decoration: none;
  font-family: var(--t-p2-family); font-size: var(--t-c1-size); line-height: 1.3; font-weight: 500; transition: color var(--dur-fast); }
.ar-toc__list a::before { content: counter(toc, decimal-leading-zero); color: var(--ink-quiet); }
.ar-toc__list a:hover { color: var(--spruce); }
.ar-toc__t { margin: 0; font-family: var(--display); font-size: var(--t-h5-size); line-height: 1; letter-spacing: var(--t-h5-track); }
.ar-toc__t .ulink { border-bottom: 0; }

.ar-col { max-width: 68ch; font-family: var(--body); font-size: calc(var(--t-p1-size) * .95); line-height: 1.65; font-weight: 400; letter-spacing: .003em; color: var(--ink); }
.ar-col p { margin: 0 0 1.15em; }
.ar-col strong { font-weight: 600; }
.ar-stand { font-family: var(--display); font-size: calc(var(--t-h5-size) * .95); line-height: 1.16; letter-spacing: -.012em; margin-bottom: 1.3em !important; }
.ar-h { margin: 1.9em 0 .55em; font-family: var(--display); font-weight: 400; font-size: calc(var(--t-h4-size) * .74); line-height: 1.02; letter-spacing: -.02em; scroll-margin-top: calc(var(--hdr-h) + var(--gap-16)); }
.ar-h--3 { font-size: calc(var(--t-h5-size) * .9); line-height: 1.08; margin-top: 1.6em; }
.ar-col > .ar-h:first-child { margin-top: 0; }
.ar-list { margin: 1.5em 0 1.8em; padding: 0; list-style: none; counter-reset: ol; }
.ar-list li { position: relative; padding: .72em 0 .72em 1.7em; border-top: 1px solid var(--hairline-light); }
.ar-list li:last-child { border-bottom: 1px solid var(--hairline-light); }
.ar-list--ul li::before { content: ""; position: absolute; left: .25em; top: 1.5em; width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--spruce); }
/* their typed "X" marks: the same rows as the tick list, the marker a drawn cross (two crossed hairlines), decorative only */
.ar-list--x li { padding-left: 2.4em; }
.ar-list--x li::before, .ar-list--x li::after { content: ""; position: absolute; left: .3em; top: calc(1.545em - 1px); width: 14px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.ar-list--x li::after { transform: rotate(-45deg); }
.ar-list--ol li { counter-increment: ol; padding-left: 2.8em; }
.ar-list--ol li::before { content: counter(ol, decimal-leading-zero); position: absolute; left: 0; top: .5em; font-family: var(--display); font-size: 1.5em; line-height: 1; color: var(--ink); }

/* ---- an article: related services, more articles ---------------------------------------------------------------- */
.ar-rel { padding-block: var(--bl-pad); }
.ar-rel__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-64); align-items: start; }
.ar-rel__list .row { align-items: baseline; gap: var(--gap-24); }
.ar-rel__list .row > span:first-child { font-family: var(--display); font-size: calc(var(--t-h5-size) * .85); line-height: 1.05; letter-spacing: var(--t-h5-track); flex: none; }
.ar-rel__list .quiet { max-width: 38ch; font-size: var(--t-c1-size); line-height: 1.4; margin-left: auto; text-align: left; }
.ar-rel__list .row svg { align-self: center; }

.ar-more { padding-block: var(--bl-pad); }
.ar-more__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-24); margin-bottom: var(--gap-40); }
.ar-more__head .bl-sh { margin-bottom: 0; }
.ar-more__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-32); margin: 0; padding: 0; list-style: none; }
.ar-card { position: relative; display: grid; gap: var(--gap-16); align-content: start; }
.ar-card__pic { aspect-ratio: 3 / 2; border-radius: var(--r-card); }
.ar-card .bl-meta { margin: 0; }
.ar-card__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-h5-size); line-height: 1.02; letter-spacing: var(--t-h5-track); max-width: 22ch; }
.ar-card > .bl-go { position: absolute; top: var(--gap-16); right: var(--gap-16); z-index: 2; background: var(--white); border-color: transparent; }

/* ---- a town: the opening ---------------------------------------------------------------------------------------- */
.tw-hero { display: flex; min-height: 100svh; padding: calc(var(--hdr-h) + var(--gap-24)) 0 var(--gap-24); }
.tw-hero__in { width: 100%; display: flex; flex-direction: column; gap: var(--gap-24); }
.tw-hero__h { margin: 0; }
@media (min-width: 1024px) { .tw-hero__h.t-d { font-size: min(var(--t-display-size), 17.5svh); } }
.tw-hero__stage { position: relative; flex: 1 1 auto; margin: 0; min-height: clamp(300px, 38svh, 680px); border-radius: var(--r-frame); overflow: hidden; background: var(--tint); }
.tw-hero__pic { position: absolute; inset: 0; margin-inline: auto; max-width: var(--cap, none); }
.tw-hero__pic img { transition: none; }
.tw-hero__card { position: absolute; left: var(--gap-16); bottom: var(--gap-16); z-index: 2; width: min(calc(var(--content) * .33), calc(100% - 2 * var(--gap-16)));
  display: grid; gap: var(--gap-24); padding: var(--gap-32); border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.tw-lede { margin: 0; font-family: var(--body); font-size: var(--t-p1-size); line-height: 1.35; font-weight: 400; letter-spacing: -.005em; color: var(--ink); }
.tw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-16) var(--gap-24); }

/* ---- a town: their words, the six services -------------------------------------------------------------------- */
.tw-intro { padding-block: var(--bl-pad); }
.tw-intro__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-64); align-items: start; }
.tw-st { margin: 0 0 var(--gap-32); max-width: 24em; font-family: var(--display); font-size: var(--t-h5-size); line-height: 1.1; letter-spacing: -.015em; color: var(--ink); }
.tw-p { margin: 0; max-width: 56ch; font-family: var(--body); font-size: calc(var(--t-p3-size) * 1.1); line-height: 1.55; font-weight: 400; letter-spacing: .005em; color: var(--ink); }
.tw-p + .tw-acts { margin-top: var(--gap-32); }
.tw-svc .row { gap: var(--gap-24); }
.tw-svc .row > span:first-child { font-family: var(--display); font-size: calc(var(--t-h5-size) * .85); line-height: 1.05; letter-spacing: var(--t-h5-track); }
.tw-svc .quiet { margin-left: auto; font-size: var(--t-c1-size); white-space: nowrap; }

.tw-rev { padding-block: var(--bl-pad); }
.tw-rev__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap-48); align-items: start; }
.tw-rev__fig { margin: 0; }
.tw-rev__q { margin: 0; }
.tw-rev__q p { margin: 0; max-width: 24em; font-family: var(--display); font-weight: 400; font-size: calc(var(--t-h4-size) * .8); line-height: 1.04; letter-spacing: -.02em; }
.tw-rev__by { margin-top: var(--gap-24); font-family: var(--t-p2-family); font-size: var(--t-p2-size); font-weight: var(--t-p2-weight); color: var(--ink); }

.tw-form { padding-block: var(--bl-pad); }
.tw-form__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-64); align-items: start; }
.tw-form__txt .tw-sh { margin: 0 0 var(--gap-16); }
.tw-form__txt .tw-p { margin-bottom: var(--gap-24); }

/* the form device is made for dark grounds: on this paper band the fields are white with an ink outline, the labels quiet ink */
.tw-form .tw-form__form .field input, .tw-form .tw-form__form .field textarea { background: var(--white); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 55%, var(--ground)); }
.tw-form .tw-form__form .field label { color: var(--ink-quiet); }
.tw-form .tw-form__form .field input:focus, .tw-form .tw-form__form .field textarea:focus { border-color: var(--ink); }
.tw-form .radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-12) var(--gap-24); margin: 0 0 var(--gap-24); padding: 0; border: 0; }
.tw-form .radios legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--gap-8); }

.tw-near { padding-block: var(--bl-pad); }
.tw-near__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-64); align-items: center; }
.tw-near__head .tw-sh { margin-bottom: 0; }
.tw-tags { display: flex; flex-wrap: wrap; gap: var(--gap-12); margin: 0; padding: 0; list-style: none; }
.tw-tag { display: inline-flex; align-items: center; height: var(--btn-h); padding: 0 var(--gap-24); border-radius: var(--r-pill); background: var(--tint); color: var(--ink);
  font-family: var(--t-p2-family); font-size: var(--t-p2-size); font-weight: var(--t-p2-weight); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io); }
.tw-tag:hover, .tw-tag:focus-visible { background: var(--ground-dark); color: var(--ink-invert); }
.tw-tag:hover .roll > span, .tw-tag:focus-visible .roll > span { transform: translateY(-100%); }

/* ---- phones and tablets ---------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .bl-head { padding-top: calc(var(--hdr-h) + var(--gap-24)); padding-bottom: var(--gap-32); }
  .bl-head__h > span, .bl-h > span, .tw-hero__h > span { text-align: left; }
  .bl-feature { padding-bottom: var(--gap-48); }
  .bl-feat { grid-template-columns: minmax(0, 1fr); gap: var(--gap-24); }
  .bl-feat__pic { aspect-ratio: 4 / 3; border-radius: var(--r-card); }
  .bl-year { grid-template-columns: minmax(0, 1fr); gap: var(--gap-16); padding-top: var(--gap-24); }
  .bl-year__n { position: static; }
  .bl-row { grid-template-columns: minmax(0, 1fr); gap: var(--gap-16); padding: var(--gap-24) 0; }
  .bl-row__pic { grid-row: 1; }
  .bl-row > .bl-go { position: absolute; top: calc(var(--gap-24) + var(--gap-12)); right: var(--gap-12); z-index: 2; background: var(--white); border-color: transparent; }
  .bl-list > .bl-row:first-child { padding-top: 0; }
  .bl-list > .bl-row:first-child > .bl-go { top: var(--gap-12); }
  .ar-head { padding-top: calc(var(--hdr-h) + var(--gap-24)); padding-bottom: var(--gap-48); }
  .ar-head__row { grid-template-columns: minmax(0, 1fr); gap: var(--gap-32); margin: var(--gap-24) 0 var(--gap-32); }
  .ar-pic { aspect-ratio: 4 / 3; border-radius: var(--r-card); }
  .ar-body__in { grid-template-columns: minmax(0, 1fr); gap: var(--gap-32); }
  .ar-side { position: static; order: 2; }
  .ar-toc--solo { display: none; }
  .ar-body { padding-bottom: var(--gap-48); }
  .ar-rel, .ar-more { padding-block: var(--gap-48); }
  .ar-rel__in { grid-template-columns: minmax(0, 1fr); gap: var(--gap-24); }
  .ar-rel__list .row { flex-wrap: wrap; align-items: flex-start; gap: var(--gap-8) var(--gap-16); }
  .ar-rel__list .row > span:first-child { flex: 1 1 60%; }
  .ar-rel__list .quiet { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .ar-more__list { grid-template-columns: minmax(0, 1fr); }
  .tw-hero { min-height: 0; padding-top: calc(var(--hdr-h) + var(--gap-16)); }
  .tw-hero__stage { display: grid; gap: var(--gap-12); min-height: 0; border-radius: 0; overflow: visible; background: none; }
  .tw-hero__pic { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--tint); }
  .tw-hero__card { position: static; width: auto; padding: var(--gap-24); }
  .tw-hero__stage > .tw-credit { top: var(--gap-12); right: var(--gap-12); }
  .tw-intro, .tw-rev, .tw-form, .tw-near { padding-block: var(--gap-48); }
  .tw-intro__in, .tw-rev__in, .tw-form__in, .tw-near__in { grid-template-columns: minmax(0, 1fr); gap: var(--gap-32); }
  .tw-svc .quiet { white-space: normal; text-align: right; }
}