/* 2030s forecast: a quieter 2020s. One column that reads like a conversation, neutral headings, bold key
   phrases that underline themselves as you reach them, and small moving dividers that pull the eye on. */
html[data-decade="2030s"] .stage { --bg: #f7f7f5; --text: #141414; --muted: #5e5e66; --line: #e4e4e0; --accent: #2f6bff; --glow: #c9f2e3; background: var(--bg); color: var(--text); }
html[data-decade="2030s"] body { background: #f7f7f5; }
html[data-decade="2030s"] .site { font: 18px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Inter", sans-serif; max-width: 720px; margin: 0 auto; padding: 0 20px 140px; }

html[data-decade="2030s"] .site-head { padding: 88px 0 24px; }
html[data-decade="2030s"] .site-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
html[data-decade="2030s"] .site-tagline { margin: 10px 0 0; color: var(--muted); }
html[data-decade="2030s"] .site-tagline strong { color: var(--text); }
html[data-decade="2030s"] .site-extras-top { margin-top: 18px; }
html[data-decade="2030s"] .stamp { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
html[data-decade="2030s"] .stamp::before { content: ""; width: 8px; height: 8px; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }

html[data-decade="2030s"] .site-nav ul { list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; border-bottom: 1px solid var(--line); }
html[data-decade="2030s"] .site-nav a { color: var(--muted); text-decoration: none; font-size: 14px; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 1.5px no-repeat; transition: background-size .3s ease, color .3s; }
html[data-decade="2030s"] .site-nav a:hover, html[data-decade="2030s"] .site-nav a:focus-visible { color: var(--text); background-size: 100% 1.5px; outline: none; }

html[data-decade="2030s"] .forecast-note { margin: 28px 0 0; font-size: 14px; color: var(--muted); }

/* Articles read like messages: no boxes, a small neutral heading, the text does the work. */
html[data-decade="2030s"] .card { position: relative; padding: 8px 0 8px 22px; margin: 28px 0 0; }
html[data-decade="2030s"] .card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
/* The accent line lights only the block being read and fades as the reader moves on (app.js sets .is-focus). */
html[data-decade="2030s"] .card > p, html[data-decade="2030s"] .card > .terms, html[data-decade="2030s"] .card > .uses, html[data-decade="2030s"] .card > .build-chart { position: relative; }
html[data-decade="2030s"] .card > p::before, html[data-decade="2030s"] .card > .terms::before, html[data-decade="2030s"] .card > .uses::before, html[data-decade="2030s"] .card > .build-chart::before {
  content: ""; position: absolute; left: -22px; top: 2px; bottom: 2px; width: 2px; background: var(--accent); opacity: 0; transition: opacity .5s ease;
}
html[data-decade="2030s"] .card > .uses::before { left: calc(-22px - 1.1em); } /* the list is indented by its own padding */
html[data-decade="2030s"] .card > .is-focus::before { opacity: 1; }
html[data-decade="2030s"] .card-title { margin: 0 0 10px; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--muted); letter-spacing: 0; }
html[data-decade="2030s"] .card p { margin: 0 0 20px; }
html[data-decade="2030s"] .card strong {
  font-weight: 650; color: var(--text);
  background: linear-gradient(transparent 62%, var(--glow) 62%) left / 0 100% no-repeat;
  transition: background-size .9s cubic-bezier(.3, .7, .2, 1);
}
html[data-decade="2030s"] .card.is-read strong { background-size: 100% 100%; }
html[data-decade="2030s"] .card.is-read p:nth-of-type(2) strong { transition-delay: .35s; }
html[data-decade="2030s"] .card.is-read p:nth-of-type(3) strong { transition-delay: .7s; }
html[data-decade="2030s"] .stat { margin: 4px 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
html[data-decade="2030s"] .stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
html[data-decade="2030s"] .stat-label { color: var(--muted); font-size: 15px; line-height: 1.4; }
html[data-decade="2030s"] .terms { margin: 4px 0 20px; }
/* Spacing scale: tight inside a block (1.55), a term sits right on its definition, clear air between items. */
html[data-decade="2030s"] .terms dt { font-weight: 650; line-height: 1.3; margin-top: 20px; }
html[data-decade="2030s"] .terms dt:first-child { margin-top: 0; }
html[data-decade="2030s"] .terms dd { margin: 4px 0 0; color: var(--muted); }
html[data-decade="2030s"] .uses { margin: 0; padding-left: 1.1em; }
html[data-decade="2030s"] .uses li { margin-bottom: 10px; }
html[data-decade="2030s"] .card p.after { margin-top: 16px; color: var(--muted); }

/* Triage infographics: each part surfaces in order once its section is reached (.is-read). */
html[data-decade="2030s"] .keypoints { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; padding: 0; }
html[data-decade="2030s"] .keypoints li { font-size: 13px; line-height: 1.4; padding: 4px 10px; border: 1px solid var(--line); background: #fff; color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * .15s); }
html[data-decade="2030s"] .keypoints li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--accent); vertical-align: 1px; }
html[data-decade="2030s"] .card.is-read .keypoints li { opacity: 1; transform: none; }

html[data-decade="2030s"] .build-chart { margin: 6px 0 18px; }
html[data-decade="2030s"] .build-chart figcaption { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
html[data-decade="2030s"] .build-chart ol { list-style: none; margin: 0; padding: 0; }
html[data-decade="2030s"] .bar-row { display: grid; grid-template-columns: 140px 1fr 96px; align-items: center; gap: 12px; padding: 3px 0; font-size: 14px; }
html[data-decade="2030s"] .bar-row:hover { background: rgba(47, 107, 255, .05); }
html[data-decade="2030s"] .bar-era { color: var(--muted); }
html[data-decade="2030s"] .bar-val { color: var(--text); font-variant-numeric: tabular-nums; }
html[data-decade="2030s"] .bar-track { position: relative; height: 10px; }
html[data-decade="2030s"] .bar-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #c3c6cf; border-radius: 0 4px 4px 0; transition: width 1s cubic-bezier(.3, .7, .2, 1); transition-delay: calc(.2s + var(--i) * .12s); }
html[data-decade="2030s"] .bar-row.is-now .bar-era, html[data-decade="2030s"] .bar-row.is-now .bar-val { color: var(--text); font-weight: 650; }
html[data-decade="2030s"] .bar-row.is-now .bar-track i { background: var(--accent); }
html[data-decade="2030s"] .card.is-read .bar-track i { width: var(--w); }

html[data-decade="2030s"] .card .uses li, html[data-decade="2030s"] .card .terms dt, html[data-decade="2030s"] .card .terms dd { opacity: 0; transform: translateX(-6px); transition: opacity .45s ease, transform .45s ease; }
html[data-decade="2030s"] .card.is-read .uses li, html[data-decade="2030s"] .card.is-read .terms dt, html[data-decade="2030s"] .card.is-read .terms dd { opacity: 1; transform: none; }
html[data-decade="2030s"] .card.is-read .uses li:nth-child(2), html[data-decade="2030s"] .card.is-read .terms :nth-child(3), html[data-decade="2030s"] .card.is-read .terms :nth-child(4) { transition-delay: .12s; }
html[data-decade="2030s"] .card.is-read .uses li:nth-child(3), html[data-decade="2030s"] .card.is-read .terms :nth-child(5), html[data-decade="2030s"] .card.is-read .terms :nth-child(6) { transition-delay: .24s; }
html[data-decade="2030s"] .card.is-read .uses li:nth-child(4), html[data-decade="2030s"] .card.is-read .terms :nth-child(7), html[data-decade="2030s"] .card.is-read .terms :nth-child(8) { transition-delay: .36s; }
html[data-decade="2030s"] .card.is-read .uses li:nth-child(n+5), html[data-decade="2030s"] .card.is-read .terms :nth-child(n+9) { transition-delay: .48s; }

@media (max-width: 560px) {
  html[data-decade="2030s"] .bar-row { grid-template-columns: 96px 1fr 76px; gap: 8px; font-size: 13px; }
}

/* Between sections: a typing indicator that resolves into a line drawing itself, like the next reply arriving. */
html[data-decade="2030s"] .flow { display: flex; align-items: center; gap: 6px; height: 28px; margin: 22px 0 0 22px; }
html[data-decade="2030s"] .flow i { width: 6px; height: 6px; background: var(--muted); opacity: .5; animation: typing 1.4s ease-in-out infinite; }
html[data-decade="2030s"] .flow i:nth-child(2) { animation-delay: .18s; }
html[data-decade="2030s"] .flow i:nth-child(3) { animation-delay: .36s; }
html[data-decade="2030s"] .flow b { flex: 1; height: 1.5px; margin-left: 8px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; animation: draw 2.8s cubic-bezier(.3, .7, .2, 1) infinite; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes draw { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

html[data-decade="2030s"] .site-foot { padding-top: 48px; color: var(--muted); font-size: 14px; }
html[data-decade="2030s"] a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html[data-decade="2030s"] .card strong { background-size: 100% 100%; transition: none; }
  html[data-decade="2030s"] .card > p::before, html[data-decade="2030s"] .card > .terms::before, html[data-decade="2030s"] .card > .uses::before, html[data-decade="2030s"] .card > .build-chart::before { transition: none; }
  html[data-decade="2030s"] .flow i, html[data-decade="2030s"] .flow b, html[data-decade="2030s"] .stamp::before { animation: none; }
  html[data-decade="2030s"] .keypoints li, html[data-decade="2030s"] .card .uses li, html[data-decade="2030s"] .card .terms dt, html[data-decade="2030s"] .card .terms dd { opacity: 1; transform: none; transition: none; }
  html[data-decade="2030s"] .bar-track i { width: var(--w); transition: none; }
}