/* The blog module's layout (aws-platform lib/blog/; docs/design/blog.md),
   served as /_platform/blog/blog.css on the sites that have the blog, after the
   site's own base styles and before its blog stylesheet. Every colour is a
   --blog-* variable: the site's stylesheet sets them (these are the defaults,
   a dark palette). Running text is left-aligned in one column. */
:root{--blog-accent-line:rgba(66,220,163,.35);--blog-accent-edge:rgba(66,220,163,.25);--blog-accent-wash:rgba(66,220,163,.15);--blog-line:rgba(255,255,255,.3);--blog-line-faint:rgba(255,255,255,.2);--blog-line-soft:rgba(255,255,255,.15);--blog-shadow:rgba(0,0,0,.45);--blog-menu-line:rgba(0,0,0,.175);--blog-accent:#42dca3;--blog-panel:#1c2420;--blog-muted:#a9b1ad;--blog-panel-text:#d6dbd8;--blog-dim:#9aa39e;--blog-draft-text:#f1e6c4;--blog-draft-accent:#e0b43c;--blog-draft-panel:#2a2410;--blog-menu:#343a40;--blog-code:#111611;--blog-strong:#fff;--blog-on-accent:#000;}
.blog main{padding-bottom:60px;}
.blog .meta,.blog .kind,.blog .source,.blog .count{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--blog-muted);}
.filters .btn{margin:0 4px 8px 0;font-size:11px;letter-spacing:.5px;padding:4px 9px;}
/* The pressed state alone decides the colour: the theme's green :focus and
   :hover would otherwise keep a released button looking pressed on a phone. */
.filters .btn,.filters .btn:hover,.filters .btn:focus,.filters .btn:active{color:var(--blog-accent);background-color:transparent;border-color:var(--blog-accent);}
.filters .btn[aria-pressed="true"],.filters .btn[aria-pressed="true"]:hover,.filters .btn[aria-pressed="true"]:focus,.filters .btn[aria-pressed="true"]:active{color:var(--blog-on-accent);background-color:var(--blog-accent);}
.filters .btn:focus-visible{outline:2px solid var(--blog-strong);outline-offset:2px;}
@media(hover:hover){.filters .btn[aria-pressed="false"]:hover{background-color:var(--blog-accent-wash);}}
.filters .count{min-height:1.5em;margin-top:4px;}
.topics{list-style:none;margin:8px 0 0;padding:0;}
.topics li{display:inline-block;border:1px solid var(--blog-line);font-size:12px;padding:2px 8px;margin:0 6px 6px 0;color:var(--blog-muted);}
.article-head{padding-top:140px;text-align:left;}
.article-head h1{font-size:34px;text-transform:none;letter-spacing:0;line-height:1.25;margin:8px 0 16px;}
@media(min-width:768px){.article-head h1{font-size:44px;}}
.article-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 0 14px;}
.article-byline>*{margin:0;}
.article-byline .topics li{margin:0 6px 0 0;}
.byline{font-size:15px;}
.byline a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;}
.byline a:hover,.byline a:focus{text-decoration:underline;}
.byline img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
/* The contents under the byline: ---- CONTENTS v ---- until opened. */
.toc{margin:4px 0 0;}
.toc summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--blog-accent);}
.toc summary::-webkit-details-marker{display:none;}
.toc summary::before,.toc summary::after{content:"";flex:1;border-top:1px solid var(--blog-line);}
.toc summary:focus-visible{outline:2px solid var(--blog-strong);outline-offset:2px;}
.toc summary i{font-size:11px;transition:transform .2s;}
.toc[open] summary i{transform:rotate(180deg);}
.toc ul{list-style:none;margin:14px 0 0;padding:0;}
.toc li{margin:0 0 8px;font-size:16px;line-height:1.4;}
.toc .toc-h3{padding-left:20px;font-size:15px;}
.toc .toc-h4{padding-left:40px;font-size:15px;}
.article-body{margin-top:30px;text-align:left;}
.article-body p,.article-body li{font-size:18px;line-height:1.65;}
.article-body p{margin:0 0 22px;}
.article-body h2{font-size:24px;text-transform:none;letter-spacing:0;margin:36px 0 14px;text-align:left;}
/* A section opened by its link (#id) lands clear of the fixed navbar. */
.article-body h2[id],.article-body h3[id],.article-body h4[id]{scroll-margin-top:110px;}
.article-body h3,.article-body h4{font-size:19px;text-transform:none;letter-spacing:0;margin:28px 0 12px;}
.article-body img{max-width:100%;height:auto;display:block;margin:10px auto;}
.article-body{overflow-wrap:break-word;}
.article-body figcaption{font-size:14px;color:var(--blog-muted);text-align:center;margin-bottom:22px;}
/* The credit under an article's header image: half the size of the text. */
.article-body>figure:first-child figcaption{font-size:9px;line-height:1.4;}
/* Quote, rule and note boxes: a shaded panel. A direct quote (a first
   paragraph that is all italics) is led by an oversized opening quotation mark. */
