/* ==========================================================================
LIQUIDITY SWEEP TRADING — DESIGN SYSTEM v2 ("editorial")
--------------------------------------------------------------------------
Typographic + layout system inspired by theaibuilders.co, re-expressed with
the Liquidity Sweep Trading identity.
ADOPTED from the reference (measured on the live site):
· DM Sans 600 for display headings, line-height < 1, letter-spacing -0.06em
· Instrument Serif 400 *italic* as an in-headline accent ("the second half")
· DM Mono uppercase + wide tracking for eyebrows / labels
· Square-cornered buttons (radius 0), weight 700, trailing ↗
· 130px section rhythm, 1200px container, alternating ink / paper surfaces
KEPT from Liquidity Sweep Trading (brand identity):
· Navy ink #0a1428 (logo ground) · Teal #2ee6c5 (logo accent) plays the
· Gold #c9a24b (MQL5 buy CTAs) role the reference gives to acid lime
Loaded AFTER theme.css — this file overrides. Remove the to roll back.
========================================================================== */
/* ---------- tokens ------------------------------------------------------ */
:root{
/* Re-point theme.css's font tokens so the whole legacy theme follows the
new stack without touching 33 kB of existing rules. */
--f-display:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
--f-ui:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
--f-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
--f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
/* surfaces — ink (dark, brand ground) */
--ds-ink:#0a1428;
--ds-ink-2:#111e38;
--ds-ink-3:#17284a;
/* surfaces — paper (warm, from the reference) */
--ds-paper:#f6f2e9;
--ds-paper-2:#ebe6dc;
--ds-paper-line:#d7d0c5;
--ds-paper-line-2:#c9c4b9;
/* text */
--ds-on-paper:#14161c;
--ds-on-paper-soft:#4a4f58;
--ds-on-ink:#f6f2e9;
--ds-on-ink-soft:#a9b3c4;
/* accents */
--ds-acid:#2ee6c5; /* brand teal — the reference's lime role */
--ds-acid-ink:#062018; /* text on acid */
--ds-gold:#c9a24b;
--ds-bear:#ff6b6b;
/* rhythm */
--ds-sec:clamp(64px,9vw,130px);
--ds-wrap:1200px;
}
/* ---------- base -------------------------------------------------------- */
body{
font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
font-size:16px;line-height:1.5;font-weight:400;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* ---------- display type ------------------------------------------------
Sizes/weights/tracking mirror the reference:
H1 89.6px / 600 / lh .91 / ls -.065em H2 64px / 600 / lh .93 / ls -.06em
H3 28px / 400 / lh 1.5 / ls -.05em
`text-wrap:balance` + tight tracking keep titles on ONE line where the copy
allows; the fluid clamp() shrinks rather than wraps on narrow viewports. */
h1,h2,h3,h4,.ds-display{
font-family:"DM Sans",Arial,sans-serif;
text-wrap:balance;text-transform:none;
}
h1,.ds-h1{
font-size:clamp(2.15rem,5.9vw,5.6rem);
font-weight:600;line-height:.91;letter-spacing:-.065em;margin:0 0 .5em;
}
h2,.ds-h2{
font-size:clamp(1.8rem,4.3vw,4rem);
font-weight:600;line-height:.93;letter-spacing:-.06em;margin:0 0 .55em;
}
h3,.ds-h3{
font-size:clamp(1.15rem,1.85vw,1.75rem);
font-weight:400;line-height:1.5;letter-spacing:-.05em;margin:0 0 .5em;
}
h4{font-size:1.05rem;font-weight:600;line-height:1.4;letter-spacing:-.03em}
/* Long titles that must still hold one line (blog H1s) — one notch tighter. */
.ds-h1.is-long,h1.is-long{font-size:clamp(1.75rem,3.9vw,3.4rem);letter-spacing:-.055em;line-height:.98}
/* The signature move: the closing clause set in Instrument Serif italic.
Same size, weight 400 — it reads as a change of voice, not a change of scale. */
.ds-em{
font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
font-style:italic;font-weight:400;letter-spacing:-.02em;
}
.ds-em.acid{color:var(--ds-acid)}
/* ---------- eyebrow / label (DM Mono) ----------------------------------- */
.ds-eyebrow{
display:inline-block;font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.6875rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
margin:0 0 18px;color:var(--ds-acid);
}
.ds-paper .ds-eyebrow{color:var(--ds-on-paper);opacity:.62}
.ds-mono{font-family:"DM Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem}
/* ---------- lede -------------------------------------------------------- */
.ds-lede{font-size:clamp(1rem,1.25vw,1.185rem);line-height:1.62;max-width:62ch;margin:0 0 30px;font-weight:400}
.ds-ink .ds-lede{color:var(--ds-on-ink-soft)}
.ds-paper .ds-lede{color:var(--ds-on-paper-soft)}
/* ---------- surfaces / sections ----------------------------------------- */
.ds-sec{padding-block:var(--ds-sec)}
.ds-wrap{max-width:var(--ds-wrap);margin-inline:auto;padding-inline:24px}
.ds-ink{background:var(--ds-ink);color:var(--ds-on-ink)}
.ds-ink-2{background:var(--ds-ink-2);color:var(--ds-on-ink)}
.ds-paper{background:var(--ds-paper);color:var(--ds-on-paper)}
.ds-paper-2{background:var(--ds-paper-2);color:var(--ds-on-paper)}
.ds-ink h1,.ds-ink h2,.ds-ink h3,.ds-ink-2 h1,.ds-ink-2 h2,.ds-ink-2 h3{color:var(--ds-on-ink)}
.ds-paper h1,.ds-paper h2,.ds-paper h3,.ds-paper-2 h1,.ds-paper-2 h2,.ds-paper-2 h3{color:var(--ds-on-paper)}
.ds-paper p,.ds-paper li,.ds-paper-2 p,.ds-paper-2 li{color:var(--ds-on-paper-soft)}
.ds-paper a,.ds-paper-2 a{color:var(--ds-on-paper);text-decoration-color:var(--ds-paper-line-2);text-underline-offset:3px}
.ds-paper a:hover,.ds-paper-2 a:hover{text-decoration-color:var(--ds-on-paper)}
/* the accent strip that separates hero from body (reference: lime band) */
.ds-strip{background:var(--ds-acid);color:var(--ds-acid-ink);padding-block:17px}
.ds-strip .ds-wrap{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;justify-content:center}
.ds-strip span{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.75rem;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* ---------- buttons (square corners, like the reference) ---------------- */
.ds-btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:"DM Sans",Arial,sans-serif;font-weight:700;font-size:.9375rem;
line-height:1;padding:19px 26px;border-radius:0;border:1px solid transparent;
text-decoration:none;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease;
min-height:56px;
}
.ds-btn::after{content:"\2197";font-size:1.02em;line-height:1}
.ds-btn.no-arrow::after{content:""}
.ds-btn-acid{background:var(--ds-acid);color:var(--ds-acid-ink)}
.ds-btn-acid:hover{background:#4ff0d4;transform:translateY(-2px)}
.ds-btn-gold{background:var(--ds-gold);color:#1a1408}
.ds-btn-gold:hover{background:#dcb75f;transform:translateY(-2px)}
.ds-btn-ink{background:var(--ds-ink);color:var(--ds-on-ink)}
.ds-btn-ink:hover{background:var(--ds-ink-2);transform:translateY(-2px)}
.ds-btn-outline{background:transparent;border-color:currentColor}
.ds-ink .ds-btn-outline{color:var(--ds-on-ink)}
.ds-paper .ds-btn-outline,.ds-paper-2 .ds-btn-outline{color:var(--ds-on-paper)}
.ds-btn-outline:hover{transform:translateY(-2px)}
.ds-paper .ds-btn-outline:hover{background:var(--ds-on-paper);color:var(--ds-paper)}
.ds-ink .ds-btn-outline:hover{background:var(--ds-on-ink);color:var(--ds-ink)}
.ds-btn-sm{font-size:.8125rem;padding:12px 17px;min-height:42px}
.ds-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* ---------- cards (square, hairline border — reference style) ----------- */
.ds-grid{display:grid;gap:20px}
.ds-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ds-grid-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.ds-grid-4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.ds-card{
border-radius:0;padding:28px 26px;
transition:transform .18s ease,border-color .18s ease,background .18s ease;
display:flex;flex-direction:column;
}
.ds-paper .ds-card,.ds-paper-2 .ds-card{background:transparent;border:1px solid var(--ds-paper-line)}
.ds-paper .ds-card:hover,.ds-paper-2 .ds-card:hover{border-color:var(--ds-on-paper);transform:translateY(-3px)}
.ds-ink .ds-card,.ds-ink-2 .ds-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12)}
.ds-ink .ds-card:hover,.ds-ink-2 .ds-card:hover{border-color:var(--ds-acid);transform:translateY(-3px)}
.ds-card h3{margin:0 0 10px}
.ds-card p{margin:0;font-size:.95rem;line-height:1.62}
.ds-card .ds-num{font-family:"DM Mono",Menlo,monospace;font-size:.72rem;letter-spacing:.1em;
opacity:.55;margin-bottom:16px;display:block}
/* ---------- section head ------------------------------------------------ */
.ds-head{max-width:20ch;margin-bottom:44px}
.ds-head.wide{max-width:30ch}
.ds-head .ds-lede{margin-top:-6px}
.ds-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
flex-wrap:wrap;margin-bottom:44px}
.ds-head-row .ds-head{margin-bottom:0}
/* ---------- editorial prose (articles on paper) ------------------------- */
.ds-paper .prose,.ds-paper-2 .prose{color:var(--ds-on-paper-soft)}
.ds-paper .prose h2{margin-top:1.5em;font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.06}
.ds-paper .prose h3{margin-top:1.4em;font-weight:500;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.35}
.ds-paper .prose p,.ds-paper .prose li{font-size:1.0625rem;line-height:1.72}
.ds-paper .prose strong,.ds-paper .prose b{color:var(--ds-on-paper);font-weight:600}
.ds-paper .prose figure{margin:2.2em 0}
.ds-paper .prose figcaption{color:var(--ds-on-paper-soft);font-size:.875rem;
border-left:2px solid var(--ds-paper-line-2);padding-left:14px;margin-top:12px}
.ds-paper .prose blockquote{border-left:3px solid var(--ds-acid);padding-left:20px;margin-left:0;
font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.3rem;
color:var(--ds-on-paper);line-height:1.45}
/* ---------- rules ------------------------------------------------------- */
.ds-rule{height:1px;border:0;margin:0}
.ds-paper .ds-rule,.ds-paper-2 .ds-rule{background:var(--ds-paper-line)}
.ds-ink .ds-rule,.ds-ink-2 .ds-rule{background:rgba(255,255,255,.12)}
/* ==========================================================================
SURFACE MAPPING — re-skin the legacy theme without rewriting it.
theme.css draws everything from the tokens --ink/--text/--muted/--bg/--soft/
--panel/--line. Redefining those tokens inside a "paper" context makes every
existing rule recolour itself correctly. Ink sections keep the original values.
========================================================================== */
/* The page GROUND is paper; dark blocks paint over it. Constrained blocks
(.blogwrap 1240px, .prose/.related 760px) must NOT paint a background of
their own — doing so drew paper rectangles floating on the navy body. */
body{background:var(--ds-paper);color:var(--ds-on-paper)}
.blogwrap,.related,.prose,.pp-inner,.cta-band{background:transparent}
body,.section,.blogwrap,.pp,.pp-proof,.related,.prose,.art,.ds-paper-scope{
--ink:#14161c;
--text:#4a4f58;
--muted:#6b7280;
--bg:#f6f2e9;
--soft:#ebe6dc;
--soft-2:#e2ddd2;
--panel:#fffdf8;
--panel-2:#f1ece1;
--line:rgba(20,22,28,.14);
--line-2:rgba(20,22,28,.24);
--pp-card:#fffdf8;
--pp-card-2:#f1ece1;
--pp-line:rgba(20,22,28,.14);
--sh:0 10px 30px -18px rgba(20,22,28,.35);
--sh-sm:0 1px 2px rgba(20,22,28,.10);
color:var(--text);
}
/* only FULL-WIDTH blocks paint a ground */
body,.section,.pp,.pp-proof{background:var(--bg)}
.section.soft,.pp-alt{--bg:#ebe6dc;--panel:#f6f2e9;background:var(--bg)}
.pp-proof{--bg:#ebe6dc;background:var(--bg);border-block:1px solid var(--line)}
/* keep the acid accent readable on paper (the teal is tuned for dark ground) */
/* #0f9b83 measured 3.11:1 on paper at 11-12px (below AA) -> #0a7261 = 5.09:1 */
body,.section,.blogwrap,.pp,.related,.prose,.art{--primary:#0a7261;--primary-600:#08624f;
--primary-050:rgba(15,155,131,.09);--primary-100:rgba(15,155,131,.16);--primary-200:rgba(15,155,131,.32);
--bull:#0f9b83;--gold:#8a6a1f;--gold-2:#a3812c}
/* .pp-hero and .pp-final also carry the .pp class, so they inherited the PAPER
token set while keeping a navy background — near-black text on navy measured
1.02:1. Restore the ink token set on every dark block. */
/* .cta-band is deliberately NOT in this list: it is a constrained block whose
inner .cb-inner paints a teal gradient under white text. With the ink tokens
its --primary went bright teal, leaving white-on-bright (~2.3:1). Inheriting
the paper ramp gives a dark teal gradient and legible white text. */
.pp-hero,.pp-final,.hero,.page-head,.widget-cta,.tool-strip,.news,
.header,.topbar,.footer,.mega,.buybar,.buypanel{
--ink:#f6f2e9;
--text:#a9b3c4;
--muted:#8d99ae;
--bg:#0a1428;
--soft:#0d1a30;
--panel:#111e38;
--panel-2:#17284a;
--line:rgba(255,255,255,.12);
--line-2:rgba(255,255,255,.2);
--pp-card:#111e38;
--pp-line:rgba(255,255,255,.12);
--primary:#2ee6c5;--primary-600:#27d3b4;--primary-700:#1fb89d;
--primary-050:rgba(46,230,197,.08);--primary-200:rgba(46,230,197,.34);
--bull:#2ee6c5;--bear:#ff6b6b;--ok:#10b981;
}
/* semantic red/green are tuned for a dark ground; darken them on paper
(measured 2.5-2.73:1 on the problem/solution cards) */
body,.section,.blogwrap,.pp,.related,.prose,.art{--bear:#c02626;--ok:#0a7a52;--warn:#8a5a00}
.pp-ps-prob h3,.pp-ps-prob li::before{color:#c02626}
.pp-ps-sol h3,.pp-ps-sol li::before{color:#0a7a52}
.pp-ps-prob{border-left-color:#c02626}
.pp-ps-sol{border-left-color:#0a7a52}
/* the product hero H1 sits in a ~620px column; let it span the grid like the
reference does, so a display-size title can hold one line */
.pp-hero-grid{grid-template-columns:1fr}
.pp-hero .pp-sub{max-width:64ch}
/* sections that stay INK (hero, page head, header/footer, final CTA) */
.hero,.page-head,.pp-hero,.pp-final,.header,.topbar,.footer{
background:var(--ds-ink);color:var(--ds-on-ink)}
/* ---------- brand logo (2026 wordmark) ---------------------------------- */
/* The artwork carries its own flat ground, remapped at export time to the exact
site ink, so it sits seamlessly on the dark header and footer. */
.brand{display:inline-flex;align-items:center;gap:0;text-decoration:none}
/* Deliberately oversized: the wordmark is the brand, so it is allowed to run
taller than a conventional header lockup. The artwork's own ground is the
exact header navy, so the extra height reads as part of the bar, not as a
pasted rectangle. The negative block margin lets it bleed slightly past the
bar's padding without dragging the whole header down with it. */
.brand-logo{height:104px;width:auto;display:block;margin-block:-10px}
.footer .brand-logo{height:92px;margin-block:-8px}
.brand:hover .brand-logo{opacity:.92}
.header-inner{min-height:112px}
@media (max-width:1100px){
.brand-logo{height:88px}
.header-inner{min-height:98px}
}
@media (max-width:900px){
.brand-logo{height:76px;margin-block:-8px}
.footer .brand-logo{height:72px}
.header-inner{min-height:86px}
}
@media (max-width:520px){
.brand-logo{height:64px;margin-block:-6px}
.footer .brand-logo{height:60px}
.header-inner{min-height:74px}
}
@media (max-width:380px){
.brand-logo{height:56px}
}
/* ---------- header: larger nav + CTA ------------------------------------ */
.mainnav > a,.mainnav > .has-mega > a{
font-size:1rem;letter-spacing:.02em;padding:13px 18px;font-weight:600}
.mainnav .caret{width:10px;height:10px}
.nav-cta .btn,.mainnav .btn.btn-sm{
font-size:.95rem;padding:15px 26px;min-height:50px;font-weight:700}
.mega-item h5{font-size:1.02rem}
@media (max-width:1240px){
.mainnav > a,.mainnav > .has-mega > a{padding:13px 13px;font-size:.95rem}
.nav-cta .btn{padding:14px 20px;font-size:.9rem}
}
/* ==========================================================================
MOBILE MENU — it could not scroll.
The theme pins it with `position:fixed; inset:64px 0 auto 0`: with
bottom:auto the panel grows past the viewport and, being fixed, everything
below the fold is unreachable. Two fixes: anchor it to the header (so it
follows the now-taller bar instead of a hard-coded 64px), and give it a
real max-height with its own scroll.
========================================================================== */
@media (max-width:900px){
.mainnav{
position:absolute;top:100%;left:0;right:0;bottom:auto;inset:auto;
top:100%; /* re-stated after inset:auto */
max-height:calc(100dvh - 96px);
overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
}
/* larger touch targets in the drawer */
.mainnav > a,.mainnav > .has-mega > a,.has-mega > a{padding:16px 8px;font-size:1.05rem}
.mega-item{padding-block:10px}
.mainnav .nav-mobile-cta{min-height:54px;font-size:1rem}
/* the burger must stay above the open drawer */
.nav-cta{z-index:2}
}
/* older engines without dvh keep a usable height */
@supports not (height:100dvh){
@media (max-width:900px){.mainnav{max-height:calc(100vh - 96px)}}
}
/* ---------- mobile: centred top bar + header --------------------------- */
@media (max-width:900px){
.topbar .wrap{justify-content:center;text-align:center;gap:6px 14px;padding-block:7px}
/* the burger is taken out of the flow so the logo is centred on the bar,
not merely centred in the space the burger leaves over */
.header-inner{justify-content:center;position:relative}
.nav-cta{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
.nav-cta .btn{display:none} /* keep only the burger beside the logo */
.footer .foot-brand{text-align:center}
.footer .foot-brand .brand{justify-content:center}
}
/* ---------- mobile: let the hero breathe -------------------------------- */
@media (max-width:900px){
.hero-inner{padding:76px 0 84px;gap:30px}
.hero .sub,.hero .lede{margin-bottom:26px}
.hero .cta-row{gap:12px;margin-bottom:34px}
.hero-stats{margin-top:8px;gap:18px 26px}
.page-head{padding-block:56px 44px}
.pp-hero{padding-block:56px 64px}
}
@media (max-width:560px){
.hero-inner{padding:64px 0 72px}
.hero-stats{gap:16px 22px}
/* long CTA labels are set nowrap by the theme and pushed the page 4px wide
("Get The Notorious OB on MQL5"); let them wrap instead of scrolling */
.btn,.btn-lg{white-space:normal;max-width:100%;text-align:center;padding-inline:20px}
}
/* ==========================================================================
BLOG LIST — "playbook" rows, mirroring the reference article card:
kicker DM Mono 10px / ls .1em title DM Sans 25px / 400 / lh 1 / -.055em
excerpt 13px foot flex: date | Read ↗
No per-article icon (the .art-ic block is gone from the markup).
========================================================================== */
article.art{
position:relative;background:transparent;border:1px solid var(--line);border-radius:0;
padding:23px 22px 19px;display:flex;flex-direction:column;overflow:visible;
transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
article.art:hover{border-color:var(--ink);transform:translateY(-2px);background:var(--panel)}
article.art .art-kicker{
font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.625rem;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}
article.art h3{
font-size:clamp(1.3rem,2.1vw,1.5625rem);font-weight:400;line-height:1.02;
letter-spacing:-.055em;margin:0 0 12px;text-wrap:balance;
}
article.art h3 a{color:var(--ink);text-decoration:none}
/* whole card clickable, while the anchor text stays the title */
article.art h3 a::after{content:"";position:absolute;inset:0}
article.art:hover h3 a{color:var(--primary)}
article.art .art-exc{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:0 0 auto}
article.art .art-foot{
display:flex;justify-content:space-between;align-items:center;gap:12px;
margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.625rem;
letter-spacing:.05em;color:var(--muted);
}
article.art .art-foot b{color:var(--ink);font-weight:500;white-space:nowrap}
article.art:hover .art-foot b{color:var(--primary)}
@media (max-width:560px){
article.art{padding:20px 18px 17px}
article.art h3{font-size:1.3125rem;line-height:1.08}
}
/* ---------- blog INDEX: one article per line ---------------------------
The hub is a reading list, so its rows run the full width and are separated
by hairlines rather than boxed as cards. Higher specificity than the
theme's .art-grid column rules, so it also wins inside their media queries.
The homepage keeps its 3-up teaser grid — that is a preview, not the index. */
.article-main .art-grid,.art-grid#grid{grid-template-columns:1fr!important;gap:0}
.article-main article.art,.art-grid#grid article.art{
display:grid;grid-template-columns:minmax(0,1fr) auto;
column-gap:44px;row-gap:6px;align-items:start;
border:0;border-bottom:1px solid var(--line);border-radius:0;
padding:30px 2px 28px;background:transparent;
}
.article-main article.art:first-child,.art-grid#grid article.art:first-child{
border-top:1px solid var(--line)}
.article-main article.art:hover,.art-grid#grid article.art:hover{
transform:none;background:transparent;border-color:var(--line)}
.article-main article.art .art-kicker,.art-grid#grid article.art .art-kicker{
grid-column:1;grid-row:1;margin:0 0 6px}
.article-main article.art h3,.art-grid#grid article.art h3{
grid-column:1;grid-row:2;margin:0 0 10px;
font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.06;letter-spacing:-.055em}
.article-main article.art .art-exc,.art-grid#grid article.art .art-exc{
grid-column:1;grid-row:3;margin:0;max-width:72ch;font-size:.875rem;line-height:1.6}
/* meta column: date over "Read ↗", right-aligned, spanning the three rows */
.article-main article.art .art-foot,.art-grid#grid article.art .art-foot{
grid-column:2;grid-row:1/span 3;
flex-direction:column;align-items:flex-end;justify-content:flex-start;
gap:10px;margin:0;padding:0;border:0;white-space:nowrap;text-align:right}
.article-main article.art:hover h3 a,.art-grid#grid article.art:hover h3 a{color:var(--primary)}
@media (max-width:640px){
.article-main article.art,.art-grid#grid article.art{
grid-template-columns:1fr;padding:24px 2px 22px;row-gap:8px}
.article-main article.art .art-foot,.art-grid#grid article.art .art-foot{
grid-column:1;grid-row:4;flex-direction:row;align-items:center;
justify-content:space-between;width:100%;text-align:left;margin-top:6px}
.article-main article.art h3,.art-grid#grid article.art h3{font-size:1.375rem;line-height:1.12}
}
.pp-hero{background:radial-gradient(1100px 460px at 78% -10%,rgba(46,230,197,.13),transparent 62%),var(--ds-ink)}
.hero h1,.page-head h1,.pp-hero h1,.cta-band h2,.cta-band h3,.pp-final h2{color:var(--ds-on-ink)}
.page-head .lede,.hero .lede,.pp-hero .pp-sub{color:var(--ds-on-ink-soft)}
/* square corners everywhere (reference signature) */
.btn,.badge,.pp-card,.ds-card,.rel-card,.ts-card,.pp-shot,.pp-ps-card,.pp-step,
.pp-price,.pp-final,.pp-spec,.pp-faq details,.callout,.keytake,.widget{border-radius:0}
.btn{font-family:"DM Sans",Arial,sans-serif;font-weight:700;letter-spacing:0}
.pp-chip,.badge{border-radius:0}
/* paper prose inherits the editorial rules defined above */
.prose h2,.article-main h2{font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.06;letter-spacing:-.05em;font-weight:600}
.prose h3,.article-main h3{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.35;letter-spacing:-.03em;font-weight:500}
.prose p,.prose li,.article-main p,.article-main li{font-size:1.0625rem;line-height:1.72}
/* ==========================================================================
OVERRIDES — theme.css scopes its headings per component (.hero h1, .prose h2…)
with UPPERCASE + positive tracking. The reference does the opposite: sentence
case, tight negative tracking, line-height < 1. These rules match that
specificity so the display system actually lands.
========================================================================== */
.hero h1,.page-head h1,.post-header h1,.pp-hero h1,
.prose h2,.prose h3,.pillar h3,.prod-head h3,.art h3,.news h2,.tool-strip h3,
.related h2,.rel-card h3,.cta-band h3,.cta-band h2,.keytake h3,.section-title h2,
.pp h2,.pp h3,.pp-final h2,.blogwrap h2,.article-main h2,.article-main h3,
.widget h4,.footer h4,.mega-item h5{
text-transform:none;
font-family:"DM Sans",Arial,sans-serif;
}
/* display scale — mirrors the measured reference values */
.hero h1,.pp-hero h1{
font-size:clamp(2.15rem,5.9vw,5.6rem);font-weight:600;
line-height:.91;letter-spacing:-.065em;max-width:16ch}
.page-head h1{
font-size:clamp(2rem,5vw,4.4rem);font-weight:600;
line-height:.93;letter-spacing:-.06em;max-width:18ch}
.post-header h1{
font-size:clamp(1.75rem,3.9vw,3.4rem);font-weight:600;
line-height:.98;letter-spacing:-.055em;max-width:26ch;text-wrap:balance}
.section-title h2,.pp h2,.news h2,.cta-band h2,.pp-final h2{
font-size:clamp(1.8rem,4.3vw,4rem);font-weight:600;
line-height:.93;letter-spacing:-.06em}
.prose h2,.article-main h2,.blogwrap h2{
font-size:clamp(1.5rem,2.6vw,2.35rem);font-weight:600;
line-height:1.06;letter-spacing:-.05em;margin:1.9em 0 .55em}
.prose h3,.article-main h3{
font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:500;
line-height:1.35;letter-spacing:-.03em;color:var(--ink)}
.pillar h3,.prod-head h3,.art h3,.rel-card h3,.tool-strip h3,.cta-band h3{
font-weight:400;letter-spacing:-.05em;line-height:1.28}
.prod-head h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
.related h2{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;letter-spacing:-.05em;line-height:1.1}
/* small structural labels keep their mono/uppercase treatment */
.keytake h3,.footer h4,.widget h4{
font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;
font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase}
/* .section-title is a class ON the h2 itself (h2.section-title), not a wrapper. */
.section-title{
font-size:clamp(1.8rem,4.3vw,4rem)!important;font-weight:600;
line-height:.93!important;letter-spacing:-.06em!important;
text-transform:none!important;font-family:"DM Sans",Arial,sans-serif;
text-wrap:balance;max-width:22ch}
.shead.center .section-title,.shead.center{margin-inline:auto}
.shead{margin-bottom:44px}
/* eyebrows -> DM Mono, sentence-spacing like the reference */
.eyebrow{
font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important;
font-weight:500!important;font-size:.6875rem!important;letter-spacing:.11em!important;
text-transform:uppercase;display:inline-block;margin-bottom:16px}
/* on paper the brand teal is too light at 11px -> near-black at 62%, like the reference */
.section .eyebrow,.blogwrap .eyebrow,.pp .eyebrow,.related .eyebrow,.art .eyebrow{
color:var(--ink);opacity:.62}
.hero .eyebrow,.page-head .eyebrow,.cta-band .eyebrow,.pp-hero .eyebrow{
color:var(--ds-acid);opacity:1}
/* ==========================================================================
ONE-LINE TITLES — "titles should hold a single line where possible".
Pure CSS, no JS: the build stamps each display heading with its character
count (style="--ch:53"). Font-size is then the largest size that still fits
the container on one line, clamped between a floor and the display max:
size ≈ container_width / (chars × average_glyph_width)
DM Sans 600 at -0.06em tracking averages ~0.46em per glyph (measured).
Titles too long to fit at the floor size simply wrap, as before.
========================================================================== */
/* Measured on the live page: DM Sans 600 at -0.06em tracking averages
0.418em per character. 0.44 is used as a safety margin.
Sizing is driven by CONTAINER width (cqi), not the viewport, because the hero
H1 sits in a ~640px column while section titles span the full 1192px wrap —
a single viewport-based figure overflowed the narrow one by 400px. */
/* 0.44 was measured on a mixed-case sample; a title heavy in capitals
("Market Structure, Premium and Discount") runs wider and overflowed its
column by ~20px. 0.46 covers that case with a small margin. */
:root{--ds-glyph:.46}
:where(*:has(> h1[style*="--ch"]),*:has(> h2.section-title[style*="--ch"])){
container-type:inline-size}
.hero h1[style*="--ch"],.page-head h1[style*="--ch"],.pp-hero h1[style*="--ch"]{
font-size:clamp(1.9rem,calc(100cqi / (var(--ch) * var(--ds-glyph))),5.6rem);
max-width:none;text-wrap:nowrap}
.section-title[style*="--ch"]{
font-size:clamp(1.6rem,calc(100cqi / (var(--ch) * var(--ds-glyph))),4rem)!important;
max-width:none;text-wrap:nowrap}
.post-header h1[style*="--ch"]{
font-size:clamp(1.5rem,calc(100cqi / (var(--ch) * var(--ds-glyph))),3.4rem);
max-width:none;text-wrap:nowrap}
/* never let a forced single line spill out of its column */
.hero h1,.page-head h1,.pp-hero h1,.section-title,.post-header h1{
overflow-wrap:break-word;max-inline-size:100%}
/* The hero column was capped at 640px, which no hero-sized headline can fill on
one line. It holds a single column (no media beside it), so widening it is
free — and it matches the reference, where the H1 spans the full wrap. */
.hero-inner{grid-template-columns:minmax(0,1fr)}
.hero .sub,.hero .lede{max-width:64ch}
/* .hl already wraps the emphasised words in the markup -> make it THE accent:
Instrument Serif italic at the same size, exactly like the reference. */
.hero h1 .hl,.page-head h1 .hl,.section-title .hl,.post-header h1 .hl,h1 .hl,h2 .hl{
font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
font-style:italic;font-weight:400;letter-spacing:-.02em;
background:none;color:inherit;padding:0}
.hero h1 .hl{color:var(--ds-acid)}
/* Instrument Serif runs narrower than DM Sans, so a title using it fits more
characters per line — the --ch estimate stays on the safe side. */
/* narrow viewports: allow wrapping again rather than shrinking to unreadable */
@media (max-width:700px){
.hero h1[style*="--ch"],.page-head h1[style*="--ch"],.pp-hero h1[style*="--ch"],
.section-title[style*="--ch"],.post-header h1[style*="--ch"]{text-wrap:balance}
}
/* ---------- contrast fixes (measured, WCAG AA) --------------------------- */
/* mega-menu / dark panels used --muted #75839c on #111e38 = 4.33:1 (below AA) */
:root,.mega,.header,.footer,.hero,.page-head,.cta-band{--muted:#8d99ae}
/* --primary-700 was left at the light theme value, so the avatar gradient ran
light-to-dark under white text (1.24:1). Pin the whole teal ramp on paper. */
body,.section,.blogwrap,.pp,.related,.prose,.art{--primary-700:#064c3f}
/* Components authored as light-on-dark that now sit on paper. Making them true
INK cards keeps their white text legible AND reinforces the ink/paper
alternation of the reference. */
.widget-cta,.tool-strip,.news{
background:var(--ds-ink)!important;color:var(--ds-on-ink);border:1px solid rgba(255,255,255,.12)}
.widget-cta h4,.tool-strip h3,.news h2{color:var(--ds-on-ink)!important}
.widget-cta p,.tool-strip p,.news p{color:var(--ds-on-ink-soft)!important}
.widget-cta .btn-primary,.news .btn-primary{background:var(--ds-acid);color:var(--ds-acid-ink)}
.author-box .ab-ic{background:var(--ds-ink);color:var(--ds-acid);border:1px solid var(--ds-acid)}
/* Breadcrumbs appear on BOTH grounds (ink page-heads, paper article headers),
so they must follow the context — a single light colour measured 1.38:1 on
paper. The separator also carried opacity .5, halving whatever it inherited. */
.crumbs{color:var(--muted)}
.crumbs a{color:var(--ink)}
.crumbs .sep{opacity:1} /* .85 dropped the separator to 4.05:1 on paper */
.hero .crumbs,.page-head .crumbs,.pp-hero .crumbs{color:var(--ds-on-ink-soft)}
.hero .crumbs a,.page-head .crumbs a,.pp-hero .crumbs a{color:#c8d1e0}
.crumbs a:hover{color:var(--primary)}
.hero .crumbs a:hover,.page-head .crumbs a:hover,.pp-hero .crumbs a:hover{color:var(--ds-acid)}
/* The sticky buy bar lives outside .pp (direct child of body), so it inherited
the paper ramp while painting a navy ground: dark-on-dark, measured 1.07:1. */
.pp-sticky{--ink:#f6f2e9;--text:#a9b3c4;--muted:#8d99ae;--primary:#2ee6c5;--line:rgba(255,255,255,.12)}
.pp-sticky .sp b{color:var(--ds-on-ink)}
.pp-sticky .sp small{color:var(--ds-on-ink-soft)}
.pp-sticky .btn-primary{background:var(--ds-acid);color:var(--ds-acid-ink)}
/* Buttons: set the colours explicitly per surface instead of relying on the
--ink variable, which resolves ambiguously on elements that carry both a
paper class (.pp) and a dark one (.pp-hero) — measured 1.02:1 on the hero. */
/* on paper: filled = dark teal ground + light text; ghost = dark text */
.section .btn-primary,.blogwrap .btn-primary,.pp .btn-primary,.related .btn-primary,
.art .btn-primary,.prose .btn-primary{color:#f6f2e9}
.section .btn-primary:hover,.blogwrap .btn-primary:hover,.pp .btn-primary:hover{
background:var(--primary-600);color:#fff}
.section .btn-ghost,.blogwrap .btn-ghost,.pp .btn-ghost,.related .btn-ghost,
.art .btn-ghost,.prose .btn-ghost{color:#14161c;border-color:rgba(20,22,28,.28)}
.section .btn-ghost:hover,.pp .btn-ghost:hover{background:#14161c;color:#f6f2e9;border-color:#14161c}
/* on ink: ghost = light text (wins over the paper rule above via extra class) */
.pp-hero .btn-ghost,.pp-final .btn-ghost,.hero .btn-ghost,.page-head .btn-ghost,
.cta-band .btn-ghost,.widget-cta .btn-ghost,.news .btn-ghost{
color:#f6f2e9;border-color:rgba(255,255,255,.28);background:transparent}
.pp-hero .btn-ghost:hover,.pp-final .btn-ghost:hover,.hero .btn-ghost:hover{
background:#f6f2e9;color:#0a1428;border-color:#f6f2e9}
.pp-hero .btn-primary,.pp-final .btn-primary,.hero .btn-primary,.cta-band .btn-primary,
.widget-cta .btn-primary,.news .btn-primary,.tool-strip .btn-primary,.page-head .btn-primary{
background:var(--ds-acid);color:var(--ds-acid-ink)}
.widget-cta .price{color:var(--ds-acid)}
.widget-cta [style*="color:#8891a0"]{color:#a9b3c4!important}
/* ==========================================================================
LEARN — five-part guide: series navigation, prev/next, data tables
========================================================================== */
/* numbered badge replacing the icon in the Learn mega-menu */
.mi-ic.mi-num{display:grid;place-items:center;font-family:"DM Mono",ui-monospace,Menlo,monospace;
font-size:.6875rem;font-weight:500;letter-spacing:.06em;color:var(--primary);
background:var(--primary-050);border:1px solid var(--primary-200);border-radius:0}
.series-nav{margin:0 0 40px;padding:22px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sn-head{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.6875rem;font-weight:500;
letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.sn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 18px;margin-bottom:18px}
.sn-item{display:flex;gap:10px;align-items:baseline;padding:9px 0;text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .15s ease}
.sn-item:hover{border-bottom-color:var(--ink)}
.sn-n{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.6875rem;color:var(--muted);flex:none}
.sn-t{font-size:.9375rem;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.sn-item.is-current{border-bottom-color:var(--primary)}
.sn-item.is-current .sn-t{color:var(--primary);font-weight:600}
.sn-item.is-current .sn-n{color:var(--primary)}
.prevnext{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
margin:48px 0 8px;padding-top:26px;border-top:1px solid var(--line)}
.pn{display:flex;flex-direction:column;gap:6px;padding:18px 20px;text-decoration:none;
border:1px solid var(--line);transition:border-color .16s ease,transform .16s ease}
.pn:hover{border-color:var(--ink);transform:translateY(-2px)}
.pn span{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.6875rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pn b{font-size:1.0625rem;font-weight:400;letter-spacing:-.04em;line-height:1.25;color:var(--ink)}
.pn.next{text-align:right}
/* Risk warning — deliberately NOT the ordinary .callout class. An adversarial
review pointed out that reusing the tip style for the mandatory warning gives
it the same visual weight as a formatting hint. */
.prose .riskwarning{
margin:2.4em 0 0;padding:20px 22px;border:1px solid var(--warn);
border-left:4px solid var(--warn);background:rgba(138,90,0,.06);
color:var(--text);font-size:.9375rem;line-height:1.65}
.prose .riskwarning b{color:var(--ink);font-weight:600}
/* definition diagrams: one schematic figure per concept */
.prose .figdef{margin:2.2em 0;padding:0}
.prose .figdef svg{width:100%;height:auto;display:block;
background:var(--panel);border:1px solid var(--line)}
.prose .figdef figcaption{margin-top:12px;padding-left:14px;
border-left:2px solid var(--primary);color:var(--muted);
font-size:.875rem;line-height:1.6}
.prose .figdef figcaption b{color:var(--ink);font-weight:600}
@media (max-width:640px){
.prose .figdef{margin:1.7em -4px}
.prose .figdef figcaption{font-size:.8125rem}
}
/* data tables inside the guide */
.tablewrap{overflow-x:auto;margin:1.8em 0;-webkit-overflow-scrolling:touch}
.dtable{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:460px}
.dtable th,.dtable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.dtable thead th{background:var(--panel-2);color:var(--ink);font-size:.6875rem;font-weight:500;
font-family:"DM Mono",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td:first-child{color:var(--ink)}
@media (max-width:640px){
.sn-grid{grid-template-columns:1fr;gap:0}
.prevnext{grid-template-columns:1fr}
.pn.next{text-align:left}
}
/* ---------- product hero: price bigger, badge smaller and on one line ----
The badge's inline