/* =========================================================== Auron Advisory, design v2 Override layer for the existing insight article pages. Loads AFTER the page's own styles and restyles them in place. No markup changes, no content changes. =========================================================== */ :root{ --cream:#FAFAF7; --paper:#FFFFFF; --cream-mid:#F0EFE8; --ink:#1A1A18; --ink-mid:#4A4A45; --muted:#6A6A62; --gold:#7A5E1F; --rule:rgba(26,26,24,0.14); --rule-soft:rgba(26,26,24,0.08); --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; } body{background:var(--cream)!important;color:var(--ink)!important;font-family:var(--sans)!important} /* ---------- masthead and footer ---------- */ .site-header{background:var(--cream)!important;border-bottom:1px solid var(--rule)!important;box-shadow:none!important} .site-header a{font-family:var(--sans)!important} .site-header nav a{color:var(--ink-mid)!important;text-transform:none!important;letter-spacing:0!important;font-size:.9375rem!important} .site-header nav a:hover{color:var(--gold)!important} footer{background:var(--cream)!important;border-top:1px solid var(--rule-soft)!important;color:var(--muted)!important} /* ---------- article shell ---------- */ article{max-width:76rem!important;margin:0 auto!important;background:transparent!important; padding-left:max(20px,env(safe-area-inset-left,0px))!important; padding-right:max(20px,env(safe-area-inset-right,0px))!important; padding-block:clamp(2rem,5vw,4rem)!important} article .eyebrow{font-family:var(--sans)!important;font-size:.8125rem!important;letter-spacing:0!important; text-transform:none!important;color:var(--muted)!important;border-left:1px solid var(--rule)!important; padding-left:.9rem!important} article h1{font-family:var(--serif)!important;font-weight:300!important; font-size:clamp(1.9rem,3.4vw,3rem)!important;line-height:1.08!important;letter-spacing:.005em!important; color:var(--ink)!important;max-width:none!important;margin:1.2rem 0 0!important;text-wrap:pretty!important} article h1 em{font-style:italic!important;color:var(--gold)!important} article .standfirst,article .lede{font-family:var(--serif)!important; font-size:clamp(1.4rem,2.4vw,2rem)!important;line-height:1.25!important; color:var(--ink-mid)!important;margin-top:1.2rem!important;max-width:none!important} article .article-hero{background:var(--paper)!important;border:1px solid var(--rule-soft)!important; border-radius:0!important;margin:2.5rem 0!important;overflow:hidden!important} article .byline{font-size:.8125rem!important;color:var(--muted)!important;background:transparent!important; border-top:1px solid var(--rule-soft)!important;border-bottom:1px solid var(--rule-soft)!important; padding-block:1rem!important;margin-top:2rem!important} article .byline-mark{border-color:var(--gold)!important;color:var(--gold)!important} /* ---------- controls ---------- */ article .controls .toggle,article .export-btn{font-family:var(--sans)!important;font-size:.75rem!important; font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important; background:var(--paper)!important;color:var(--gold)!important;border:1px solid rgba(122,94,31,.45)!important; border-radius:0!important;padding:.65rem 1.1rem!important;transition:background-color .16s ease,color .16s ease} /* The toggle is a bare row now: never paint the wrapper, only the segments. */ article .controls .toggle:hover{background:transparent!important;color:inherit!important;border-color:transparent!important} article .view-hint{font-size:.8125rem!important;color:var(--muted)!important} /* ---------- sections ---------- */ article h2{font-family:var(--serif)!important;font-weight:300!important; font-size:clamp(1.9rem,3.4vw,2.8rem)!important;line-height:1.1!important;color:var(--ink)!important; margin:3rem 0 1rem!important;border-top:1px solid var(--rule)!important;padding-top:1.4rem!important;text-wrap:pretty!important} /* Section number: inline before the heading, on the same baseline, upright, and sized as a fixed fraction of the heading so the two read as one unit. The page stylesheets set it italic, which gives every digit a different left bearing (3 to 14 per 100px) and makes consistent alignment impossible. */ article h2 .num{display:inline!important;color:var(--gold)!important;font-family:var(--sans)!important; font-style:normal!important;font-size:.4em!important;font-weight:600!important; letter-spacing:.12em!important;margin:0 .5em 0 0!important;text-indent:0!important; vertical-align:baseline!important} article h4{font-family:var(--sans)!important;font-size:.9375rem!important;font-weight:600!important;color:var(--ink)!important} article p{font-size:1.0625rem!important;line-height:1.65!important;color:var(--ink-mid)!important;max-width:none!important} article strong,article b{color:var(--ink)!important;font-weight:600!important} article a{color:var(--ink)!important;text-decoration:underline!important; text-decoration-color:rgba(122,94,31,.4)!important;text-decoration-thickness:1px!important;text-underline-offset:.2em!important} article a:hover{color:var(--gold)!important;text-decoration-color:var(--gold)!important} article blockquote{border-left:2px solid var(--gold)!important;background:transparent!important; padding:.2rem 0 .2rem 1.4rem!important;margin:2.5rem 0!important;font-family:var(--serif)!important; font-size:1.5rem!important;line-height:1.3!important;color:var(--ink)!important;max-width:54ch!important;font-style:normal!important} /* ---------- exhibits and tables ---------- */ article .exhibit{background:var(--paper)!important;border:1px solid var(--rule)!important;border-radius:0!important; padding:clamp(1.4rem,3vw,2.2rem)!important;margin:2.5rem 0!important;box-shadow:none!important} article .ex-label{font-family:var(--sans)!important;font-size:.75rem!important;color:var(--gold)!important; letter-spacing:.12em!important;text-transform:uppercase!important} article .ex-title{font-family:var(--serif)!important;font-size:1.5rem!important;line-height:1.2!important; color:var(--ink)!important;margin-top:.3rem!important} article .ex-src,article .srcnote{font-size:.8125rem!important;color:var(--muted)!important} article .bar{background:var(--gold)!important;border-radius:0!important} article .bar-lab{font-size:.875rem!important;color:var(--ink-mid)!important} article .table-wrap{overflow-x:auto!important} article table{border-collapse:collapse!important;width:100%!important;font-size:.9375rem!important} article th{font-family:var(--sans)!important;font-size:.75rem!important;letter-spacing:.08em!important; text-transform:uppercase!important;color:var(--muted)!important;text-align:left!important; border-bottom:1px solid var(--gold)!important;padding:.7rem .6rem!important;background:transparent!important} article td{border-bottom:1px solid var(--rule-soft)!important;padding:.7rem .6rem!important;color:var(--ink-mid)!important} article tbody tr:hover td{background:var(--cream-mid)!important} /* ---------- navigation within the article ---------- */ article .toc,article .toc-side-inner{background:transparent!important;border:0!important; border-left:1px solid var(--rule)!important;padding-left:1.1rem!important;border-radius:0!important} article .toc a,article .toc-side a{color:var(--muted)!important;text-decoration:none!important;font-size:.875rem!important} article .toc a:hover,article .toc-side a:hover{color:var(--gold)!important} article .toc-back{font-family:var(--sans)!important;font-size:.75rem!important;letter-spacing:.12em!important; text-transform:uppercase!important;color:var(--muted)!important;text-decoration:none!important} article .toc-back:hover{color:var(--gold)!important} article .summary-points{background:var(--cream-mid)!important;border:0!important; border-left:2px solid var(--gold)!important;border-radius:0!important;padding:1.4rem 1.6rem!important} /* ---------- closing ---------- */ article .closing-q{font-family:var(--serif)!important;font-size:1.6rem!important;line-height:1.3!important; color:var(--ink)!important;border-top:1px solid var(--gold)!important;padding-top:1.4rem!important;margin-top:3rem!important} article .mission{font-size:.9375rem!important;color:var(--muted)!important;max-width:62ch!important} article .sources{font-size:.875rem!important;color:var(--muted)!important} article .article-cta,article .article-cta-inner{background:var(--paper)!important; border:1px solid var(--rule)!important;border-radius:0!important;color:var(--ink)!important} article .acta-lead{font-family:var(--serif)!important;font-size:1.6rem!important;color:var(--ink)!important} article .acta-body{color:var(--ink-mid)!important} article .acta-btn{background:var(--paper)!important;color:var(--gold)!important;border:1px solid var(--gold)!important; border-radius:0!important;font-family:var(--sans)!important;font-size:.8125rem!important;font-weight:600!important; letter-spacing:.12em!important;text-transform:uppercase!important;padding:1rem 1.7rem!important;text-decoration:none!important} article .acta-btn:hover{background:var(--gold)!important;color:var(--cream)!important} .read-progress{background:var(--gold)!important;height:2px!important} /* ---------- consent bar ---------- */ .consent{background:var(--paper)!important;border-top:1px solid var(--rule)!important;color:var(--ink-mid)!important} .consent button{font-family:var(--sans)!important;font-size:.75rem!important;font-weight:600!important; letter-spacing:.12em!important;text-transform:uppercase!important;border-radius:0!important} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* =========================================================== Shared masthead, footer and consent bar Needed by the article pages once their header markup is swapped for the v2 one. Harmless on pages that carry their own copy of these rules. =========================================================== */ .masthead .mark,.foot .mark{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none} .masthead .logo-mark,.foot .logo-mark{width:38px;height:38px;display:block;flex:none} .masthead .logo-divider,.foot .logo-divider{width:1px;height:26px;background:var(--rule);display:block;flex:none} .masthead .logo-words,.foot .logo-words{display:flex!important;flex-direction:row!important;align-items:baseline;gap:.5rem} /* Article pages carry an older header rule that stacked the wordmark and hid it below 620px. The v2 masthead keeps it on one line, at every width. */ .masthead .logo-divider,.foot .logo-divider{display:block!important} .masthead .m-a,.foot .m-a{font-family:var(--serif);font-size:1.4rem;letter-spacing:.2em;line-height:1;color:var(--ink)} .masthead .m-b,.foot .m-b{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1;color:var(--gold)} .foot .mark .masthead .logo-mark,.foot .logo-mark{width:30px;height:30px} .foot .mark .m-a{font-size:1.15rem} .foot .mark .m-b{font-size:.9rem} .wrap{ max-width:86rem; margin:0 auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px)); } /* ---------- masthead ---------- */ body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--cream)} .masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--cream);border-bottom:1px solid var(--rule)} .masthead .wrap{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.75rem);padding-block:1.1rem} .nav-main{display:flex;align-items:center;gap:clamp(.9rem,2vw,2.1rem);flex:1;min-width:0;font-size:.9375rem} .navitem{position:relative;display:flex;align-items:center;gap:.2rem} .navitem > a{color:var(--ink-mid);text-decoration:none;white-space:nowrap;padding-bottom:4px;border-bottom:1px solid transparent} .navitem > a:hover{color:var(--ink)} .navitem > a.current,.navitem > a.on{color:var(--gold);border-bottom-color:var(--gold)} .disc{appearance:none;background:transparent;border:0;padding:.35rem .25rem;margin:0;cursor:pointer;color:var(--muted);display:flex;align-items:center} .disc:hover{color:var(--ink)} .disc[aria-expanded="true"]{color:var(--gold)} .chev{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s ease} .disc[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)} .subpanel{ position:absolute;top:calc(100% + 1.15rem);left:-1.1rem;z-index:30; display:flex;flex-wrap:wrap;width:max-content;max-width:calc(100vw - 2rem); background:var(--paper);border:1px solid var(--rule-soft);border-top:2px solid var(--gold); box-shadow:0 14px 34px rgba(26,26,24,.09);padding:0; animation:drop .16s ease-out both; } @keyframes drop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} .subpanel[hidden]{display:none} .subpanel a{display:grid;gap:.2rem;align-content:start;min-width:10.5rem;padding:1.05rem 1.5rem 1.1rem; text-decoration:none;border-bottom:2px solid transparent;transition:background-color .16s ease,border-color .16s ease} .subpanel a + a{border-left:1px solid var(--rule-soft)} .subpanel a .n{font-size:.9375rem;color:var(--ink);white-space:nowrap} .subpanel a .d{font-size:.8125rem;color:var(--muted);white-space:nowrap} .subpanel a:hover{background:var(--cream-mid)} .subpanel a:hover .n{color:var(--gold)} .subpanel a.on{border-bottom-color:var(--gold);background:var(--cream)} .subpanel a.on .n{color:var(--gold)} @media (max-width:640px){ .subpanel{display:grid;grid-template-columns:1fr 1fr;width:calc(100vw - 2rem)} .subpanel a{min-width:0;padding:.9rem 1rem;border-top:1px solid var(--rule-soft)} .subpanel a + a{border-left:0} .subpanel a:nth-child(even){border-left:1px solid var(--rule-soft)} .subpanel a:nth-child(-n+2){border-top:0} .subpanel a .n,.subpanel a .d{white-space:normal} } .btn-line{color:var(--gold);border:1px solid rgba(122,94,31,.45);padding:.7rem 1.15rem;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap} .btn-line:hover{background:var(--gold);border-color:var(--gold);color:var(--cream)} section[id]{scroll-margin-top:5.5rem} .foot{border-top:1px solid var(--rule-soft)} .foot .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding-block:2rem} .foot nav{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.9375rem} .foot a{color:var(--ink-mid);text-decoration:none} .foot a:hover{color:var(--gold)} .foot small{font-size:.8125rem;color:var(--muted)} .consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper); border-top:1px solid var(--rule); padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px)); padding-block:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))} .consent-in{max-width:86rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem} .consent p{font-size:.875rem;color:var(--ink-mid);margin:0;flex:1;min-width:16rem;max-width:68ch} .consent .acts{display:flex;gap:.75rem} .consent button{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;padding:.65rem 1.1rem;cursor:pointer;background:var(--paper)} .consent .yes{color:var(--gold);border:1px solid rgba(122,94,31,.45)} .consent .yes:hover{background:var(--gold);border-color:var(--gold);color:var(--cream)} .consent .no{color:var(--ink);border:1px solid var(--rule)} .consent .no:hover{border-color:var(--ink)} .consent[hidden]{display:none} .masthead{font-family:var(--sans)} .masthead *,.foot *,.consent *{box-sizing:border-box} /* ---------- side contents panel: keep it inside the article on wide screens ---------- */ @media (min-width:1180px){ /* Contents panel sits on the left, with the article to the right of it. */ article.has-toc-side{padding-left:280px!important;padding-right:20px!important} article.has-toc-side .toc-side{right:auto!important;left:20px!important} article .toc-side-inner{border-left:0!important;border-right:1px solid var(--rule)!important; padding:.2rem 1rem .2rem 0!important} } /* ---------- masthead on phones, same as the main pages ---------- */ @media (max-width:860px){ /* Compact two row header on phones: wordmark and CTA, then the menu. */ .masthead .wrap{flex-wrap:wrap;row-gap:.4rem;gap:.5rem;padding-block:.6rem} .masthead .mark{order:1;gap:.45rem} .masthead .logo-mark{width:27px;height:27px} .masthead .logo-divider{height:17px} .masthead .m-a{font-size:.95rem;letter-spacing:.11em} .masthead .m-b{font-size:.8rem} .masthead .btn-line{order:2;margin-left:auto;font-size:.5938rem;letter-spacing:.05em;padding:.5rem .62rem} .masthead .nav-main{order:3;flex-basis:100%;flex:none;flex-wrap:nowrap;gap:1.45rem;font-size:.875rem} } @media (max-width:370px){ .masthead .m-a{font-size:.9rem;letter-spacing:.09em} .masthead .m-b{font-size:.75rem} .masthead .btn-line{font-size:.5625rem;padding:.45rem .5rem} .masthead .nav-main{gap:1.05rem;font-size:.8125rem} } @media (max-width:340px){ .masthead .m-a{font-size:.85rem;letter-spacing:.07em} .masthead .m-b{font-size:.7rem} .masthead .btn-line{font-size:.5313rem;padding:.4rem .45rem} } /* ---------- some articles style every