.article-body blockquote{margin:0 0 22px;padding:14px 18px;background:var(--blog-panel);border-left:3px solid var(--blog-accent);color:var(--blog-panel-text);}
.article-body blockquote p:last-child{margin-bottom:0;}
.article-body blockquote:has(>p:first-child>em:only-child){position:relative;padding-left:60px;}
.article-body blockquote:has(>p:first-child>em:only-child)::before{content:"\201C";position:absolute;left:16px;top:4px;font-family:Georgia,serif;font-size:60px;line-height:1;color:var(--blog-accent);}
/* A direct quote with one line after it (who said it, or where it is from):
   that line sits close under the quote, not a paragraph's width below. */
.article-body blockquote:has(>p:first-child>em:only-child)>p:first-child:has(+p:last-child){margin-bottom:4px;}
.article-body figure img{border-radius:6px;}
.article-body pre{white-space:pre-wrap;background:var(--blog-code);padding:14px;font-size:15px;}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px;}
.article-body th,.article-body td{border-bottom:1px solid var(--blog-line);padding:8px 10px;text-align:left;}

.blog .sign-off{margin-top:36px;padding-top:18px;border-top:1px solid var(--blog-line);font-size:16px;color:var(--blog-muted);text-align:left;}
.post-list{font-size:15px;}
.post-list ol{list-style:none;margin:0;padding:0;}
.post-list li{border-top:1px solid var(--blog-line-faint);padding:9px 0;line-height:1.35;text-align:left;}
.post-list .meta{display:block;font-size:11px;margin-bottom:2px;}
.post-list a[aria-current="page"]{color:var(--blog-strong);font-weight:700;}
.post-list a[aria-current="page"]::before{content:"\25B8\00A0";color:var(--blog-accent);}
.post-list-inner{margin-top:100px;text-align:left;}
/* On a narrow screen the list is a concertina above the article, folded. */
.post-list-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;color:var(--blog-accent);border:1px solid var(--blog-line);padding:10px 14px;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;}
.post-list-toggle i{transition:transform .2s;}
.post-list-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
.post-list-toggle:focus-visible{outline:2px solid var(--blog-strong);outline-offset:2px;}
@media(max-width:991.98px){.post-list ol{margin-top:6px;}.blog-article .article-head{padding-top:30px;}}
@media(min-width:992px){.post-list-inner{position:sticky;top:90px;margin-top:140px;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:14px;}}
.filters{margin:6px 0 4px;text-align:left;}
.filters .count{margin:0;}
.post-list li[hidden]{display:none;}
.post-list li{position:relative;padding-right:28px;}
.post-list .info{position:absolute;top:8px;right:0;background:transparent;border:0;padding:4px;color:var(--blog-muted);font-size:14px;line-height:1;cursor:pointer;}
.post-list .info:hover,.post-list .info:focus{color:var(--blog-accent);}
.post-list .info:focus-visible{outline:2px solid var(--blog-strong);outline-offset:1px;}
/* A post's summary, opened below its title by the info button. */
.post-list .summary{margin:8px 0 2px;padding:8px 10px;background:var(--blog-panel);border-left:2px solid var(--blog-accent);color:var(--blog-panel-text);font-size:14px;line-height:1.45;}
.post-list .summary[hidden]{display:none;}
.post-list .summary .where{display:block;margin-top:4px;color:var(--blog-muted);}
.post-list .info[aria-expanded="true"]{color:var(--blog-accent);}
@media(max-width:991.98px){.blog-index .post-list-inner{margin-top:10px;}.blog-index .article-head{padding-top:100px;}}
.cite{margin:14px 0 4px;border:1px solid var(--blog-line);}
.cite summary{cursor:pointer;padding:8px 12px;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--blog-accent);}
.cite summary:focus-visible{outline:2px solid var(--blog-strong);outline-offset:2px;}
/* No disclosure arrow: the quote icon marks it, as the share icon marks Share. */
.cite summary{list-style:none;}
.cite summary::-webkit-details-marker{display:none;}
.cite .citation{padding:12px;border-bottom:1px solid var(--blog-line-soft);}
.cite .citation-head{display:flex;align-items:center;gap:10px;margin:0 0 6px;}
.cite .citation .meta{margin:0;}
.cite .citation-text{font-size:15px;line-height:1.5;overflow-wrap:anywhere;user-select:all;}
.cite .citation-text pre{margin:0;font-size:13px;white-space:pre-wrap;background:transparent;color:var(--blog-strong);}
.cite .copy{font-size:11px;padding:3px 10px;}
.cite-panel > .meta{padding:10px 12px;margin:0;}
.blog-index .article-body h2{margin-top:40px;}
/* The date, with Share and Cite at the other end of its row. Cite's panel
   opens under the row, over the title, and closes on Escape or a click away;
   it takes the Share menu's colours (Bootstrap's dark dropdown). */
