/* ==========================================================================
   blog.css — /blog/ and /blog/<slug> (2026-10-05).

   Anatomy is paulkalkbrenner.net/news as built for Treasure Island
   Construction (that repo's site/css/blog.css + docs/superpowers/specs/
   2026-09-23-blog-kalkbrenner-news.md). There it runs on Kalkbrenner's own
   fluid em; here every measure is converted to this site's rem (1rem = 1
   design px at 1920, main.css §2) by ×16 — Kalkbrenner's 1em is 16px at
   1920 too, so the geometry is identical at 1920 and fluid the same way.

   Re-skinned in the kononenko system, which wins on type, colour and motion:
     * heads are Hedvig Letters Serif via the .f-sf / .fn-* utilities (never a
       font-family here — core.js contract (a));
     * black on white, muted text in --gr3, transitions on --d6 / --ease;
     * the heading reveal and the cover parallax are core.js' own
       ([data-split]/[data-reveal], [data-parallax]) — the TIC page's
       blog.js (a vanilla re-implementation of Kalkbrenner's) is not ported.

   One deliberate departure from the rem scale: article running copy has a
   px floor. At 1280 the site's 16rem body size is 10.7px — fine for a label,
   not for 1,500 words. Same reasoning as TIC's `max(12px, …)` em floor.

   Sections
     1. List page head
     2. List rows
     3. Article head + cover
     4. Article body
     5. Other posts (= listing.css §5, Other listings, verbatim)
     6. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. List page head — Kalkbrenner's spacer 160 + 12.5em headline.
   -------------------------------------------------------------------------- */
.bl-head {
  padding-top: 160rem;
  padding-bottom: 16rem;
}
.bl-h {
  /* TIC's Adapt, kept: room for the g's descender above the first rule
     (line-height .8 otherwise lands it on the hairline). */
  margin: 0 0 0.12em;
  font-size: 200rem;
  line-height: 0.8;
  letter-spacing: -0.03em;
}
/* the home page's "Featured Properties (n)" count, scaled to the headline */
.bl-h sup {
  font-size: 30rem;
  vertical-align: top;
}
@media (max-width: 767.98px) {
  .bl-head { padding-top: 120rem; }
  .bl-h { font-size: 72rem; }
  .bl-h sup { font-size: 14rem; }
}

/* --------------------------------------------------------------------------
   2. List rows — Kalkbrenner .news-item: cover left (1/1.1), content right
   behind a 1px rule that runs from the cover's edge; date | read time |
   arrow on top, title in the middle, excerpt at the foot.
   -------------------------------------------------------------------------- */
