/* ---------------------------------------------------------------------------
   Shared styles for the /publicforecasts archive.

   The rest of the site keeps its CSS inline per page. The archive is 46 pages
   generated from one template, so an inline block would have been duplicated
   46 times; it lives in a file instead. Tokens, nav and footer rules are copied
   verbatim from swiftsubstack.html so the archive is visually continuous with
   the page that links to it — edit them there and here together.
--------------------------------------------------------------------------- */
:root{
  --paper:#f9f8f5; --warm-paper:#f1efe9; --ink:#1a1a1a; --muted-ink:#3d3d3d;
  --navy:#5b98b8; --deep-navy:#4a819e; --blue:#7dbbd4; --deep-blue:#5b98b8;
  --accent:#5b98b8; --accent-2:#7dbbd4;
  --line:#e5e4e0; --midgrey:#888888;
  --ink-rgb:26,26,26; --blue-rgb:125,187,212; --accent-rgb:91,152,184; --paper-rgb:249,248,245;
  --serif:"Merriweather",Georgia,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:Inter,ui-sans-serif,system-ui,monospace;
  --w:1240px;
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--paper); overflow-x:clip}
body{color:var(--ink); font-family:var(--sans); line-height:1.55; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
::selection{background:rgba(var(--blue-rgb),.45)}
.container{max-width:var(--w); margin:0 auto; padding:0 56px}

/* ---------- nav — copied from swiftsubstack.html ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:20;
  background:linear-gradient(180deg, rgba(var(--paper-rgb),.96), rgba(var(--paper-rgb),.88));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent}
.nav::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); pointer-events:none}
.nav-in{max-width:var(--w); margin:0 auto; padding:14px 56px; display:flex; align-items:center}
.wordmark{display:flex; align-items:center; gap:11px}
.wm-logo{height:19px; width:auto; display:block}
.mark-bird{width:28px; height:28px; object-fit:contain; display:block; filter:none}
.nav-menu{display:flex; align-items:center; margin-right:14px; position:relative; align-self:stretch}
.nav-menu-btn{background:transparent; border:0; padding:6px; margin:0; cursor:pointer; display:flex;
  align-items:center; border-radius:6px; color:var(--muted-ink); transition:background .15s, color .15s}
.nav-menu-btn:hover{color:var(--ink); background:rgba(var(--ink-rgb),.08)}
.nav-menu-dropdown{position:absolute; top:calc(100% + 14px); left:0; min-width:170px;
  background:#5b98b8; border:1px solid rgba(255,255,255,.16); border-top:0;
  box-shadow:0 20px 44px -22px rgba(30,50,70,.5); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s}
.nav-menu-dropdown.open{opacity:1; visibility:visible; transform:none}
.nav-menu-dropdown a{display:block; padding:9px 12px; font-size:13.5px; font-weight:600; color:#fff; transition:background .15s}
.nav-menu-dropdown a:hover{background:rgba(255,255,255,.16)}
.nav-menu-dropdown a.menu-mobile-only{display:none}
.nav-links{display:flex; align-items:center; gap:22px; margin-left:auto}
.nav-links .lnk{font-size:13.5px; color:var(--muted-ink); letter-spacing:.02em; transition:color .15s; white-space:nowrap}
.nav-links .lnk:hover{color:var(--ink)}
.nav-links .lnk.here{color:var(--ink); font-weight:600}
.nav .btn--solid{background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:999px;
  padding:8px 18px; font-size:13.5px; font-weight:700; letter-spacing:.01em; transition:.18s; white-space:nowrap}
.nav .btn--solid:hover{background:var(--deep-navy); border-color:var(--deep-navy)}

main{padding-top:132px}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; font-weight:600;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px}
.rule{height:1px; background:rgba(var(--ink-rgb),.1); margin:44px 0 40px}

/* ---------- index listing ---------- */
.page-head{max-width:760px}
.page-head h1{font-family:var(--serif); font-weight:900; font-size:clamp(34px,4.4vw,58px);
  line-height:1.04; letter-spacing:-.01em; margin:0; color:var(--ink)}
.page-head h1 .dot{color:var(--accent)}
.page-head .lede{margin:20px 0 0; font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:var(--muted-ink); max-width:62ch}
.head-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px}
.btn-sub{background:var(--accent); color:#fff; border-radius:999px; padding:11px 22px;
  font-size:14px; font-weight:700; transition:background .18s}