.dateline{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;}
.dateline>.meta{margin:0;}
.article-tools{display:flex;gap:10px;align-items:center;}
.article-tools .cite{margin:0;}
@media(max-width:575.98px){.article-tools .wide{display:none;}.article-tools .share-toggle,.article-tools .cite summary{padding:6px 10px;}}
.cite-panel{position:absolute;z-index:10;top:100%;right:0;width:min(640px,100%);max-height:70vh;overflow:auto;margin-top:6px;background:var(--blog-menu);border:1px solid var(--blog-menu-line);border-radius:6px;}
.share-toggle{background:transparent;border:1px solid var(--blog-line);color:var(--blog-accent);padding:8px 12px;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;}
.share-toggle:focus-visible{outline:2px solid var(--blog-strong);outline-offset:2px;}
.share .dropdown-menu{text-transform:none;letter-spacing:0;}
.share .dropdown-menu .dropdown-item{color:var(--blog-strong);}
/* An editor's note (CLAUDE.md rule 13): a shaded box, set apart from the
   article as first written. */
.article-body .editors-note{margin:0 0 22px;padding:14px 18px;background:var(--blog-panel);border-left:3px solid var(--blog-accent);}
.article-body .editors-note p{margin:0;font-size:16px;line-height:1.6;color:var(--blog-panel-text);font-style:italic;}
/* A draft shared by link for feedback: a box above the article. */
.article-head+.draft-note{margin:24px 0 0;padding:14px 18px;background:var(--blog-draft-panel);border-left:3px solid var(--blog-draft-accent);}
.draft-note p{margin:0;font-size:16px;line-height:1.6;color:var(--blog-draft-text);}
/* A part of a series: which part it is, and every part in order. */
.series{margin:24px 0 0;padding:14px 18px;background:var(--blog-panel);border:1px solid var(--blog-accent-edge);border-left:3px solid var(--blog-accent);font-size:16px;line-height:1.5;}
.series p{margin:0 0 6px;color:var(--blog-panel-text);}
.series ol{margin:0;padding-left:1.4em;}
.series li{margin:2px 0;color:var(--blog-dim);}
.series [aria-current="page"]{color:var(--blog-strong);font-weight:700;}
.series .when{font-size:14px;}
/* The author bio on /blog/: the photo on one side, the text on the other;
   stacked on a narrow screen. */
