/* group B pages: blog index and posts */

/* Scene bands on the blog routes: a little shorter than the generic band, lighter still on phones */
.blog-scene { height: min(64vh, 680px); background: var(--field); }
.blog-scene .scene-poster { object-position: 50% 45%; }
.blog-scene .scene-cap { max-width: min(60ch, calc(100% - 2 * var(--gutter))); margin: 0; padding: 6px 10px; background: rgba(220, 232, 223, 0.82); }
@media (max-width: 767px) { .blog-scene { height: 54vh; } }

/* BLOG INDEX */
.blog-hero .banks { align-items: end; }
.blog-hero .eyebrow { margin-bottom: 1.4em; }
.contents-strip { padding: 18px 20px 26px; }
.contents-strip .ln.row-ln { margin: 0; }
.contents-strip .ln.row-ln .n { --wght: 700; font-variation-settings: 'MONO' 1, 'CASL' 0, 'wght' 700; letter-spacing: 0.06em; font-size: 0.8125rem; color: var(--muted); }
.contents-strip .ln.row-ln .rt { font-size: 0.875rem; color: var(--muted); }
.contents-strip .ln.t { margin: 2px 0 14px; font-family: var(--serif); font-size: calc(var(--body) * 0.98); line-height: 1.4; }
.contents-strip .ln.t:last-child { margin-bottom: 0; }
.contents-strip .ln.t a { display: inline; }
.blog-index .tab-card .body { display: grid; gap: 4px; align-content: start; height: 100%; }
.blog-index .tab-card { display: grid; }
.blog-index .tab-card h3, .more-fan .tab-card h3, .blog-index .tab-card h2, .more-fan .tab-card h2 { font-size: 1.375rem; margin: 10px 0 6px; }
.tab-card .standfirst { margin: 0 0 6px; }
.tab-card .rt { margin: auto 0 0; font-size: 0.875rem; padding-top: 10px; border-top: 1px dashed var(--rule); }
.blog-note { margin-top: clamp(32px, 4vw, 64px); display: grid; gap: 22px 40px; align-items: center; }
@media (min-width: 1024px) { .blog-note { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .blog-note .btn-row { justify-content: flex-end; } }
.note-strip { padding: 18px 22px 26px; }
.note-strip .ln { margin: 0; }
.note-strip .ln + .ln { margin-top: 4px; }

/* POSTS: hero */
.post-top .post-hero { align-items: end; }
.post-hero h1 { font-size: clamp(2.25rem, 1rem + 2.6vw, 4.75rem); }
.post-head .eyebrow { margin-bottom: 1.4em; }
.post-head .standfirst { max-width: 60ch; }
.post-meta { margin: 0; }
.post-meta .sep { color: var(--copper); }
.post-photo { margin: 0; }
.post-photo-wrap { width: 100%; }
@media (min-width: 1024px) { .post-hero { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(28px, 4vw, 80px); } }

/* POSTS: the article beside its sticky rail (rail left, article right, so the page keeps meandering) */
.post-body { align-items: start; gap: clamp(28px, 4vw, 72px); }
.post-body .side { width: 100%; }
.post-rail { display: grid; gap: 12px; justify-items: start; }
.post-shot .frame-phone, .post-shot .frame-desk { width: 100%; height: auto; }
.post-shot .rail-cap { max-width: 44ch; }
@media (min-width: 1024px) {
  .post-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .post-body .side { order: -1; }
  .post-shot { margin: 0; }
  .post-shot.desk { width: 100%; }
}
@media (min-width: 1280px) and (max-width: 1799px) { .article.measure { max-width: 76ch; } }
@media (min-width: 1800px) {
  .post-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .post-shot { width: min(100%, 440px); }
  .article { font-size: 1.375rem; }
  .article.measure { max-width: 76ch; }
  .post-head .standfirst { font-size: 1.5rem; max-width: 62ch; }
}
@media (min-width: 2200px) {
  .post-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .article { font-size: 1.75rem; }
  .article.measure { max-width: 74ch; }
  .post-shot { width: min(100%, 560px); }
}
.article h2:first-of-type { margin-top: 1.6em; }
.article .pull { margin: 2em 0; }
.article .figures-strip { margin: 1.6em 0 2em; padding: 16px 20px 26px; font-size: var(--mono-size); }
.article .figures-strip .ln { margin: 0 0 4px; line-height: 1.6; }
.article .figures-strip .ln.h { margin-bottom: 8px; }
.article .figures-strip .ln.sub { padding-left: 1.2em; font-size: 0.9375rem; color: var(--muted); }
.article .figures-strip .ln.row-ln > span:first-child { flex: 0 1 auto; }
.article .figures-strip .ln.row-ln > span:last-child { flex: none; white-space: nowrap; }
.article .figures-strip .tag { margin-right: 6px; vertical-align: 1px; }
.article .figures-strip .hsa-ln { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); color: var(--muted); }
.article ol.figures-strip { list-style: decimal-leading-zero; padding: 16px 20px 26px 3em; counter-reset: fact; }
.article ol.figures-strip li { margin: 0 0 8px; padding-left: 6px; line-height: 1.5; font-family: var(--serif); font-size: calc(var(--body) * 1.02); }
.article ol.figures-strip li::marker { color: var(--copper); font-family: var(--rec); font-variation-settings: 'MONO' 1, 'CASL' 0, 'wght' 600; font-size: 0.9375rem; }
.article .post-year { margin: 1.8em 0 0.6em; }
.article .year-legend { font-size: 0.875rem; margin: 0 0 1.6em; }
.article .dropcap::first-letter { margin-top: 0.06em; }

/* Post 4: the still phone swaps to the product in motion clip beside the routine */
.rail-stack { position: relative; width: 100%; aspect-ratio: 1254 / 2616; }
.rail-stack .frame-phone, .rail-stack .motion-clip { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--base) var(--feed), filter var(--base) var(--feed); }
.rail-stack .motion-clip { opacity: 0; filter: blur(6px); object-fit: contain; background: transparent; filter: drop-shadow(0 30px 40px rgba(27, 38, 34, 0.25)) blur(6px); }
.rail-stack.is-playing .motion-clip { opacity: 1; filter: drop-shadow(0 30px 40px rgba(27, 38, 34, 0.25)); }
.rail-stack.is-playing .frame-phone { opacity: 0; filter: blur(6px); }

/* POSTS: closing and the graphic */
.post-close .banks { align-items: center; }
.closing h2 { font-size: var(--h3); margin: 0 0 0.2em; }
.closing p { margin: 0; }
.closing .btn-row { margin-top: 8px; }
.post-graphic { margin: 0; width: 100%; }
.post-graphic svg { width: 100%; height: auto; display: block; box-shadow: 0 1px 0 var(--paper-shadow), 0 14px 30px -18px var(--shadow-2); }

/* More reading */
.more-fan { margin-top: 8px; }
.more-fan .tab-card { display: grid; }
.more-fan .tab-card .body { display: grid; gap: 4px; align-content: start; height: 100%; }
@media (min-width: 1024px) { .more-fan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .post-hero h1 { font-size: 2rem; }
  .article .figures-strip .ln.row-ln { flex-wrap: wrap; }
  .post-shot { margin: 0 auto; }
  .blog-scene .scene-cap { left: var(--gutter); right: var(--gutter); }
}