/* Driftwood shared design system — self-hosted institutional type. THREE STRICT ROLES: • Satoshi (--sans): headings (H1–H3), body prose, and all UI (nav, tables, buttons, forms) — modern authority + maximum legibility for financial data and long-form insights. • Erode (--serif): editorial callouts ONLY — ledes, value statements, philosophy pull-quotes, introductory paragraphs — where the serif evokes emotional trust and prestige. Linked LAST in each to unify tokens across all pages. */ @font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/satoshi-400.woff2") format("woff2")} @font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/satoshi-500.woff2") format("woff2")} @font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/satoshi-700.woff2") format("woff2")} /* Erode — editorial callouts / ledes / pull-quotes only, never headings or dense UI. */ @font-face{font-family:'Erode';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/erode-400.woff2") format("woff2")} @font-face{font-family:'Erode';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/erode-500.woff2") format("woff2")} @font-face{font-family:'Erode';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/erode-600.woff2") format("woff2")} @font-face{font-family:'Erode';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/erode-700.woff2") format("woff2")} :root{ /* Rebrand (July 2026): limestone paper, slate-navy ink, editorial blue for identity/wayfinding. This shared sheet is the source of truth — pages that link it LAST inherit the rebrand here. */ --bg:#f1efe9; --soft:#f7f5f0; --line:#d8d3c6; --line2:#e9e5db; --frame-line:#c3bcab; --ghost-line:#b8b2a4; --ink:#1e2833; --body:#3d4650; --dim:#5c6470; --muted:#6b6e6a; --navy:#1a2330; --pos:#2f6f5b; --neg:#9b4439; --slate:#3d4650; --rule:#1e2833; --accent:#15806a; --bench:#b8bcc2; --teal:#15463a; --teal2:#15806a; /* Editorial blue takes every identity/wayfinding role; --brass/--gold are retired aliases of it. */ --accent-strike:#2c5878; --accent-strike-soft:#a9c2d6; --brass:#2c5878; --gold:#a9c2d6; /* ── Identity system — the Streams confluence lockup. One place for every lockup metric so the nav/chrome brand stays consistent site-wide; see brand.html for the full standard. ───────── */ --logo-mark:17px; /* nav mark height */ --logo-gap:14px; /* space around mark · divider · wordmark */ --logo-rule:20px; /* divider height */ --logo-rule-color:var(--line);/* architectural hairline */ --logo-word:14px; /* wordmark size in the nav */ --logo-word-spacing:.15em; /* wordmark tracking */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; /* ── Institutional surface system — single source of truth, frozen 2026-07 ────────────────── Surfaces behave like paper, not floating software. One token squares every card, plate, table, callout, and panel site-wide; change it here and the whole site follows. Pills (--rfull) and circles (50%) are a different component class and stay round. */ --surface-radius:0px; --surface-border:1px solid var(--line); --surface-shadow:none; --transition-standard:180ms ease; --content-max-width:720px; /* the content column */ --reading-measure:62ch; /* prose line length */ /* ── Canonical page opening (Publishing Spec §6) — one vertical rhythm so no page reveals which template made it. Applied by the shared `.doc > .eyebrow:first-child` rule below. */ --open-pad:44px; /* nav → opening eyebrow, every page */ --eyebrow-gap:15px; /* eyebrow → title */ --title-gap:16px; /* title → deck */ --deck-gap:26px; /* deck → hairline */ --rule-gap:30px; /* hairline → body */ /* Legacy radius scale retained as aliases so older usages square automatically. */ --r1:var(--surface-radius); --r2:var(--surface-radius); --r3:var(--surface-radius); --r4:var(--surface-radius); --rfull:999px; --sh1:0 1px 3px rgba(20,20,26,.06); --sh2:0 8px 30px rgba(20,20,26,.12); --sh-hover:0 10px 26px -12px rgba(20,18,12,.42); --t-fast:.12s ease; --t-mid:.2s ease; /* Organic easing for tactile hover/lift micro-interactions. */ --ease-out:cubic-bezier(.2,.8,.2,1); /* Satoshi (--sans) is the workhorse: headings, body prose, and all UI. Erode (--serif) is reserved for editorial callouts — ledes, value statements, pull-quotes — where a serif adds prestige. */ --sans:'Satoshi','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* headings + body + UI */ --serif:'Erode','Georgia','Times New Roman',serif; /* editorial callouts / ledes / pull-quotes only */ --fz-xs:11px; --fz-sm:12.5px; --fz-md:15px; --fz-lg:18px; --fz-hero:30px; } body{ font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.004em; } /* Satoshi carries all heading levels (sentence case, tight tracking) + their print equivalents. */ h1,h2,h3,.ph-title,.es-h{ font-family:var(--sans); letter-spacing:-.02em; } h1{ font-weight:700; } h2,.ph-title,.es-h{ font-weight:700; } h3{ font-weight:500; } /* Medium for a sleeker subhead */ /* Dense UI stays on Inter (var(--sans)): nav, tables, form controls, code, and any tabular-number atoms — a serif at small sizes / in aligned columns reads poorly and breaks numeric alignment. */ .num,.v,.big,output,.amt,.recovered{ font-family:var(--sans); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } table,th,td,thead,tbody,tfoot,.dwnav,.dwnav-links,input,select,textarea,button,code,.mono{ font-family:var(--sans); } a{ color:var(--accent); } ::selection{ background:rgba(21,128,106,.16); } /* ── Canonical page opening (Publishing Spec §3–6) ─────────────────────────────────────────── One definition for the whole site (previously every page set its own opening pad, eyebrow weight/tracking, and eyebrow→title gap inline — the "which template made this?" tell). Scoped to the OPENING eyebrow only (`.doc`'s first child), so it never touches section eyebrows deep in a document, the Record/Reference mastheads (their eyebrow is nested, not a first child), or the §9 exceptions (homepage hero, Research `article.article`, tools without a `.doc` opening). Wins over each page's inline `.eyebrow{}` by specificity (0,3,0 vs 0,1,0), so no page edit is needed. The essays' `.kicker` shares the opening pad only — it keeps its own family/date look. */ .doc > .eyebrow:first-child, .doc > .kicker:first-child{ margin-top:var(--open-pad); } .doc > .eyebrow:first-child{ margin-bottom:var(--eyebrow-gap); font-family:var(--sans); font-size:11px; font-weight:700; line-height:1.2; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-strike); } .doc > .eyebrow:first-child + h1, .doc > .kicker:first-child + h1{ margin-top:0; margin-bottom:var(--title-gap); } /* ── Global keyboard-focus indicator ──────────────────────────────────────────────────────── One definition for the whole site (previously only taxlab.html had a focus ring, leaving the hub and every exhibit on the near-invisible UA default over cream). Token-driven; pages that need a contrasting ring (e.g. SVG map tiles on a dark fill) can still override locally. */ :focus-visible{ outline:2px solid var(--accent,#15806a); outline-offset:2px; } a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible, input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,[role="tab"]:focus-visible, [role="button"]:focus-visible{ outline:2px solid var(--accent,#15806a); outline-offset:2px; } /* Keyboard users get the ring; mouse/touch clicks do NOT (no lingering outline after a tap). */ a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible), select:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible), [role="tab"]:focus:not(:focus-visible){ outline:none; } /* ── Shared persistent nav (rendered on every page) ───────────────────────────────────────── The brand wordmark links home and the section links give lateral wayfinding, so no page is a dead end. Token-driven so each page's local palette cascades through. */ .dwnav{ display:flex; justify-content:space-between; align-items:center; gap:10px 24px; flex-wrap:wrap; padding:14px 24px; border-bottom:1px solid var(--line,#e3dccd); background:var(--soft,#fbf9f4); font-family:var(--sans); } /* The Nameplate (Secondary lockup): the Streams confluence mark, an architectural hairline, and DRIFTWOOD WEALTH in tracked caps — single-ink, never two-tone. Colour belongs to the page, so the wordmark reads identically everywhere. Metrics come from the --logo-* tokens. */ .dwnav .brand{ display:inline-flex; align-items:center; gap:var(--logo-gap,14px); text-decoration:none; white-space:nowrap; } .dwnav .brand-mark{ height:var(--logo-mark,17px); width:auto; flex:none; color:var(--accent-strike,#2c5878); overflow:visible; } .dwnav .brand-rule{ width:1px; height:var(--logo-rule,20px); flex:none; background:var(--logo-rule-color,#d8d3c6); } .dwnav .brand-word{ font-size:var(--logo-word,14px); font-weight:500; color:var(--ink,#1d242d); letter-spacing:var(--logo-word-spacing,.15em); text-transform:uppercase; } .dwnav .brand:hover .brand-word{ color:var(--accent-strike,#2c5878); } /* Mobile: drop the divider, tighten to the Micro lockup. */ @media (max-width:620px){ .dwnav .brand{ gap:10px; } .dwnav .brand-rule{ display:none; } } /* A running index of tracked-caps links, split into two labelled families: Understand (who we are and how we think) and Discover (the interactive tools). The current page carries a 2px editorial-blue rule. */ .dwnav-links{ display:flex; gap:10px 28px; align-items:center; flex-wrap:wrap; } .dwnav-group{ display:inline-flex; align-items:center; gap:10px 22px; flex-wrap:wrap; } .dwnav-label{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted,#8a8577); white-space:nowrap; } .dwnav-group + .dwnav-group{ margin-left:4px; padding-left:26px; border-left:1px solid var(--line,#e3dccd); } .dwnav-links a{ font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim,#5f5f68); text-decoration:none; padding:6px 0; white-space:nowrap; border-bottom:2px solid transparent; } .dwnav-links a:hover{ color:var(--ink,#1d242d); } .dwnav-links a[aria-current="page"]{ color:var(--ink,#1d242d); border-bottom-color:var(--accent-strike,#2c5878); } /* One persistent conversation affordance in the chrome — an understated editorial action (no filled button), so any page a shared link lands on offers a way to reach the firm. Routes to the single conversation moment on the front door rather than repeating a contact value site-wide. */ .dwnav-cta{ margin-left:auto; align-self:center; white-space:nowrap; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strike,#2c5878); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; } .dwnav-cta:hover{ border-bottom-color:var(--accent-strike,#2c5878); color:var(--ink,#1e2833); } @media (max-width:620px){ .dwnav{ padding:11px 16px; gap:8px 18px; } .dwnav-links{ gap:8px 18px; } .dwnav-cta{ margin-left:0; } .dwnav-group{ gap:8px 16px; } .dwnav-group + .dwnav-group{ margin-left:0; padding-left:0; border-left:none; } .dwnav-label{ font-size:8.5px; opacity:.8; } } /* Mobile disclosure: the full running index stacks to seven rows on a phone and buries the hero and its CTA below the fold. Collapse it behind a single control so the first screen leads with content, not chrome. The toggle is injected by dw-context.js (shared across every page, so no per-template markup), and the collapse is scoped to .dwnav--menu — a class that script adds only once the control is wired — so with JavaScript off the full index stays visible rather than hiding behind a dead button. Desktop is untouched: the toggle is display:none above the breakpoint. */ .dwnav-toggle{ display:none; } @media (max-width:620px){ .dwnav--menu .dwnav-toggle{ display:inline-flex; align-items:center; gap:9px; margin-left:auto; background:none; border:0; cursor:pointer; padding:6px 0; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strike,#2c5878); } .dwnav--menu .dwnav-toggle:focus-visible{ outline:2px solid var(--accent-strike,#2c5878); outline-offset:3px; } .dwnav--menu .dwnav-toggle .bars{ position:relative; box-sizing:border-box; width:18px; height:2px; background:currentColor; display:block; } .dwnav--menu .dwnav-toggle .bars::before, .dwnav--menu .dwnav-toggle .bars::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; transition:transform var(--t-fast,.15s) ease; } .dwnav--menu .dwnav-toggle .bars::before{ top:-6px; } .dwnav--menu .dwnav-toggle .bars::after{ top:6px; } /* Collapsed by default once enhanced; the disclosure opens an editorial table of contents. */ .dwnav--menu .dwnav-links, .dwnav--menu .dwnav-cta{ display:none; } .dwnav--menu.dwnav--open .dwnav-links{ display:flex; flex-direction:column; align-items:flex-start; flex-basis:100%; gap:0; padding-top:14px; } /* Each family reads as a titled column — label as quiet front-matter, links stacked one per line, a hairline between families. Rhythm carries the hierarchy, not weight. */ .dwnav--menu.dwnav--open .dwnav-group{ flex-direction:column; align-items:flex-start; gap:11px 0; width:100%; } .dwnav--menu.dwnav--open .dwnav-group + .dwnav-group{ margin-top:20px; padding-top:20px; border-top:1px solid var(--line,#e3dccd); } .dwnav--menu.dwnav--open .dwnav-label{ color:var(--muted,#8a8577); opacity:.7; margin-bottom:2px; } /* Set the conversation action apart, below its own rule, like a colophon. */ .dwnav--menu.dwnav--open .dwnav-cta{ display:inline-block; flex-basis:100%; width:100%; margin-top:20px; padding-top:20px; border-top:1px solid var(--line,#e3dccd); } /* Open: the middle bar clears and the outer two cross into an ✕. */ .dwnav--menu.dwnav--open .dwnav-toggle .bars{ background:transparent; } .dwnav--menu.dwnav--open .dwnav-toggle .bars::before{ top:0; transform:rotate(45deg); } .dwnav--menu.dwnav--open .dwnav-toggle .bars::after{ top:0; transform:rotate(-45deg); } } @media (prefers-reduced-motion:reduce){ .dwnav--menu .dwnav-toggle .bars::before, .dwnav--menu .dwnav-toggle .bars::after{ transition:none; } } /* ── Mobile / cross-device consistency ────────────────────────────────────────────────────── Stop iOS Safari from auto-inflating body text (so the type scale is identical in portrait, landscape, and on desktop), keep long tokens/links from forcing horizontal page overflow, and guard the viewport: html clips any stray horizontal overflow so the page can never scroll sideways on a phone (applied to html, not body, so position:sticky keeps working). 100dvh keeps the paper filling the screen under a mobile browser's collapsing URL bar. */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; } body{ overflow-wrap:break-word; max-width:100%; min-height:100dvh; } /* Horizontal-scroll wrapper for wide data tables on narrow screens (keeps cell padding instead of crushing columns to fit). It never forces the page wider than the viewport. `.table-wrapper` is an alias so either class works. CSS-only scroll shadows (the classic local/scroll background trick) fade in at whichever edge has more content, so a swipe affordance appears automatically — --wrap-bg is the page/table background the "cover" layers paint (defaults to the page --bg). */ .tscroll,.table-wrapper{ width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; background: linear-gradient(to right, var(--wrap-bg,var(--bg,#fff)) 30%, rgba(255,255,255,0)) 0 0, linear-gradient(to left, var(--wrap-bg,var(--bg,#fff)) 30%, rgba(255,255,255,0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(20,18,12,.16), rgba(20,18,12,0)) 0 0, radial-gradient(farthest-side at 100% 50%, rgba(20,18,12,.16), rgba(20,18,12,0)) 100% 0; background-repeat:no-repeat; background-size:34px 100%,34px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll; } /* Wide tables that must scroll on a phone: pin the first (label) column so a row's identity stays visible while the metric columns scroll, and cast a soft right-edge shadow that signals there is more content to the right. Opt in with class="stickcol"; the page sets --stick-bg to its own table background so the pinned cell paints over the scrolled columns. Scoped to narrow screens only — on desktop the table fits, so the column need not be pinned and hover styles stay untouched. */ @media (max-width:640px){ .stickcol thead th:first-child, .stickcol tbody td:first-child, .stickcol tbody th:first-child{ position:sticky; left:0; background:var(--stick-bg,#fff); box-shadow:7px 0 7px -7px rgba(20,18,12,.28); } .stickcol thead th:first-child{ z-index:3; } .stickcol tbody td:first-child, .stickcol tbody th:first-child{ z-index:2; } } /* Visually-hidden-but-vocalized utility: for text that only screen readers should get (e.g. "positive signal" beside a value whose meaning sighted users take from its color). */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; } /* Apple HIG: comfortable ≥44px touch targets for the primary interactive controls on touch devices — nav links, buttons, selects, tabs — without changing their look for mouse users. min-height (not height) leaves already-tall controls alone; range/checkbox inputs are excluded so slider tracks aren't stretched. */ @media (pointer:coarse){ .dwnav-links a{ min-height:44px; display:inline-flex; align-items:center; } button,select,summary,[role="tab"],[role="button"]{ min-height:44px; } } /* Collapsible affordance: a rotating chevron so

summaries read as toggles, not static headers. We suppress the default disclosure triangle and append our own marker. */ details > summary{ list-style:none; } details > summary::-webkit-details-marker{ display:none; } details > summary::after{ content:"\25B8"; display:inline-block; margin-left:.5em; color:var(--brass,#2c5878); font-size:.85em; transition:transform .15s ease; } details[open] > summary::after{ transform:rotate(90deg); } /* ── Crisp register ────────────────────────────────────────────────────────────────────────── Square the card/panel/table/control surfaces site-wide so every page reads with the same printerly, hard-edged register as the front door's plate frame. Pills (999px status chips, badges) and the plate frame itself (.frame, 3px) deliberately keep their shape. */ /* !important so it wins over the tool pages' own local card radii (they link this sheet first). The selector list is card/panel/control classes only — pills (999px) and .frame (3px) are never listed. */ .card,.cards,.cell,.vcard,.statstrip,.exhibits,a.ex,.arch,.note,.loc,.disc,.map-wrap, .opt-card,.opt-result,.blueprint,.acct,.struct-alpha,.cta,.dcard,.lv,.reb,.trade,.est-cliff, .research-banner,.fold,.smtabs button,.leadstate button,table.book, .rev-lead,.rl-track,.savings,.flexcard,select{ border-radius:var(--surface-radius)!important; } /* ── The Hypothetical Marker — one rule-bounded language for the Core Alpha research exhibits ── The dashboard / ledger / tearsheet / studies are hypothetical Model Portfolios. Instead of a boxed chip in the eyebrow plus a separately-styled banner, the whole family now speaks one hairline idiom: the point-of-performance label (.hyp-pill — kept verbatim for the Marketing- Rule marker) is a rule-preceded caps mark; the framing note (.research-banner) is a rule- bounded band. No pills, no colour — publication typography, not app chrome. Scoped to .eyebrow so the internal Workspace's own .hyp-pill (a masthead tag) is untouched. */ .eyebrow .hyp-pill{ font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:0; border-left:1px solid var(--line); padding:1px 0 1px 9px; margin-left:11px; vertical-align:middle; white-space:nowrap; } .research-banner{ margin:14px 0 22px; padding:3px 0 3px 15px; border-left:1px solid var(--line); font-size:12.5px; line-height:1.55; color:var(--dim); } .research-banner b{ color:var(--body); font-weight:600; } /* ── The Core Alpha research series rail — a bound-volume index so no exhibit dead-ends ──────── One strip at the foot of every research page: the four numbered pieces, the current one marked, the rest linked. Adjacency is the prev/next — from any piece the reader can reach the whole series. Shared here; the .series-rail class is used only on the research exhibits. */ .series-rail{ margin:34px 0 4px; padding-top:18px; border-top:1px solid var(--line); } .series-rail .sr-title{ display:block; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; } .series-rail ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); } .series-rail li{ flex:1 1 180px; background:var(--card,#fff); padding:12px 15px; font-family:var(--sans); font-size:13px; line-height:1.35; color:var(--ink); } .series-rail li i{ display:block; font-style:normal; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums; margin-bottom:3px; } .series-rail a{ display:block; color:var(--brass,#2c5878); text-decoration:none; } .series-rail a:hover{ text-decoration:underline; text-underline-offset:2px; } .series-rail li[aria-current="page"]{ background:var(--soft); font-weight:600; box-shadow:inset 2px 0 0 var(--brass,#2c5878); } .series-rail li[aria-current="page"] i{ color:var(--brass,#2c5878); } @media(max-width:620px){ .series-rail li{ flex-basis:100%; } } /* ── One-click PDF proposal / CPA brief (window.print → Save as PDF) ───────────────────────── A clean, multi-page print template: strip the app chrome and interactive controls, keep the rendered analysis (placement, transition before/after, decision tree), and append formal disclosures with a running firm footer on every page. */ #printproposal,#printdisc,#printfoot{ display:none; } @media print{ @page{ margin:16mm 14mm 20mm; } *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } body{ font-size:10.5px; color:var(--ink); } /* Strip all interactive chrome, navigation, filtering controls, and conversion CTAs — none of them mean anything on paper. (`header` is NOT hidden here: the exhibits'

holds the page title; the Tax Lab hides its own app header in its page-scoped print block.) */ .modetog,.fab,.fabwrap,.controls,.toolbar,.trans-models,.tools,#transmodels, input[type=range],.slider,#leadgen,.lead-cta,.foot a.back,.map-wrap h3 .hint,.methods>summary, .chrome,.dwnav,.ctas,.cta,.filters,.tabs,.legend .key{ display:none!important; } /* The screen shell becomes the sheet: full width inside the @page margins, no web max-widths, no browser-mock frame chrome. !important because each page's own