/* Blue / Yellow migration layer for the BBC reading page. */
:root{
  --paper:var(--lg-research-canvas);
  --paper-deep:var(--lg-research-paper);
  --ink:var(--lg-research-ink);
  --navy:var(--lg-research-secondary);
  --navy-deep:var(--lg-research-ink);
  --wine:var(--lg-research-blue-deep);
  --muted:var(--lg-research-muted);
  --line:var(--lg-research-rule);
  --serif:var(--lg-research-display);
  --sans:var(--lg-research-body);
  --body:16px;
}
body{background:var(--lg-research-canvas);color:var(--lg-research-ink);font-family:var(--lg-research-body);line-height:1.88}

.topbar{
  z-index:5;
  width:min(calc(100% - 40px),var(--lg-research-page));
  min-height:68px;
  margin:0 auto;
  padding:0;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  border-bottom:1px solid var(--lg-research-rule);
  background:rgba(251,250,246,.92);
}
.nav-context{color:var(--lg-research-muted);font:400 11px/1 var(--lg-research-mono);letter-spacing:.09em}
.topbar-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.nav-link{color:var(--lg-research-secondary);font:400 11px/1 var(--lg-research-mono);letter-spacing:.06em}
.skip-link{background:var(--lg-research-ink);font-family:var(--lg-research-body)}

.hero{padding:clamp(72px,9vw,122px) 20px 72px;border-bottom:0}
.hero-inner{max-width:var(--lg-research-object)}
.eyebrow,.hero h1,.hero-lead{width:min(100%,var(--lg-research-reading));margin-left:auto;margin-right:auto}
.eyebrow{margin-bottom:0;color:var(--lg-research-muted);font:400 11px/1.45 var(--lg-research-mono);letter-spacing:.09em}
.hero h1{max-width:none;margin-top:16px;color:var(--lg-research-ink);font:400 clamp(48px,6.4vw,82px)/.98 var(--lg-research-display);letter-spacing:-.05em}
.hero-lead{max-width:none;margin-top:26px;color:var(--lg-research-secondary);font-size:16px;line-height:1.76}
.hero-meta{
  overflow:hidden;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:38px;
  padding-top:0;
  border:1px solid var(--lg-research-rule);
  background:radial-gradient(circle at 18% 20%,rgba(192,207,203,.84),transparent 36%),radial-gradient(circle at 82% 78%,rgba(221,217,194,.90),transparent 34%),linear-gradient(132deg,#F7F3EB 0%,#DDE5E1 56%,#E6DFC9 100%);
  color:var(--lg-research-secondary);
}
.hero-meta p{position:relative;padding:18px 22px 20px;font-size:13px;line-height:1.55}
.hero-meta p+p::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:var(--lg-research-rule)}
.hero-meta b{margin-bottom:8px;color:var(--lg-research-muted);font:400 10px/1.3 var(--lg-research-mono);letter-spacing:.04em}

.article-shell{display:block;max-width:var(--lg-research-page);padding:18px 20px 104px}
.article{font-family:var(--lg-research-body);font-size:16px;line-height:1.88}
.article p{font-size:16px;line-height:1.88}
.article-intro{width:min(100%,var(--lg-research-reading));margin:58px auto 0;color:var(--lg-research-ink)}
.article blockquote{color:var(--lg-research-ink);font-family:var(--lg-research-display);font-size:18px;line-height:1.72}
.article-intro .pull-quote{margin:30px 0;padding:22px 24px;border:1px solid var(--lg-research-rule);background:rgba(255,255,255,.46)}

.source-reader{width:min(100%,var(--lg-research-object));margin:86px auto 0;padding:0 0 16px;border-top:0}
.source-reader-head{display:grid;grid-template-columns:150px minmax(0,var(--lg-research-reading)) 150px;align-items:start;margin-bottom:0;padding-bottom:22px;border-bottom:1px solid var(--lg-research-rule)}
.source-reader-head .section-index{grid-column:1;grid-row:1;margin-top:7px}
.source-reader-head h2{grid-column:2;grid-row:1;margin:0;font:400 clamp(32px,3.4vw,46px)/1.08 var(--lg-research-display);letter-spacing:-.04em;color:var(--lg-research-ink)}
.source-reader-note,.source-bibliography{grid-column:2;margin:18px 0 0!important}
.source-reader-note{color:var(--lg-research-secondary)}
.source-bibliography{color:var(--lg-research-muted);font:400 10px/1.6 var(--lg-research-mono)}
.source-document{margin-top:34px;border:1px solid var(--lg-research-rule);background:rgba(255,255,255,.46)}
.source-section{padding:28px 30px;border-bottom:1px solid var(--lg-research-rule-soft)}
.source-section h3,.source-fold-title{color:var(--lg-research-muted);font:400 11px/1.45 var(--lg-research-mono);letter-spacing:.07em}
.source-paragraphs{padding:22px 24px;border:1px solid var(--lg-research-rule-soft);border-left:1px solid var(--lg-research-rule-soft);background:var(--lg-research-paper)}
.source-paragraphs p{font-size:15px;line-height:1.78}
.source-fold summary{padding:17px 30px;color:var(--lg-research-secondary);font:400 11px/1.55 var(--lg-research-mono)}
.source-fold summary::before{color:var(--lg-research-muted)}
.source-fold-body{padding:0 30px 28px}

