/* ==========================================================================
   27  UK FRANCHISE GROWTH INDEX: REPORTS
   The research library at /uk-franchise-growth-index/reports/.

   Loaded after fi.css, on the site's own tokens. Two grounds, as the brief
   asks (section 34): Ink for the hero, the library and the download panel,
   and Paper for the long-form report itself, using the site's own
   .section--light, so the reading surface is the one the homepage and the
   case study already use. On dark, type is tan or paper and never white;
   white appears only inside orange buttons and chips (--chip-label).

   Namespaced fr- so nothing here reaches the rest of the site. The report
   body keeps the class names the PDF uses (stats, callout, keyed, fig...),
   scoped under .fr-doc, because both are built from the same renderer.
   ========================================================================== */

/* --- hero --------------------------------------------------------------- */
.fr-hero .hero__inner{text-align:left}
.fr-hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,5vw,72px);align-items:center}
.fr-hero .fi-crumbs{margin-bottom:var(--s-4);text-align:left;display:block}
.fr-hero h1{font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2rem,1.2rem + 3vw,3.6rem);margin:var(--s-4) 0 var(--s-4);color:var(--text-bright)}
.fr-hero h1 .hl{color:var(--orange)}
.fr-hero__sub{font-size:var(--t-statement);line-height:1.4;color:var(--paper);max-width:40ch;margin:0 0 var(--s-4)}
.fr-hero__intro{font-size:var(--t-lead);color:var(--text);max-width:58ch;margin:0 0 var(--s-5)}
.fr-hero__meta{font-size:var(--t-small);color:var(--text-soft);margin:0 0 var(--s-5);display:flex;flex-wrap:wrap;gap:6px 18px}
.fr-hero__meta b{font-weight:500;color:var(--text)}
.fr-hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:center}
.fr-kick{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-small);color:var(--text)}
.fr-kick span{display:inline-flex;align-items:center;height:30px;padding-inline:12px;border:1px solid var(--orange);border-radius:6px;color:var(--paper)}
.fr-cover{display:block;width:100%;max-width:300px;justify-self:end;aspect-ratio:640/906;height:auto;
  border:1px solid var(--line-strong);border-radius:6px;background:#0B1214}
/* the hub hero: shorter and centred, not a big dark block */
.fr-hero--hub .hero__inner{text-align:center}
.fr-hero--hub h1{margin-inline:auto;max-width:18ch}
.fr-hero--hub .fr-hero__intro{margin-inline:auto}
.fr-hero--hub .fr-hero__ctas{justify-content:center}
.fr-hero--hub .fi-crumbs{justify-content:center;display:flex}
@media (max-width:880px){
  .fr-hero__grid{grid-template-columns:1fr}
  .fr-cover{justify-self:start;max-width:200px}
}
@media (max-width:640px){.fr-hero .fr-cover{display:none}}

/* --- at a glance -------------------------------------------------------- */
.fr-glance{padding-block:clamp(28px,3.5vw,44px)}
.fr-glance__k{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin:0 0 var(--s-4)}
.fr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-3)}
.fr-tile{padding:18px 20px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.fr-tile__v{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);font-weight:500;letter-spacing:-.025em;line-height:1.05;color:var(--paper)}
.fr-tile__l{font-size:var(--t-small);line-height:1.4;color:var(--text-soft);margin-top:8px}
.fr-tile.is-lead{border-color:rgba(240,78,36,.55)}
.fr-tile.is-text .fr-tile__v{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);letter-spacing:-.01em;line-height:1.2}

