/* The Fractional Authority - shared stylesheet for sub-pages (about, services, contact, insights).
   Tokens are kept in sync with index.html :root. The home page keeps its own inline CSS. */
:root{
  --ink:#14130d; --ink-2:#2b281f; --ink-soft:#56514a; --muted:#7a7468;
  --paper:#f7f4ec; --paper-2:#f0ebe0; --paper-3:#eae3d6;
  --card:#fbf9f3; --line:#e4ddcd; --line-2:#d2c9b6;
  --accent:#a8381a; --accent-2:#bd4f23; --accent-soft:#f3e7df; --good:#3f7a3f;
  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --space-md:1rem; --space-lg:1.5rem; --space-xl:2.5rem; --space-2xl:4rem; --space-3xl:6rem;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-short:220ms;
  --max:1180px; --measure:64ch; --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.022em;overflow-wrap:anywhere}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent);font-weight:600}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none;font-size:14px}
.skip:focus{left:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
@media(max-width:560px){.wrap{padding:0 20px}}

/* nav */
nav{position:sticky;top:0;z-index:200;background:rgba(247,244,236,.82);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:560;font-size:19px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;color:var(--ink)}
.brand-mark svg{display:block;width:30px;height:30px}
.brand .dot{color:var(--accent);font-style:normal}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{text-decoration:none;font-size:14.5px;color:var(--ink-soft);transition:color var(--dur-short) var(--ease-out)}
.navlinks a:hover,.navlinks a.active{color:var(--accent)}
.nav-cta{font-size:14px;font-weight:500;text-decoration:none;padding:9px 18px;border-radius:999px;background:var(--ink);color:var(--paper)!important;transition:background var(--dur-short) var(--ease-out);white-space:nowrap}
.nav-cta:hover{background:var(--accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;padding:7px 9px;cursor:pointer;color:var(--ink);align-items:center}
.nav-toggle:hover{border-color:var(--ink)}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:14px 28px;color:var(--ink);text-decoration:none;font-size:16px;border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:none;color:var(--accent);font-weight:600}
@media(max-width:860px){.navlinks{display:none}.nav-toggle{display:inline-flex}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:500;font-size:15px;padding:14px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:all var(--dur-short) var(--ease-out)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.arr{transition:transform var(--dur-short) var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}

/* page hero + sections */
.page-hero{padding:clamp(56px,8vw,96px) 0 clamp(34px,5vw,56px);border-bottom:1px solid var(--line)}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:20px}
.page-hero h1{font-size:clamp(36px,6.4vw,62px);letter-spacing:-.03em;max-width:18ch}
.page-hero .lede{font-size:clamp(17px,2.2vw,21px);color:var(--ink-soft);margin-top:22px;max-width:60ch;line-height:1.55}
section.band{padding:clamp(48px,7vw,84px) 0}
section.band + section.band{border-top:1px solid var(--line)}
.band.alt{background:var(--paper-2)}
.section-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.section-label::before{content:"";width:22px;height:1.5px;background:var(--accent);display:inline-block}
h2.h{font-size:clamp(26px,4vw,40px);letter-spacing:-.025em;max-width:20ch}
.sub{font-size:17px;color:var(--ink-soft);margin-top:16px;max-width:var(--measure)}

/* prose (about, articles) */
.prose{max-width:var(--measure);font-size:17.5px;color:var(--ink-soft);line-height:1.7}
.prose p{margin-bottom:18px}
.prose h2{font-size:27px;color:var(--ink);margin:40px 0 14px;letter-spacing:-.02em}
.prose h3{font-size:20px;color:var(--ink);margin:30px 0 10px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{margin:0 0 18px 22px}
.prose li{margin-bottom:9px}
.prose blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:24px 0;font-size:20px;color:var(--ink);font-style:italic}

/* cards / grid */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card-cover{width:100%;height:auto;aspect-ratio:1200/480;object-fit:cover;border-radius:12px;margin:-4px 0 20px;display:block}
.card h3{font-size:20px;color:var(--ink);margin-bottom:10px}
.card p{font-size:15.5px;color:var(--ink-soft)}
.card .num{font-family:var(--font-display);font-size:14px;color:var(--accent);font-weight:600;margin-bottom:12px;letter-spacing:.04em}

/* CTA band */
.cta-band{background:var(--ink);color:var(--paper);text-align:center;padding:clamp(54px,8vw,90px) 0}
.cta-band h2{color:var(--paper);font-size:clamp(28px,4.5vw,44px);letter-spacing:-.025em;max-width:18ch;margin:0 auto}
.cta-band p{color:#cfc8bb;max-width:54ch;margin:18px auto 30px;font-size:18px}
.cta-band .btn-primary{background:var(--accent);color:#fff}
.cta-band .btn-primary:hover{background:var(--accent-2)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Article visual kit (skimmable, Big-4 editorial; NO left-stripe cards) */
.art-cover{margin:6px 0 4px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(22,21,15,.4)}
.art-cover img{width:100%;height:auto;display:block}
.art-lead{font-size:20px;line-height:1.55;color:var(--ink);font-weight:500;margin:30px 0 6px;max-width:var(--measure)}
.art-takeaways{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:24px 28px;margin:30px 0;max-width:var(--measure)}
.art-takeaways h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px}
.art-takeaways ul{list-style:none;display:grid;gap:12px;margin:0}
.art-takeaways li{position:relative;padding-left:28px;font-size:16px;color:var(--ink);line-height:1.5}
.art-takeaways li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:4px;background:var(--accent)}
.pull-stat{display:flex;align-items:center;gap:20px;margin:32px 0;padding:24px 28px;background:var(--ink);color:var(--paper);border-radius:16px;max-width:var(--measure)}
.pull-stat .n{font-family:var(--font-display);font-weight:700;font-size:clamp(46px,7vw,76px);color:var(--accent-2);line-height:.92;letter-spacing:-.02em}
.pull-stat .t{font-size:16px;color:#cfc8bb;line-height:1.45}
.art-callout{background:var(--accent-soft);border:1px solid #e7c4b6;border-radius:16px;padding:22px 26px;margin:30px 0;font-size:19px;color:var(--ink);line-height:1.5;max-width:var(--measure);font-weight:500}
.art-callout b{color:var(--accent);font-weight:600}
/* simple horizontal bar comparison (data-viz, our own SVG-free CSS) */
.art-bars{margin:30px 0;max-width:var(--measure);display:grid;gap:14px}
.art-bar{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px}
.art-bar .lbl{font-size:13.5px;color:var(--ink-soft);text-align:right}
.art-bar .track{height:30px;border-radius:8px;background:var(--paper-2);position:relative;overflow:hidden}
.art-bar .fill{height:100%;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:13px;font-weight:600;color:#fff}
.art-bar .fill.lo{background:var(--line-2);color:var(--ink)}
.art-bar .fill.hi{background:var(--accent)}

/* Article pages: one centered reading column so the cover + title + text all share a width
   and line up (progressive enhancement via :has(); without it the page still works). */
main:has(.art-cover) .wrap{max-width:900px}
/* the title + cover use the full (wider) column */
main:has(.art-cover) .page-hero h1,
main:has(.art-cover) .page-hero .lede,
main:has(.art-cover) .art-cover{max-width:100%}
/* the reading body sits in a narrower column, centered under the cover */
main:has(.art-cover) .art-lead,
main:has(.art-cover) .art-takeaways,
main:has(.art-cover) .art-callout,
main:has(.art-cover) .pull-stat,
main:has(.art-cover) .prose{max-width:680px;margin-left:auto;margin-right:auto}

/* footer */
footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--paper-2)}
footer .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:40px}
@media(max-width:720px){footer .fcols{grid-template-columns:1fr 1fr;gap:26px}}
.fbrand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:560;font-size:17px;margin-bottom:14px}
.fbrand .brand-mark svg{display:block;width:28px;height:28px}
.fbrand .dot{color:var(--accent);font-style:normal}
footer .ftag{font-size:14.5px;color:var(--ink-soft);max-width:34ch;line-height:1.55}
footer .fcol h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px}
footer .fcol a{display:block;font-size:14.5px;color:var(--ink-soft);text-decoration:none;margin-bottom:10px}
footer .fcol a:hover{color:var(--accent)}
footer .fbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
footer .fbar a{color:var(--ink-soft);text-decoration:none}
footer .fbar a:hover{color:var(--accent)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   About-page exhibits (Big-4 grammar: hairlines, ONE accent,
   tabular numerals, hand-rolled SVG, no fills/side-stripes).
   ============================================================ */
.about-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:860px){.about-hero{grid-template-columns:1fr;gap:30px}}
.about-hero .page-hero h1,.about-hero h1{max-width:15ch}