.section{
  width:min(100%,var(--lg-research-object));
  margin:0 auto;
  padding:clamp(82px,8vw,108px) 0 0;
  display:grid;
  grid-template-columns:150px minmax(0,var(--lg-research-reading)) 150px;
  align-items:start;
  border-top:1px solid var(--lg-research-rule);
}
.section>.section-index{grid-column:1;grid-row:1;margin-top:7px}
.section>h2{grid-column:2;grid-row:1;margin:0 0 30px;font:400 clamp(32px,3.4vw,46px)/1.08 var(--lg-research-display);letter-spacing:-.04em;color:var(--lg-research-ink)}
.section>p,.section>ul,.section>blockquote,.section>.source-pointer,.section>.cross-reference{grid-column:2;width:100%}
.section>p{margin:0 0 1.22em}
.section>ul{list-style:none;margin:0 0 24px;padding:0}
.section ul li{position:relative;margin:7px 0;padding-left:1.2em;font-size:16px;line-height:1.78}
.section ul li::before{content:"—";position:absolute;left:0;color:var(--lg-research-muted)}
.section>blockquote{margin:12px 0 24px;padding:18px 20px;border-left:1px solid var(--lg-research-rule-strong);background:transparent}
.section-index,.statement-label,.aside-label{color:var(--lg-research-muted);font:400 11px/1.45 var(--lg-research-mono);letter-spacing:.08em}
.source-pointer{margin:-16px 0 24px!important;color:var(--lg-research-muted);font:400 12px/1.6 var(--lg-research-mono)!important}
.source-pointer a,.cross-reference a{color:var(--lg-research-secondary);text-decoration:none;border-bottom:1px solid var(--lg-research-rule)}
.cross-reference{margin:12px 0 32px!important;padding:16px 0 0;border-top:1px solid var(--lg-research-rule-soft);border-left:0;color:var(--lg-research-secondary);font:400 13px/1.68 var(--lg-research-body)!important}
.research-annotation{grid-column:2;margin:10px 0 24px!important;padding:18px 20px;border:1px solid var(--lg-research-rule);background:rgba(221,217,194,.28);color:var(--lg-research-ink);font-size:16px!important;line-height:1.78!important}
.research-annotation[lang="en"]{font-family:var(--lg-research-display);font-size:18px!important;line-height:1.65!important}
.key-statement{margin:22px 0 30px!important}
.key-statement strong{font-weight:650}

.flow,.statement-grid,.narrative-grid{grid-column:1/-1;width:100%;margin:28px 0 38px}
.flow{padding:0;border:1px solid var(--lg-research-rule);background:rgba(255,255,255,.46)}
.flow-step{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;min-height:76px;padding:18px 24px;color:var(--lg-research-ink);font-size:16px;line-height:1.68}
.flow-step::before{content:attr(data-step);display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--lg-research-rule-strong);background:rgba(192,207,203,.34);color:var(--lg-research-secondary);font:400 10px/1 var(--lg-research-mono);letter-spacing:.05em}
.flow-step:not(:last-child)::after{content:"";position:absolute;left:40px;top:55px;bottom:-21px;width:1px;background:var(--lg-research-rule-strong)}
.flow-step span{position:relative;display:block}
.flow-step+.flow-step span::before{content:"";position:absolute;left:0;right:0;top:-19px;height:1px;background:var(--lg-research-rule-soft)}
.flow-step:last-child{background:rgba(221,217,194,.24)}
.flow-step:last-child::before{background:rgba(221,217,194,.58)}
.statement-grid{display:grid;gap:0;border:1px solid var(--lg-research-rule);background:rgba(255,255,255,.46)}
.statement{padding:26px 28px;border-bottom:0}
.statement+.statement{border-top:1px solid var(--lg-research-rule-soft)}
.statement-label{margin-bottom:10px}
.statement blockquote{margin:0 0 12px;padding:0;border:0;background:transparent;font-family:var(--lg-research-display);font-size:19px;line-height:1.6}
.statement p{margin:0;color:var(--lg-research-secondary);font-size:14px;line-height:1.72}
.narrative-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--lg-research-rule);background:rgba(255,255,255,.46)}
.narrative,.narrative.new{position:relative;padding:28px 30px;border-left:0;background:rgba(221,217,194,.30);color:var(--lg-research-ink)}
.narrative.new{background:rgba(192,207,203,.36)}
.narrative+.narrative::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--lg-research-rule)}
.narrative small,.narrative.new small{color:var(--lg-research-muted);font:400 10px/1.45 var(--lg-research-mono);letter-spacing:.04em}
.narrative h3{font:400 24px/1.2 var(--lg-research-display)}
.narrative p{color:var(--lg-research-secondary)!important;font-size:14px!important;line-height:1.72!important}