/* --- the report body on Paper ------------------------------------------- */
.fr-body{--paper-card:#E9E3D4;--ink-soft:#3E4A4E;--hair:rgba(16,26,29,.12)}
.fr-body .fi-doc-layout{align-items:start}
.fr-body .fi-toc,.fr-body .fi-doc-side__stick{border-color:var(--line)}
.fr-body .fi-toc a{color:var(--text-soft)}
.fr-body .fi-toc a:hover,.fr-body .fi-toc a[aria-current="true"]{color:var(--text-dark)}
.fr-doc{font-size:1rem;line-height:1.65;color:var(--text-dark);min-width:0}
@media(min-width:1000px){.fr-body .fi-doc-layout{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}}
.fr-doc h2{font-size:var(--t-h2-sm);color:var(--text-dark);scroll-margin-top:calc(var(--header-h) + 16px)}
.fr-doc > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.fr-body .fi-toc{background:rgba(16,26,29,.03)}
.fr-body .fi-toc a.is-current,.fr-body .fi-toc a:hover{color:var(--text-dark);background:rgba(16,26,29,.06)}
.fr-doc h3{font-family:var(--font-body);font-size:var(--t-h3-lg);font-weight:500;letter-spacing:-.012em;line-height:1.25;
  color:var(--text-dark);margin:var(--s-7) 0 var(--s-3)}
.fr-doc h4{font-size:1.02rem;font-weight:600;color:var(--text-dark);margin:var(--s-6) 0 var(--s-2)}
.fr-doc h5{font-size:.95rem;font-weight:600;color:var(--text-dark);margin:var(--s-5) 0 var(--s-2)}
.fr-doc h2 + h3,.fr-doc h2 + .sub-eb + h3{margin-top:var(--s-4)}
.fr-doc p,.fi-doc.fr-doc > p{margin:0 0 var(--s-4);max-width:70ch;font-size:1rem;line-height:1.65;color:var(--text-dark)}
.fr-doc p.lead{font-size:1.12rem;line-height:1.55;color:var(--text-dark)}
.fr-doc p.note{font-size:var(--t-small);color:var(--ink-soft)}
.fr-doc strong{color:var(--text-dark)}
.fr-doc a{color:var(--text-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(240,78,36,.7)}
.fr-doc a:hover{color:var(--orange-hover)}
.fr-doc ul,.fr-doc ol{margin:0 0 var(--s-5);padding:0;max-width:70ch}
.fr-doc ul li,.fr-doc ol li{list-style:none;position:relative;padding-left:22px;margin:0 0 10px}
.fr-doc ul li::before{content:"";position:absolute;left:1px;top:.62em;width:7px;height:7px;background:var(--orange);border-radius:1.5px}
.fr-doc ol{counter-reset:li}
.fr-doc ol li{counter-increment:li}
.fr-doc ol li::before{content:counter(li);position:absolute;left:0;top:0;font-size:.85rem;font-weight:600;color:var(--orange-hover)}
.fr-doc .sub-eb{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B8391A;margin:var(--s-7) 0 -6px}

/* key figures */
.fr-doc .stats{margin:var(--s-5) 0 var(--s-6)}
.fr-doc .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 24px}
.fr-doc .stat-row + .stat-row{margin-top:18px}
.fr-doc .stat{border-top:1px solid var(--line-strong);padding-top:12px;min-width:0}
.fr-doc .stat.emph{border-top:3px solid var(--orange);padding-top:10px}
.fr-doc .stat .v{font-size:clamp(1.5rem,1.2rem + 1vw,2.05rem);font-weight:500;letter-spacing:-.025em;line-height:1.05;color:var(--text-dark)}
.fr-doc .stat .l{font-size:var(--t-small);line-height:1.4;color:var(--ink-soft);margin-top:6px}

/* callouts */
.fr-doc .callout{background:var(--paper-card);border-left:3px solid var(--orange);border-radius:0 6px 6px 0;padding:18px 22px 6px;margin:var(--s-5) 0 var(--s-6)}
.fr-doc .callout .co-title{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dark);margin-bottom:8px}
.fr-doc .callout p{font-size:1rem;margin-bottom:12px;max-width:none}