.exhibit-fig{margin:0}
.exhibit-fig figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px;text-align:center}

/* gap dumbbell (the thesis the firm exists on) */
.dumbbell{width:100%;height:auto;max-width:470px;margin:0 auto;display:block}
.dumbbell .base{stroke:var(--line-2);stroke-width:2}
.dumbbell .gap{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.dumbbell .gaptick{stroke:var(--accent);stroke-width:1.5}
.dumbbell .pt-exp{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.dumbbell .pt-vis{fill:var(--accent)}
.dumbbell .dlbl{font-family:var(--font-body);font-size:12px;fill:var(--ink-soft)}
.dumbbell .gaptag{font-family:var(--font-body);font-size:11px;fill:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* funnel motif (profile as a funnel) */
.funnel{width:100%;height:auto;max-width:215px;margin:0 auto;display:block}
.funnel .band{fill:none;stroke:var(--line-2);stroke-width:1.5}
.funnel .band.last{fill:var(--accent);stroke:var(--accent)}
.funnel .flbl{font-family:var(--font-body);font-size:11.5px;fill:var(--ink-soft)}
.funnel .flbl.on{fill:#fff;font-weight:600}

/* before/after headline exhibit (show the product, do not just describe it) */
.ba-headline{margin-top:22px;border-top:1px solid var(--line)}
.ba-headline .ba-row{display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.ba-headline .ba-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ba-headline .before .ba-t{color:var(--muted);font-size:15.5px}
.ba-headline .after .ba-t{color:var(--ink);font-size:16.5px;font-weight:500;line-height:1.45}
.ba-headline .after .ba-t b{color:var(--accent);font-weight:600}

/* credibility strip (judgment evidenced, not asserted) */
.cred-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid var(--line)}
.cred-strip .c{padding:20px 22px 0 0;border-right:1px solid var(--line)}
.cred-strip .c:last-child{border-right:none;padding-right:0}
.cred-strip .cv{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.cred-strip .cl{font-size:12px;color:var(--ink-soft);margin-top:5px;line-height:1.4}
@media(max-width:680px){.cred-strip{grid-template-columns:1fr;border-top:none}.cred-strip .c{border-right:none;border-top:1px solid var(--line);padding:18px 0 0}}

/* beliefs ledger (replaces the 2x2 wall of near-identical cards) */
.p-ledger{margin-top:34px;border-top:1px solid var(--line)}
.p-ledger .row{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.p-ledger .pn{font-family:var(--font-display);font-weight:600;font-size:28px;color:var(--ink-soft);line-height:1;font-variant-numeric:tabular-nums}
.p-ledger .row.mark .pn{color:var(--accent)}
.p-ledger h3{font-size:19px;color:var(--ink);margin-bottom:6px}
.p-ledger p{font-size:16px;color:var(--ink-soft);max-width:var(--measure)}
@media(max-width:560px){.p-ledger .row{gap:18px}.p-ledger .pn{font-size:22px}}