.closing{width:min(100%,var(--lg-research-object));margin:96px auto 0;padding:82px 0 0;display:grid;grid-template-columns:150px minmax(0,var(--lg-research-reading)) 150px;border-top:1px solid var(--lg-research-rule)}
.closing>.section-index{grid-column:1;grid-row:1;margin-top:7px}
.closing>h2{grid-column:2;grid-row:1;margin:0 0 30px;font:400 clamp(32px,3.4vw,46px)/1.08 var(--lg-research-display);letter-spacing:-.04em;color:var(--lg-research-ink)}
.closing>p{grid-column:2;margin:0 0 1.22em}
.closing-list{grid-column:1/-1;display:grid;gap:0;margin:28px 0 38px;border:1px solid var(--lg-research-rule);background:rgba(255,255,255,.46)}
.closing-item{grid-template-columns:44px 1fr;gap:18px;padding:20px 24px;border-bottom:0}
.closing-item+.closing-item{border-top:1px solid var(--lg-research-rule-soft)}
.closing-item span{color:var(--lg-research-muted);font:400 10px/1.5 var(--lg-research-mono)}
.closing-item p{font-size:14px;line-height:1.72}

.section:first-of-type{padding-top:clamp(82px,8vw,108px);border-top:1px solid var(--lg-research-rule)}
.aside{display:none}
@media(min-width:1600px){
  .aside{display:block;position:fixed;right:34px;top:108px;width:174px;font-family:var(--lg-research-body)}
  .aside-inner{padding-top:16px;border-top:1px solid var(--lg-research-rule)}
  .aside-label{margin:0 0 16px}
  .aside nav{display:grid;gap:10px}
  .aside a{color:var(--lg-research-muted);font:400 10px/1.5 var(--lg-research-mono);text-decoration:none}
  .aside a:hover{color:var(--lg-research-ink)}
}

.page-footer{padding:28px 20px 38px;background:transparent;color:var(--lg-research-muted)}
.footer-inner{max-width:var(--lg-research-page);margin:0 auto;border-top:1px solid var(--lg-research-rule);padding-top:26px}
.footer-kicker{margin:0 0 14px;color:var(--lg-research-muted);font:400 10px/1.5 var(--lg-research-mono);letter-spacing:.08em}
.footer-links{padding-top:0;border-top:0;font:400 10px/1.55 var(--lg-research-mono)}
.footer-links a{color:var(--lg-research-secondary)}

@media(max-width:1180px){
  .source-reader,.section,.closing{width:min(100%,760px)}
  .source-reader-head,.section,.closing{display:block}
  .source-reader-head .section-index,.section>.section-index,.closing>.section-index{display:block;margin:0 0 12px}
  .section>h2,.closing>h2{margin-bottom:28px}
  .flow,.statement-grid,.narrative-grid,.closing-list{width:100%}
}

@media(max-width:820px){
  :root{--body:15px}
  .topbar{width:min(calc(100% - 28px),760px);min-height:60px;grid-template-columns:1fr auto;padding:0}
  .nav-context{display:none}
  .topbar-actions{gap:6px}
  .nav-link{font-size:10px}
  .hero{padding:58px 14px 56px}
  .hero h1{font-size:clamp(44px,13vw,60px);line-height:1.02}
  .hero-meta{grid-template-columns:1fr}
  .hero-meta p+p::before{left:20px;right:20px;top:0;bottom:auto;width:auto;height:1px}
  .article-shell{max-width:760px;padding:0 14px 78px}
  .article-intro{margin-top:48px}
  .article p{font-size:15px;line-height:1.82}
  .source-reader{margin-top:68px}
  .source-reader-head h2,.section>h2,.closing>h2{font-size:34px}
  .source-section{padding:22px 18px}
  .source-paragraphs{padding:18px 17px}
  .source-fold summary{padding:16px 18px}
  .source-fold-body{padding:0 18px 22px}
  .section,.section:first-of-type{padding-top:72px}
  .flow{padding:0}
  .flow-step{grid-template-columns:50px minmax(0,1fr);min-height:70px;padding:16px 18px;font-size:15px}
  .flow-step::before{width:30px;height:30px}
  .flow-step:not(:last-child)::after{left:33px;top:51px;bottom:-19px}
  .flow-step+.flow-step span::before{top:-17px}
  .statement{padding:22px 20px}
  .narrative-grid{grid-template-columns:1fr}
  .narrative+.narrative::before{top:0;bottom:auto;left:20px;right:20px;width:auto;height:1px}
  .narrative{padding:24px 22px}
  .closing{margin-top:76px;padding-top:70px}
  .closing-item{grid-template-columns:34px 1fr;gap:12px;padding:18px}
  .page-footer{padding:0 14px 30px}
  .footer-links{flex-wrap:wrap;justify-content:flex-start;gap:10px 18px}
}
