/* Reader card — shared by Portfolio and Insights (index on the left, article on the right).
   ONE TYPE SCALE for both pages — every text of the same level has the same size everywhere:
     index number 13 · index title 16.5 · index summary 12.5 · filter tabs 12
     bar 11 · title (h2) 32 · subtitle 16 · quote 18 · small labels 10.5
     body text, lists and table cells 14 (line height 1.6)                        (all × --um) */
:root{--rd-body:14;--rd-label:10.5}

.fs-reader{display:grid;grid-template-columns:calc(318 * var(--ux)) 1fr;overflow:hidden}
.fs-reader-index{border-right:var(--thin) solid var(--fs-brown);padding:calc(22 * var(--um)) calc(22 * var(--um)) 0 calc(24 * var(--um));overflow-y:auto}
.fs-reader-index ol{list-style:none}
.fs-reader-index li{border-bottom:var(--thin) solid var(--fs-brown)}
.fs-reader-index li > button{position:relative;width:100%;display:grid;grid-template-columns:calc(34 * var(--um)) 1fr calc(20 * var(--um));column-gap:calc(4 * var(--um));
  text-align:left;padding:calc(13 * var(--um)) calc(10 * var(--um)) calc(14 * var(--um));transition:background .2s,color .2s}
.fs-reader-index li > button[aria-current="true"]{background:var(--fs-brown)}
.fs-reader-index li > button[aria-current="true"] .no,.fs-reader-index li > button[aria-current="true"] .t,
.fs-reader-index li > button[aria-current="true"] .s,.fs-reader-index li > button[aria-current="true"] .fs-arrow{color:var(--fs-white)}
.fs-reader-index .no{color:var(--fs-brown);font-size:calc(13 * var(--um));line-height:1.6}
.fs-reader-index .t{display:block;font-size:calc(16.5 * var(--um));line-height:1.25;transition:color .2s}
.fs-reader-index .s{display:block;margin-top:calc(5 * var(--um));font-family:var(--fs-sans);font-weight:300;font-size:calc(12.5 * var(--um));line-height:1.45;color:var(--fs-muted)}
.fs-reader-index li > button:hover .t{color:var(--fs-brown)}
.fs-reader-index li > button[aria-current="true"]:hover .t{color:var(--fs-white)}
.fs-reader-index .fs-arrow{align-self:center;font-size:calc(16 * var(--um))}
.fs-tabs{display:flex;flex-wrap:wrap;gap:calc(6 * var(--um));margin-bottom:calc(12 * var(--um))}
.fs-tabs button{font-size:calc(12 * var(--um));letter-spacing:.06em;text-transform:uppercase;color:var(--fs-slate);padding:calc(6 * var(--um)) calc(9 * var(--um))}
.fs-tabs button:hover{color:var(--fs-brown)}
.fs-tabs button[aria-pressed="true"]{background:var(--fs-brown);color:var(--fs-white)}

.fs-reader-pane{position:relative;overflow-y:auto;padding:calc(22 * var(--um)) calc(40 * var(--ux)) calc(14 * var(--um)) calc(30 * var(--ux));
  scrollbar-width:thin;scrollbar-color:var(--fs-brown) transparent}
.fs-reader-bar{display:flex;justify-content:space-between;align-items:center;font-size:calc(11 * var(--um));letter-spacing:.22em;text-transform:uppercase;color:var(--fs-brown)}
.fs-reader-bar > span{display:flex;align-items:center;gap:calc(14 * var(--um))}
.fs-reader-bar i{width:calc(32 * var(--um));height:var(--thin);background:var(--fs-brown)}
.fs-reader-pane h2{margin-top:calc(14 * var(--um));font-size:calc(32 * var(--um));line-height:1.18;letter-spacing:-.02em}
.fs-reader-sub{position:relative;margin-top:calc(10 * var(--um));padding-left:calc(40 * var(--um));font-size:calc(16 * var(--um));line-height:1.45;color:var(--fs-muted)}
.fs-reader-sub::before{content:"";position:absolute;left:0;top:.72em;width:calc(26 * var(--um));height:max(1px,calc(1.6 * var(--um)));background:var(--fs-brown)}
.fs-reader-figure{margin-top:calc(12 * var(--um))}
.fs-reader-figure .fs-illus,.fs-reader-figure svg{display:block;width:100%;height:calc(80 * var(--um))}
.fs-reader-body{display:grid;grid-template-columns:calc(240 * var(--um)) 1fr;gap:calc(34 * var(--um));margin-top:calc(14 * var(--um));align-items:start}

