/* ST Portal — unified cards, system typography and compact reading layout. */
:root {
  --accent:#ff6100;
  --ink:#22262a;
  --muted:#616970;
  --paper:#fff;
  --surface:#f4f5f3;
  --line:#e5e7e3;
  --radius:16px;
  --container:1160px;
  --sans:system-ui,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:20px }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
a:hover { text-decoration:underline; text-underline-offset:.18em }
a,button,input { touch-action:manipulation }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
img,video { max-width:100%; height:auto }
/* Preserve existing grid/flex/inline image geometry while picture selects its resource. */
.st-picture { display:contents }
svg { vertical-align:middle }
figure { margin:0 }
h1,h2,h3,h4,p { margin-top:0 }
h1,h2,h3 { line-height:1.2; letter-spacing:-.025em }
h1 { font-size:2.3rem; font-weight:780 }
h2 { font-size:1.5rem }
:focus-visible { outline:3px solid #1859a5; outline-offset:4px }
::selection { background:#ffdabf; color:#18202a }
[hidden] { display:none!important }
.site-container { width:min(calc(100% - 48px),var(--container)); margin-inline:auto; min-width:0 }
.screen-reader-text,.skip-link { clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; overflow:hidden; position:absolute; white-space:nowrap }
.skip-link:focus { clip:auto; clip-path:none; width:auto; height:auto; top:8px; left:8px; padding:12px 20px; background:var(--ink); color:#fff; z-index:10000 }
/* One brand bar: identity, navigation and controls share a single baseline. */
.site-header { background:var(--accent); color:#fff; position:relative; z-index:30 }
.masthead { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:0 24px; min-height:72px }
.brand,.custom-logo-link { display:inline-flex; align-items:center; flex-shrink:0; max-width:320px }
.brand img,.custom-logo { object-fit:contain; object-position:left center; max-height:48px; width:auto }
.brand-text { font-size:1.6rem; font-weight:750; letter-spacing:-.045em; line-height:1.1; gap:9px }
.brand-mark { font-size:2.4rem; line-height:1; color:var(--accent) }
.brand-with-logo img { width:48px; height:auto; flex-shrink:0 }
.brand-name { min-width:0 }
.site-header .brand-name { white-space:nowrap }
.site-header .brand-mark { color:inherit }
.site-header :focus-visible { outline:2px solid #22262a; outline-offset:3px; box-shadow:0 0 0 3px #fff }
.site-navigation { flex:1; min-width:0; margin-left:auto }
.primary-menu { display:flex; list-style:none; align-items:center; justify-content:flex-end; gap:2px; margin:0; padding:0 }
.primary-menu>li { position:relative }
.primary-menu>li>a { display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:8px; font-size:.82rem; line-height:1.3; font-weight:650; white-space:nowrap; transition:background .15s ease }
.primary-menu>li>a:hover { background:rgb(0 0 0 / 9%); text-decoration:none }
.primary-menu>.current-menu-item>a { background:rgb(0 0 0 / 13%); text-decoration:underline; text-underline-offset:5px }
.primary-menu .sub-menu { position:absolute; right:0; top:100%; z-index:20; list-style:none; display:none; min-width:220px; background:#fff; color:var(--ink); padding:8px; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgb(0 0 0 / 10%) }
.sub-menu a { display:block; padding:12px; font-size:.82rem }
.primary-menu li:hover>.sub-menu,.primary-menu li:focus-within>.sub-menu { display:block }
.header-actions { display:flex; align-items:center; gap:4px; flex-shrink:0 }
.search-toggle,.menu-toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:inherit }
.search-toggle:hover,.menu-toggle:hover { background:rgb(0 0 0 / 9%) }
/* SVG geometry is centered independently of any font baseline. */
.menu-icon { display:block; width:24px; height:24px; flex:none }
.menu-icon path { transform-origin:12px 12px; transition:transform .18s ease,opacity .18s ease }
.menu-toggle[aria-expanded=true] .line-top { transform:translateY(6px) rotate(45deg); transform-origin:12px 6px }
.menu-toggle[aria-expanded=true] .line-middle { opacity:0 }
.menu-toggle[aria-expanded=true] .line-bottom { transform:translateY(-6px) rotate(-45deg); transform-origin:12px 18px }
.menu-toggle[aria-expanded=true],.search-toggle[aria-expanded=true] { background:rgb(0 0 0 / 9%) }
.header-search { flex-basis:100%; padding:0 0 14px; color:var(--ink) }
.header-search .search-form { max-width:none; border-color:transparent; border-radius:999px; background:var(--surface) }
.header-search .search-form input { padding:12px 16px; font-size:.85rem }
.header-search .search-form button { margin:4px; padding:8px 14px; font-size:.8rem; border-radius:999px }
.has-controls .header-search { position:absolute; top:100%; right:0; width:min(420px,100%); padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow:0 12px 28px rgb(0 0 0 / 12%) }
/* Five lead stories, then a consistent four-column thumbnail grid. */
.listing-page { padding-block:20px 40px }
.listing-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px }
.listing-header h1 { font-size:1.25rem; letter-spacing:-.035em; margin:0 }
.listing-intro { color:var(--muted); font-size:.78rem; line-height:1.5; margin:0 }
.listing-intro p { margin:6px 0 0 }
.eyebrow { display:block; font-size:.63rem; line-height:1.35; font-weight:760; letter-spacing:.065em; text-transform:uppercase; color:var(--muted); margin-bottom:7px }
.eyebrow:before { content:""; display:inline-block; width:4px; height:9px; background:var(--accent); margin-right:6px; vertical-align:-1px }
.lead-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch }
.post-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.story-card { position:relative; min-width:0; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius); box-shadow:0 0 0 1px rgb(34 38 42 / 3%); transition:box-shadow .2s ease,background .2s ease }
.story-card:hover { background:#eff1ed; box-shadow:0 5px 20px rgb(34 38 42 / 8%) }
.story-card:focus-within { outline:2px solid #1859a5; outline-offset:3px }
.story-title a:after { content:""; position:absolute; inset:0; border-radius:var(--radius) }
.story-copy>.eyebrow { position:relative; z-index:1; align-self:flex-start }
.story-image { display:block; overflow:hidden; aspect-ratio:16/9; background:#e8ebe5; border-radius:var(--radius) var(--radius) 0 0; flex-shrink:0 }
.story-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease }
.story-card:hover .story-image img { transform:scale(1.025) }
.image-placeholder { display:flex; align-items:center; justify-content:center; height:100%; padding:12px; font-size:.85rem; font-weight:700; color:var(--muted); background:var(--surface) }
.story-copy { display:flex; flex-direction:column; flex:1; padding:14px 15px 15px }
.story-copy .eyebrow { margin-bottom:6px }
.story-title { font-size:1.06rem; line-height:1.27; font-weight:700; letter-spacing:-.02em; margin:0 0 12px; overflow-wrap:anywhere }
.card-meta { margin-top:auto; display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:.64rem; line-height:1.4 }
.card-meta>span:before { content:"·"; margin-right:8px }
.lead-grid>.story-card-featured { grid-column:span 2; grid-row:span 2 }
.story-card-featured .story-title { font-size:1.95rem; line-height:1.16; letter-spacing:-.035em; margin-bottom:12px }
.story-card-featured .story-image { aspect-ratio:3/2 }
.story-card-featured .story-copy { padding:20px 22px 22px }
.story-card-featured .eyebrow { margin-bottom:8px }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-top:0; margin:30px 0 18px }
.section-heading h2 { font-size:1.2rem; margin:0; position:relative }
.section-heading h2:before,.related-stories>h2:before { content:""; width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--accent); margin-right:10px; vertical-align:2px }
.section-heading>span { font-size:.73rem; color:var(--muted) }
.pagination { margin-top:30px; padding-top:22px; border-top:1px solid var(--line) }
.nav-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.page-numbers { display:inline-flex; justify-content:center; align-items:center; min-width:44px; min-height:44px; padding:6px 12px; border:1px solid var(--line); border-radius:12px; font-size:.82rem }
.page-numbers.current { background:var(--ink); color:#fff; border-color:var(--ink) }
/* One consistent reading column: title, image and text share the same edges. */
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:.68rem; margin-bottom:18px }
.single-page,.page-view { padding-block:22px 40px }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start }
.article-main,.article-sidebar { min-width:0 }
.article-header { margin:0 0 18px }
.article-header h1 { font-size:2.625rem; line-height:1.1; font-weight:800; letter-spacing:-.035em; margin:0 0 12px }
.article-deck { font-size:1.03rem; line-height:1.55; font-weight:550; color:#434d59; margin-bottom:14px }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; color:var(--muted); font-size:.72rem; line-height:1.65 }
.post-meta a { color:var(--ink); font-weight:650 }
.post-meta .eyebrow { font-size:inherit; font-weight:700; text-transform:none; letter-spacing:0; line-height:inherit; margin:0; padding-right:12px; border-right:1px solid #c9cec6 }
.post-meta .eyebrow:before { display:none }
.post-meta .post-label { margin:0; font-size:inherit; background:#fff1e7; border-color:#f1c8ac }
.meta-item { display:inline-flex; flex-wrap:wrap; gap:0 3px; max-width:100% }
.updated-date { color:var(--muted) }
.reading-time { color:var(--muted) }
.article-cover { margin:0 0 22px }
.article-cover img { display:block; width:100%; height:auto; border-radius:var(--radius) }
figcaption,.media-credit { font-size:.68rem; line-height:1.5; color:var(--muted); padding-top:6px }
figcaption a { text-decoration:underline }
.article-content { font-size:1.125rem; line-height:1.7; overflow-wrap:break-word }
.article-content>* { margin-top:0; margin-bottom:1.1em }
.article-content>p:first-child { font-weight:550; font-size:1.07em; line-height:1.65 }
.article-content h2,.article-content h3,.article-content h4 { line-height:1.25; margin-top:1.35em; margin-bottom:.6em; scroll-margin-top:20px }
.article-content h2 { font-size:1.55rem }
.article-content h3 { font-size:1.25rem }
.article-content a,.text-link { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em }
.article-content a:hover,.text-link:hover { text-decoration-thickness:2px }
.article-content img { height:auto; max-width:100%; border-radius:var(--radius) }
.article-content figure { max-width:100% }
.article-content iframe { display:block; max-width:100%; border:0 }
.article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,.article-content .video-wrapper { aspect-ratio:16/9 }
.article-content .is-type-video iframe,.video-wrapper iframe { width:100%; height:100%; aspect-ratio:16/9 }
.article-content video { display:block; width:100% }
.article-content blockquote { margin-inline:0; padding:16px 20px; border-left:3px solid var(--accent); background:var(--surface); font-size:1.02em }
.article-content blockquote>*:last-child { margin-bottom:0 }
.article-content ul,.article-content ol { padding-left:1.3em }
.article-content li { padding-left:.15em; margin-bottom:.3em }
.article-content table { border-collapse:collapse; width:100%; font-size:.87em }
.article-content th,.article-content td { border:1px solid var(--line); padding:9px; vertical-align:top }
.article-content .wp-block-table { overflow:auto }
.article-content pre { overflow:auto; padding:16px; background:var(--surface); font-size:.8em }
.article-content .alignleft { float:left; margin-right:20px }
.article-content .alignright { float:right; margin-left:20px }
.article-content:after { content:""; display:block; clear:both }
.article-sidebar { padding-left:0; position:relative; align-self:stretch }
.related-stories { display:grid; gap:12px }
.related-stories>h2 { font-size:1.1rem; margin:0 0 4px }
.story-card-compact { display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; padding:10px; align-items:start }
.story-card-compact .story-image { aspect-ratio:1; border-radius:10px }
.story-card-compact .story-copy { padding:0 }
.story-card-compact .story-title { font-size:.89rem; line-height:1.28; margin-bottom:7px }
.story-card-compact .eyebrow { font-size:.56rem; margin-bottom:4px }
.story-card-compact .card-meta { font-size:.58rem }
.story-card-compact .card-meta>span { display:none }
/* The guide is navigation, not another repeated list of recommended posts. */
.topic-guide { padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-top:24px }
.topic-guide h2 { font-size:1rem; line-height:1.3; margin:0 0 10px }
.topic-guide ul { list-style:none; padding:0; margin:0 }
.topic-guide li+li { border-top:1px solid var(--line) }
.topic-guide a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 0; font-size:.85rem; line-height:1.4; font-weight:600; overflow-wrap:anywhere }
.topic-guide a>span { color:var(--muted); flex-shrink:0 }
.topic-guide--mobile { display:none }
.sidebar-ad-sticky { margin-top:24px }
/* Saved own-post embeds: one horizontal card or a native, keyboard-scrollable rail. */
.article-content .st-post-embed { margin:24px 0; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); clear:both }
.st-post-embed__label { margin:0 0 12px; font-size:.75rem; line-height:1.4; font-weight:750; letter-spacing:.04em; text-transform:uppercase }
.st-post-embed__label:before { content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:2px }
.st-post-embed__toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px }
.st-post-embed__toolbar .st-post-embed__label { margin:0 }
.st-post-embed__controls { display:flex; align-items:center; gap:4px; flex-shrink:0 }
.st-post-embed__position { min-width:36px; color:var(--muted); font-size:.68rem; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums }
.st-post-embed__control { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink) }
.st-post-embed__control:hover:not(:disabled) { background:#ffe7d7 }
.st-post-embed__control:disabled { opacity:.35; cursor:default }
/* Keep native swipe/keyboard scrolling; arrows, counter and mobile peek provide cues. */
.st-post-embed__items { display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:1px; padding:1px; scrollbar-width:none; -ms-overflow-style:none }
.st-post-embed__items::-webkit-scrollbar { display:none; width:0; height:0 }
.st-post-embed__card { flex:0 0 calc((100% - 12px)/2); min-width:260px; scroll-snap-align:start; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper) }
.st-post-embed__card:only-child { flex-basis:100%; min-width:0 }
.article-content .st-post-embed__link { display:grid; grid-template-columns:96px minmax(0,1fr); min-height:104px; height:100%; color:var(--ink); text-decoration:none }
.st-post-embed__card:only-child .st-post-embed__link { grid-template-columns:128px minmax(0,1fr) }
.st-post-embed__image { display:block; min-width:0; height:100%; min-height:104px; overflow:hidden; background:#e8ebe5 }
.article-content .st-post-embed__image img { display:block; width:100%; height:100%; object-fit:cover; border-radius:0; margin:0 }
.st-post-embed__body { display:flex; align-items:center; padding:14px; min-width:0 }
.st-post-embed__body:first-child { grid-column:1/-1 }
.st-post-embed__title { display:block; font-size:1rem; line-height:1.3; letter-spacing:-.015em; font-weight:700; overflow-wrap:anywhere }
.st-post-embed__card:only-child .st-post-embed__title { font-size:1.08rem }
.st-post-embed__link:hover .st-post-embed__title { text-decoration:underline; text-underline-offset:.18em }
.st-post-embed__card:focus-within { outline:2px solid #1859a5; outline-offset:-2px }
.post-topics { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 }
.post-topics a { border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-size:.75rem }
.author-card { display:flex; gap:16px; background:var(--surface); border-radius:var(--radius); padding:20px; margin-block:26px }
.author-card img { flex-shrink:0; width:48px; height:48px; border-radius:50% }
.author-card .eyebrow { font-size:.6rem; margin-bottom:5px }
.author-card h2 { font-size:1rem; margin-bottom:7px }
.author-card p { font-size:.8rem; color:var(--muted); margin-bottom:8px }
.author-card .text-link { font-size:.73rem; font-weight:650 }
.video-link { background:var(--surface); border:1px solid var(--line); padding:18px; margin:20px 0 }
.video-link p { margin:0 }
.page-view .article-content,.page-view .comments-area,.page-view .article-header { max-width:824px; margin-inline:auto }
.post-label { display:inline-block; border:1px solid var(--line); font-size:.65rem; font-weight:650; padding:3px 7px; margin:0 0 8px; border-radius:2px; background:var(--surface) }
/* Related reading fills the page width below the article and its sidebar. */
.article-recommendations { margin-top:40px; padding-top:28px; border-top:1px solid var(--line) }
.article-recommendations .section-heading { margin:0 0 20px }
.recommendations-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
/* Footer and forms retain the same compact rhythm. */
.site-footer { background:var(--surface); border-top:1px solid var(--line); padding:28px 0 18px }
.footer-top { padding-bottom:22px }
.footer-top .brand-text { font-size:1.4rem }
.footer-top .brand-mark { font-size:2rem }
.footer-top .brand-with-logo img { width:46px }
.footer-description { font-size:.78rem; color:var(--muted); max-width:400px; margin:10px 0 0 }

.search-form { display:flex; max-width:540px; min-width:0; border:1px solid #a6aeb8; border-radius:12px; background:var(--paper); overflow:hidden }
.search-form input { width:100%; min-width:0; padding:12px; border:0; background:transparent; font-size:.85rem }
.search-form:focus-within { outline:2px solid #1859a5; outline-offset:3px }
.search-form input:focus-visible { outline:0 }
.search-form button { border:0; padding:12px 16px; background:var(--ink); color:#fff; font-size:.8rem; white-space:nowrap }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; gap:20px; font-size:.7rem; color:var(--muted) }
.footer-bottom p { margin:0 }
.footer-bottom nav,.footer-menu { display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.footer-menu { list-style:none; margin:0; padding:0 }
.empty-state { max-width:760px; margin:40px auto; padding-block:28px; min-height:40vh }
.empty-state h1 { font-size:2rem }
.empty-state>.search-form { margin:20px 0 }
.comments-area { border-top:1px solid var(--line); margin-top:28px; padding-top:20px }
.comments-area h2 { font-size:1.3rem }
.comments-area input:not([type=checkbox]),.comments-area textarea { max-width:100%; width:100%; border:1px solid var(--line); padding:12px }
.comments-area label { display:block; font-size:.8rem }
.comments-area input[type=submit] { width:auto; background:var(--ink); color:#fff }
.comment-list { padding-left:0; list-style:none }
.comment-list .children { list-style:none; padding-left:18px }
.comment-body { padding-block:16px; border-bottom:1px solid var(--line) }
.comment-author img { border-radius:50%; margin-right:8px; vertical-align:middle }
.comment-metadata,.reply { font-size:.73rem; color:var(--muted) }
/* Eligibility also checks that the article is taller than all sidebar content. */
@media(min-width:1101px) and (min-height:760px) { .sidebar-ad-sticky.is-sticky-eligible { position:sticky; top:20px } }
@media(max-width:1100px) {
  .lead-grid { gap:18px 14px }
  .story-title { font-size:.98rem }
  .story-card-featured .story-title { font-size:1.65rem }
  .post-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .article-layout { grid-template-columns:minmax(0,1fr) 270px; gap:20px }
  .article-sidebar { padding-left:0 }
  .article-header h1 { font-size:2.25rem }
  .story-card-compact { grid-template-columns:84px minmax(0,1fr); gap:10px }
}
@media(max-width:959px) {
  .masthead { min-height:64px; gap:0 10px }
  .site-header .brand { flex-shrink:1; margin-right:auto }
  .site-header .brand-text { max-width:none }
  .brand-text { font-size:1.4rem; gap:7px }
  .site-header .brand-with-logo img { width:44px }
  .site-navigation { order:3; flex-basis:100%; padding-bottom:10px }
  .primary-menu { flex-wrap:wrap; justify-content:flex-start; gap:2px 4px }
  .primary-menu>li>a { padding:10px 12px }
  .primary-menu .sub-menu { position:static; display:block; min-width:0; border:0; padding:0 0 8px; background:transparent; box-shadow:none }
  .sub-menu a { padding:10px 12px }
  .header-search { order:4; padding-top:8px }
  .has-controls .header-search { width:100% }
}
@media(max-width:900px) {
  .recommendations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
  .lead-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lead-grid>.story-card-featured { grid-column:1/-1; grid-row:auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:0 }
  .story-card-featured .story-image { min-width:0; width:100%; height:100%; aspect-ratio:auto; border-radius:var(--radius) 0 0 var(--radius) }
  .story-card-featured .story-copy { padding:18px }
  .article-layout { grid-template-columns:minmax(0,1fr) }
  .article-sidebar { border:0; padding:0; margin-top:12px }
  .topic-guide--desktop { display:none }
  .topic-guide--mobile { display:block; margin-block:24px }
  .related-stories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px }
  .related-stories>h2 { grid-column:1/-1 }
}
@media(max-width:760px) {
  .site-container { width:calc(100% - 28px) }
  .listing-page { padding-block:18px 32px }
  .listing-header { margin-bottom:14px }
  .listing-header h1 { font-size:1.16rem }
  .lead-grid { grid-template-columns:1fr; gap:16px }
  .lead-grid>.story-card-featured { display:flex; grid-column:1/-1 }
  .story-card-featured .story-image { height:auto; aspect-ratio:16/9; border-radius:var(--radius) var(--radius) 0 0 }
  .story-card-featured .story-copy { padding:16px }
  .story-card-featured .story-title { font-size:1.65rem }
  .post-grid { grid-template-columns:1fr; gap:16px }
  .listing-page .story-image { width:100%; height:auto; min-height:0; aspect-ratio:16/9; border-radius:var(--radius) var(--radius) 0 0 }
  .listing-page .story-copy { padding:16px }
  .listing-page .story-title { font-size:1.3125rem; line-height:1.2; font-weight:750; margin-bottom:12px }
  .listing-page .story-card-featured .story-title { font-size:1.5rem; line-height:1.16 }
  .listing-page .card-meta { font-size:.7rem }
  .section-heading { margin-top:22px; padding-top:11px }
  .section-heading>span { display:none }
  .story-title { font-size:1rem }
  .card-meta { font-size:.63rem }
  .card-meta>span { display:none }
  .breadcrumbs { font-size:.67rem; margin-bottom:13px }
  .single-page,.page-view { padding-block:14px 30px }
  .article-header { margin-bottom:14px }
  .article-header h1 { font-size:2rem; line-height:1.12; margin-bottom:10px }
  .article-deck { font-size:1rem; margin-bottom:12px }
  .article-content { font-size:1.1rem; line-height:1.7 }
  .article-content .st-post-embed { padding:12px; margin-block:22px }
  .article-content .st-post-embed__link,.st-post-embed__card:only-child .st-post-embed__link { grid-template-columns:88px minmax(0,1fr); min-height:96px }
  .st-post-embed__image { min-height:96px }
  .st-post-embed__body { padding:12px }
  .st-post-embed__card:only-child .st-post-embed__title { font-size:1rem }
  .article-content h2 { font-size:1.4rem }
  .article-cover { margin-bottom:18px }
  .article-content blockquote { padding:14px 16px }
  .article-content .alignleft,.article-content .alignright { float:none; margin-inline:0 }
  .footer-top { padding-bottom:20px }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:12px }
}
@media(max-width:540px) {
  .brand-text { font-size:1.2rem; max-width:215px }
  .site-header .brand-with-logo img { width:38px }
  .brand-mark { font-size:1.8rem }
  .brand img,.custom-logo { max-width:210px }
  .header-actions { gap:0 }
  .recommendations-grid { grid-template-columns:1fr; gap:12px }
  .lead-grid>.story-card-featured { grid-column:auto; margin-bottom:0 }
  .recommendations-grid>.story-card { display:grid; grid-template-columns:112px minmax(0,1fr); gap:0; padding:0 }
  .recommendations-grid .story-image { aspect-ratio:auto; height:100%; min-height:126px; border-radius:var(--radius) 0 0 var(--radius) }
  .recommendations-grid .story-copy { padding:12px }
  .story-title { font-size:1rem; margin-bottom:8px }
  .story-copy .eyebrow { font-size:.58rem; margin-bottom:5px }
  .story-card-featured .story-title { font-size:1.55rem }
  .related-stories { grid-template-columns:1fr }
  .story-card-compact { grid-template-columns:112px minmax(0,1fr); gap:13px }
  .story-card-compact .story-title { font-size:.98rem }
  .story-card-compact .eyebrow { font-size:.58rem }
  .story-card-compact .card-meta { font-size:.63rem }
  .article-header h1 { font-size:2rem }
  .author-card { padding:16px; gap:12px }
  .author-card img { width:40px; height:40px }
  .section-heading { margin-bottom:16px }
}
@media(max-width:359px) {
  .st-post-embed__card { min-width:230px }
  .article-header h1 { font-size:1.875rem }
  .brand-text { font-size:1rem; max-width:180px }
  .site-header .brand-with-logo img { width:32px }
  .brand img,.custom-logo { max-width:176px }
  .brand-mark { font-size:1.55rem }
  .recommendations-grid>.story-card { grid-template-columns:96px minmax(0,1fr) }
}
/* Content-aware collapse also protects long desktop navigation and enlarged text. */
.site-header:not(.has-controls) .primary-menu { flex-wrap:wrap }
.site-header:not(.has-controls) .primary-menu>li { min-width:0; max-width:100% }
.site-header:not(.has-controls) .primary-menu>li>a { white-space:normal; overflow-wrap:anywhere }
.site-header:not(.navigation-collapsed) .primary-menu li.submenu-dismissed>.sub-menu { display:none }
.navigation-collapsed .header-actions { margin-left:auto }
.navigation-collapsed .site-navigation { order:3; flex-basis:100%; padding-bottom:10px }
.navigation-collapsed .primary-menu { flex-wrap:wrap; justify-content:flex-start; gap:2px 4px }
.navigation-collapsed .primary-menu>li { min-width:0; max-width:100% }
.navigation-collapsed .primary-menu>li>a { white-space:normal; overflow-wrap:anywhere }
.navigation-collapsed .primary-menu .sub-menu { position:static; display:block; min-width:0; padding:0 0 8px; border:0; background:transparent; box-shadow:none }
.navigation-collapsed .sub-menu a { padding:10px 12px; overflow-wrap:anywhere }
.navigation-collapsed .header-search { order:4; width:100% }
/* A non-modal navigation sheet keeps touch targets generous without moving content. */
.has-controls.navigation-collapsed .site-navigation { position:absolute; top:calc(100% + 8px); inset-inline:0; width:100%; padding:8px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 36px rgb(0 0 0 / 15%); max-height:calc(100dvh - 96px); overflow-y:auto }
.has-controls.navigation-collapsed .primary-menu { display:flex; flex-direction:column; align-items:stretch; gap:2px }
.has-controls.navigation-collapsed .primary-menu>li>a { min-height:48px; padding:12px 16px; font-size:1rem; border-radius:10px; justify-content:space-between }
.has-controls.navigation-collapsed .primary-menu>li>a:after { content:""; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); margin-left:16px; flex-shrink:0 }
.has-controls.navigation-collapsed .primary-menu>li>a:hover { background:var(--surface) }
.has-controls.navigation-collapsed .primary-menu>.current-menu-item>a { background:#fff0e5; color:var(--ink) }
.has-controls.navigation-collapsed .sub-menu { color:var(--muted); padding:0 12px 8px }
.has-controls.navigation-collapsed .sub-menu a { min-height:40px; font-size:.875rem }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*:before,*:after { transition:none!important; animation:none!important }
}

/* Article gallery: complete linked figures without JS; one calm stage with enhancement. */
.article-gallery { margin:32px 0 28px; min-width:0 }
.article-gallery__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }
.article-gallery__heading .eyebrow { margin-bottom:4px }
.article-gallery__heading h2 { margin:0; font-size:1.5rem; line-height:1.2 }
.article-gallery__controls { display:flex; align-items:center; flex-shrink:0; gap:6px }
.article-gallery__position { min-width:44px; padding-inline:3px; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:center }
.article-gallery__heading button,.article-gallery__dialog button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; padding:0 }
.article-gallery__button { color:var(--ink); border:1px solid var(--line); border-radius:50%; background:var(--paper); transition:background .15s ease,border-color .15s ease }
.article-gallery__button:hover:not([aria-disabled="true"]) { background:var(--surface); border-color:var(--ink) }
.article-gallery__button[aria-disabled="true"] { opacity:.3; cursor:default }
.article-gallery__slides { display:grid; min-width:0; gap:20px }
.article-gallery__slide { min-width:0; margin:0 }
.article-gallery__open { position:relative; display:flex; justify-content:center; align-items:center; width:100%; min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none }
.article-gallery__open img { display:block; max-width:100%; width:auto; max-height:640px; height:auto; object-fit:contain }
.article-gallery[data-gallery-mode="listing"] .article-gallery__open img { width:100%; max-height:none }
.article-gallery.is-enhanced .article-gallery__open { aspect-ratio:3/2 }
.article-gallery.is-enhanced .article-gallery__open img { width:100%; height:100%; max-height:none; object-fit:contain }
.article-gallery__open>span { position:absolute; right:12px; bottom:12px }
.article-gallery__zoom { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; color:var(--ink); background:rgb(255 255 255 / 94%); border:1px solid rgb(0 0 0 / 7%); border-radius:999px; font-size:.75rem; font-weight:650; box-shadow:0 2px 8px rgb(0 0 0 / 6%) }
.article-gallery__open:hover .article-gallery__zoom { background:var(--paper) }
.article-gallery__caption { max-width:100%; padding:10px 2px 0; margin:0; color:var(--muted); font-size:.8rem; line-height:1.5; overflow-wrap:anywhere }
.article-gallery__caption a { text-decoration:underline; text-underline-offset:2px }
.article-gallery__thumbs { --gallery-thumb-columns:8; display:grid; grid-template-columns:repeat(var(--gallery-thumb-columns),minmax(0,1fr)); gap:8px; margin-top:14px; min-width:0 }
.article-gallery__thumb { position:relative; min-width:0; aspect-ratio:1; overflow:hidden; padding:0; border:2px solid transparent; border-radius:10px; background:var(--surface); transition:border-color .15s ease; isolation:isolate }
.article-gallery__thumb img { display:block; width:100%; height:100%; object-fit:cover }
.article-gallery__thumb:hover { border-color:var(--muted) }
.article-gallery__thumb[aria-current="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) }
.article-gallery__thumb-number { position:absolute; right:4px; bottom:4px; min-width:18px; height:18px; padding:0 4px; border-radius:4px; background:rgb(0 0 0 / 60%); color:#fff; font-size:10px; line-height:18px; text-align:center; font-variant-numeric:tabular-nums }
.article-gallery__dialog:not([open]) { display:none }
.article-gallery__dialog { width:min(1280px,calc(100vw - 40px)); max-width:100%; max-height:calc(100dvh - 40px); padding:0; margin:auto; overflow:auto; overscroll-behavior:contain; border:1px solid #3b4048; border-radius:18px; background:#171b21; color:#fff; box-shadow:0 24px 90px rgb(0 0 0 / 35%) }
.article-gallery__dialog::backdrop { background:rgb(12 16 22 / 86%) }
.article-gallery__dialog-inner { padding:14px 18px 16px; min-width:0 }
.article-gallery__dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.article-gallery__dialog-header h2 { margin:0; font-size:1rem; line-height:1.3; font-weight:600 }
.article-gallery__dialog .article-gallery__button { border-color:#50555e; background:#252b34; color:#fff }
.article-gallery__dialog .article-gallery__button:hover:not([aria-disabled="true"]) { border-color:#b6bfcc; background:#343d4a }
.article-gallery__dialog :focus-visible { outline:3px solid #fff; outline-offset:3px }
.article-gallery__dialog-image { display:flex; justify-content:center; align-items:center; height:min(70dvh,800px); min-height:100px; min-width:0 }
.article-gallery__dialog-image img { display:block; width:100%; height:100%; max-width:100%; object-fit:contain }
.article-gallery__dialog-caption { max-width:900px; margin:12px auto 0; color:#d8dde4; font-size:.875rem; line-height:1.5; overflow-wrap:anywhere }
.article-gallery__dialog-caption a { color:inherit; text-decoration:underline }
.article-gallery__dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px }
.article-gallery__dialog .article-gallery__position { color:#d8dde4 }
.article-gallery__original { color:#d8dde4; font-size:.8rem; text-underline-offset:3px }
html.has-gallery-dialog { overflow:hidden; scrollbar-gutter:stable }
@media(max-width:900px) { .article-gallery__thumbs { --gallery-thumb-columns:6 } }
@media(max-width:540px) {
  .article-gallery { margin-block:26px }
  .article-gallery__heading { gap:8px; align-items:flex-end }
  .article-gallery__heading h2 { font-size:1.25rem }
  .article-gallery__heading .eyebrow { font-size:.62rem }
  .article-gallery__heading .article-gallery__controls { gap:3px }
  .article-gallery__position { min-width:36px; font-size:.75rem; padding:0 }
  .article-gallery__thumbs { --gallery-thumb-columns:4; gap:7px; margin-top:12px }
  .article-gallery__zoom { right:9px; bottom:9px; padding:8px 10px }
  .article-gallery__dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:14px }
  .article-gallery__dialog-inner { padding:10px 12px 12px }
  .article-gallery__dialog-image { height:60dvh }
  .article-gallery__dialog-caption { font-size:.8rem }
  .article-gallery__dialog-footer { gap:8px }
  .article-gallery__original { font-size:.75rem }
}
@media(max-width:359px) {
  .article-gallery__thumbs { --gallery-thumb-columns:3 }
  .article-gallery__heading { flex-wrap:wrap }
  .article-gallery__heading .article-gallery__controls { margin-left:auto }
}