.btn-sub:hover{background:var(--deep-navy)}
.head-note{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--midgrey)}

.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; margin:0 0 20px; padding:0; list-style:none}
.post{display:flex; flex-direction:column; height:100%; border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.post:hover{transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 22px 44px -30px rgba(var(--ink-rgb),.42)}
.post-img{position:relative; aspect-ratio:3/2; background:var(--warm-paper); overflow:hidden}
.post-img img{width:100%; height:100%; object-fit:cover; display:block}
.post-body{display:flex; flex-direction:column; flex:1; padding:20px 22px 22px}
.post-date{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent)}
.post-title{font-family:var(--serif); font-weight:700; font-size:19px; line-height:1.24;
  margin:10px 0 0; color:var(--ink)}
.post-excerpt{margin:11px 0 0; font-size:14.5px; line-height:1.6; color:var(--muted-ink)}
.post-more{margin-top:auto; padding-top:16px; font-size:13px; font-weight:600; color:var(--accent)}
.post:hover .post-more{color:var(--deep-navy)}
.year-head{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--midgrey); margin:0 0 20px; padding-top:34px;
  border-top:1px solid var(--line)}
.year-head:first-of-type{padding-top:0; border-top:0}

/* ---------- article ---------- */
.article{max-width:760px; margin:0 auto}
.article-head{margin-bottom:8px}
.article-head h1{font-family:var(--serif); font-weight:900; font-size:clamp(30px,3.6vw,46px);
  line-height:1.1; letter-spacing:-.01em; margin:0; color:var(--ink)}
.article-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent)}
.article-meta .sep{color:var(--line)}
.article-meta .archived{color:var(--midgrey); font-weight:600}

.article-body{font-size:17.5px; line-height:1.75; color:var(--muted-ink)}
.article-body > :first-child{margin-top:0}
.article-body p{margin:0 0 1.35em}
.article-body h2{font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.25;
  color:var(--ink); margin:2.1em 0 .7em}
.article-body h3{font-family:var(--serif); font-weight:700; font-size:20.5px; line-height:1.3;
  color:var(--ink); margin:1.9em 0 .6em}
.article-body h4{font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:.01em;
  color:var(--ink); margin:1.8em 0 .5em}
.article-body strong{color:var(--ink); font-weight:700}
.article-body a{color:var(--deep-navy); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; transition:color .15s}
.article-body a:hover{color:var(--accent)}
.article-body ul,.article-body ol{margin:0 0 1.35em; padding-left:1.5em}
.article-body li{margin:0 0 .5em}
.article-body li::marker{color:var(--accent)}
.article-body blockquote{margin:1.8em 0; padding:2px 0 2px 22px; border-left:3px solid var(--accent);
  font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--ink)}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body hr{border:0; height:1px; background:var(--line); margin:2.4em 0}
.article-body figure{margin:2.2em 0}
.article-body img{max-width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--line); background:#fff}
.article-body figcaption{margin-top:11px; font-size:13.5px; line-height:1.55; color:var(--midgrey)}
.article-body figcaption p{margin:0}

/* ---------- interactive charts ----------
   A chart figure holds the self-hosted screenshot and, once embeds.js has
   confirmed the live embed is talking to us, an iframe of the real thing. The
   screenshot stays visible until then, so a blocked or retired embed degrades
   to the image rather than to an empty box. */
/* Charts sit centred on the page and wider than the text column, rather than
   starting at the text's left edge. The left margin is what pulls the figure out
   of the 760px measure; writing `margin: 2.6em 0` here instead zeroes it, and the
   chart then runs off the right of the viewport (clipped, since html is
   overflow-x: clip, so it fails silently). Keep the axes separate. */