/* quote column */
.fs-reader .fs-quote{font-style:italic;font-size:calc(18 * var(--um));line-height:1.42;border-left:max(2px,calc(3 * var(--um))) solid var(--fs-brown);padding-left:calc(16 * var(--um))}
.fs-reader .fs-quote + i{display:block;width:calc(22 * var(--um));height:var(--hair);background:var(--fs-brown);margin:calc(16 * var(--um)) 0 calc(10 * var(--um))}
.fs-reader-body .fs-label{font-size:calc(var(--rd-label) * var(--um));letter-spacing:.2em;line-height:1.5}
.fs-reader-body > div:first-child .fs-text{font-size:calc(var(--rd-body) * var(--um))}
.fs-reader-body .fs-label strong{font-weight:600;color:var(--fs-slate)}

/* body text: one size for paragraphs, short texts, lists and tables */
.fs-reader-copy p,.fs-reader-copy .fs-text,.fs-reader-cols .fs-text,.fs-reader-cols .fs-list,.fs-reader .fs-list{
  font-family:var(--fs-sans);font-weight:300;font-size:calc(var(--rd-body) * var(--um));line-height:1.6;color:var(--fs-slate)}
.fs-reader-copy p{margin:0 0 calc(10 * var(--um))}
.fs-reader-copy strong,.fs-reader-cols strong{font-weight:500;color:var(--fs-brown)}
.fs-reader-sub strong{font-weight:500;color:var(--fs-slate)}
.fs-reader-cols{display:grid;margin-top:calc(14 * var(--um))}
.fs-reader-cols > *{padding:0 calc(16 * var(--um))}
.fs-reader-cols > :first-child{padding-left:0}
.fs-reader-cols .fs-label{font-size:calc(var(--rd-label) * var(--um))}
.fs-reader-cols .fs-text,.fs-reader-cols .fs-list{margin-top:calc(8 * var(--um))}

/* "key perspective" line */
.fs-reader .in-head{display:flex;align-items:center;gap:calc(14 * var(--um));margin-top:calc(14 * var(--um))}
.fs-reader .in-head .fs-label{font-size:calc(var(--rd-label) * var(--um))}
.fs-reader .in-head i{flex:1;height:var(--thin);background:var(--fs-brown)}
.fs-reader-copy .in-head + .fs-text{margin-top:calc(6 * var(--um));font-family:var(--fs-serif);font-style:italic;font-weight:400;font-size:calc(16 * var(--um));color:var(--fs-brown)}

/* tables: two aligned columns, a label header row, hairlines between rows */
.fs-insight-table{margin:calc(4 * var(--um)) 0 calc(12 * var(--um));border-top:var(--thin) solid var(--fs-brown);font-family:var(--fs-sans);font-weight:300;font-size:calc(var(--rd-body) * var(--um));line-height:1.45;color:var(--fs-slate)}
.fs-insight-table > div{display:grid;grid-template-columns:34% 1fr;border-bottom:var(--thin) solid var(--fs-brown)}
.fs-insight-table > div > *{padding:calc(6 * var(--um)) calc(12 * var(--um));align-self:stretch}
.fs-insight-table > div > :first-child{padding-left:0;font-weight:400}
.fs-insight-table > div > * + *{border-left:var(--thin) solid var(--fs-brown)}
.fs-insight-table > div:first-child > *{font-family:var(--fs-serif);font-weight:400;font-size:calc(var(--rd-label) * var(--um));letter-spacing:.2em;text-transform:uppercase;color:var(--fs-brown);padding-top:calc(9 * var(--um));padding-bottom:calc(7 * var(--um))}

@media (max-width:1180px){
  .fs-reader{grid-template-columns:1fr}
  .fs-reader-index{border-right:0;border-bottom:1px solid var(--fs-brown);padding:18px 18px 0 26px}
  .fs-reader-pane{padding:22px 18px 26px}
  .fs-reader-pane h2{font-size:26px}
  .fs-reader-body,.fs-reader-cols{grid-template-columns:1fr !important;gap:18px}
  .fs-reader-cols > *{padding:14px 0 0}
  .fs-reader-bar{flex-wrap:wrap;gap:12px;letter-spacing:.16em}
  .fs-reader-bar i{display:none}
  :root{--rd-body:15;--rd-label:11}
}
@media (min-width:700px) and (max-width:1180px){
  .fs-reader-pane{padding:30px 32px 34px}
  .fs-reader-pane h2{font-size:30px}
  .fs-reader-index{padding:22px 24px 0 28px}
  :root{--rd-body:16;--rd-label:11.5}
}
@media (min-width:960px) and (max-width:1180px){
  .fs-reader{grid-template-columns:290px 1fr}
  .fs-reader-index{border-right:1px solid var(--fs-brown);border-bottom:0;padding:22px 20px 22px 24px}
  .fs-reader-body{grid-template-columns:200px 1fr !important;gap:30px}
}