/* ARTICLE TEMPLATE (single posts). Loaded after tokens.css + site-chrome.css (locked global header/footer).
   Reusable for every article: nothing here depends on one title, image or TOC length. Approved palette only.
   Structure: charcoal hero (breadcrumbs → gold category → H1 → author/meta) → featured image overlapping the hero
   edge → TOC + prose (one aligned 1100px column) → author → related articles. */
/* owner (wide article): hero, featured image and TOC + prose share ONE wide container with small, balanced outer
   margins (3.5vw, 20–72px) and a 1760px cap for very large screens. No narrow blog column; the prose has no max-width. */
:root{--art-gutter:clamp(20px,3.5vw,72px);--art-max:1760px}

/* ---------- hero: same charcoal/graphite family as the header/footer ----------
   Starts with the header's page-facing graphite (#505050) and closes to the darkest charcoal (#0B0B0B), exactly the
   footer's scale, so header → article information reads as one composition. No navy. */
.art-hero{background:linear-gradient(180deg,var(--char-2) 0%,var(--char-1) 48%,var(--char-0) 100%);color:#fff;padding:44px 0 148px}
.art-hero__in{width:min(100% - 2 * var(--art-gutter),var(--art-max));margin-inline:auto}
.art-hero .crumbs ol{margin:0 0 26px;font-size:14px;color:var(--on-navy-2)}
.art-hero .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;transition:color var(--m-fast)}
.art-hero .crumbs a:hover{color:var(--gold)}
.art-hero .crumbs [aria-current]{color:var(--on-navy-2)}
.art-hero__cat{color:var(--gold);font-size:13px;letter-spacing:.08em;margin:0 0 12px}
.art-hero h1{color:#fff;font-size:clamp(32px,3.4vw,50px);line-height:1.1;max-width:22ch;margin:0 0 20px;text-wrap:balance}
.art-hero__by{color:#fff;font-size:16px;line-height:1.6}
.art-hero__by span{color:var(--on-navy-2)}

/* ---------- featured image: overlaps the hero's dark edge, aligned to the article column ---------- */
.art-img{margin-top:-108px}
.art-img .wrap{width:min(100% - 2 * var(--art-gutter),var(--art-max))}
.art-img__fig{max-width:none;box-shadow:0 24px 48px rgba(11,11,11,.28)}

/* ---------- reading area: TOC + prose share the same 1100px column as hero/image ---------- */
@media (min-width:1181px){
  .art{width:min(100% - 2 * var(--art-gutter),var(--art-max));grid-template-columns:clamp(260px,21vw,340px) minmax(0,1fr);gap:clamp(40px,4vw,72px);justify-content:stretch;padding:56px 0 72px}
  .prose{max-width:none;font-size:19px}
  /* the wider image keeps a similar on-screen height: 2:1 centred crop of the same image (was 16:10) */
  .art-img__fig.ratio{aspect-ratio:2/1}
}
@media (min-width:768px) and (max-width:1180px){
  .art{width:min(100% - 2 * var(--art-gutter),var(--art-max))}
}
.prose{line-height:1.75;overflow-wrap:break-word}   /* a word longer than the line breaks instead of being clipped (mobile) */
/* tables (had no styles at all): a table wider than the column scrolls inside its own box — the edge shadows (scroll-
   linked backgrounds) show there is more; ruled rows, top-aligned cells, smaller hyphenated text on phones */
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.4em;font-size:.92em;line-height:1.5;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(11,11,11,.18),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(11,11,11,.18),transparent) right/12px 100% no-repeat scroll}
.prose td,.prose th{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.prose thead td,.prose thead th{border-bottom:2px solid var(--navy);color:var(--navy)}
@media (max-width:767px){
  .prose table{font-size:15px}
  .prose td,.prose th{padding:8px;hyphens:auto}
  .prose td:first-child,.prose th:first-child{padding-left:0}
}
.prose > div > div:first-child h3:first-child{margin-top:0}
.prose h3{color:var(--navy)}
.prose h5{color:var(--navy);scroll-margin-top:110px}
.prose h6{color:var(--petrol-d)}
.prose ul ul{margin:6px 0 4px}
.prose ul ul li::marker{color:var(--gold-t)}
/* summary box (existing blockquote) and the closing appointment CTA (blockquote with a tel: link) */
.prose blockquote{margin:32px 0}
.prose blockquote:has(a[href^="tel:"]){background:var(--off);border-left-color:var(--gold-t)}

/* TOC: number + title on one line, hanging indent for wrapped titles (Round 2.3 counters kept) */
.art__toc summary{color:var(--navy);list-style:none}
.art__toc summary::-webkit-details-marker{display:none}
.art__toc a{color:var(--ink)}
@media (max-width:1180px){
  .art__toc details{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:12px 16px}
  .art__toc summary{display:flex;justify-content:space-between;align-items:center;margin:0;min-height:28px}
  .art__toc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--petrol);border-bottom:2px solid var(--petrol);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--m-normal) var(--ease-std)}
  .art__toc details[open] summary{margin-bottom:12px}
  .art__toc details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
}

/* ---------- author ---------- */
.author{grid-template-columns:96px 1fr;gap:24px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line);position:relative}
.author::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:3px;border-radius:2px;background:var(--gold)}
.author__img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 8%;
  background:linear-gradient(180deg,var(--char-2),var(--char-0));box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold)}
.author__name a{color:var(--navy)}
@media (max-width:767px){
  .art-hero{padding:28px 0 96px}
  .art-hero h1{font-size:clamp(28px,8vw,34px)}
  .art-hero .crumbs ol{font-size:13px;margin-bottom:20px}
  .art-img{margin-top:-72px}
  .author{grid-template-columns:64px 1fr;gap:16px}
  .author__img{width:64px;height:64px}
}