.article-body figure.chart{
  margin-top:2.6em; margin-bottom:2.6em;
  max-width:none;
  width:min(1128px, calc(100vw - 112px));
  margin-left:calc(50% - min(564px, calc(50vw - 56px)));
}
.article-body figure.chart figcaption{text-align:center}
/* The iframe is laid out from the moment it is inserted — the embed measures
   its own width to report a height, and a display:none frame measures zero.
   embeds.js hides the screenshot instead, and restores it if no size arrives. */
.article-body figure.chart iframe{display:block; width:100%; border:0;
  background:#fff; border-radius:10px}
.article-body figure.chart.has-embed > img,
.article-body figure.chart.has-embed > a{display:none}
.article-body figure.chart figcaption a{color:var(--accent); font-weight:600;
  text-decoration:none}
.article-body figure.chart figcaption a:hover{color:var(--deep-navy); text-decoration:underline}
/* charts and wide tables run past the measure rather than shrink into it */
.article-body .wide{max-width:none; width:min(1128px, calc(100vw - 112px));
  margin-left:calc(50% - min(564px, calc(50vw - 56px)))}
.article-body .table-wrap{overflow-x:auto; margin:2em 0; border:1px solid var(--line); border-radius:10px}
.article-body table{border-collapse:collapse; width:100%; font-size:14.5px; background:#fff}
.article-body th,.article-body td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line)}
.article-body th{font-weight:700; color:var(--ink); background:var(--warm-paper); white-space:nowrap}
.article-body tr:last-child td{border-bottom:0}

.article-foot{max-width:760px; margin:56px auto 0; padding-top:26px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.article-foot a{font-size:13.5px; font-weight:600; color:var(--accent)}
.article-foot a:hover{color:var(--deep-navy)}
.article-foot .spacer{margin-left:auto}

/* ---------- footer — copied from swiftsubstack.html ---------- */
footer{margin-top:96px; padding-bottom:40px}
.foot-grid{display:grid; grid-template-columns:1.15fr 1.2fr .9fr; gap:36px 48px; padding-top:32px; border-top:1px solid var(--line)}
.foot-col h4{margin:0 0 14px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.foot-entity{margin:0 0 20px}
.foot-entity:last-child{margin-bottom:0}
.foot-entity .ename{display:block; margin:0 0 6px; font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; transition:opacity .15s}
.foot-entity .ename:hover{opacity:.72}
.foot-entity.research .ename{color:#4a819e}
.foot-entity.advisory .ename{color:#e0794a}
.foot-entity p{margin:0; font-size:12.5px; line-height:1.65; color:var(--muted-ink)}
.foot-links-col{display:flex; flex-direction:column; gap:11px; align-items:flex-start}
.foot-links-col a{font-size:13.5px; color:var(--muted-ink); transition:color .15s}
.foot-links-col a:hover{color:var(--ink)}
.foot-links-col .policy{margin-top:8px; padding-top:12px; border-top:1px solid var(--line); width:100%}
.foot-links-col .policy a{display:block; margin-top:10px; font-size:12.5px}

@media (max-width:1100px){
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1180px){
  .nav-links .lnk{display:none}
  .nav-menu-dropdown a.menu-mobile-only{display:block}
}
@media (max-width:940px){
  .container{padding:0 26px}
  .nav-in{padding:12px 26px}
  .nav-menu-dropdown{top:calc(100% + 12px)}
  .nav-links .lnk{display:none}
  .nav .mark-bird{display:none}
  .nav-menu-dropdown a.menu-mobile-only{display:block}
  main{padding-top:104px}
  .posts{grid-template-columns:1fr; gap:26px}
  .foot-grid{grid-template-columns:1fr; gap:28px}
  .article-body{font-size:16.5px}
  /* the bleed would overflow the viewport once padding drops to 26px */
  .article-body .wide{max-width:100%; width:100%; margin-left:0}
  /* figure.chart outranks .wide, so it needs the reset spelled out too */
  .article-body figure.chart{width:100%; margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  .post{transition:none}
}