/* ============ TOKENS, majestic corporate navy + metallic gold ============ */ :root{ /* blue: a graded sapphire system, not one flat mid-blue */ --abyss:#050D1F; /* deepest, footer, cover */ --navy:#0A1B3D; /* primary field */ --navy-mid:#122E5E; /* elevated surfaces */ --royal:#1B4B93; /* interactive / accent blue */ --azure:#8FB4E3; /* muted text on dark */ /* gold: metallic, with light + shadow stops so it can behave like foil */ --gold:#D4AF37; /* the metal */ --gold-light:#EFD98A; --champagne:#F7EBC2; /* highlight stop */ --gold-deep:#8A6A1F; /* shadow stop */ --gold-text:#7A5C16; /* gold that is legible on light surfaces */ --cream:#FAF6EC; /* warm paper: used ONLY for the verify-me cards, where a light card on the navy band is the whole point */ --cream-lift:#FFFDF6; /* the same card on hover */ --platinum:#EFF2F7; /* cool corporate light, deliberately not cream */ --platinum-dim:#DFE5EE; --ink:#0B1526; --ink-soft:#42506B; --foil:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 16%,var(--champagne) 36%,#FFF8DF 47%, var(--champagne) 58%,var(--gold) 78%,#A67C21 100%); --foil-rule:linear-gradient(90deg,transparent 0%,var(--gold-deep) 8%,var(--gold) 28%, var(--champagne) 50%,var(--gold) 72%,var(--gold-deep) 92%,transparent 100%); --display:Georgia,"Times New Roman",serif; --body:Georgia,"Times New Roman",serif; --ledger:Georgia,"Times New Roman",serif; --measure:88ch; --gutter:clamp(1.25rem,5vw,4.5rem); --rule:1px solid color-mix(in srgb,var(--navy) 16%,transparent); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } body{ margin:0;background:var(--platinum);color:var(--ink); font-family:var(--body);font-size:clamp(1rem,.35vw + .95rem,1.125rem); line-height:1.65;font-weight:400; } h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.015em} p{margin:0 0 1.1em} a{color:var(--royal);text-decoration-thickness:1px;text-underline-offset:.18em} :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px} img{max-width:100%;display:block} .wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)} .eyebrow{ font-family:var(--ledger);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--royal);margin:0 0 1.1rem;font-weight:500; } .on-dark .eyebrow{color:var(--gold)} /* gold foil text: the metal, not a flat yellow */ .foil{color:var(--gold)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .foil{ background-image:var(--foil);background-size:220% 100%;background-position:0% 50%; -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .foil-sweep{animation:sheen 9s ease-in-out infinite} } @keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* burnished gold for LIGHT surfaces, solid, legible (5.55:1); foil is reserved for dark */ .gilt{color:var(--gold-text);font-style:italic} /* heraldic rule: foil hairline crossed by a gold tick */ .crossrule{height:2px;background:var(--foil-rule);opacity:.55;margin:0} /* ============ NAV ============ */ .topbar{position:-webkit-sticky;position:sticky;top:0;z-index:60} .topbar-in{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap; max-width:1280px;margin-inline:auto;padding:.7rem var(--gutter)} .mark{display:flex;align-items:center;gap:.65rem;color:#fff;text-decoration:none;font-weight:600; font-size:.85rem;letter-spacing:.01em} .mark-glyph{ flex:none;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.06em; color:var(--abyss);background:linear-gradient(160deg,var(--champagne),var(--gold) 55%,#B8912B); padding:.28rem .42rem;line-height:1;border-radius:1px; } .navlinks{display:flex;align-items:center;gap:1.4rem;margin:0;padding:0;list-style:none} .navlinks a{ color:color-mix(in srgb,#fff 84%,transparent);text-decoration:none;font-family:var(--ledger); font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:color .16s ease; } .navlinks a:hover{color:var(--gold)} .btn{ display:inline-block;font-family:var(--body);font-weight:600;font-size:.95rem; padding:.9rem 1.7rem;border-radius:2px;text-decoration:none;border:1px solid transparent; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease; } /* gilded button: real metal, with edge + lift */ .btn-gold{ background:linear-gradient(160deg,var(--champagne) 0%,var(--gold) 42%,#B8912B 100%); color:var(--abyss);border-color:color-mix(in srgb,var(--champagne) 70%,transparent); box-shadow:0 1px 0 color-mix(in srgb,#FFF8DF 60%,transparent) inset,0 10px 26px -12px rgba(212,175,55,.65); } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 #FFF8DF inset,0 16px 34px -12px rgba(212,175,55,.85)} .btn-ghost{border-color:color-mix(in srgb,var(--gold) 70%,transparent);color:var(--gold-light);background:transparent} .btn-ghost:hover{background:var(--gold);color:var(--abyss);border-color:var(--gold);transform:translateY(-2px)} .btn-solid{background:var(--royal);color:#fff} .btn-solid:hover{background:var(--navy-mid);transform:translateY(-2px)} .nav-cta{padding:.55rem 1.05rem;font-size:.8rem} /* ============ HERO ============ */ .hero{ position:relative;color:#fff;overflow:hidden; padding:clamp(3.6rem,9vw,8rem) 0 clamp(3rem,7vw,5.5rem); background: radial-gradient(120% 90% at 78% 8%, color-mix(in srgb,var(--royal) 55%,transparent) 0%, transparent 62%), radial-gradient(90% 70% at 6% 100%, color-mix(in srgb,var(--navy-mid) 70%,transparent) 0%, transparent 60%), linear-gradient(168deg,var(--navy) 0%,var(--abyss) 94%); } /* single off-centre foil column, depth without any flag geometry */ .hero::before{content:"";position:absolute;left:62%;top:-8%;width:1px;height:118%; background:linear-gradient(180deg,transparent,var(--gold) 22%,var(--champagne) 50%,var(--gold) 78%,transparent); opacity:.34;pointer-events:none; box-shadow:0 0 60px 14px color-mix(in srgb,var(--gold) 22%,transparent)} .hero-in{position:relative;z-index:2;display:grid;gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr;align-items:center} @media(min-width:920px){.hero-in{grid-template-columns:1.15fr .85fr}} .hero h1{ font-size:clamp(2.4rem,7.2vw,5.2rem);color:#fff;margin:0 0 1.15rem;text-wrap:balance; } .hero h1 .tm{font-size:.4em;vertical-align:super;letter-spacing:0} .hero h1 em{font-style:italic;font-weight:400} .deck{font-size:clamp(1.05rem,.5vw + 1rem,1.32rem);max-width:52ch; color:color-mix(in srgb,#fff 88%,transparent);margin:0 0 2.1rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center} .hero-note{ font-family:var(--ledger);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--azure);margin:1.7rem 0 0 } /* gilded cover */ .cover{ position:relative;aspect-ratio:5/7.6; background:linear-gradient(155deg,var(--navy-mid) 0%,var(--abyss) 72%); border:1px solid color-mix(in srgb,var(--gold) 52%,transparent); box-shadow:0 40px 70px -28px rgba(0,0,0,.75), 0 0 0 1px color-mix(in srgb,var(--champagne) 22%,transparent) inset; padding:clamp(1.35rem,2.4vw,2.15rem);display:flex;flex-direction:column;justify-content:space-between; max-width:380px;margin-inline:auto; } .cover::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--gold) 12%,transparent) 0%,transparent 62%)} .cover::after{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);pointer-events:none} .cover-top{position:relative;z-index:2;font-family:var(--ledger);font-size:.6rem;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-light)} .cover-title{position:relative;z-index:2;font-family:var(--display);font-size:clamp(1.5rem,3.1vw,2.15rem); line-height:1.02;color:#fff;margin:0} .cover-title span{display:block;font-style:italic;font-weight:400;font-size:.6em;margin-top:.4em} .cover-foot{position:relative;z-index:2;font-family:var(--ledger);font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--azure); border-top:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding-top:.75rem} /* ============ SECTIONS ============ */ section{padding:clamp(3.2rem,7vw,6rem) 0} .sec-head{max-width:var(--measure)} .sec-head h2{font-size:clamp(1.85rem,3.6vw,3rem);margin:0 0 1rem;text-wrap:balance;color:var(--navy)} .lede{font-size:clamp(1.02rem,.35vw + .95rem,1.2rem);color:var(--ink-soft);max-width:62ch} .on-dark{ color:var(--platinum); background: radial-gradient(100% 80% at 88% 0%, color-mix(in srgb,var(--royal) 34%,transparent) 0%, transparent 58%), linear-gradient(172deg,var(--navy) 0%,var(--abyss) 100%); } .on-dark h2,.on-dark h3{color:#fff} .on-dark .lede{color:color-mix(in srgb,#fff 84%,transparent)} /* thesis pull-quote */ .thesis blockquote{ margin:0;font-family:var(--display);font-size:clamp(1.6rem,4.2vw,3.15rem);line-height:1.12; color:var(--navy);max-width:26ch;text-wrap:balance; } .thesis blockquote em{font-style:italic} .thesis .attrib{font-family:var(--ledger);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-text);margin-top:1.7rem} .thesis-grid{display:grid;gap:clamp(1.8rem,4vw,3.5rem);grid-template-columns:1fr} @media(min-width:860px){.thesis-grid{grid-template-columns:1fr 1fr;align-items:start}} /* SIGNATURE: four-roles ledger */ .roles-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;padding:0;list-style:none} .roles-tab{ font-family:var(--ledger);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; background:transparent;color:color-mix(in srgb,#fff 78%,transparent);cursor:pointer; border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);padding:.62rem 1.05rem;border-radius:2px; transition:background .16s ease,color .16s ease,border-color .16s ease; } .roles-tab:hover{border-color:var(--gold);color:var(--gold-light)} .roles-tab[aria-selected="true"]{ background:linear-gradient(160deg,var(--champagne) 0%,var(--gold) 45%,#B8912B 100%); color:var(--abyss);border-color:var(--champagne);font-weight:600; } .roles{display:grid;gap:1px;background:color-mix(in srgb,var(--gold) 20%,transparent); grid-template-columns:1fr;border:1px solid color-mix(in srgb,var(--gold) 24%,transparent)} @media(min-width:640px){.roles{grid-template-columns:1fr 1fr}} @media(min-width:1040px){.roles{grid-template-columns:repeat(4,1fr)}} .role{background:var(--navy);padding:1.7rem 1.45rem;position:relative;min-height:100%; transition:background .3s ease,box-shadow .3s ease} .role .num{font-family:var(--ledger);font-size:.7rem;letter-spacing:.16em;color:var(--azure)} .role h3{font-family:var(--display);font-size:1.35rem;margin:.62rem 0 .55rem;color:#fff} .role p{font-size:.94rem;margin:0;color:color-mix(in srgb,#fff 82%,transparent)} .role .state{ display:inline-block;margin-top:1.05rem;font-family:var(--ledger);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;padding:.32rem .6rem;border-radius:2px; } .role[data-held="yes"]{ background:linear-gradient(160deg,var(--navy-mid) 0%,var(--navy) 100%); box-shadow:inset 3px 0 0 var(--gold),0 0 40px -14px color-mix(in srgb,var(--gold) 55%,transparent); } .role[data-held="yes"] .state{ background:linear-gradient(160deg,var(--champagne),var(--gold));color:var(--abyss);font-weight:600; } .role[data-held="no"]{background:var(--abyss)} .role[data-held="no"] .state{background:color-mix(in srgb,#fff 12%,transparent);color:var(--azure)} .roles-caption{font-size:1rem;color:color-mix(in srgb,#fff 86%,transparent);margin:1.7rem 0 0;max-width:60ch} /* chapters ledger */ .part{margin:0 0 2.5rem} .part-label{ display:flex;align-items:baseline;gap:.85rem;padding-bottom:.55rem;margin-bottom:.2rem; border-bottom:2px solid transparent;border-image:var(--foil-rule) 1; } .part-label .pn{font-family:var(--ledger);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)} .part-label h3{font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.68rem);color:var(--navy)} .chapters{list-style:none;margin:0;padding:0} .chapters li{display:flex;gap:1rem;align-items:baseline;padding:.75rem 0;border-bottom:1px dotted var(--platinum-dim)} .chapters .cn{font-family:var(--ledger);font-size:.8rem;color:var(--gold-text);flex:none;width:2.4rem;font-weight:500} .chapters .ct{font-weight:600;color:var(--navy)} .chapters .cd{display:block;font-size:.92rem;color:var(--ink-soft);font-weight:400;margin-top:.18rem} /* feature cards */ .split{display:grid;gap:clamp(1.8rem,4vw,3.4rem);grid-template-columns:1fr} @media(min-width:880px){.split{grid-template-columns:1fr 1fr}} .card{ background:#fff;border:var(--rule);border-left:3px solid var(--gold);padding:1.8rem 1.7rem; box-shadow:0 18px 40px -30px rgba(11,21,38,.45); } .on-dark .card{ background:color-mix(in srgb,#fff 6%,transparent); border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);border-left:3px solid var(--gold); box-shadow:none; } .card h3{font-size:1.28rem;margin:0 0 .62rem;color:var(--navy)} .on-dark .card h3{color:#fff} .card p{margin:0;font-size:.97rem;color:var(--ink-soft)} .on-dark .card p{color:color-mix(in srgb,#fff 84%,transparent)} /* honest-limits list */ .limits{list-style:none;margin:0;padding:0;display:grid;gap:.95rem} .limits li{display:flex;gap:.85rem;align-items:flex-start;font-size:1rem} .limits .tick{flex:none;width:.95rem;height:.95rem;margin-top:.4rem; background:linear-gradient(150deg,var(--champagne),var(--gold) 55%,var(--gold-deep)); transform:rotate(45deg)} /* author */ .author-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr} @media(min-width:820px){.author-grid{grid-template-columns:.8fr 1.2fr}} .creds{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem} .creds li{font-family:var(--ledger);font-size:.82rem;color:var(--ink-soft);padding-left:1.15rem;position:relative} .creds li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-deep))} .portrait{ aspect-ratio:4/5;background:linear-gradient(155deg,var(--navy-mid),var(--abyss)); border:1px solid color-mix(in srgb,var(--gold) 42%,transparent); display:grid;place-items:center;color:var(--azure); font-family:var(--ledger);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:1rem; box-shadow:0 30px 60px -34px rgba(0,0,0,.7); } /* order */ .order{ color:#fff;position:relative;overflow:hidden; background: radial-gradient(110% 90% at 15% 10%, color-mix(in srgb,var(--royal) 45%,transparent) 0%, transparent 60%), linear-gradient(168deg,var(--navy) 0%,var(--abyss) 100%); } .order::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px; background:var(--foil-rule);opacity:.5;pointer-events:none} .order-in{position:relative;z-index:2;max-width:70ch} .order h2{color:#fff;font-size:clamp(1.9rem,4vw,3.1rem)} .order .price{font-family:var(--ledger);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);margin:0 0 1.5rem} .order-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.9rem 0 0} .order-fine{font-size:.88rem;color:color-mix(in srgb,#fff 80%,transparent);margin:1.7rem 0 0;max-width:60ch} .searches{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem} .searches li{display:flex;gap:.6rem;align-items:baseline} .searches li::before{content:"›";color:var(--gold-text);font-weight:700;flex:none} .searches code{ font-family:var(--ledger);font-size:.85rem;color:var(--navy); background:color-mix(in srgb,var(--gold) 13%,transparent); border:1px solid color-mix(in srgb,var(--gold-deep) 26%,transparent); padding:.2rem .45rem;border-radius:2px; } .contact-strip{ margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.4rem,3vw,2rem); background:#fff;border:var(--rule);border-top:2px solid transparent;border-image:var(--foil-rule) 1; display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between; box-shadow:0 18px 40px -30px rgba(11,21,38,.45); } .contact-strip>div{max-width:62ch} /* FAQ */ details{border-bottom:var(--rule);padding:1.1rem 0} summary{cursor:pointer;font-weight:600;font-size:1.03rem;list-style:none;display:flex;gap:.85rem;align-items:baseline;color:var(--navy)} summary::-webkit-details-marker{display:none} summary::before{content:"+";font-family:var(--ledger);color:var(--gold-text);flex:none;font-weight:600} details[open] summary::before{content:"\2212"} details p{margin:.9rem 0 0 1.7rem;color:var(--ink-soft);font-size:.97rem;max-width:66ch} /* footer / disclosure */ .footer{background:var(--abyss);color:color-mix(in srgb,#fff 74%,transparent); padding:clamp(2.6rem,6vw,4rem) 0 2.4rem;font-size:.85rem; border-top:2px solid transparent;border-image:var(--foil-rule) 1} .footer h2{font-family:var(--ledger);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);margin:0 0 1.15rem;font-weight:500} .footer p{max-width:92ch;line-height:1.6} .footer .plain{color:color-mix(in srgb,#fff 88%,transparent);border-left:2px solid var(--gold); padding-left:1.05rem;margin-top:1.5rem} .footer-bottom{margin-top:2.2rem;padding-top:1.35rem;border-top:1px solid color-mix(in srgb,var(--gold) 22%,transparent); display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:var(--ledger); font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azure)} .skip{position:absolute;left:-9999px} .skip:focus{position:static;display:inline-block;margin:.5rem;padding:.5rem 1rem;background:var(--gold);color:var(--abyss)} /* ============ AUTHOR LANDING PAGE ============ */ .author-hero{ color:#fff;position:relative;overflow:hidden; background: radial-gradient(110% 90% at 82% 6%, color-mix(in srgb,var(--royal) 48%,transparent) 0%, transparent 60%), linear-gradient(168deg,var(--navy) 0%,var(--abyss) 100%); padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.4rem,5vw,4rem); } .author-hero h1{font-size:clamp(2.2rem,6vw,4rem);color:#fff;margin:0 0 .9rem} .author-hero .role-line{font-family:var(--ledger);font-size:.8rem;letter-spacing:.14em; text-transform:uppercase;color:var(--gold);margin:0 0 1.4rem} .q{max-width:var(--measure)} .q h2{font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--navy);margin:0 0 .7rem;text-wrap:balance} .q .answer{font-size:clamp(1.02rem,.3vw + .98rem,1.14rem);color:var(--ink);font-weight:500} .q p{color:var(--ink-soft)} .qblock{padding:1.9rem 0;border-bottom:1px dotted var(--platinum-dim)} .qblock:last-child{border-bottom:0} .lic{display:grid;gap:1px;background:color-mix(in srgb,var(--gold) 22%,transparent); border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);grid-template-columns:1fr;margin-top:1.6rem} @media(min-width:760px){.lic{grid-template-columns:1fr 1fr}} .lic-row{background:#fff;padding:1.15rem 1.25rem} .lic-row .j{font-family:var(--ledger);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)} .lic-row .t{font-weight:600;color:var(--navy);margin:.35rem 0 .2rem} .lic-row .b{font-size:.9rem;color:var(--ink-soft);margin:0} .verify{background:#fff;border:var(--rule);border-left:3px solid var(--gold); padding:clamp(1.3rem,3vw,1.9rem);margin-top:1.8rem} .verify h3{font-size:1.15rem;margin:0 0 .7rem;color:var(--navy)} .verify ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--ink-soft);font-size:.95rem} .verify li{margin-bottom:.4rem} .note{font-size:.88rem;color:var(--ink-soft);margin-top:1rem} .on-dark .note{color:color-mix(in srgb,#fff 76%,transparent)} .backlink{font-family:var(--ledger);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--royal);text-decoration:none;display:inline-block;margin-bottom:1.6rem} .backlink:hover{color:var(--gold-text)} /* Chapter 7 benefit-group breakdown */ .groups{list-style:none;margin:.85rem 0 .2rem;padding:0;display:grid;gap:.3rem; border-left:2px solid color-mix(in srgb,var(--gold) 45%,transparent);padding-left:.9rem} .groups li{display:block;font-size:.88rem;color:var(--ink-soft);padding:0;border:0} .groups .gr{font-family:var(--ledger);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:var(--gold-text);margin-right:.5rem} @media(min-width:760px){.groups{grid-template-columns:1fr 1fr;gap:.3rem 1.4rem}} /* four-roles: plain-language gloss beside each role name */ .role h3 .gloss{ display:block;font-family:var(--ledger);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; font-weight:400;color:var(--azure);margin-top:.4rem; } .role[data-held="yes"] h3 .gloss{color:var(--gold-light)} /* ============ BENEFIT ARTICLES ============ */ .article{max-width:72ch} .article h2{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--navy); margin:2.2rem 0 .8rem;line-height:1.15} .article h2:first-child{margin-top:0} .article p{color:var(--ink);font-size:clamp(1rem,.3vw + .96rem,1.08rem);line-height:1.72;margin:0 0 1.05em} .article .blist{list-style:none;margin:.4rem 0 1.3rem;padding:0;display:grid;gap:.55rem; border-left:2px solid color-mix(in srgb,var(--gold) 45%,transparent);padding-left:1.1rem} .article .blist li{color:var(--ink-soft);font-size:.98rem} /* prev / hub / next */ .prevnext{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; border-top:2px solid transparent;border-image:var(--foil-rule) 1;padding-top:1.4rem} .pn-link,.pn-hub{font-family:var(--ledger);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:var(--royal);padding:.55rem .9rem;border:1px solid var(--platinum-dim); border-radius:2px;background:#fff;transition:border-color .16s ease,color .16s ease} .pn-link:hover,.pn-hub:hover{border-color:var(--gold);color:var(--gold-text)} .pn-hub{color:var(--gold-text);font-weight:500} /* ============ BENEFIT HUB GRID ============ */ .bgrid{display:grid;gap:1px;background:color-mix(in srgb,var(--navy) 12%,transparent); border:1px solid color-mix(in srgb,var(--navy) 12%,transparent);grid-template-columns:1fr} @media(min-width:640px){.bgrid{grid-template-columns:1fr 1fr}} @media(min-width:1040px){.bgrid{grid-template-columns:1fr 1fr 1fr}} .bcard{display:flex;gap:.85rem;align-items:flex-start;background:#fff;padding:1.15rem 1.1rem; text-decoration:none;transition:background .16s ease,box-shadow .16s ease} .bcard:hover{background:color-mix(in srgb,var(--gold) 7%,#fff); box-shadow:inset 3px 0 0 var(--gold)} .bcard .bn{font-family:var(--ledger);font-size:.78rem;color:var(--gold-text);flex:none; font-weight:500;padding-top:.15rem;min-width:1.9rem} .bcard .bt{color:var(--navy);font-size:.96rem;line-height:1.4;font-weight:500} /* Georgia-only tuning: the face is wider, with old-style figures */ body{font-size:clamp(1rem,.32vw + .96rem,1.09rem);line-height:1.68} h1,h2,h3{letter-spacing:-.005em} .navlinks a,.eyebrow,.role .num,.chapters .cn,.part-label .pn,.cover-top,.cover-foot, .footer h2,.footer-bottom,.pn-link,.pn-hub,.bcard .bn,.role .state,.roles-tab,.gbtn .g, .author-hero .role-line,.lic-row .j,.groups .gr,.backlink{ font-variant-numeric:lining-nums; } .article p{max-width:none} .article{max-width:68ch} /* ============ END-OF-PAGE CTA ============ */ .endcta{ color:#fff;position:relative;overflow:hidden;padding:clamp(2.6rem,5.5vw,4.2rem) 0; background: radial-gradient(100% 90% at 20% 0%, color-mix(in srgb,var(--royal) 42%,transparent) 0%, transparent 62%), linear-gradient(168deg,var(--navy) 0%,var(--abyss) 100%); border-top:2px solid transparent;border-image:var(--foil-rule) 1; } .endcta-in{max-width:64ch} .endcta h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0 0 .9rem;text-wrap:balance} .endcta p{color:color-mix(in srgb,#fff 86%,transparent);margin:0 0 1rem} .endcta-actions{margin:1.5rem 0 0!important} .endcta-note{ font-size:.82rem!important;color:var(--azure)!important;margin:1.3rem 0 0!important;line-height:1.6; } /* nav without a brand mark: centred, wraps cleanly on small screens */ .topbar-in{justify-content:center} .navlinks{flex-wrap:wrap;justify-content:center;row-gap:.5rem} @media(max-width:520px){ .navlinks{gap:.9rem} .navlinks a{font-size:.7rem} } /* header: compact logo left, nav right */ .topbar-in{justify-content:space-between!important} .mark{gap:0} .mark-glyph{font-size:.82rem;letter-spacing:.07em;padding:.32rem .48rem} @media(max-width:760px){ .topbar-in{justify-content:center!important;gap:.6rem} .navlinks{justify-content:center} } /* ============ DISCLOSURE BOX, light blue on navy, gold border ============ */ .disclosure-box{ background:var(--navy); border:2px solid var(--gold); border-radius:3px; padding:clamp(1.3rem,3vw,2rem); margin:0 0 1.6rem; color:#A8C8EE; /* light blue, 9.83:1 on navy */ box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent) inset, 0 20px 44px -30px rgba(0,0,0,.6); } .disclosure-box p{margin:0 0 .85rem;font-size:.95rem;line-height:1.65;color:#A8C8EE} .disclosure-box p:last-child{margin-bottom:0} .disclosure-box strong{color:#DCEAFB;font-weight:700} .disclosure-box .db-title{ font-family:var(--display);font-size:clamp(1.05rem,2vw,1.3rem);font-weight:700; color:var(--gold);margin-bottom:1rem;line-height:1.25; } .disclosure-box .db-foot{ margin-top:1.1rem;padding-top:.9rem;font-size:.9rem; border-top:1px solid color-mix(in srgb,var(--gold) 40%,transparent); color:#BBD5F2; } /* footer variant, sits at the very top of the footer on every page */ .footer .disclosure-box{margin:0 0 2rem} /* ============ CALCULATOR ============ */ .calc{ background:#fff;border:var(--rule);border-top:3px solid var(--gold); padding:clamp(1.4rem,3.4vw,2.4rem);box-shadow:0 20px 46px -34px rgba(11,21,38,.5); } .calc-h{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--navy);margin:0 0 .5rem} .calc-note{color:var(--ink-soft);font-size:.94rem;margin:0 0 1.6rem} .calc-grid{display:grid;gap:1.1rem;grid-template-columns:1fr} @media(min-width:760px){.calc-grid{grid-template-columns:1fr 1fr}} .calc-field label{display:block;font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:.4rem;line-height:1.35} .calc-input{display:flex;align-items:stretch;border:1px solid var(--platinum-dim);border-radius:2px;overflow:hidden;background:#fff} .calc-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)} .calc-input .cur{display:flex;align-items:center;padding:0 .7rem;background:var(--platinum); color:var(--ink-soft);font-size:.95rem;border-right:1px solid var(--platinum-dim)} .calc-field input,.calc-field select{ width:100%;border:0;padding:.8rem .9rem;font-family:var(--body);font-size:1rem;color:var(--ink); background:#fff;outline:none; } .calc-field select{border:1px solid var(--platinum-dim);border-radius:2px} .calc-field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)} .calc-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem} .btn-ghost-dark{border:1px solid var(--platinum-dim);color:var(--navy);background:#fff; font-family:var(--body);font-weight:600;font-size:.95rem;padding:.9rem 1.7rem;border-radius:2px;cursor:pointer} .btn-ghost-dark:hover{border-color:var(--gold);color:var(--gold-text)} #calcBtn{cursor:pointer;border:0} .calc-result{margin-top:2rem;padding-top:1.6rem;border-top:2px solid transparent;border-image:var(--foil-rule) 1} .calc-result h3{font-family:var(--display);font-size:1.4rem;color:var(--navy);margin:0 0 1.1rem} .calc-result p{color:var(--ink);font-size:1rem;line-height:1.7;margin:0 0 1rem} .res-figures{display:grid;gap:1px;background:color-mix(in srgb,var(--navy) 12%,transparent); border:1px solid color-mix(in srgb,var(--navy) 12%,transparent);grid-template-columns:1fr;margin-bottom:1.4rem} @media(min-width:640px){.res-figures{grid-template-columns:repeat(3,1fr)}} .rf{background:var(--platinum);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.3rem} .rf-l{font-size:.78rem;color:var(--ink-soft);line-height:1.3} .rf-v{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--navy)} .res-band{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700; color:var(--gold-text);margin:0 0 1rem!important} .res-sub{font-weight:700;color:var(--navy);margin-top:1.4rem!important;margin-bottom:.5rem!important} .res-priv{font-size:.86rem!important;color:var(--ink-soft)!important;margin-top:1.4rem!important; padding-top:.8rem;border-top:1px dotted var(--platinum-dim)} /* disclosure-box call to action link */ .disclosure-box .db-link{ display:inline-block;color:var(--gold);font-weight:700;text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 55%,transparent);padding-bottom:2px; } .disclosure-box .db-link:hover{color:#FFF0B3;border-bottom-color:#FFF0B3} /* ============ AUTHOR BAND, sits directly above the footer on every page ============ */ .authorband{ color:var(--platinum);padding:clamp(2.6rem,5.5vw,4rem) 0; background: radial-gradient(90% 80% at 85% 10%, color-mix(in srgb,var(--royal) 30%,transparent) 0%, transparent 60%), linear-gradient(172deg,var(--navy-mid) 0%,var(--navy) 100%); border-top:2px solid transparent;border-image:var(--foil-rule) 1; } .authorband h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .8rem;text-wrap:balance} .ab-lede{color:color-mix(in srgb,#fff 84%,transparent);max-width:62ch;margin:0 0 2rem;font-size:1rem} .ab-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr} @media(min-width:880px){.ab-grid{grid-template-columns:.85fr 1.15fr}} .ab-h{font-family:var(--display);font-size:1.15rem;font-weight:700;color:#fff;margin:0 0 .5rem} .ab-p{color:color-mix(in srgb,#fff 80%,transparent);font-size:.95rem;margin:0 0 1.2rem;max-width:44ch} .authorband .ab-note{font-size:.85rem;color:var(--azure);margin:1.1rem 0 0;line-height:1.6;max-width:66ch} /* grouped search suggestions on the author page */ .sg-h{ font-family:var(--ledger);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);margin:1.5rem 0 .6rem;font-weight:600; } .sg-h:first-of-type{margin-top:.6rem} .card .sg-h{color:var(--gold)} .note code{ font-family:var(--ledger);font-size:.82em;background:color-mix(in srgb,var(--gold) 14%,transparent); padding:.1rem .3rem;border-radius:2px; } /* ============ NOT-A-BANK NOTICE, slim, quiet, dismissible ============ */ .notabank{ background:color-mix(in srgb,var(--navy) 96%,#000); border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent); color:#A8C8EE;padding:.5rem 0; transition:opacity .2s ease, transform .2s ease; } .notabank.nb-gone{opacity:0;transform:translateY(-6px)} .nb-in{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between} .nb-text{ margin:0;font-size:.78rem;line-height:1.5;color:color-mix(in srgb,#A8C8EE 92%,transparent); max-width:104ch; } .nb-text strong{color:#DCEAFB;font-weight:700} .notabank a{color:var(--gold);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)} .notabank a:hover{color:#FFF0B3} .nb-x{ flex:none;display:inline-flex;align-items:center;gap:.4rem; background:transparent;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent); color:var(--gold); padding:.24rem .6rem;border-radius:2px;cursor:pointer;line-height:1; font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.04em; transition:color .15s ease,border-color .15s ease,background .15s ease; } .nb-x-l{white-space:nowrap} .nb-x-i{font-size:1.05rem;line-height:1;margin-top:-1px} .nb-x:hover{background:var(--gold);color:var(--abyss);border-color:var(--gold)} .nb-x:focus-visible{outline:3px solid var(--gold);outline-offset:2px} @media(max-width:620px){ .nb-text{font-size:.74rem} .nb-x{padding:.3rem .6rem} } /* ============ CONSENT BAR ============ */ .cbar{ position:fixed;left:0;right:0;bottom:0;z-index:9000; background:var(--abyss);border-top:2px solid var(--gold); box-shadow:0 -18px 50px -20px rgba(0,0,0,.8);color:#A8C8EE; max-height:86vh;overflow-y:auto; } .cbar-in{max-width:1280px;margin-inline:auto;padding:1rem var(--gutter); display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap} /* Accept and Reject are visually identical, refusal must be as easy as acceptance */ .cbar-panel{border-top:1px solid color-mix(in srgb,#fff 14%,transparent);background:color-mix(in srgb,#fff 4%,transparent)} .footer-bottom a{color:var(--gold);text-decoration:none} .footer-bottom a:hover{color:#FFF0B3} @media(max-width:760px){ } /* real cover art, when the file is present */ .cover-img{ display:block;width:100%;height:auto;max-width:380px;margin-inline:auto; border:1px solid color-mix(in srgb,var(--gold) 52%,transparent); box-shadow:0 40px 70px -28px rgba(0,0,0,.75); } /* ============ PAGE BANDS ============ */ .pageband{margin:0;padding:0;line-height:0;background:var(--navy)} .pageband img{display:block;width:100%;height:auto;max-height:190px;object-fit:cover} @media(max-width:760px){.pageband img{max-height:120px}} /* ============ INFOGRAPHICS ============ */ .infographic{ margin:2.4rem 0;padding:1.4rem;background:var(--navy); border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);border-radius:3px; } .infographic img{display:block;width:100%;height:auto;border-radius:2px} .info-labels{ display:grid;gap:.6rem;list-style:none;margin:1rem 0 0;padding:0; grid-template-columns:1fr;counter-reset:il; } @media(min-width:700px){ .infographic[data-cols="4"] .info-labels{grid-template-columns:repeat(4,1fr)} .infographic[data-cols="3"] .info-labels{grid-template-columns:repeat(3,1fr)} .infographic[data-cols="2"] .info-labels{grid-template-columns:repeat(2,1fr)} } .info-labels li{ counter-increment:il;color:#DCEAFB;font-size:.86rem;line-height:1.35; padding-top:.5rem;border-top:1px solid color-mix(in srgb,var(--gold) 42%,transparent); } .info-labels li::before{ content:counter(il,decimal-leading-zero);display:block; font-family:var(--ledger);font-size:.66rem;letter-spacing:.14em;color:var(--gold);margin-bottom:.25rem; } .infographic figcaption{ margin-top:1.1rem;padding-top:.9rem;font-size:.84rem;line-height:1.6;color:#A8C8EE; border-top:1px dotted color-mix(in srgb,#fff 22%,transparent); } /* home hero background image, layered under the existing gradients */ /* ============ PAGE BAND ============ */ .pageband{margin:0;padding:0;line-height:0;background:var(--navy)} .pageband img{display:block;width:100%;height:auto;max-height:190px;object-fit:cover;object-position:center} @media(max-width:760px){.pageband img{max-height:130px}} /* hero photograph, layered over the existing gradients; absent file simply falls back */ .hero .wrap{position:relative;z-index:1} /* ============ INFOGRAPHIC ============ */ .infographic{margin:2.2rem 0;padding:0} .infographic img{ display:block;width:100%;height:auto; border:1px solid color-mix(in srgb,var(--navy) 14%,transparent); background:var(--navy); } .ig-labels{ display:grid;gap:1px;background:color-mix(in srgb,var(--navy) 14%,transparent); border:1px solid color-mix(in srgb,var(--navy) 14%,transparent);border-top:0; } .ig-labels[data-cols="2"]{grid-template-columns:1fr 1fr} .ig-labels[data-cols="3"]{grid-template-columns:repeat(3,1fr)} .ig-labels[data-cols="4"]{grid-template-columns:1fr} @media(min-width:620px){.ig-labels[data-cols="4"]{grid-template-columns:repeat(4,1fr)}} .ig-labels span{ background:var(--platinum);padding:.6rem .7rem;text-align:center; font-family:var(--ledger);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:var(--navy);font-weight:600;line-height:1.3; } .infographic figcaption{ margin-top:.8rem;font-size:.88rem;color:var(--ink-soft);line-height:1.6;max-width:70ch; } /* ═══════════════════════════════════════════════════════════ LOOK & FEEL; depth pass The gradient is ALWAYS the base. An image, if present, layers over it as an enhancement, so the hero never depends on a file that may not exist yet. ═══════════════════════════════════════════════════════════ */ /* language switch in the nav: the only one on the page */ .navlinks .nav-lang{ border:1px solid color-mix(in srgb,var(--gold) 55%,transparent); border-radius:2px;padding:.3rem .62rem;color:var(--gold); letter-spacing:.14em; } .navlinks .nav-lang::after{display:none} .navlinks .nav-lang:hover{background:var(--gold);color:var(--abyss);border-color:var(--gold)} /* ============ LANGUAGE SWITCH, one control, unmistakably a toggle ============ */ .nav-lang-wrap{display:flex;align-items:center} .langsw{ display:inline-flex;align-items:stretch;border:1px solid color-mix(in srgb,var(--gold) 62%,transparent); border-radius:3px;overflow:hidden;line-height:1; box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%,transparent); } .langsw .lang-on,.langsw .lang-off{ font-family:var(--body);font-size:.76rem;font-weight:700;letter-spacing:.14em; padding:.42rem .72rem;text-decoration:none;transition:background .18s ease,color .18s ease; display:inline-flex;align-items:center; } .langsw .lang-on{background:linear-gradient(160deg,var(--champagne),var(--gold) 52%,#B8912B);color:var(--abyss);cursor:default} .langsw .lang-off{background:transparent;color:var(--gold)} .langsw .lang-off::after{display:none} .langsw .lang-off:hover,.langsw .lang-off:focus-visible{background:color-mix(in srgb,var(--gold) 22%,transparent);color:#FFF0B3} .langsw .lang-off:focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* ============ THE WOW, language transition curtain ============ */ #langveil{ position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;place-items:center; background:linear-gradient(150deg,var(--navy) 0%,var(--abyss) 100%); clip-path:circle(0% at var(--vx,90%) var(--vy,6%)); transition:clip-path .62s cubic-bezier(.7,0,.25,1); } #langveil.on{clip-path:circle(150% at var(--vx,90%) var(--vy,6%))} #langveil .lv-word{ font-family:var(--display);font-size:clamp(2.2rem,7vw,5rem);color:#fff;letter-spacing:-.02em; opacity:0;transform:translateY(14px);transition:opacity .34s ease .16s,transform .34s ease .16s; text-align:center;padding:0 1rem; } #langveil.on .lv-word{opacity:1;transform:none} #langveil .lv-rule{ position:absolute;left:50%;transform:translateX(-50%);bottom:38%;width:0;height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transition:width .5s ease .18s; } #langveil.on .lv-rule{width:min(340px,60vw)} @media(prefers-reduced-motion:reduce){ #langveil,#langveil .lv-word,#langveil .lv-rule{transition:none} } /* ============ COMPOUNDING COLUMNS MOTIF ============ */ .explains-grid{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start} @media(min-width:960px){.explains-grid{grid-template-columns:2fr 1fr;gap:3rem}} .cmp-col{justify-self:center} @media(min-width:960px){.cmp-col{justify-self:end}} .compound{ position:relative;width:100%;max-width:332px;aspect-ratio:1/1; /* 255px x 1.3 */ border-radius:8px;overflow:hidden;perspective:1000px; background-color:#0A1B3D; background-image: radial-gradient(88% 78% at 24% 6%, rgba(27,75,147,.5) 0%, rgba(27,75,147,0) 62%), linear-gradient(168deg,#12305F 0%,#0A1B3D 56%,#050D1F 100%); box-shadow:0 22px 50px -26px rgba(5,13,31,.7), inset 0 0 0 1px rgba(212,175,55,.3); transition:box-shadow .4s ease; } .compound:hover{box-shadow:0 30px 64px -24px rgba(5,13,31,.82), inset 0 0 0 1px rgba(212,175,55,.55)} .cmp-stage{position:absolute;inset:0;transform-style:preserve-3d; animation:cmpSway 13s ease-in-out infinite alternate;transition:transform .28s ease-out} .compound:hover .cmp-stage{animation-play-state:paused} @keyframes cmpSway{from{transform:rotateX(2.5deg) rotateY(-6deg)}to{transform:rotateX(-1.5deg) rotateY(6deg)}} .cmp-svg{position:absolute;inset:0;width:100%;height:100%} /* at rest until scrolled into view; then they rise once and stay */ .cmp-col-el{transform-origin:center bottom;transform:scaleY(0);opacity:.25} .compound.is-up .cmp-col-el{animation:cmpRise 1.5s cubic-bezier(.16,.9,.28,1) forwards} @keyframes cmpRise{from{transform:scaleY(0);opacity:.25}to{transform:scaleY(1);opacity:1}} .glint{transform:translateX(-45%);opacity:0} .compound.is-up .glint{animation:cmpGlide 7.5s cubic-bezier(.42,0,.28,1) infinite 1.6s} @keyframes cmpGlide{ 0%,52%{transform:translateX(-45%);opacity:0} 60%{opacity:.75}82%{transform:translateX(125%);opacity:0}100%{transform:translateX(125%);opacity:0}} /* title beneath the motif */ .cmp-title{ font-family:var(--display);font-weight:700; font-size:clamp(1.12rem,1.5vw,1.42rem);line-height:1.2; color:#0F4C9C; /* clear blue, 8.29:1 on white */ margin:1rem 0 .4rem;max-width:332px;text-wrap:balance; } .cmp-fine{font-size:.7rem;color:#6B7583;margin:0;line-height:1.5;max-width:332px} @media(min-width:960px){ .cmp-title,.cmp-fine{text-align:right;margin-left:auto} } /* narrower measure in the text column */ .explains-grid .sec-head h2{max-width:19ch} .explains-grid .sec-head .lede{max-width:52ch} @media(prefers-reduced-motion:reduce){ .cmp-stage{animation:none;transform:none} .cmp-col-el{transform:scaleY(1);opacity:1;animation:none} .glint{display:none} } .compound.no-io .cmp-col-el{transform:scaleY(1);opacity:1} /* ══════════ "WHAT THIS BOOK TEACHES", make it obviously clickable ══════════ */ /* the unselected tab was muted white, which reads as disabled. It is now gold. */ .roles-tab[aria-selected="false"]{ color:var(--gold); border-color:color-mix(in srgb,var(--gold) 68%,transparent); background:color-mix(in srgb,var(--gold) 9%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 10%,transparent); } .roles-tab[aria-selected="false"]:hover{ background:color-mix(in srgb,var(--gold) 22%,transparent); border-color:var(--gold);color:#FFF0B3;transform:translateY(-2px); } .roles-tab{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .3s ease} /* two-sided face so the flip never shows mirrored text */ #tab-book{perspective:600px;overflow:visible} .rt-inner{position:relative;display:inline-block;transform-style:preserve-3d} .rt-face{display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden} .rt-back{ position:absolute;inset:0;transform:rotateY(180deg); display:flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap; } .rt-arrow{font-size:1.05em;line-height:1} /* the attention cue: a slow coin-flip every 5s, until the visitor clicks */ #tab-book[aria-selected="false"]:not(.rt-seen) .rt-inner{ animation:rtFlip 5s cubic-bezier(.5,0,.35,1) infinite; } @keyframes rtFlip{ 0%,60% {transform:rotateY(0deg)} 70% {transform:rotateY(180deg)} 82% {transform:rotateY(180deg)} 92%,100% {transform:rotateY(360deg)} } /* a gold pulse under the button, timed to the flip */ #tab-book[aria-selected="false"]:not(.rt-seen){ animation:rtGlow 5s ease-in-out infinite; } @keyframes rtGlow{ 0%,58% {box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 10%,transparent)} 72% {box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 34%,transparent),0 8px 26px -10px rgba(212,175,55,.65)} 90%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 10%,transparent)} } /* the flip and pulse stop for good once either tab is used */ #tab-book.rt-seen .rt-inner{animation:none;transform:none} #tab-book.rt-seen{animation:none} @media(prefers-reduced-motion:reduce){ #tab-book[aria-selected="false"]:not(.rt-seen) .rt-inner, #tab-book[aria-selected="false"]:not(.rt-seen){animation:none} .rt-back{display:none} } /* ══════════ TOP MENU, two golden shining bars ══════════ */ /* The bars sit INSIDE the header at top:0 / bottom:0 with an explicit z-index. The earlier version placed them in the border area at negative offsets, where the sticky header's backdrop-filter could clip them. Do not reintroduce that. */ .topbar{ position:-webkit-sticky;position:sticky;top:0;z-index:60; border-top:0;border-bottom:0; padding-top:3px;padding-bottom:2px; overflow:visible; /* option E, indigo lean. Literal fallback first so the bar can never collapse. */ background-color:#1B3070; background-image: /* cross-weave texture */ repeating-linear-gradient(135deg, rgba(255,255,255,.032) 0 1px, transparent 1px 5px), repeating-linear-gradient(45deg, rgba(255,255,255,.016) 0 1px, transparent 1px 7px), /* cool light from the upper left */ radial-gradient(130% 180% at 16% -30%, rgba(130,150,255,.18) 0%, rgba(130,150,255,0) 62%), /* depth. The 0% stop is capped at #20387F: any lighter and the gold switch fails AA. */ linear-gradient(178deg, #20387F 0%, #1B3070 54%, #132155 100%); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px -18px rgba(5,13,31,.9); } .goldbar{ position:absolute;left:0;right:0;z-index:3; overflow:hidden;pointer-events:none; transition:box-shadow .5s ease; background-image:linear-gradient(180deg, #6B5214 0%, #8A6A1F 18%, #D4AF37 46%, #F7EBC2 56%, #D4AF37 68%, #8A6A1F 88%, #6B5214 100%); background-color:#D4AF37; /* visible even if the gradient fails */ } .goldbar--top{top:0;height:3px} .goldbar--bottom{bottom:0;height:2px} .goldbar::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:22%; background-image:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,246,214,.55) 38%, rgba(255,255,255,.95) 50%, rgba(255,246,214,.55) 62%, rgba(255,255,255,0) 100%); filter:blur(.4px);transform:translateX(-140%);opacity:0; } .goldbar.is-shining::after{animation:barSweep 1.6s cubic-bezier(.36,.06,.28,1) forwards} .goldbar.is-shining{box-shadow:0 0 10px rgba(212,175,55,.42)} @keyframes barSweep{ 0%{transform:translateX(-140%);opacity:0} 12%{opacity:1}88%{opacity:1} 100%{transform:translateX(560%);opacity:0} } /* ══════════ IFS LOGO, 1s glint every 4.5s ══════════ */ .mark-glyph{position:relative;overflow:hidden;transition:box-shadow .45s ease} .mark-glyph::after{ content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:46%; background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85) 50%,rgba(255,255,255,0)); transform:translateX(-180%) rotate(18deg);opacity:0;pointer-events:none; } .mark-glyph.is-shining::after{animation:logoGlint 1s cubic-bezier(.4,.05,.3,1) forwards} .mark-glyph.is-shining{box-shadow:0 0 12px rgba(247,235,194,.7)} @keyframes logoGlint{ 0%{transform:translateX(-180%) rotate(18deg);opacity:0} 15%{opacity:1}85%{opacity:1} 100%{transform:translateX(320%) rotate(18deg);opacity:0} } @media(prefers-reduced-motion:reduce){ .goldbar::after,.mark-glyph::after{display:none} .goldbar.is-shining,.mark-glyph.is-shining{box-shadow:none} } /* ============ AUTHOR BYLINE, E-E-A-T signal on every article ============ */ .byline{ font-size:.82rem;line-height:1.55;margin:1rem 0 0; color:color-mix(in srgb,#fff 78%,transparent); padding-top:.85rem;border-top:1px solid color-mix(in srgb,var(--gold) 30%,transparent); max-width:66ch; } .byline a{color:var(--gold);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)} .byline a:hover{color:#FFF0B3} .byline .by-cred{ display:block;font-size:.72rem;letter-spacing:.02em;margin-top:.28rem; color:var(--azure); } /* on light sections the byline needs dark text */ main > section:not(.on-dark):not(.author-hero):not(.hero):not(.endcta) .byline{ color:var(--ink-soft);border-top-color:var(--platinum-dim); } main > section:not(.on-dark):not(.author-hero):not(.hero):not(.endcta) .byline a{color:var(--gold-text)} main > section:not(.on-dark):not(.author-hero):not(.hero):not(.endcta) .byline .by-cred{color:#6B7583} /* ============ WEBMEDIA: content-derived section diagram ============ */ .wm-fig{margin:2.4rem 0;padding:0;max-width:100%} .wm{width:100%;height:auto;display:block;border-radius:6px; box-shadow:0 20px 44px -28px rgba(5,13,31,.6)} .on-dark .wm{box-shadow:0 20px 44px -28px rgba(0,0,0,.7)} @media(max-width:600px){.wm-fig{margin:1.6rem 0}} /* ============ WEBMEDIA v2 ============ */ .wm-openfig{margin:1.4rem 0 2rem;padding:0;max-width:100%} .wm-open{width:100%;height:auto;display:block;border-radius:6px} .wm-fig{margin:2.4rem 0;padding:0;max-width:100%} .wm{width:100%;height:auto;display:block;border-radius:6px; box-shadow:0 20px 44px -28px rgba(5,13,31,.55)} .wm-cta{ display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;justify-content:space-between; margin:2.6rem 0;padding:1.5rem 1.7rem;border-radius:5px; background-color:#0A1B3D; background-image:radial-gradient(90% 80% at 12% 0%, rgba(27,75,147,.42) 0%, rgba(27,75,147,0) 62%), linear-gradient(168deg,#0A1B3D 0%,#050D1F 100%); box-shadow:inset 0 0 0 1px rgba(212,175,55,.3); } .wm-cta-t{font-family:var(--display);font-size:1.12rem;font-weight:700;color:#fff;margin:0 0 .35rem} .wm-cta-p{font-size:.92rem;color:rgba(255,255,255,.82);margin:0;max-width:54ch} .wm-cta-a{margin:0;flex:none} @media(max-width:640px){.wm-cta{padding:1.2rem 1.2rem}.wm-cta-a{width:100%}.wm-cta-a .btn{display:block;text-align:center}} /* nav on the lighter navy */ .navlinks a{color:#EEF3FA} .navlinks a:hover{color:var(--champagne)} .topbar .mark-glyph{box-shadow:0 2px 10px -4px rgba(5,13,31,.75)} /* ============ WIDER READING COLUMN FOR THE 1280 CONTAINER ============ */ /* The container is 1280px. A single column of prose filling it outright would run 116-150 characters per line, well past the point where the eye loses its place returning to the next line. So the measure widens to 88 characters and the type grows with it: the column gets physically wider without the line getting harder to read. */ :root{--measure:100%} .article{max-width:var(--measure)} .article p{font-size:clamp(1.06rem,.34vw + 1rem,1.19rem);line-height:1.68} .article h2{font-size:clamp(1.4rem,2.5vw,1.95rem)} .article h3{font-size:clamp(1.12rem,1.6vw,1.32rem)} .article .blist li{font-size:1.04rem;line-height:1.62} .sec-head{max-width:var(--measure)} .sec-head .lede,.lede{max-width:78ch;font-size:clamp(1.06rem,.36vw + 1rem,1.24rem)} .q{max-width:var(--measure)} .q .answer{font-size:clamp(1.06rem,.32vw + 1.02rem,1.2rem)} .q p{font-size:clamp(1.02rem,.3vw + .98rem,1.14rem);line-height:1.68} /* the visuals are not prose, so they take the full container */ .wm-fig,.wm-openfig,.wm-cta{max-width:100%} /* the explainer block keeps its two-thirds / one-third split, now off 1280 */ @media(min-width:960px){ .explains-grid{grid-template-columns:2fr 1fr;gap:3.4rem} .explains-grid .sec-head h2{max-width:22ch} .explains-grid .sec-head .lede{max-width:60ch} } /* very wide screens: hold the line length, let the margins take the excess */ @media(min-width:1500px){ .article p,.q p{font-size:1.2rem} } /* ============ FULL-WIDTH READING COLUMN ============ */ /* Text fills the 1280px container. Long lines need more leading to track, so line-height rises with the measure: without it the eye drops a line on the return sweep. Type is also larger, which lowers the character count. */ :root{--measure:100%} .article,.sec-head,.q,.explains-grid .sec-head{max-width:100%} .article p,.q p,.q .answer{ max-width:100%; font-size:clamp(1.08rem,.42vw + 1rem,1.28rem); line-height:1.85; } .lede,.sec-head .lede{max-width:100%;font-size:clamp(1.1rem,.45vw + 1rem,1.34rem);line-height:1.72} .article .blist li{font-size:clamp(1.04rem,.36vw + .98rem,1.2rem);line-height:1.75;max-width:100%} .article h2{font-size:clamp(1.5rem,3vw,2.2rem)} .article h3{font-size:clamp(1.18rem,1.9vw,1.45rem)} /* paragraph spacing opens up with the measure, so blocks stay distinct */ .article p{margin:0 0 1.25em} /* the explainer block keeps its 2/3 - 1/3 split */ @media(min-width:960px){ .explains-grid{grid-template-columns:2fr 1fr;gap:3.4rem} .explains-grid .sec-head h2{max-width:100%} .explains-grid .sec-head .lede{max-width:100%} } /* ============ FOOTER AND STANDING BLOCKS AT THE FULL 1280 ============ */ /* These carried their own narrower caps, so they stayed short while the body text widened. Everything below now fills the container, with the same raised leading that makes a long line trackable. */ .footer .wrap,.notabank .wrap,.endcta .wrap,.authorband .wrap,.order .wrap{max-width:1280px} .footer p,.footer .disclosure-box p{max-width:100%;line-height:1.8} .disclosure-box{max-width:100%} .disclosure-box p{max-width:100%;line-height:1.8} .nb-text{max-width:100%;line-height:1.75} .endcta-in{max-width:100%} .endcta-in p{max-width:100%;line-height:1.8} .authorband .ab-lede,.authorband .ab-p,.authorband .ab-note{max-width:100%;line-height:1.75} .order-in,.order-fine{max-width:100%;line-height:1.75} .byline{max-width:100%} .roles-caption{max-width:100%} .contact-strip>div{max-width:100%} details p{max-width:100%;line-height:1.78} .infographic figcaption{max-width:100%} .wm-cta-p{max-width:100%} .deck{max-width:100%} /* the footer's own columns spread across the wider container */ @media(min-width:900px){ .footer .disclosure-box{padding-inline:2rem} } /* final measure reconciliation: these selectors carried their own caps earlier in the file. Declared last so the cascade resolves to the container width. */ .lede{max-width:100%} .ab-p,.ab-lede,.ab-note{max-width:100%} .order-in,.order-fine{max-width:100%} .footer p{max-width:100%} .sec-head .lede{max-width:100%} /* ============ TEXT COLOUR IS A PROPERTY OF THE SURFACE ============ */ /* .article p was set to --ink globally, which is 1.03:1 on a dark section: invisible. The same fault as the earlier .deck bug. Every text colour that can land on either surface is scoped here, once, so it cannot recur. */ .on-dark .article p,.on-dark .article li,.on-dark p,.on-dark li, .endcta .article p,.order .article p,.authorband .article p{ color:rgba(255,255,255,.90); } .on-dark .article h2,.on-dark .article h3,.on-dark h2,.on-dark h3, .endcta .article h2,.order .article h2{color:#fff} .on-dark .article .lede,.on-dark .lede{color:rgba(255,255,255,.86)} .on-dark .article strong,.on-dark strong{color:#fff} .on-dark .article em,.on-dark em{color:rgba(255,255,255,.92)} .on-dark .article a,.on-dark a:not(.btn){color:var(--gold)} .on-dark .article a:hover,.on-dark a:not(.btn):hover{color:var(--champagne)} .on-dark .eyebrow{color:var(--gold)} /* dual-format disclosure blocks inside the long bio */ .on-dark .disc{ margin:1.5rem 0 .9rem;padding:1rem 1.3rem;border-left:3px solid var(--gold); background:rgba(255,255,255,.055);border-radius:0 3px 3px 0; } .on-dark .disc p{margin:0;font-size:.96rem;line-height:1.7;color:rgba(255,255,255,.86)} .on-dark .disc strong{color:var(--gold)} .on-dark .disc em{font-style:italic;color:rgba(255,255,255,.82)} /* plain privacy statement, in place of a consent bar for cookies never set */ .privline{ margin:1.1rem 0 0;font-size:.86rem;line-height:1.6; color:rgba(255,255,255,.72); } .privline strong{color:var(--gold);font-weight:600} .privline a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(212,175,55,.4)} .privline a:hover{color:var(--champagne)} /* ============ CTA PANEL TEXT ============ */ /* .wm-cta is an