/* tables: a scrolling region on small screens, never shrunk to illegibility */
.fr-table{margin:var(--s-4) 0 var(--s-6);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:4px}
.fr-table:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.fr-doc table.data{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed;font-size:.92rem;line-height:1.45}
.fr-doc table.data.kv{min-width:0}
.fr-doc table.data th{font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dark);text-align:left;
  vertical-align:bottom;padding:0 12px 10px;border-bottom:1.5px solid var(--text-dark)}
.fr-doc table.data td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--text-dark)}
.fr-doc table.data th:first-child,.fr-doc table.data td:first-child{padding-left:0}
.fr-doc table.data td:first-child{font-weight:500}
.fr-doc table.data .num{text-align:right;font-variant-numeric:tabular-nums}
.fr-doc table.data td.num{white-space:nowrap}
.fr-doc .fdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}

/* figures: the chart on a Paper card, caption and source as HTML */
.fr-doc figure.fig{margin:var(--s-5) 0 var(--s-7);padding:clamp(18px,2.4vw,28px);background:var(--paper-card);border-radius:8px;scroll-margin-top:calc(var(--header-h) + 16px)}
.fr-doc figcaption{margin-bottom:14px}
.fr-doc .fig-no{display:block;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#B8391A;margin-bottom:4px}
.fr-doc .fig-title{display:block;font-size:1.08rem;font-weight:500;line-height:1.3;color:var(--text-dark)}
.fr-doc .fig-note{font-size:var(--t-small);color:var(--ink-soft);margin-top:4px}
.fr-doc .fig-art{border-top:1px solid var(--hair);padding-top:16px}
.fr-doc .fig-art svg{width:100%;height:auto;display:block}
/* on a phone a chart keeps a readable size and scrolls sideways, rather
   than shrinking its labels to a few pixels; the data is also in the text */
@media (max-width:640px){
  .fr-doc .fig-art{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fr-doc .fig-art > svg{min-width:540px}
  .fr-doc .fig-art .pair{min-width:620px}
}
.fr-doc .fig-src{font-size:.75rem;color:var(--ink-soft);margin-top:12px;padding-top:8px;border-top:1px solid var(--hair)}
.fr-doc .pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fr-doc .pair .ppt{font-size:.8rem;font-weight:600;color:var(--text-dark);margin-bottom:8px}
@media (max-width:720px){.fr-doc .pair{grid-template-columns:1fr}}

/* key and description rows */
.fr-doc .keyed{margin:var(--s-4) 0 var(--s-6);border-top:1px solid var(--line-strong)}
.fr-doc .kr{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--hair)}
.fr-doc .kd p{margin:0 0 6px;max-width:none}
.fr-doc .kd p:last-child{margin-bottom:0}
.fr-doc .kr .kv{display:block;font-size:1.55rem;font-weight:500;letter-spacing:-.02em;line-height:1.05;color:var(--text-dark);border-left:3px solid var(--acc);padding-left:12px}
.fr-doc .kr .kl{display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dark);padding-top:3px}
.fr-doc .kr.lv .kl{padding-top:0;margin-bottom:4px}
.fr-doc .kr.lv .kv{font-size:1.25rem}
.fr-doc .kr .chip{display:inline-block;font-size:.85rem;font-weight:500;padding:5px 12px;border-radius:4px}
.fr-doc .kr .kn{display:inline-grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--acc);border-radius:50%;font-size:.85rem;font-weight:600;color:var(--text-dark)}
.fr-doc .kr.num{align-items:center;grid-template-columns:44px 1fr}
.fr-doc .kr.num .kd p{font-weight:500}
@media (max-width:640px){.fr-doc .kr{grid-template-columns:1fr;gap:8px}}

