/* Editorial pages share the site's typography, colours and conversion components. */
@layer components {
  .blog-label, .blog-meta, .article-byline { font-family: var(--font-ui); font-size: var(--step--1); }
  .blog-label { margin-bottom: var(--space-6); font-weight: 700; letter-spacing: .12em; }
  .blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; color: var(--steel); }
  .blog-meta > :first-child { color: var(--ink); font-weight: 700; }
  .blog-card { min-width: 0; }
  .blog-card--featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: center; border-bottom: 1px solid var(--platinum); padding-bottom: var(--space-8); }
  .blog-card__image { display: block; overflow: hidden; border-radius: var(--radius-card); background: var(--platinum); }
  .blog-card__image picture, .blog-card__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .blog-card__image img { transition: transform .4s var(--ease-out); }
  @media (hover: hover) { .blog-card:hover .blog-card__image img { transform: scale(1.025); } }
  .blog-card__body { display: grid; gap: var(--space-5); }
  .blog-card h2 { font-size: var(--step-2); line-height: 1.14; overflow-wrap: anywhere; }
  .blog-card--featured h2 { font-size: var(--step-3); }
  .blog-card h2 a { text-decoration: none; }
  .blog-card h2 a:hover { text-decoration: underline; }
  .blog-read { font-family: var(--font-ui); font-weight: 700; width: fit-content; display: inline-block; padding-block: .6rem; }
  .blog-read span { margin-left: .4rem; }
  .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
  .blog-grid:not(:empty) { margin-top: var(--space-8); }
  .blog-grid .blog-card__body { padding-top: var(--space-5); }
  .blog-empty { text-align: center; display: grid; justify-items: center; gap: var(--space-6); }
  .blog-empty h2 { max-width: 22ch; }
  .blog-article { padding-bottom: var(--space-8); }
  .article-hero { position: relative; isolation: isolate; background: var(--ink); color: var(--white); --focus: var(--white); }
  .article-hero__image, .article-hero__image picture, .article-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .article-hero__image { z-index: -2; }
  .article-hero__image img { object-fit: cover; filter: saturate(.5); }
  .article-hero__image img[src*="platinum-office-reception"] { object-position: 50% 28%; }
  .article-hero__image img[src*="platinum-rooftop-inspection"] { object-position: 50% 35%; }
  .article-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.64)); }
  .article-hero__content { padding-block: clamp(2.5rem, 4vw, 4rem); }
  .article-hero h1 { margin-block: var(--space-5); font-size: var(--step-4); max-width: 23ch; line-height: 1.08; overflow-wrap: anywhere; }
  .article-hero .lede { max-width: 54ch; color: var(--porcelain); }
  .article-hero .blog-meta, .article-hero .blog-meta > :first-child { color: var(--white); }
  .article-byline { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
  .article-caption { font-size: var(--step--1); color: var(--steel); padding-top: var(--space-3); }
  .article-layout { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 720px); gap: clamp(2rem, 6vw, 7rem); justify-content: center; align-items: start; padding-top: var(--space-8); }
  .article-sidebar { position: sticky; top: calc(var(--header-h) + var(--space-6)); display: grid; gap: var(--space-7); font-family: var(--font-ui); font-size: var(--step--1); }
  .article-sidebar h2 { font-size: 1rem; font-stretch: 100%; line-height: 1.4; }
  .article-toc { border-top: 2px solid var(--ink); padding-top: var(--space-5); }
  .article-toc ol { padding-left: 1.3rem; margin-top: var(--space-4); }
  .article-toc li + li { margin-top: var(--space-3); }
  .article-toc a { display: inline-block; padding-block: .25rem; }
  .article-help { padding: var(--space-5); background: var(--white); border: 1px solid var(--platinum); border-radius: var(--radius-card); }
  .article-help p { margin-block: var(--space-3); }
  .article-help a { font-weight: 700; display: inline-block; padding-block: .5rem; }
  .article-body { min-width: 0; overflow-wrap: anywhere; }
  .article-mobile-toc { display: none; }
  .article-intro, .article-lead { font-size: var(--step-0); margin-bottom: var(--space-5); }
  .article-lead + .article-section { margin-top: var(--space-7); }
  .article-quote { border-left: 3px solid var(--ink); padding: var(--space-5) var(--space-6); margin-block: var(--space-6); background: var(--white); }
  .article-quote blockquote { font-size: var(--step-1); }
  .article-quote figcaption { margin-top: var(--space-4); font-family: var(--font-ui); font-size: var(--step--1); color: var(--steel); }
  .article-section + .article-section { margin-top: var(--space-7); }
  .article-section h2, .article-related h2 { font-size: var(--step-2); line-height: 1.18; margin-bottom: var(--space-5); }
  .article-section h3 { font-size: var(--step-1); margin-block: var(--space-6) var(--space-4); }
  .article-section p + p, .article-section ul, .article-section ol { margin-top: var(--space-4); }
  .article-section li + li { margin-top: var(--space-3); }
  .article-inline-image { width: min(100%, 420px); margin: var(--space-6) auto; }
  .article-inline-image img { width: 100%; border-radius: var(--radius-card); }
  .article-inline-image figcaption { color: var(--steel); font-size: var(--step--1); margin-top: var(--space-3); }
  .article-author { max-width: 520px; background: var(--white); border: 1px solid var(--platinum); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); margin-top: var(--space-6); }
  .article-author .section__kicker { font-size: .7rem; }
  .article-author h2 { font-size: 1rem; margin-block: var(--space-2); }
  .article-author > p:last-child { font-size: .9rem; line-height: 1.5; }
  .article-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); font-family: var(--font-ui); font-size: var(--step--1); }
  .article-share h2 { flex-basis: 100%; font-size: 1rem; }
  .article-share a { padding-block: .5rem; }
  .article-share__instagram { flex-basis: 100%; padding: var(--space-4); border: 1px solid var(--platinum); border-radius: var(--radius-card); }
  .article-share__instagram p { margin-bottom: var(--space-3); }
  .article-share__instagram input { width: 100%; padding: var(--space-3); border: 1px solid var(--platinum); background: var(--white); font-size: .85rem; }
  .article-share__instagram a { display: inline-block; font-weight: 700; }
  .article-related { border-top: 1px solid var(--platinum); margin-top: var(--space-8); padding-top: var(--space-6); }
  .article-related ul { padding-left: 1.2rem; margin-bottom: var(--space-6); }
  @media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 760px) {
    .article-inline-image { width: min(100%, 280px); }
    .blog-card--featured, .article-layout, .blog-grid { grid-template-columns: 1fr; }
    .blog-card--featured { gap: var(--space-5); }
    .article-sidebar { display: none; }
    .article-hero h1 { font-size: var(--step-3); }
    .article-mobile-toc { display: block; border-block: 1px solid var(--platinum); margin-bottom: var(--space-6); padding-block: var(--space-4); font-family: var(--font-ui); font-size: var(--step--1); }
    .article-mobile-toc summary { font-weight: 700; cursor: pointer; padding-block: .4rem; }
    .article-mobile-toc ol { margin-top: var(--space-4); padding-left: 1.4rem; }
    .article-mobile-toc a { display: inline-block; padding-block: .5rem; }
  }
  @media (prefers-reduced-motion: reduce) { .blog-card__image img { transition: none; } }
}