.bl-list {
  padding-bottom: 160rem;
}
.bl-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: inherit;
  text-decoration: none;
}
.bl-vis {
  display: block;
  aspect-ratio: 1 / 1.1;
  overflow: hidden;
}
.bl-media {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--gr);
  transition: transform var(--d6) var(--ease);
}
.bl-media img,
.bp-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bl-ct {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 12rem 0 20rem 40rem;
  border-top: 1px solid var(--bk);
}
.bl-specs {
  display: grid;
  grid-template-columns: 25% 25% 1fr;
  align-items: start;
}
.bl-specs time {
  white-space: nowrap;
}
/* one arrow wide; the second arrow waits off-window to the left */
.bl-ico {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  width: 60rem;
  overflow: hidden;
}
.bl-ico-i {
  flex: none;
  width: 60rem;
  transition: transform var(--d6) var(--ease);
}
.bl-ico-i svg {
  display: block;
  width: 100%;
  height: auto;
}
.bl-t {
  display: block;
  max-width: 50%;
  font-size: 48rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.bl-ex {
  display: block;
  max-width: 50%;
  font-size: 18rem;
  line-height: 1.3;
}
@media (hover: hover) {
  .bl-in:hover .bl-media { transform: scale(1.08); }
  .bl-in:hover .bl-ico-i { transform: translateX(100%); }
}
/* 768–1199: the half-width content column is too narrow for a half-width
   title, so title and excerpt take the full column. */
@media (max-width: 1199.98px) {
  .bl-t,
  .bl-ex { max-width: 100%; }
}
@media (max-width: 767.98px) {
  .bl-list .ctr {
    display: flex;
    flex-direction: column;
    gap: 72rem;
  }
  .bl-in {
    grid-template-columns: 1fr;
    gap: 20rem;
  }
  .bl-vis { aspect-ratio: 1.5; }
  .bl-ct {
    gap: 16rem;
    padding: 0;
    border-top: 0;
  }
  .bl-specs {
    order: 9;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 16rem;
  }
  .bl-ico { display: none; }
  .bl-t { font-size: 30rem; }
  .bl-ex { font-size: 15rem; }
}

/* --------------------------------------------------------------------------
   3. Article head + cover — Kalkbrenner news detail: Back, 8em title over
   six of eight columns, a 1.5/1 cover, then date + read time.
   -------------------------------------------------------------------------- */
.bp-head {
  padding-top: 160rem;
}
.bp-back {
  margin-bottom: 12rem;
}
.bp-h {
  max-width: 75%;
  margin: 0;
}
.bp-hero {
  margin-top: 32rem;
  aspect-ratio: 1.5;
  overflow: hidden;
  background-color: var(--gr);
}
.bp-specs {
  display: flex;
  justify-content: space-between;
  width: 25%;
  min-width: 340rem;
  margin-top: 16rem;
}
@media (max-width: 767.98px) {
  .bp-head { padding-top: 120rem; }
  .bp-h { max-width: 100%; }
  .bp-hero { margin-top: 24rem; }
  .bp-specs {
    width: 100%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   4. Article body — TIC's §4.2 Adapt: a readable size over a 42% measure.
   -------------------------------------------------------------------------- */
.bp-body {
  padding-top: 64rem;
  padding-bottom: 160rem;
}
.bp-body p,
.bp-body ul,
.bp-body ol,
.bp-body h2,
.bp-body h3 {
  max-width: max(42%, 34em);
}
.bp-body p,
.bp-body ul,
.bp-body ol {
  margin: 0 0 1.25em;
  font-size: max(16px, 20rem);
  line-height: 1.6;
  letter-spacing: -0.01em;
}
.bp-body ul,
.bp-body ol {
  padding-left: 1.25em;
}
.bp-body ul { list-style: disc; }
.bp-body ol { list-style: decimal; }
.bp-body li + li {
  margin-top: 0.5em;
}
.bp-body h2 {
  margin: 1.6em 0 0.6em;
  font-size: max(28px, 48rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.bp-body h3 {
  margin: 1.5em 0 0.5em;
  font-size: max(22px, 32rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.bp-body > :first-child {
  margin-top: 0;
}
.bp-body strong {
  font-weight: 600;
}
.bp-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.05em);
  text-underline-offset: 0.15em;
}
@media (max-width: 767.98px) {
  .bp-body {
    padding-top: 40rem;
    padding-bottom: 80rem;
  }
  .bp-body p,
  .bp-body ul,
  .bp-body ol,
  .bp-body h2,
  .bp-body h3 { max-width: 100%; }
  .bp-body p,
  .bp-body ul,
  .bp-body ol { font-size: 17rem; }
  .bp-body h2 { font-size: 30rem; }
  .bp-body h3 { font-size: 22rem; }
}

/* --------------------------------------------------------------------------
   5. Other posts — listing.css §5 (Other listings, docs/research/04) copied
   VERBATIM so the two lists stay one design; only .lst-other is renamed
   .bl-other. Keep in step with listing.css if either changes.
   -------------------------------------------------------------------------- */
.bl-other {
  margin-bottom: 160rem;
}
.ol-h {
  margin-bottom: 80rem;
}
.ol-list {
  position: relative;
  width: 100%;
}
.ol-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20rem;
  width: 100%;
  padding: 44rem 0;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.ol-row::after,
.ol-row:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  opacity: 0.15;
  pointer-events: none;
}
.ol-row::after {
  bottom: 0;
}
.ol-row:first-child::before {
  top: 0;
}
@media (hover: hover) {
  .ol-row:hover {
    background-color: var(--bk);
    color: var(--wh);
  }
}
.ol-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rem;
}
.ol-t {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.ol-tri {
  position: absolute;
  left: 0;
  top: 50%;
  width: 28rem;
  height: 24rem;
  margin-top: -12rem;
  opacity: 0;
  transform: translateX(0) rotate(90deg);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ol-name {
  display: block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .ol-row:hover .ol-tri {
    opacity: 1;
    transform: translateX(12rem) rotate(90deg);
  }
  .ol-row:hover .ol-name {
    transform: translateX(44rem);
  }
}
.ol-meta {
  flex: none;
  display: flex;
}
.ol-area,
.ol-price {
  display: block;
  width: 240rem;
  padding: 0 12rem;
  text-align: right;
  color: var(--gr3);
}
.ol-prev {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: none;
  width: 240px;
  height: 240px;
  overflow: hidden;
  border-radius: 4px;
  pointer-events: none;
}
.ol-prev img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .ol-prev.is--on {
    display: block;
  }
}
.ol-thumb {
  display: none;
}
.bl-all {
  margin-top: 40rem;
}
@media (max-width: 767.98px) {
  .bl-other {
    margin-bottom: 80rem;
  }
  .ol-h {
    margin-bottom: 40rem;
  }
  .ol-row {
    padding: 20rem 0;
    gap: 16rem;
  }
  .ol-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8rem;
  }
  .ol-tri {
    display: none;
  }
  .ol-meta {
    display: flex;
    gap: 16rem;
  }
  .ol-area,
  .ol-price {
    width: auto;
    padding: 0;
    text-align: left;
  }
  .ol-thumb {
    display: block;
    flex: none;
    width: 88rem;
    height: 88rem;
    overflow: hidden;
    border-radius: 4rem;
  }
  .ol-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* --------------------------------------------------------------------------
   6. Reduced motion — core.js already drops the reveals and the parallax.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bl-media,
  .bl-ico-i,
  .ol-row,
  .ol-name,
  .ol-tri {
    transition-duration: 0.01ms;
  }
}