/* process steps, flows and panels */
.fr-doc .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin:var(--s-4) 0 var(--s-6)}
.fr-doc .step{background:var(--paper-card);padding:14px 12px;border-top:2px solid #BCAF94;border-radius:0 0 4px 4px;min-width:0}
.fr-doc .step.hl{border-top:3px solid var(--acc)}
.fr-doc .step .sn{font-size:1.4rem;font-weight:500;color:#B8391A;line-height:1;margin-bottom:8px}
.fr-doc .step .sl{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dark);margin-bottom:6px}
.fr-doc .step .st{font-size:.88rem;line-height:1.4;color:var(--text-dark)}
.fr-doc .flows,.fr-doc .panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:var(--s-4) 0 var(--s-6)}
.fr-doc .flow{background:var(--paper-card);padding:16px 18px 18px;border-top:2px solid var(--orange);border-radius:0 0 6px 6px}
.fr-doc .flow .pl,.fr-doc .panel .pl{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dark);margin-bottom:10px}
.fr-doc .flow .fi{background:#F4F0E7;border:1px solid var(--hair);padding:8px 12px;font-size:.92rem;border-radius:4px}
.fr-doc .flow .fa{width:0;height:0;margin:5px auto;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #BCAF94}
.fr-doc .panel{background:var(--paper-card);padding:16px 18px 6px;border-top:2px solid #BCAF94;border-radius:0 0 6px 6px}
.fr-doc .panel.hl{border-top:3px solid var(--orange)}
.fr-doc .panel p{font-size:.95rem;margin-bottom:10px}
.fr-doc .panels.lists ul{margin:0 0 8px}
.fr-doc .panels.lists li{font-size:.92rem;margin-bottom:6px}

/* numbered statements */
.fr-doc ol.nums{margin:var(--s-4) 0 var(--s-6);border-top:1px solid var(--line-strong);max-width:none}
.fr-doc ol.nums li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;margin:0;border-bottom:1px solid var(--hair)}
.fr-doc ol.nums li::before{content:none}
.fr-doc ol.nums .nn{font-size:1.1rem;font-weight:500;color:#B8391A;line-height:1.35}

/* industry profile cards */
.fr-doc .profile{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:18px 0;border-top:1px solid var(--line-strong)}
.fr-doc .profile + .profile{border-top:1px solid var(--hair)}
.fr-doc .profile .pname{font-size:1.1rem;font-weight:500;margin-bottom:6px}
.fr-doc .profile .pline{font-size:.88rem;color:var(--ink-soft);line-height:1.55}
.fr-doc .profile .pft{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.fr-doc .pb{display:grid;grid-template-columns:62px 1fr 38px;align-items:center;gap:8px;margin-bottom:5px}
.fr-doc .pb .pn{font-size:.82rem}
.fr-doc .pb .pt{height:8px;background:#F1EDE4;border-radius:3px;position:relative;overflow:hidden}
.fr-doc .pb .pt span{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.fr-doc .pb .pv{text-align:right;font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:640px){.fr-doc .profile{grid-template-columns:1fr;gap:12px}}

/* the five Fibres: a coloured bar plus the name in text, never colour alone */
.fr-doc .fibre-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:var(--s-4) 0 var(--s-6)}
.fr-doc .fibre-strip span{padding:9px 10px;font-size:.82rem;font-weight:500;border-radius:4px}
.fr-doc .fibre-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:var(--s-4) 0 var(--s-6)}
.fr-doc .fc{border-top:4px solid;background:var(--paper-card);padding:12px 12px 14px;border-radius:0 0 6px 6px;min-width:0}
.fr-doc .fc .fn{font-size:.92rem;font-weight:600;margin-bottom:4px}
.fr-doc .fc .fd{font-size:.82rem;line-height:1.4}
.fr-doc .fc .fv{font-size:1.3rem;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.fr-doc .fc .ft{height:6px;background:#D9D1C0;border-radius:3px;margin-top:8px;position:relative;overflow:hidden}
.fr-doc .fc .ft span{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
@media (max-width:720px){.fr-doc .fibre-cards,.fr-doc .fibre-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

.fr-doc ul.twocol{columns:2;column-gap:32px;max-width:none}
.fr-doc ul.twocol li{break-inside:avoid}
@media (max-width:640px){.fr-doc ul.twocol{columns:1}}
.fr-doc .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:var(--s-4) 0 var(--s-6)}
.fr-doc .card{background:var(--paper-card);padding:16px 18px 8px;border-top:2px solid var(--orange);border-radius:0 0 6px 6px}
.fr-doc .card .ct{font-weight:600;line-height:1.3;margin-bottom:6px}

/* 50 to Watch: one profile per card */
.fr-doc .card-sub{background:var(--paper-card);border-radius:8px;padding:clamp(18px,2.4vw,26px);margin:0 0 16px}
.fr-doc .card-sub .sub-eb{margin-top:0}
.fr-doc .card-sub h3{margin-top:10px}
.fr-doc .card-sub .fibre-cards{margin-bottom:0}
.fr-doc .card-sub .fc{background:#F4F0E7}
.fr-doc .card-sub table.data{min-width:520px}

/* --- key findings -------------------------------------------------------- */
.fr-findings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 var(--s-5)}
.fr-finding{background:var(--paper-card);border-radius:8px;padding:20px 22px 16px;display:flex;flex-direction:column;border-top:3px solid var(--orange)}
.fr-finding__v{font-family:var(--font-display);font-size:clamp(1.9rem,1.5rem + 1.2vw,2.6rem);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--text-dark);margin-bottom:10px}
.fr-finding__t{font-size:.98rem;line-height:1.55;margin:0 0 14px;max-width:none}
.fr-finding__s{margin-top:auto;font-size:.74rem;color:var(--ink-soft);border-top:1px solid var(--hair);padding-top:8px}
.fr-findings-more{border-top:1px solid var(--line-strong)}
.fr-findings-more li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:12px 0 !important;margin:0 !important;border-bottom:1px solid var(--hair)}
.fr-findings-more li::before{content:none !important}
.fr-findings-more b{font-weight:600;color:var(--text-dark);font-variant-numeric:tabular-nums}
@media (max-width:720px){.fr-findings{grid-template-columns:1fr}.fr-findings-more li{grid-template-columns:72px 1fr}}

/* --- journalists, corrections ------------------------------------------- */
.fr-press{background:var(--paper-card);border-radius:8px;padding:clamp(18px,2.4vw,28px);margin:0 0 var(--s-5)}
.fr-press dl{display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:0;margin:0}
.fr-press dt,.fr-press dd{padding:10px 0;border-bottom:1px solid var(--hair);margin:0}
.fr-press dt{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding-right:16px}
.fr-press dd{font-size:.95rem}
.fr-cite{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fr-cite code{font-family:var(--font-body);font-size:.95rem;background:#F4F0E7;border:1px solid var(--hair);border-radius:4px;padding:8px 12px}
.fr-copy{font:500 .85rem/1 var(--font-body);color:var(--text-dark);background:none;border:1px solid var(--line-strong);border-radius:6px;padding:9px 14px;cursor:pointer}
.fr-copy:hover,.fr-copy:focus-visible{border-color:var(--text-dark)}
@media (max-width:640px){.fr-press dl{grid-template-columns:1fr}.fr-press dt{border-bottom:0;padding-bottom:0}}
.fr-updates{font-size:.95rem}
.fr-updates dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:0 0 var(--s-4)}
.fr-updates dt{font-weight:600}
.fr-updates dd{margin:0}

/* --- the download panel (gated) ------------------------------------------ */
.fr-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;
  padding:clamp(22px,3.2vw,40px);border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.fr-dl img{width:clamp(110px,14vw,170px);height:auto;border:1px solid var(--line-strong);border-radius:4px}
.fr-dl h2{font-size:var(--t-h2-sm);margin:0 0 var(--s-3)}
.fr-dl p{color:var(--text);max-width:58ch;margin:0 0 var(--s-5)}
.fr-dl .fr-dl__fine{font-size:var(--t-small);color:var(--text-soft);margin:var(--s-4) 0 0}
@media (max-width:640px){.fr-dl{grid-template-columns:1fr}.fr-dl img{width:120px}}
/* locked and unlocked states: the page says which, the script flips it */
/* each element keeps its own display (a button stays inline-flex); only the
   wrong state is hidden, and !important stops a component's display winning */
html:not(.fr-unlocked) .fr-when-unlocked,html.fr-unlocked .fr-when-locked{display:none !important}

/* --- the library (hub) --------------------------------------------------- */
.fr-lib__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s-4);margin-bottom:var(--s-5)}
.fr-lib__head h2{margin:0}
.fr-count{font-size:var(--t-small);color:var(--text-soft)}
.fr-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-6)}
.fr-filter{font:500 var(--t-small)/1 var(--font-body);color:var(--text);background:transparent;border:1px solid var(--line-strong);
  border-radius:6px;padding:10px 14px;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.fr-filter:hover{border-color:var(--text)}
.fr-filter[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--chip-label)}
.fr-filter:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.fr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,1.8vw,22px)}
.fr-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  overflow:hidden;transition:border-color .2s}
.fr-card:hover,.fr-card:focus-within{border-color:var(--line-strong)}
.fr-card[hidden]{display:none}
.fr-card__img{display:block;aspect-ratio:16/10;overflow:hidden;background:#0B1214;border-bottom:1px solid var(--line)}
.fr-card__img img{width:100%;height:auto;display:block;transform:translateY(-4%)}
.fr-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.fr-card__cat{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.fr-card h3{font-size:1.12rem;line-height:1.25;font-weight:500;color:var(--paper);margin:0 0 8px}
.fr-card h3 a{color:inherit;text-decoration:none}
.fr-card h3 a::after{content:"";position:absolute;inset:0}
.fr-card h3 a:focus-visible{outline:none}
.fr-card:has(h3 a:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.fr-card p{font-size:var(--t-small);color:var(--text-soft);margin:0 0 14px}
.fr-card__stat{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.fr-card__stat b{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:var(--paper);white-space:nowrap}
.fr-card__stat span{font-size:var(--t-micro);line-height:1.35;color:var(--text-soft)}
.fr-card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:var(--t-micro);color:var(--text-soft)}
.fr-card__go{color:var(--orange);font-weight:500;font-size:var(--t-small)}
.fr-card__dl{position:relative;z-index:1;font-size:var(--t-micro);color:var(--text);text-decoration:underline;text-underline-offset:3px}
.fr-empty{color:var(--text-soft);padding:var(--s-6) 0}

/* the library unlock band */
.fr-unlock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.fr-unlock h2{margin:0 0 var(--s-4)}
.fr-unlock p{max-width:52ch}
/* The site's reset (*{margin:0}) takes every margin off, so the two lines and
   the button are spaced here: the second line sits just under the first, and
   the button has room of its own rather than touching the text. */
.fr-unlock .lead + p{margin-top:var(--s-2)}
.fr-unlock .fr-when-locked > p:last-child{margin-top:var(--s-6)}
.fr-fan{position:relative;height:clamp(220px,26vw,320px)}
.fr-fan img{position:absolute;top:0;width:38%;height:auto;border:1px solid var(--line-strong);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.fr-fan img:nth-child(1){left:0;transform:rotate(-7deg) translateY(18px)}
.fr-fan img:nth-child(2){left:20%;transform:rotate(-2deg) translateY(6px);z-index:1}
.fr-fan img:nth-child(3){left:40%;transform:rotate(3deg);z-index:2}
.fr-fan img:nth-child(4){left:60%;transform:rotate(8deg) translateY(14px);z-index:1}
.fr-unlocked-list{columns:2;column-gap:28px;padding:0;margin:var(--s-4) 0 0}
.fr-unlocked-list li{list-style:none;break-inside:avoid;margin:0 0 10px}
.fr-unlocked-list a{color:var(--text)}
@media (max-width:880px){.fr-unlock{grid-template-columns:1fr}.fr-fan{order:-1;max-width:420px}.fr-unlocked-list{columns:1}}

/* --- related research ----------------------------------------------------- */
.fr-rel .fr-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.fr-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.fr-links a{color:var(--text);font-size:var(--t-small)}
.fr-links a:hover{color:var(--orange)}
/* two or more link buttons in a row, with room between them, wrapping on a phone */
.fr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);margin-top:var(--s-5)}

/* --- the lead form --------------------------------------------------------- */
.fr-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  border:1px solid var(--line-strong);border-radius:10px;background:#0B1114;color:var(--text);padding:0;
  overflow:auto;overscroll-behavior:contain}
/* centred on the screen. The site's reset (*{margin:0}) removes the margin
   browsers use to centre a dialog, which left it pinned to the top left. */
.fr-dialog[open]{position:fixed;inset:0;margin:auto;height:-webkit-fit-content;height:fit-content;z-index:1000}
.fr-dialog::backdrop{background:rgba(5,8,10,.72)}
.fr-dialog__in{padding:clamp(22px,3vw,32px)}
.fr-dialog h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem);margin:0 0 8px;padding-right:44px}   /* clear of the close button */
.fr-dialog__lede{font-size:var(--t-small);color:var(--text-soft);margin:0 0 20px}
.fr-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;font-size:18px;line-height:1}
.fr-x:focus-visible{outline:2px solid var(--orange)}
.fr-form{display:grid;gap:14px}
.fr-field{display:grid;gap:6px}
.fr-field label{font-size:var(--t-small);color:var(--text)}
.fr-field label .req{color:var(--orange)}
.fr-field label .opt{color:var(--text-soft)}
.fr-field input{width:100%;min-width:0;font:400 1rem/1.3 var(--font-body);color:var(--paper);background:rgba(233,227,212,.04);border:1px solid var(--line-strong);border-radius:6px;padding:12px 14px;min-height:46px}
.fr-field input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,78,36,.25)}
.fr-field input[aria-invalid="true"]{border-color:#E8633F}
.fr-err{font-size:var(--t-micro);color:#F2896A;min-height:0}
.fr-err:empty{display:none}
.fr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.fr-row{grid-template-columns:1fr}}
.fr-hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
.fr-fine{font-size:var(--t-micro);color:var(--text-soft);margin:4px 0 0}
.fr-fine a{color:var(--text)}
.fr-form__status{font-size:var(--t-small);color:#F2896A}
.fr-form__status:empty{display:none}
.fr-form .btn{justify-self:start}
.fr-form .btn[disabled]{opacity:.6;cursor:progress}
.fr-done{display:none}
.fr-dialog.is-done .fr-form,.fr-dialog.is-done .fr-dialog__lede{display:none}
.fr-dialog.is-done .fr-done{display:block}
.fr-done p{color:var(--text)}

/* the held-report note, test builds only */
.fr-held{background:#8A2A10;color:var(--paper);padding:10px var(--gutter);text-align:center;font-size:var(--t-small)}

/* print: the web page prints as a clean document without the chrome */
@media print{
  .fr-dl,.fr-rel,.fr-dialog,.fi-subnav,.fi-doc-side{display:none !important}
}
.fr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a Word subheading lifted one level for a clean outline keeps its look */
.fr-doc h3.fr-h4{font-family:inherit;font-size:1.02rem;font-weight:600;letter-spacing:0;line-height:1.35;color:var(--text-dark);margin:var(--s-6) 0 var(--s-2)}
.fr-doc h4.fr-h5{font-size:.95rem;margin:var(--s-5) 0 var(--s-2)}
.fr-doc h2 + h3.fr-h4{margin-top:var(--s-4)}