.bio-panel{display:flex;gap:24px;align-items:flex-start;margin:40px 0 22px;padding:20px;background:var(--blog-panel);border:1px solid var(--blog-line-soft);}
.bio-panel img{flex:0 0 160px;width:160px;height:160px;border-radius:50%;object-fit:cover;}
.bio-panel h2{margin-top:0 !important;}
.bio-panel p{margin-bottom:0;}
@media(max-width:575.98px){.bio-panel{flex-direction:column;align-items:center;}.bio-panel img{flex-basis:auto;width:140px;height:140px;}}

/* A talk's or contribution's page: what it is, and where it is hosted. */
.offsite{margin:30px 0 0;padding:20px 22px;background:var(--blog-panel);border:1px solid var(--blog-line-soft);border-left:3px solid var(--blog-accent);text-align:left;}
.offsite-summary{font-size:18px;line-height:1.6;margin-bottom:18px;}
.offsite dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 20px;}
.offsite dt{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:400;text-transform:uppercase;letter-spacing:1px;color:var(--blog-muted);padding-top:3px;}
.offsite dd{margin:0;color:var(--blog-panel-text);}
.offsite-link{margin-bottom:8px;}
/* The privacy note sits beside the Visit button on a wide screen, below it on a phone. */
.offsite-go>p:last-child{margin-bottom:14px;}
@media(min-width:768px){.offsite-go{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
.offsite-go>p{margin:0 !important;}
.offsite-go .offsite-link{flex:0 0 auto;}
.offsite-go .btn{white-space:nowrap;}}
.offsite .also-on{margin:0 0 14px;font-size:16px;color:var(--blog-panel-text);}
.offsite>:last-child{margin-bottom:0;}
@media(max-width:575.98px){.offsite dl{grid-template-columns:1fr;gap:2px;}
.offsite dd{margin-bottom:8px;}}

/* Previous and Next, side by side at the foot of every post. */
.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0 0;}
.prev-next a{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--blog-panel);border:1px solid var(--blog-line-soft);color:var(--blog-strong);text-decoration:none;text-align:left;}
.prev-next a.next{text-align:right;}
.prev-next a:hover,.prev-next a:focus-visible{border-color:var(--blog-accent);}
.prev-next a:focus-visible{outline:2px solid var(--blog-strong);outline-offset:2px;}
.prev-next .title{font-size:17px;line-height:1.35;}
.prev-next a:hover .title{color:var(--blog-accent);}
@media(max-width:575.98px){.prev-next{grid-template-columns:1fr;}
.prev-next span:empty{display:none;}}

/* Links in an article's text: an arrow after a link to another site, and the
   card js/blog-links.js shows on hover or focus (Andy, 25 Oct 2026). */
.article-body a.external::after{content:"\f35d" / "";font-family:"Font Awesome 7 Free";font-weight:900;font-size:.7em;margin-left:.3em;vertical-align:.15em;opacity:.75;}
.link-card-shown{position:absolute;z-index:1080;width:22rem;max-width:calc(100vw - 16px);padding:10px 14px;background:var(--blog-panel);border:1px solid var(--blog-accent-line);border-radius:6px;box-shadow:0 6px 20px var(--blog-shadow);color:var(--blog-panel-text);font-size:14px;line-height:1.45;text-align:left;}
.link-card-shown[hidden]{display:none;}
.link-card-shown>span,.link-card-shown>a{display:block;}
.link-card-shown a.lc-url:hover,.link-card-shown a.lc-title:hover{text-decoration:underline;}
.link-card-shown .lc-url{color:var(--blog-accent);overflow-wrap:anywhere;margin-bottom:4px;}
.link-card-shown .lc-meta{color:var(--blog-dim);font-size:13px;display:flex;align-items:center;gap:8px;}
.link-card-shown .lc-meta img{width:24px;height:24px;border-radius:50%;flex:none;}
.link-card-shown .lc-title{color:var(--blog-strong);font-weight:700;margin:2px 0 4px;}