:root{
  --paper:#ffffff; --ink:#1a1a18; --mut:#717171; --line:#e6e4df; --band:#f4f4f2;
  --disp:"Bodoni Moda","Didot","Playfair Display",Georgia,serif;
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body.fam-canopy{--acc:#1d5c3d;--acc-deep:#0e3a24;--gold:#a87f24;--acc-soft:#eef3ec}
body.fam-office{--acc:#2c4f78;--acc-deep:#152a44;--gold:#a87c22;--acc-soft:#ecf0f5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--acc);color:#fff}
a{color:var(--acc)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
/* sticky translucent header, serif wordmark (theirs) */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:26px;min-height:64px}
.brand{font-family:var(--disp);font-weight:600;font-size:23px;color:var(--acc-deep);text-decoration:none;letter-spacing:.005em;white-space:nowrap}
header.site nav{margin-left:auto;display:flex;align-items:center;gap:4px}
header.site nav a{color:#3d3d3a;text-decoration:none;font-size:13.5px;font-weight:500;padding:6px 11px}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current="page"]{color:var(--acc-deep);font-weight:600;text-decoration:underline;text-underline-offset:5px}
header.site .sicon{display:flex;align-items:center;color:#3d3d3a;border-left:1px solid var(--line);padding-left:16px;margin-left:8px}
header.site .sicon:hover{color:var(--acc-deep)}
/* reading column geometry: 720px centred, .wide breaks out to the container */
main .wrap{max-width:720px}
main .wide{width:min(1240px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
/* homepage split hero (theirs) */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{max-width:1240px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:start;padding:84px 0 78px}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin:0 0 26px;display:flex;align-items:center;gap:10px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.hero h1{font-family:var(--disp);font-weight:560;font-size:clamp(2.7rem,4.9vw,4.3rem);line-height:1.05;letter-spacing:-.01em;margin:0;color:#141412}
.standfirst{font-family:var(--sans);font-size:16.5px;line-height:1.65;color:var(--mut);max-width:34rem;margin:26px 0 0}
.readrow{margin:30px 0 0;display:flex;align-items:baseline;gap:14px}
.readlink{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.readtime{font-family:var(--sans);font-size:13.5px;color:var(--mut)}
.hero figure{margin:36px 0 0}
.hero img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1) contrast(1.05)}
/* article head (theirs): centred breadcrumb, headline, standfirst, wide photo */
.crumb{text-align:center;font-family:var(--sans);font-size:13px;color:var(--mut);margin:42px 0 20px}
.crumb b{color:var(--ink);font-weight:600}
.crumb i{font-style:normal;color:#c4c1b8;padding:0 2px}
.pg-guide h1,.pg-compare h1,.pg-glossary h1,.pg-faq h1{font-family:var(--disp);font-weight:560;font-size:clamp(2.7rem,5.2vw,4.4rem);line-height:1.08;letter-spacing:-.01em;text-align:center;margin:0 auto;max-width:58rem;color:#141412}
.art-standfirst{text-align:center;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--mut);max-width:44rem;margin:24px auto 0}
.art-hero{margin:42px 0 46px}
.art-hero img{width:100%;aspect-ratio:21/10;object-fit:cover;filter:grayscale(1) contrast(1.05)}
/* reading column body */
main{padding:0 0 10px}
main p,main li{font-family:var(--serif);font-size:1.17rem;line-height:1.68;color:#232320}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin-bottom:8px}
li::marker{color:var(--acc);font-weight:600}
p.dc::first-letter{font-family:var(--disp);font-weight:600;font-size:3.3em;float:left;line-height:.82;padding:6px 12px 0 0;color:#141412}
/* subheads: small-caps sans labels (their article vocabulary) */
h2{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--acc-deep);margin:2.9rem 0 .85rem;line-height:1.55}
h3{font-family:var(--disp);font-weight:600;font-size:1.32rem;line-height:1.3;margin:1.8rem 0 .35rem;color:#141412}
/* verdict: their hairline + serif title treatment, in the column */
.brief{border-top:2px solid var(--ink);padding:30px 0 4px;margin:56px 0 6px}
.brief h2{font-family:var(--disp);font-weight:560;font-size:1.85rem;letter-spacing:0;text-transform:none;color:#141412;margin:0 0 14px}
.brief p,.brief li{font-family:var(--sans);font-size:1rem;line-height:1.65;color:#2c2c2a}
.brief>p:first-of-type{font-family:var(--serif);font-size:1.16rem}
.pick{font-weight:700;color:var(--acc-deep)}
/* CTA: their underlined read-link treatment */
.cta{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;margin:8px 0 4px}
.cta:hover{color:var(--acc-deep)}
.meta{font-family:var(--sans);color:var(--mut);font-size:13.5px;line-height:1.65}
main p.meta{font-family:var(--sans);font-size:13.5px}
/* steps: their grid vocabulary — eyebrow, serif title, grey text, hairline */
.how{margin:52px 0 6px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 22px}
.sec-head h2{font-family:var(--disp);font-weight:560;font-size:1.75rem;letter-spacing:0;text-transform:none;color:#141412;margin:0}
.sec-head .note{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step{border-top:1px solid var(--line);padding-top:18px}
.step .n{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.step h3{margin:0 0 6px;font-size:1.3rem}
.step p{font-family:var(--sans);font-size:.94rem;line-height:1.6;color:var(--mut);margin:0}
/* audit stat band: their light-grey band, big serif figure */
.statband{background:var(--band);padding:38px 42px;margin:44px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:8px 34px;align-items:center}
.statband .big{font-family:var(--disp);font-size:clamp(3.2rem,6vw,4.6rem);font-weight:600;line-height:1;color:var(--acc-deep)}
.statband .big small{font-size:.42em;color:var(--gold);font-weight:700}
.statband .cap{font-family:var(--sans);font-size:1rem;line-height:1.6;color:#33322f;max-width:36rem;margin:0}
.statband .cap strong{color:#141412}
.statband .bar{grid-column:1/-1;height:8px;background:#e2ded2;overflow:hidden;margin-top:12px}
.statband .bar i{display:block;height:100%;width:79.1%;background:var(--gold)}
.statband .src{grid-column:1/-1;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:8px 0 0}
/* comparison tables break out to the wide-photo width */
.tblwrap{overflow-x:auto;margin:20px 0 26px}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:14.5px;min-width:680px}
th,td{padding:13px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#141412;border-bottom:2px solid var(--ink)}
td{line-height:1.55;color:#2c2c2a}
td:first-child{min-width:150px}
tr:has(.pick) td{background:var(--acc-soft)}
tr:has(.pick) td:first-child{border-left:3px solid var(--gold)}
/* article grid (theirs): photo, category + date, serif title */
.grid-sec{margin:58px 0 6px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px}
.gcard{display:block;text-decoration:none;color:var(--ink)}
.gcard img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:14px}
.gcard .cat{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#55534e;margin:0 0 7px}
.gcard .cat .dt{color:var(--mut);font-weight:500}
.gcard .ttl{font-family:var(--disp);font-weight:560;font-size:1.32rem;line-height:1.28;display:block}
.gcard:hover .ttl{color:var(--acc-deep)}
/* prev / next article (theirs) */
.prevnext{border-top:1px solid var(--line);margin-top:64px;padding-top:24px;display:flex;justify-content:space-between;gap:30px}
.prevnext a{text-decoration:none;color:var(--ink);max-width:46%}
.prevnext .lab{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.prevnext .ttl{font-family:var(--disp);font-weight:560;font-size:1.15rem;line-height:1.3}
.prevnext a:hover .ttl{color:var(--acc-deep)}
.prevnext .next{margin-left:auto;text-align:right}
/* FAQ: hairline rows, serif questions (their divider vocabulary) */
.faq{border-bottom:1px solid var(--line);margin-top:10px}
.faq details.qa{border-top:1px solid var(--line)}
.faq summary{font-family:var(--disp);font-weight:560;font-size:1.26rem;line-height:1.35;color:#141412;padding:20px 36px 20px 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:400;color:var(--mut)}
.faq details.qa[open ] summary::after{content:"\2013"}
.faq summary:hover{color:var(--acc-deep)}
.faq .qa-a{padding:0 36px 22px 0}
.faq .qa-a p{margin:0}
/* glossary dictionary entries */
.pg-glossary main h3{font-size:1.38rem;margin:2.1rem 0 .3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.pg-glossary main h2 + h3{border-top:none;padding-top:0;margin-top:1.2rem}
code{background:var(--acc-soft);padding:1px 6px;font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
/* newsletter band (theirs): light grey, centred */
.newsband{background:var(--band);text-align:center;margin-top:76px;padding:58px 22px 62px}
.newsband h2{font-family:var(--disp);font-weight:560;font-size:1.9rem;color:#141412;margin:0 0 10px;letter-spacing:0;text-transform:none}
/* Bodoni Moda's small optical sizes shear hairline apexes in Chromium; pin small display type to the text instance */
.brand,.brief h2,.sec-head h2,h3,.gcard .ttl,.prevnext .ttl,.faq summary,.newsband h2{font-optical-sizing:none}
.newsband p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--mut);max-width:36rem;margin:0 auto}
.newsband form{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.newsband input{font-family:var(--sans);font-size:15px;padding:12px 16px;border:1px solid #cfcfc9;background:#fff;color:var(--ink);width:min(320px,74vw)}
.newsband button{font-family:var(--sans);font-weight:600;font-size:15px;padding:12px 26px;border:none;background:var(--acc-deep);color:#fff;cursor:pointer}
.newsband button:hover{background:var(--acc)}
/* footer (theirs): white, three columns on hairlines */
footer.site{background:#fff;border-top:1px solid var(--line);color:#33322f;padding:54px 0 42px;font-size:14.5px;margin-top:0}
footer.site .fcols{display:grid;grid-template-columns:1.3fr .55fr 1.15fr;gap:22px 48px}
footer.site .brand{font-size:22px}
footer.site p{color:var(--mut);font-family:var(--sans);font-size:14px;line-height:1.65;margin:12px 0 0;max-width:22rem}
footer.site h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#141412;margin:4px 0 14px}
footer.site nav{display:flex;flex-direction:column;gap:9px}
footer.site nav a{color:#33322f;text-decoration:none;font-size:14.5px;font-weight:500}
footer.site nav a:hover{color:var(--acc-deep)}
footer.site .disclosure{font-size:12.5px;line-height:1.6;color:#84817a;margin:0;max-width:none}
footer.site .disclosure strong{color:#55534e}
footer.site .fine{border-top:1px solid var(--line);margin-top:38px;padding-top:20px;font-family:var(--sans);font-size:12.5px;color:var(--mut)}
@media (max-width:900px){
  .wrap{padding:0 24px}
  .wide{width:calc(100vw - 48px)}
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:52px 0 48px}
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .statband{grid-template-columns:1fr;padding:28px 24px}
  footer.site .fcols{grid-template-columns:1fr}
  header.site nav a{padding:6px 7px}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:2.6rem}
  .prevnext{flex-direction:column}
  .prevnext a{max-width:100%}
  .prevnext .next{margin-left:0;text-align:left}
}