/* Shared editorial system for the blog index and every article. */
:root {
  --blue:#174ae5; --navy:#11244b; --ink:#182235; --quiet:#526075;
  --line:#dce1e7; --paper:#fcfcfa; --wash:#f1f4f8; --lemon:#dfffad;
  --display:"Google Sans Flex","Segoe UI",Arial,sans-serif;
  --body:"Google Sans Flex","Segoe UI",Arial,sans-serif;
  --code:"Google Sans Code",ui-monospace,monospace;
  --diagram:"Patrick Hand","Google Sans Flex",sans-serif;
  --navigation-width:240px;
}
* { box-sizing:border-box; }
html { scroll-padding-top:32px; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 18px/1.75 var(--body); font-optical-sizing:auto; -webkit-font-smoothing:antialiased; }
::selection { background:var(--lemon); color:var(--ink); }
a { color:inherit; text-underline-offset:5px; text-decoration-thickness:1px; }
a:hover { color:var(--blue); }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
[hidden] { display:none !important; }
.wrap { width:min(1184px,calc(100% - 64px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; background:#fff; padding:12px 20px; }
.skip:focus { top:8px; left:8px; z-index:5; }
.header,.footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.header { min-height:88px; border-bottom:1px solid var(--line); }
.logo { display:block; width:118px; height:auto; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:28px; font-size:15px; font-weight:500; }
nav a { text-decoration:none; }
.header nav,.story-navigation { width:var(--navigation-width); max-width:100%; justify-content:space-between; }
.header nav { margin-left:auto; flex-shrink:0; }
.header nav a { padding-block:12px; }
.header nav a:last-child { padding:9px 18px; border:1px solid var(--line); border-radius:6px; }
[aria-current=page] { color:var(--blue); }
p { margin:0 0 24px; }
h1,h2,h3 { font-family:var(--display); font-weight:500; line-height:1.2; letter-spacing:-.025em; margin:0 0 24px; text-wrap:balance; }
h1 { font-size:clamp(40px,5.5vw,70px); }
h2 { font-size:clamp(28px,3vw,40px); }
h3 { font-size:28px; }
.eyebrow { color:var(--blue); text-transform:uppercase; font-size:12px; font-weight:600; letter-spacing:.08em; line-height:1.6; }
.meta { color:var(--quiet); font-size:14px; line-height:1.7; }
.lede { max-width:720px; color:var(--quiet); font-size:20px; line-height:1.65; }
.hero-shell { border-bottom:1px solid var(--line); background:var(--wash); }
.masthead { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px 32px; padding-block:36px; }
.masthead h1 { font-size:clamp(30px,3.2vw,42px); font-weight:450; margin-bottom:12px; }
.masthead .lede { font-size:17px; max-width:560px; margin:0; }
.story-navigation { justify-self:end; }
.story-navigation a { padding-block:12px; }
.story-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start; gap:40px; padding-block:8px 64px; }
.cover-story { min-width:0; container-type:inline-size; }
.cover-link { display:block; aspect-ratio:16/9; overflow:hidden; border-radius:4px; background:var(--paper); text-decoration:none; }
.cover-link img { display:block; width:100%; height:100%; object-fit:cover; }
.cover-story:has(a:hover) .story-title { text-decoration:underline; }
.story-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:18px 0 10px; font-size:13px; line-height:1.6; color:var(--quiet); }
.story-meta span { color:var(--navy); font-weight:500; }
.meta-separator { flex:none; }
.story-meta .meta-separator,.article-meta .meta-separator { color:var(--quiet); font-weight:400; }
.story-meta time,.article-meta time { white-space:nowrap; }
.cover-story h2 { margin-bottom:12px; font-size:24px; font-weight:450; line-height:1.3; text-wrap:pretty; }
.cover-featured h2 { max-width:30ch; font-size:clamp(30px,3vw,38px); line-height:1.2; }
.story-summary { max-width:58ch; margin:16px 0 0; color:var(--quiet); font-size:17px; line-height:1.65; }
.story-sidebar { display:grid; gap:32px; min-width:0; }
.story-title { text-decoration:none; }
.story-title:hover { text-decoration:underline; }
.read-more { display:inline-block; padding:8px 0; font-size:16px; font-weight:500; color:var(--blue); text-decoration:none; border-bottom:1px solid currentColor; }
.article-head { max-width:1056px; margin-inline:auto; padding-block:56px 48px; border-bottom:1px solid var(--line); }
.article-head > p:first-child { font-size:14px; margin-bottom:36px; }
.article-head > p:first-child a { color:var(--quiet); text-decoration:none; }
.article-head h1 { max-width:26ch; font-size:clamp(36px,4.5vw,56px); font-weight:450; line-height:1.16; }
.article-head .lede { max-width:760px; }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:20px; color:var(--quiet); font-size:14px; line-height:1.6; }
.article-meta span { color:var(--navy); font-weight:500; }
.article-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:28px; font-size:14px; }
.article-actions button { color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:24px; padding:10px 18px; font:inherit; cursor:pointer; }
.article-actions button:hover { color:var(--blue); border-color:var(--blue); }
.article-actions [role=status] { flex-basis:100%; color:var(--quiet); overflow-wrap:anywhere; }
.article-actions [role=status]:empty { display:none; }
.article-layout { display:grid; grid-template-columns:minmax(0,780px) minmax(160px,200px); max-width:1056px; margin-inline:auto; gap:72px; padding-block:56px 96px; }
.article-layout > article { grid-column:1; grid-row:1; }
.contents { grid-column:2; grid-row:1; position:sticky; top:32px; align-self:start; }
.contents > strong { color:var(--navy); font-size:14px; font-weight:500; }
.contents nav { display:grid; gap:0; margin-top:16px; border-left:1px solid var(--line); }
.contents nav a { padding:10px 0 10px 18px; font-size:14px; line-height:1.5; color:var(--quiet); }
.contents nav a:hover { color:var(--blue); border-left:2px solid var(--blue); margin-left:-1px; padding-left:17px; }
article { min-width:0; overflow-wrap:break-word; }
article section { margin-bottom:56px; scroll-margin-top:32px; }
.article-layout article { counter-reset:figure; }
.article-layout article p { color:var(--ink); }
.article-layout article h2 { font-size:30px; margin-bottom:24px; }
.article-layout article h3 { font-size:24px; }
.article-layout article a { color:var(--blue); }
.article-layout article li { margin-bottom:12px; }
code,pre { font-family:var(--code); font-size:.88em; }
pre { max-width:100%; overflow-x:auto; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--wash); }
.takeaway { border-left:3px solid var(--blue); padding:4px 0 4px 24px; margin-bottom:40px; }
.takeaway p:last-child { font-size:20px; line-height:1.6; margin:0; }
.flow { padding:16px 24px 16px 48px; background:var(--wash); border-radius:6px; }
.flow li { padding:10px 0; }
.flow li::marker { color:var(--blue); }
.note { padding:20px 24px; background:var(--wash); border-left:3px solid var(--blue); font-size:16px; }
.note p:last-child { margin:0; }
.benchmark-figure { margin:40px 0; counter-increment:figure; }
.benchmark-figure img { display:block; width:100%; height:auto; }
figcaption { color:var(--quiet); margin-top:16px; font-size:14px; line-height:1.6; }
.benchmark-figure figcaption::before { content:"Figure " counter(figure) ". "; font-weight:500; color:var(--navy); }
.diagram { padding:32px; border:1px solid var(--line); border-radius:24px; background:#fff; }
.diagram .eyebrow { margin-bottom:20px; color:var(--blue); font-size:12px; }
.diagram-results { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.diagram-result { padding:24px; border:1.5px solid var(--navy); border-radius:19px 23px 18px 22px; background:var(--wash); }
.diagram-result:last-child { background:var(--lemon); }
.diagram-result strong { display:block; color:var(--navy); font:400 clamp(36px,4vw,52px)/1.15 var(--diagram); letter-spacing:0; font-variant-numeric:tabular-nums; }
.diagram-result span { display:block; font:400 23px/1.35 var(--diagram); color:var(--navy); margin-top:16px; }
.diagram-result small { display:block; margin-top:20px; padding-top:16px; border-top:1px solid var(--navy); font-size:14px; line-height:1.6; color:var(--navy); }
.article-layout article .diagram-foot { font-size:14px; margin:24px 0 0; color:var(--quiet); }
.diagram-title { font:500 23px/1.35 var(--display); letter-spacing:-.02em; }
.handoff { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:0; margin:32px 0; }
.article-layout article .handoff li { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:142px; padding:20px 16px; margin:0; border:1.5px solid var(--navy); border-radius:19px 23px 18px 22px; background:var(--wash); color:var(--navy); font:400 23px/1.3 var(--diagram); }
.handoff li::after { content:""; position:absolute; inset:2px -2px -2px 2px; border:1px solid var(--navy); border-radius:23px 18px 22px 19px; opacity:.45; pointer-events:none; }
.handoff small { display:block; color:var(--blue); margin-bottom:12px; font:400 21px/1 var(--diagram); }
.handoff li + li::before { content:"→"; position:absolute; left:-26px; top:calc(50% - 20px); color:var(--navy); font:400 32px/1 var(--diagram); }
.article-layout article .handoff li:last-child { border-style:dashed; background:var(--lemon); }
.handoff li:last-child::after { border-style:dashed; }
.diagram-contract { padding-top:20px; border-top:1px solid var(--line); font-size:16px; margin-bottom:0; }
.table-scroll { overflow-x:auto; margin:32px 0; }
table { width:100%; border-collapse:collapse; font-size:16px; }
caption { text-align:left; font-weight:600; padding-bottom:16px; }
th,td { padding:16px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th { background:var(--wash); }
.finding-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.finding-split strong { display:block; color:var(--blue); font-size:48px; }
.cta { padding:32px; border:1px solid var(--line); border-radius:20px; background:var(--wash); }
.blog-resources { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px 40px; padding-block:40px; margin-block:16px 24px; }
.blog-resources h2 { font-size:24px; font-weight:450; margin-bottom:8px; }
.blog-resources p { color:var(--quiet); font-size:16px; margin:0; }
.blog-resources > a { display:inline-flex; align-items:center; gap:12px; justify-self:end; padding-block:10px; border-bottom:1px solid currentColor; color:var(--blue); font-size:15px; font-weight:500; text-decoration:none; }
.blog-resources > a:hover { color:var(--navy); }
.blog-resources > a span { font-size:20px; line-height:1; }
.cta h2 { font-size:28px; }
.cta p { max-width:660px; }
.cta p:last-child { margin-bottom:0; }
.cta a { color:var(--blue); font-weight:500; font-size:16px; }
.discussion,.related-story { border-top:1px solid var(--line); padding-top:32px; }
.discussion-note { font-size:14px; color:var(--quiet); margin-top:16px; }
.related-story h2 { max-width:600px; }
.revision-note { border-top:1px solid var(--line); padding-top:20px; color:var(--quiet); font-size:14px; }
.revision-note summary { width:fit-content; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.revision-note p { margin:16px 0 0; }
.closing-line { font:570 32px/1.2 var(--display); }
.footer { border-top:1px solid var(--line); padding-block:32px; color:var(--quiet); font-size:14px; }
@media(max-width:1000px) {
  .story-grid { gap:32px; }
  .cover-story h2 { font-size:22px; }
  .cover-featured h2 { font-size:30px; }
  .article-layout { grid-template-columns:minmax(0,1fr) 170px; gap:40px; }
}
@media(max-width:760px) {
  :root { --navigation-width:clamp(188px,calc(100vw - 160px),240px); }
  .wrap { width:calc(100% - 36px); }
  .header { min-height:76px; gap:16px; }
  .header nav,.story-navigation { gap:16px; font-size:14px; }
  .logo { width:100px; }
  .header nav a:last-child { padding:8px 12px; }
  .masthead { grid-template-columns:1fr; padding-block:28px; gap:12px; }
  .masthead .lede { font-size:16px; }
  .story-grid { grid-template-columns:1fr; padding-block:8px 40px; gap:36px; }
  .cover-featured h2 { font-size:30px; }
  .story-sidebar { gap:36px; }
  .cover-story h2 { max-width:none; }
  .article-head { padding-block:32px; }
  .article-head h1 { font-size:clamp(34px,7.8vw,48px); }
  .article-head h1 br { display:none; }
  .lede { font-size:18px; }
  .article-layout { display:flex; flex-direction:column; gap:32px; padding-block:32px 48px; }
  .contents { position:static; width:100%; border-bottom:1px solid var(--line); padding-bottom:24px; }
  .contents nav { grid-template-columns:1fr 1fr; gap:0 12px; }
  .contents nav a { padding-block:8px; }
  .article-layout article { width:100%; }
  .article-layout article h2 { font-size:27px; }
  .diagram { padding:24px; border-radius:20px; }
  .diagram-results { grid-template-columns:1fr; gap:28px; }
  .handoff { grid-template-columns:1fr; gap:24px; }
  .article-layout article .handoff li { min-height:112px; }
  .handoff li + li::before { content:"↓"; top:-29px; left:calc(50% - 8px); font-size:26px; }
  .cta { padding:24px; }
  .blog-resources { grid-template-columns:1fr; gap:16px; padding-block:28px; margin-bottom:12px; }
  .blog-resources > a { justify-self:start; }
  .footer { gap:20px; }
}
@media(max-width:480px) {
  .story-meta,.article-meta { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
  .story-meta .meta-separator,.article-meta .meta-separator { display:none; }
}
@container(max-width:360px) {
  .story-meta { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }
  .story-meta .meta-separator { display:none; }
}
@media(max-width:380px) {
  .header nav,.story-navigation { gap:10px; }
  .header nav a:last-child { padding-inline:8px; }
  .diagram { padding:20px; }
  .diagram-result { padding:20px; }
}
@media print {
  body { background:#fff; color:#000; }
  .header,.footer,.contents,.article-actions,.discussion,.related-story,.skip { display:none; }
  .wrap { width:100%; }
  .article-head { padding-top:0; }
  .article-head h1 { font-size:36px; }
  .article-layout { display:block; padding-block:24px; }
  .diagram,.cover-story { break-inside:avoid; }
}