*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#0b1f3a; --dark:#070e1a; --gold:#f5c433; --white:#f4f1ea; --muted:#8fa0b4; } html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%} body{background:var(--navy);color:var(--white);font-family:'Barlow',sans-serif;font-weight:300;font-size:16px;line-height:1.7;overflow-x:hidden;max-width:100%} img{max-width:100%} /* The site header. Scoped to the

that is a child of , because the breadcrumb trail, the "on this page" strip and the row that moves between the principles are navigations too: written as a bare `nav` rule this pinned every one of them to the top of the window behind the header, where none of them was ever seen. */ body > nav{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between; padding:16px clamp(20px,2.6vw,48px); background:rgba(7,14,26,0.93); backdrop-filter:blur(12px); border-bottom:1px solid rgba(245,196,51,0.18); } .nav-logo{text-decoration:none;font-family:'Oswald',sans-serif;font-size:18px;font-weight:400;letter-spacing:0.12em;color:var(--white);cursor:pointer} .nav-logo span{color:var(--gold)} .nav-links{display:flex;gap:clamp(9px,1.2vw,20px);list-style:none} .nav-links a{text-decoration:none;font-size:clamp(10px,0.78vw,12px);letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color 0.2s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{color:var(--gold)} .nav-order{ font-size:12px;letter-spacing:0.12em;text-transform:uppercase; color:var(--dark);background:var(--gold); padding:10px 22px;border:none;cursor:pointer; font-family:'Barlow',sans-serif;font-weight:500;transition:opacity 0.2s; text-decoration:none;display:inline-block; } .nav-order:hover{opacity:0.85} .page{display:none;padding-top:68px;min-height:100vh;animation:fadeIn 0.4s ease forwards} .page.active{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* HOME */ .hero{ position:relative;min-height:calc(100vh - 68px); display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden; } .hero-bg{ position:absolute;inset:0;z-index:0; background-image:url('/images/hero-road.webp'); background-size:cover;background-position:center 40%; animation:slowZoom 18s ease-in-out infinite alternate; } @keyframes slowZoom{from{transform:scale(1.04)}to{transform:scale(1.12) translateY(-2%)}} .hero-overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(7,14,26,0.15) 0%,rgba(7,14,26,0.1) 35%,rgba(7,14,26,0.72) 70%,rgba(7,14,26,0.97) 100%); } .hero-content{position:relative;z-index:2;padding:60px 56px 72px} .hero-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px} .eyebrow-line{width:36px;height:2px;background:var(--gold)} .eyebrow-text{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold)} .hero-title{font-family:'Oswald',sans-serif;font-size:clamp(52px,9vw,110px);font-weight:600;line-height:0.92;letter-spacing:0.03em;margin-bottom:16px} .hero-title .outline{color:transparent;-webkit-text-stroke:2px var(--gold)} /* The second half of the title. It carries the same weight of meaning as the two display lines above it, so it stays inside the

, but at a size that lets a thirty-character line hold together and still leaves room for the subtitle below. / .hero-title-tag{display:block;max-width:20ch;margin-top:14px;text-wrap:balance;font-size:clamp(20px,2.9vw,34px);font-weight:400;line-height:1.1;letter-spacing:0.04em;color:rgba(244,241,234,0.92)} .hero-subtitle{font-family:'Lora',serif;font-size:clamp(16px,2vw,22px);color:rgba(244,241,234,0.85);margin-bottom:4px} .hero-subtitle2{font-family:'Lora',serif;font-style:italic;font-size:clamp(14px,1.6vw,18px);color:var(--gold);margin-bottom:10px} .hero-author{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .hero-social{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:40px} .hero-social a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s} .hero-social a:hover{border-color:var(--gold)} .hero-social-sep{opacity:0.5} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .btn-primary{background:var(--gold);color:var(--dark);font-family:'Barlow',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;padding:15px 34px;border:none;cursor:pointer;transition:opacity 0.2s;text-decoration:none;display:inline-block} .btn-primary:hover{opacity:0.85} .btn-outline{background:transparent;color:var(--white);font-family:'Barlow',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:400;padding:15px 34px;border:1px solid rgba(244,241,234,0.3);cursor:pointer;transition:border-color 0.2s;text-decoration:none;display:inline-block} .btn-outline:hover{border-color:var(--white)} .btn-outline-gold{background:transparent;color:var(--gold);font-family:'Barlow',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:400;padding:15px 34px;border:2px solid var(--gold);cursor:pointer;transition:opacity 0.2s;text-decoration:none;display:inline-block} .btn-outline-gold:hover{opacity:0.8} / The opening screen. The largest words on it are what the site is for, not what the book is called: the site name is a small line above them, the heading is the proposition, one sentence explains it, the two buttons go into the free material and the brand line closes the block. The book's own title, cover and buy button are further down under "Also here - the book", which is where a reader who wants them looks and where a reader who does not is no longer stopped by them. / .hero-brand{display:block;font-size:clamp(15px,1.6vw,19px);font-weight:400;line-height:1.3;letter-spacing:0.3em;color:rgba(244,241,234,0.82);margin-bottom:12px} .hero-title-site{font-size:clamp(38px,7.4vw,92px);letter-spacing:0.02em} .hero-lead{font-family:'Lora',serif;font-size:clamp(16px,1.9vw,21px);line-height:1.6;color:rgba(244,241,234,0.88);max-width:36ch;text-wrap:pretty;margin:18px 0 28px} .hero-strap{font-family:'Lora',serif;font-style:italic;font-size:clamp(15px,1.7vw,19px);line-height:1.5;color:var(--gold);margin-top:26px} / Three ways further into the site, directly under the opening screen. Kept to one row at every width and set small on purpose: on a phone this strip is what shows below the fold, and it has to arrive as a row of three routes rather than as three full-width blocks that bury the second and third. / .home-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(244,241,234,0.1);border-top:1px solid rgba(245,196,51,0.28)} .home-route{display:flex;flex-direction:column;justify-content:center;gap:5px;background:var(--dark);padding:20px 24px;text-decoration:none;transition:background 0.2s} .home-route:hover{background:#0f1d32} .home-route-label{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)} .home-route-name{font-family:'Oswald',sans-serif;font-size:clamp(15px,1.7vw,20px);font-weight:400;letter-spacing:0.05em;text-transform:uppercase;color:var(--gold)} .home-route-name::after{content:'\00a0\2192';color:rgba(245,196,51,0.55)} / STATS / .stats-row{display:flex;border-top:1px solid rgba(244,241,234,0.08)} .stat-item{flex:1;padding:32px 40px;border-right:1px solid rgba(244,241,234,0.08)} .stat-item:last-child{border-right:none} .stat-num{font-family:'Oswald',sans-serif;font-size:44px;font-weight:400;color:var(--gold);line-height:1;margin-bottom:4px} .stat-label{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)} / HOME BLURB / .home-blurb{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(244,241,234,0.07)} .blurb-left{padding:80px 56px;border-right:1px solid rgba(244,241,234,0.07)} .blurb-right{padding:80px 56px;display:flex;flex-direction:column;justify-content:center;gap:28px} .section-label{font-size:11px;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px} .blurb-heading{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.5vw,44px);font-weight:400;letter-spacing:0.05em;line-height:1.1;margin-bottom:24px} .blurb-body{font-family:'Lora',serif;font-size:17px;line-height:1.85;color:rgba(244,241,234,0.72)} / The publisher's own words are labelled as such, so they are not mistaken for the independent review further down the page. / .quote-source-label{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px} .quote-source-note{margin-top:18px;font-size:13px;line-height:1.7;color:rgba(244,241,234,0.5);max-width:46ch} .quote-source-note a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35)} .quote-source-note a:hover{opacity:0.75} .quote-block{border-left:3px solid var(--gold);padding-left:24px} .quote-block p{font-family:'Lora',serif;font-style:italic;font-size:18px;line-height:1.6;color:var(--white)} .quote-block cite{display:block;margin-top:10px;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);font-style:normal} / THE BOOK / .book-hero{display:grid;grid-template-columns:360px 1fr;min-height:calc(100vh - 68px)} .book-cover-col{background:var(--dark);display:flex;align-items:center;justify-content:center;padding:56px 32px;border-right:1px solid rgba(244,241,234,0.07)} .book-cover-img{width:100%;max-width:300px;height:auto;box-shadow:0 20px 60px rgba(0,0,0,0.6);border:1px solid rgba(244,241,234,0.06)} .book-info-col{padding:72px 56px;display:flex;flex-direction:column;justify-content:center} .book-title{font-family:'Oswald',sans-serif;font-size:clamp(36px,5vw,64px);font-weight:600;letter-spacing:0.04em;line-height:0.95;margin-bottom:6px} .book-subtitle{font-family:'Lora',serif;font-size:20px;color:var(--muted);margin-bottom:4px} .book-subtitle2{font-family:'Lora',serif;font-style:italic;font-size:17px;color:var(--gold);margin-bottom:8px} .book-author{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:36px} .book-desc{font-family:'Lora',serif;font-size:17px;line-height:1.85;color:rgba(244,241,234,0.72)} .book-specs{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .spec-tag{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;padding:7px 16px;border:1px solid rgba(244,241,234,0.15);color:var(--muted)} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(244,241,234,0.06)} .feature-card{background:var(--dark);padding:40px 32px} .feature-icon{font-size:26px;margin-bottom:14px} .feature-title{font-family:'Oswald',sans-serif;font-size:18px;font-weight:400;letter-spacing:0.06em;margin-bottom:10px} .feature-body{font-size:14px;color:var(--muted);line-height:1.8} / AUTHOR / .author-page{padding:72px 56px;max-width:860px} .author-name-big{font-family:'Oswald',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:500;letter-spacing:0.06em;line-height:1;margin-bottom:8px} .author-tag{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:40px} .author-bio{font-family:'Lora',serif;font-size:18px;line-height:1.9;color:rgba(244,241,234,0.75)} .back-cover-box{margin-top:48px;padding:36px 44px;background:var(--dark);border-left:4px solid var(--gold)} .back-cover-box p{font-family:'Lora',serif;font-size:16px;line-height:1.9;color:rgba(244,241,234,0.65)} .back-cover-box p+p{margin-top:14px} / ORDER / .order-hero{padding:80px 56px 64px;border-bottom:1px solid rgba(244,241,234,0.07)} .order-heading{font-family:'Oswald',sans-serif;font-size:clamp(44px,7vw,88px);font-weight:600;letter-spacing:0.04em;line-height:0.92;margin-bottom:16px} .order-sub{font-family:'Lora',serif;font-size:19px;color:rgba(244,241,234,0.6);max-width:520px;line-height:1.7} .amazon-section{padding:64px 56px 88px} .amazon-label{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .amazon-heading{font-family:'Oswald',sans-serif;font-size:32px;font-weight:400;letter-spacing:0.06em;margin-bottom:32px} .amazon-btns{display:flex;gap:16px;flex-wrap:wrap} .amazon-btn{ display:inline-flex;align-items:center;gap:14px; padding:20px 36px;text-decoration:none; font-family:'Barlow',sans-serif;font-size:15px;font-weight:500; letter-spacing:0.06em;text-transform:uppercase;transition:opacity 0.2s; } .amazon-btn.primary{background:var(--gold);color:var(--dark)} .amazon-btn.secondary{background:transparent;color:var(--white);border:2px solid rgba(244,241,234,0.25)} .amazon-btn:hover{opacity:0.82} .amazon-btn .flag{font-size:22px} .amazon-btn .btn-text{display:flex;flex-direction:column;line-height:1.2} .amazon-btn .btn-sub{font-size:11px;font-weight:300;letter-spacing:0.1em;opacity:0.65;text-transform:uppercase} .amazon-note{font-size:13px;color:var(--muted);margin-top:24px;font-style:italic} / FOOTER / footer{border-top:1px solid rgba(244,241,234,0.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:24px 56px} .footer-brand{font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:0.12em} .footer-brand span{color:var(--gold)} .footer-url{font-size:12px;color:var(--muted)} .footer-copy{font-size:12px;color:var(--muted)} .footer-nav{display:flex;flex-wrap:wrap;gap:20px} .footer-nav a{text-decoration:none;font-size:12px;color:var(--muted);cursor:pointer;transition:color 0.2s} .footer-nav a:hover{color:var(--gold)} @media(max-width:820px){ body > nav{padding:16px 20px} / The opening screen on a phone, which is the screen this page is judged on. The hero no longer claims the whole viewport: it is allowed to end as soon as its own words do, so the strip of three routes underneath begins on the first screen instead of hiding below it. The type is tightened for the same reason - every line saved here is a line of the strip that becomes visible. / .hero{min-height:calc(100vh - 260px);min-height:calc(100svh - 260px)} .hero-content{padding:32px 24px 40px} .hero-eyebrow{margin-bottom:14px} .hero-brand{letter-spacing:0.24em;margin-bottom:10px} .hero-title-site .outline{-webkit-text-stroke:1.5px var(--gold)} .hero-lead{font-size:15.5px;line-height:1.55;max-width:none;margin:14px 0 22px} .hero-strap{font-size:16px;margin-top:20px} .home-route{padding:16px 16px} .home-route-label{font-size:9.5px;letter-spacing:0.12em} .home-route-name{font-size:14px;letter-spacing:0.03em} .home-book-title{gap:16px} .home-book-cover{width:78px} .stats-row{flex-direction:column} .stat-item{border-right:none;border-bottom:1px solid rgba(244,241,234,0.08);padding:24px} .home-blurb{grid-template-columns:1fr} .blurb-left,.blurb-right{padding:48px 24px} .book-hero{grid-template-columns:1fr} .book-cover-col{padding:40px 24px} .book-info-col{padding:40px 24px} .features{grid-template-columns:1fr} .author-page{padding:40px 24px} .order-hero,.amazon-section{padding:40px 24px} #page-glossary > div, #page-article > div{padding:40px 24px} .hub{padding:40px 24px 64px !important} .amazon-btns{flex-direction:column} .amazon-btn{width:100%;justify-content:center} footer{padding:24px;flex-direction:column;text-align:center;align-items:center} .footer-nav{justify-content:center} } / The narrowest phones. The strip under the opening screen stays a row of three rather than becoming a column, because a column pushes the second and third route off the screen and the strip exists to be seen. Three names fit; three names each under a small label do not, so the labels come off here. / @media(max-width:480px){ .home-route{padding:14px 12px} .home-route-label{display:none} .home-route-name{font-size:13px} } / HAMBURGER There is only one menu in the markup. Above 1180px it is the row of links in the bar; below it the same list becomes a drop-down panel, opened by the button. The panel hangs under the bar rather than over it, so the button that opened it stays visible and closes it again. / .hamburger{ display:none;background:none;border:none;color:var(--white); font-size:24px;cursor:pointer;padding:4px 8px;line-height:1; } .hamburger::before{content:"\2630"} .hamburger[aria-expanded="true"]::before{content:"\2715"} @media(max-width:1180px){ .hamburger{display:block} / The bar is a fixed, stacked element, so the panel is stacked inside it: the logo and the button are lifted above the panel they open, and stay visible and clickable while it is open. The panel is positioned against the bar, not against the window. The bar carries a backdrop-filter, and an element that is filtered becomes the containing block for anything fixed inside it, so a `position:fixed` panel was being sized to the bar itself: a strip a little over one link tall, with the rest of the menu scrolled out of sight below it. Hanging the panel off the bottom of the bar with `position:absolute` needs no such assumption -- the bar is positioned, so it is the reference either way. / .nav-logo,.hamburger{position:relative;z-index:2} .nav-links{ display:none; position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:1; flex-direction:column;align-items:stretch; gap:0;overflow-y:auto;overscroll-behavior:contain; / Whatever is left of the window below the bar, so a long menu scrolls inside the panel instead of running off the bottom of the screen. The 100% is the height of the bar itself -- measuring it this way rather than naming a number keeps the panel honest at the widths where the bar grows a little to hold the Amazon button. The dynamic unit, where it is understood, discounts the browser's own bars. / max-height:calc(100vh - 100% - 1px); max-height:calc(100dvh - 100% - 1px); background:rgba(7,14,26,0.98); border-bottom:1px solid rgba(245,196,51,0.18); box-shadow:0 18px 36px rgba(7,14,26,0.55); padding:0 0 8px; } .nav-links.open{display:flex} .nav-links li{width:100%;border-bottom:1px solid rgba(244,241,234,0.08)} .nav-links li:last-child{border-bottom:none} .nav-links a{ display:block;text-align:center;padding:14px 24px; font-family:'Oswald',sans-serif;font-size:clamp(16px,3.6vw,20px);font-weight:300; letter-spacing:0.12em;text-transform:uppercase; color:var(--white);white-space:normal; } .nav-links a:hover,.nav-links a.active{color:var(--gold)} } @media(max-width:900px){ .nav-order{display:none} } .glossary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(244,241,234,0.06)} @media(max-width:820px){.glossary-grid{grid-template-columns:1fr}.gloss-item{padding:22px 24px}} .gloss-item{background:var(--dark);padding:28px 32px;transition:background 0.2s} .gloss-item:hover{background:#0f1d32} .gloss-term{font-family:'Oswald',sans-serif;font-size:17px;font-weight:400;letter-spacing:0.06em;color:var(--gold);margin-bottom:8px} .gloss-def{font-family:'Lora',serif;font-size:15px;line-height:1.75;color:rgba(244,241,234,0.65)} .articles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(244,241,234,0.06)} @media(max-width:820px){.articles-grid{grid-template-columns:1fr}.article-card{padding:22px 24px}} .article-card{display:block;text-decoration:none;color:inherit;background:var(--dark);padding:28px 32px;transition:background 0.2s;cursor:pointer} .article-card:hover{background:#0f1d32} .article-card.pinned{border-left:3px solid var(--gold)} .article-card-num{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .article-card-title{font-family:'Oswald',sans-serif;font-size:19px;font-weight:400;letter-spacing:0.04em;color:var(--gold);margin-bottom:10px} .article-card-excerpt{font-family:'Lora',serif;font-size:15px;line-height:1.75;color:rgba(244,241,234,0.65)} .article-detail-body p{margin-top:22px} .article-detail-body p:first-child{margin-top:0} .article-detail-body h2,.article-detail-body h3{font-family:'Oswald',sans-serif;font-size:20px;font-weight:500;letter-spacing:0.04em;color:var(--gold);margin-top:36px} .article-detail-body ul{margin-top:16px;padding-left:22px} .article-detail-body li{margin-top:8px} .article-pullquote{margin-top:40px;padding:28px 36px;border-left:4px solid var(--gold);background:rgba(7,14,26,0.5);font-style:italic;font-size:20px;color:var(--white)} .article-sequence{font-family:'Oswald',sans-serif;font-size:clamp(14px,1.7vw,17px);font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);line-height:1.7;margin-top:26px} .article-sources{margin-top:16px;padding-left:22px} .article-sources li{margin-top:8px} .article-sources a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35);transition:opacity 0.2s} .article-sources a:hover{opacity:0.75} .article-img{width:100%;max-width:100%;height:auto;margin-top:32px;border:1px solid rgba(244,241,234,0.1);box-shadow:0 20px 50px rgba(0,0,0,0.5)} .article-img-caption{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:10px} .resources-img-wrap{width:100vw;position:relative;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;margin-top:8px;padding:0 16px;box-sizing:border-box} / Scale to the largest size that still fits the viewport (width and height) without distorting the 1369:1149 ratio. Reserved space allows for the fixed nav, the caption below and a little breathing room. / .resources-img-wide{width:100%;max-width:calc((100vh - 130px) 1369 / 1149);max-width:calc((100svh - 130px) * 1369 / 1149);height:auto;display:block;margin:0 auto;border:1px solid rgba(244,241,234,0.1);box-shadow:0 20px 50px rgba(0,0,0,0.5)} .resources-img-wrap .article-img-caption{text-align:center} /* Links written into the body of an article, matching the source links above. / .article-detail-body a,.topic-intro a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35);transition:opacity 0.2s} .article-detail-body a:hover,.topic-intro a:hover{opacity:0.75} / Breadcrumb trail and the topic each article belongs to. / .crumbs{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;line-height:2} .crumbs a{color:var(--muted);text-decoration:none;transition:color 0.2s} .crumbs a:hover{color:var(--gold)} .crumbs .sep{color:rgba(143,160,180,0.5);margin:0 8px} .crumbs .here{color:rgba(244,241,234,0.72)} .part-of{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;line-height:2} / Publication dates. Shown only where a real date is recorded, so these rules apply to some articles and cards and not others. / .article-dates{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;line-height:2} .article-dates .sep{margin:0 8px;color:rgba(244,241,234,0.3)} .article-card-date{margin-top:14px;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(244,241,234,0.45)} .part-of a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.3);transition:opacity 0.2s} .part-of a:hover{opacity:0.75} .part-of .sep{color:rgba(143,160,180,0.5);margin:0 8px;border:none} / Topic hubs: the browse-by-topic panel on the articles page and the hub intro. / .topic-links{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(244,241,234,0.06);margin-bottom:8px} .topic-link{display:block;text-decoration:none;color:inherit;background:var(--dark);padding:24px 28px;border-left:3px solid var(--gold);transition:background 0.2s} .topic-link:hover{background:#0f1d32} .topic-link-title{font-family:'Oswald',sans-serif;font-size:18px;font-weight:400;letter-spacing:0.04em;color:var(--gold);margin-bottom:8px} .topic-link-desc{font-family:'Lora',serif;font-size:15px;line-height:1.7;color:rgba(244,241,234,0.65)} .topic-intro{font-family:'Lora',serif;font-size:18px;line-height:1.95;color:rgba(244,241,234,0.78)} .topic-intro p{margin-top:22px} .topic-intro p:first-child{margin-top:0} / A hub page built as separate blocks rather than one long column, so further sections, diagrams or article groups can be added without rearranging what is already there. The contents list at the top jumps between them. / / "On this page": a quiet strip, dropped altogether on a phone, where four links standing between the visitor and the content they name are worse than none. / .hub-contents{margin:22px 0 0;padding:14px 18px;background:var(--dark);border-left:3px solid rgba(245,196,51,0.5)} .hub-contents-label{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px} .hub-contents ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0} .hub-contents a{font-size:14px;color:rgba(244,241,234,0.75);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.3);transition:color 0.2s} .hub-contents a:hover{color:var(--gold)} .hub-section{margin-top:56px;scroll-margin-top:88px} .hub-heading{font-family:'Oswald',sans-serif;font-size:clamp(20px,2.4vw,26px);font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);margin-bottom:20px} .hub-lead{font-family:'Lora',serif;font-size:17px;line-height:1.85;color:rgba(244,241,234,0.72);margin-bottom:24px;max-width:760px} .hub-more{margin-top:20px;font-size:14px;letter-spacing:0.04em} .hub-more a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35)} / The six principles as six small blocks: three before setting off, three while driving. One column on a phone. / .principle-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(244,241,234,0.06);margin:0;padding:0} .principle-card{background:var(--dark);padding:24px 26px} .principle-num{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:0.16em;color:rgba(244,241,234,0.45)} .principle-title{font-family:'Oswald',sans-serif;font-size:17px;font-weight:400;letter-spacing:0.04em;color:var(--gold);margin:8px 0 8px} .principle-body{font-family:'Lora',serif;font-size:14.5px;line-height:1.75;color:rgba(244,241,234,0.65)} / The six principles hub. The hub is a signpost, not an article: its whole job is to show what the six principles are and let a visitor choose one. So the opening is held to a title, a tagline and one sentence, and the framework itself starts within the first screen of a phone. / .hub-eyebrow{margin-bottom:10px} .hub-tagline{font-family:'Lora',serif;font-size:clamp(15px,1.7vw,18px);line-height:1.5;font-style:italic;color:rgba(244,241,234,0.55);margin-bottom:14px} .hub-intro{font-family:'Lora',serif;font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:rgba(244,241,234,0.74);max-width:620px} / Two headings whose wording differs by screen: the long one on a desktop, the short one on a phone, where a three-line heading costs more than it says. / .hub-heading-short{display:none} / The two groups stand side by side on a desktop and stack on a phone, and the heading above each group is what keeps the distinction between preparing for a journey and driving it visible at both sizes. / .hub-section-principles{margin-top:36px} .principle-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;align-items:start} .principle-group-heading{font-family:'Oswald',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--white);padding-bottom:12px;margin-bottom:2px;border-bottom:2px solid var(--gold)} / How that group's three principles are used, beside the choice itself rather than only in the prose further down. Dropped on a phone, where the six rows matter more than the gloss on them. / .principle-group-note{font-family:'Barlow',sans-serif;font-size:12.5px;line-height:1.5;letter-spacing:0.02em;color:rgba(244,241,234,0.5);margin:10px 0 12px} .principle-group-list{list-style:none;display:grid;gap:2px;background:rgba(244,241,234,0.06);margin:0;padding:0} / One principle: its number, its name, two or three words and an arrow, on a single compact row that is entirely clickable. The words are a navigation aid, not a definition — what the principle means is on its own page, and repeating it here is what made the six impossible to take in on a phone. / .principle-link{display:flex;align-items:center;gap:14px;background:var(--dark);padding:14px 16px;text-decoration:none;color:inherit;border-left:3px solid rgba(245,196,51,0.35);transition:background 0.2s,border-left-color 0.2s} .principle-link:hover{background:#0f1d32;border-left-color:var(--gold)} .principle-link-n{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid rgba(244,241,234,0.2);border-radius:50%;font-family:'Oswald',sans-serif;font-size:14px;font-weight:400;line-height:1;color:rgba(244,241,234,0.55);transition:color 0.2s,border-color 0.2s} .principle-link:hover .principle-link-n{color:var(--gold);border-color:rgba(245,196,51,0.5)} .principle-link-text{flex:1 1 auto;min-width:0} .principle-link-name{display:block;font-family:'Oswald',sans-serif;font-size:16px;font-weight:400;letter-spacing:0.05em;text-transform:uppercase;line-height:1.25;color:var(--gold)} .principle-link-desc{display:block;font-family:'Barlow',sans-serif;font-size:13.5px;line-height:1.4;color:rgba(244,241,234,0.62);margin-top:3px} .principle-link-go{flex:0 0 auto;font-size:17px;line-height:1;color:rgba(245,196,51,0.5);transition:color 0.2s,transform 0.2s} .principle-link:hover .principle-link-go{color:var(--gold);transform:translateX(3px)} / How the principles fit together: two rows rather than one line of six. Arrows on the first, because the three before the journey are worked through in order and finished; double-headed arrows on the second, because the three during it run alongside each other and are returned to as the road requires. Still linked words rather than an illustration, so a drawn diagram can take their place later without the section around them changing. / .sequence-flow{display:grid;gap:20px} .sequence-row-label{font-family:'Oswald',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(244,241,234,0.5);margin-bottom:10px} .sequence{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:0;padding:0} .sequence-step{display:flex;align-items:center} .sequence-step:not(:last-child)::after{content:"\2192";color:var(--gold);margin:0 10px;font-size:15px} .sequence-continuous .sequence-step:not(:last-child)::after{content:"\2194"} .sequence-step a{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(244,241,234,0.82);text-decoration:none;padding:8px 12px;background:var(--dark);border-bottom:2px solid rgba(245,196,51,0.35);transition:color 0.2s,border-bottom-color 0.2s} .sequence-step a:hover{color:var(--gold);border-bottom-color:var(--gold)} .hub-note{font-family:'Lora',serif;font-size:16px;line-height:1.85;color:rgba(244,241,234,0.62);margin-top:24px;max-width:760px} / The opening of a single principle page, written from the PRINCIPLES record: the name, then the one line that defines it. / .principle-name{font-size:clamp(26px,4vw,52px);margin-bottom:12px} .principle-lead{font-family:'Lora',serif;font-size:18px;line-height:1.6;font-style:italic;color:var(--gold);margin-bottom:32px;max-width:720px} / A single principle page: the short "in practice" list, and the row that moves between the six without going back to the hub first. / .practice-list{font-family:'Lora',serif;font-size:17px;line-height:1.85;color:rgba(244,241,234,0.78);margin:0;padding-left:22px} .practice-list li{margin-top:14px} .practice-list li:first-child{margin-top:0} .practice-list li::marker{color:var(--gold)} .principle-nav{display:flex;gap:14px;flex-wrap:wrap;margin-top:56px} / The route back from an article to the principle it belongs with, on the few articles where that connection is unmistakable. / .principle-note{margin-top:56px;padding:22px 26px;background:var(--dark);border-left:3px solid var(--gold)} .principle-note p{font-family:'Lora',serif;font-size:16px;line-height:1.8;color:rgba(244,241,234,0.72)} .principle-note p.principle-note-label{font-family:'Barlow',sans-serif;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .principle-note a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35)} .principle-note a:hover{border-bottom-color:var(--gold)} / The independent professional review. Deliberately quiet: an endorsement that looks like an advertisement stops reading like an endorsement. / .review-panel{padding:72px 56px;background:var(--dark);border-top:1px solid rgba(244,241,234,0.07)} .review-grid{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:48px;align-items:start;max-width:1100px} .review-title{font-family:'Oswald',sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:400;letter-spacing:0.08em;text-transform:uppercase;color:var(--white);margin-bottom:28px;scroll-margin-top:88px} .review{margin:0;border-left:3px solid var(--gold);padding-left:26px;max-width:640px} .review-quote{margin:0} .review-lead{font-family:'Lora',serif;font-style:italic;font-size:clamp(18px,2vw,22px);line-height:1.6;color:var(--white)} .review-by{margin-top:18px} .review-name{display:block;font-family:'Oswald',sans-serif;font-size:16px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold)} .review-role{display:block;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:5px} .review-note{display:block;font-size:13px;color:rgba(244,241,234,0.55);margin-top:3px} .review-second{margin-top:24px} .review-second p{font-family:'Lora',serif;font-style:italic;font-size:17px;line-height:1.6;color:rgba(244,241,234,0.8)} .review-summary{margin-top:24px;max-width:62ch;font-size:14.5px;line-height:1.8;color:rgba(244,241,234,0.7)} .review-source{margin-top:20px;font-size:13px;line-height:1.7;color:rgba(244,241,234,0.5)} .review-cover img{width:100%;height:auto;box-shadow:0 14px 40px rgba(0,0,0,0.55);border:1px solid rgba(244,241,234,0.06)} / The same review beside the six principles, and the single line of reassurance above the ordering links. / .recognition{padding:26px 30px;background:rgba(7,14,26,0.55);border-left:3px solid rgba(245,196,51,0.55)} .recognition-title{font-family:'Oswald',sans-serif;font-size:18px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .recognition p{font-family:'Lora',serif;font-size:15.5px;line-height:1.8;color:rgba(244,241,234,0.72)} .recognition p + p{margin-top:12px} .recognition p.recognition-by{font-family:'Barlow',sans-serif;font-size:12px;line-height:1.7;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:18px} .recognition p.recognition-source{font-family:'Barlow',sans-serif;font-size:12px;line-height:1.7;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:10px} .recognition-by a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35);transition:color 0.2s} .recognition-by a:hover{color:var(--gold)} .reviewed-line{font-size:14px;line-height:1.7;color:rgba(244,241,234,0.6);margin-bottom:26px;max-width:60ch} .reviewed-line a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35)} / Related reading at the foot of every article. / .related{margin-top:64px;padding-top:40px;border-top:1px solid rgba(244,241,234,0.1)} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(244,241,234,0.06);margin-top:20px} .related-grid .article-card{padding:24px 26px} .related-grid .article-card-title{font-size:17px} / The article promo block on the home page. / .home-articles{padding:80px 56px;border-top:1px solid rgba(244,241,234,0.07)} .home-articles-intro{font-family:'Lora',serif;font-size:17px;line-height:1.85;color:rgba(244,241,234,0.72);margin-bottom:36px;max-width:720px} .home-articles-grid{grid-template-columns:repeat(3,1fr)} / The framework on the home page. The rows are the hub's own markup, generated from the same record, so this section needs no styling of its own beyond the padding that matches the sections either side of it. / .home-principles{padding:80px 56px;border-top:1px solid rgba(244,241,234,0.07)} .home-principles-intro{font-family:'Lora',serif;font-size:17px;line-height:1.85;color:rgba(244,241,234,0.72);margin-bottom:36px;max-width:720px} / "Who this is for": the four audience pages, listed on the home and resources pages. Reuses the topic-link grid so the two panels read as one system. / .audience-section{padding:80px 56px;border-top:1px solid rgba(244,241,234,0.07)} .audience-intro{font-family:'Lora',serif;font-size:17px;line-height:1.85;color:rgba(244,241,234,0.72);margin-bottom:36px;max-width:760px} / The book, named and shown where it now sits. The cover is small here because the section is an introduction to one part of the site rather than the page's subject; the full-size cover is on /book/ and beside the review below. / .home-book-title{display:flex;align-items:flex-start;gap:20px;margin-bottom:28px;padding-bottom:26px;border-bottom:1px solid rgba(244,241,234,0.1)} .home-book-cover{flex:0 0 auto;width:98px;line-height:0} .home-book-cover img{width:100%;height:auto;border:1px solid rgba(244,241,234,0.14)} .home-book-meta{min-width:0} .home-book-name{font-family:'Oswald',sans-serif;font-size:clamp(18px,2vw,23px);font-weight:400;letter-spacing:0.04em;line-height:1.25;color:var(--white)} .home-book-sub{font-family:'Lora',serif;font-style:italic;font-size:15px;color:var(--gold);margin-top:6px} .home-book-author{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-top:8px} .home-book-where{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(244,241,234,0.6);margin-top:4px} / The ways of following the site, at the foot of the home page. / .home-social{padding:44px 56px;border-top:1px solid rgba(244,241,234,0.07)} .home-social .section-label{margin-bottom:14px} .home-social-links{display:flex;flex-wrap:wrap;gap:12px 28px} .home-social-links a{font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s} .home-social-links a:hover{border-color:var(--gold)} / The checklist offer, shown once on the resources page. / .checklist-promo{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:40px;padding:32px 36px;background:var(--dark);border-left:4px solid var(--gold)} .checklist-promo-title{font-family:'Oswald',sans-serif;font-size:22px;font-weight:400;letter-spacing:0.04em;color:var(--white);margin-bottom:10px} .checklist-promo-body{font-family:'Lora',serif;font-size:15px;line-height:1.75;color:rgba(244,241,234,0.65);max-width:560px} / The checklist page itself. / .checklist-actions{display:flex;gap:14px;flex-wrap:wrap;margin:36px 0 8px} .checklist{margin-top:24px} .check-block{margin-top:40px;padding:28px 32px;background:var(--dark);border-left:3px solid var(--gold)} .check-heading{font-family:'Oswald',sans-serif;font-size:20px;font-weight:400;letter-spacing:0.05em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;gap:14px;align-items:baseline} .check-num{font-size:14px;color:rgba(244,241,234,0.5);letter-spacing:0.1em} .check-note{font-family:'Lora',serif;font-style:italic;font-size:15px;line-height:1.7;color:rgba(244,241,234,0.55);margin-bottom:18px} .check-list{list-style:none;margin:0;padding:0} .check-list li{font-family:'Lora',serif;font-size:16px;line-height:1.8;color:rgba(244,241,234,0.8);padding:9px 0 9px 34px;position:relative;border-top:1px solid rgba(244,241,234,0.07)} .check-list li:first-child{border-top:none} / An empty box to tick, drawn rather than loaded. / .check-list li::before{content:"";position:absolute;left:0;top:15px;width:15px;height:15px;border:1px solid rgba(245,196,51,0.55)} .checklist-close{margin-top:48px;padding-top:32px;border-top:1px solid rgba(244,241,234,0.12)} .checklist-strap{font-family:'Lora',serif;font-style:italic;font-size:20px;color:var(--gold);margin-bottom:14px} .checklist-note{font-family:'Barlow',sans-serif;font-size:14px;line-height:1.75;color:rgba(244,241,234,0.5);max-width:680px} .checklist-site{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-top:16px} .checklist-book{margin-top:36px;padding:24px 28px;background:rgba(7,14,26,0.5);border-left:3px solid rgba(245,196,51,0.4)} .checklist-book p{font-family:'Lora',serif;font-size:15px;line-height:1.8;color:rgba(244,241,234,0.6)} .checklist-book em{color:rgba(244,241,234,0.85)} / Sharing controls. Ordinary links plus one button; nothing third-party. / .share{margin-top:64px;padding-top:32px;border-top:1px solid rgba(244,241,234,0.1)} .share-label{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .share-row{display:flex;gap:10px;flex-wrap:wrap} .share-btn{ font-family:'Barlow',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:400; color:var(--white);background:transparent;border:1px solid rgba(244,241,234,0.25); padding:11px 20px;text-decoration:none;display:inline-block;cursor:pointer;transition:border-color 0.2s,color 0.2s; } .share-btn:hover{border-color:var(--gold);color:var(--gold)} .share-said{font-family:'Barlow',sans-serif;font-size:13px;color:var(--gold);margin-top:12px;min-height:20px} / The RSS link on the articles page. / .feed-link{font-family:'Barlow',sans-serif;font-size:14px;color:var(--muted);margin-top:32px} .feed-link a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(245,196,51,0.35)} / Available to screen readers, out of the way of everyone else. / .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} / A visible focus ring for anyone navigating by keyboard. / a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px} @media(max-width:900px){ .topic-links{grid-template-columns:1fr} .principle-grid{grid-template-columns:1fr} .principle-groups{grid-template-columns:1fr;gap:28px} .principle-note{padding:20px 22px} .review-panel{padding:48px 24px} .review-grid{grid-template-columns:1fr;gap:32px} .review-cover{display:none} .review{padding-left:18px} .hub-section{margin-top:44px} .recognition{padding:22px 22px} .related-grid,.home-articles-grid{grid-template-columns:1fr} .home-articles{padding:56px 24px} .home-principles{padding:56px 24px} .audience-section{padding:56px 24px} .home-social{padding:36px 24px} .checklist-promo{padding:26px 24px} .check-block{padding:24px 22px} } / The hub on a phone. The visitor should move from the site header straight into the title, the tagline, one sentence and then the six principles, with the three applied before the journey visible without scrolling. "On this page" and the small label above the title are desktop conveniences, so they are dropped here rather than pushing the framework below the fold, and the explanatory text around the framework is set smaller and tighter than the same text is on a page whose job is to be read. Everything is scoped to the hub: no other page on the site is affected. / @media(max-width:820px){ #page-six-principles .hub{padding-top:28px !important} #page-six-principles .hub-eyebrow,#page-six-principles .hub-contents,#page-six-principles .principle-group-note{display:none} #page-six-principles .hub-heading-long{display:none} #page-six-principles .hub-heading-short{display:inline} #page-six-principles .hub-section{margin-top:36px} #page-six-principles .hub-section-principles{margin-top:24px} #page-six-principles .principle-groups{gap:22px} #page-six-principles .hub-lead{font-size:15.5px;line-height:1.65;margin-bottom:18px} #page-six-principles .hub-note{font-size:14.5px;line-height:1.7;margin-top:18px} #page-six-principles .principle-link{padding:12px 14px;gap:12px} #page-six-principles .principle-link-name{font-size:15px} #page-six-principles .principle-link-desc{font-size:13px} #page-six-principles .sequence-flow{gap:16px} #page-six-principles .sequence-step a{font-size:11.5px;letter-spacing:0.08em;padding:7px 10px} #page-six-principles .sequence-step:not(:last-child)::after{margin:0 7px;font-size:14px} #page-six-principles .recognition{padding:20px 20px} } / Printing the checklist. The page is meant to be taken into the vehicle, so everything that is not the checklist is dropped and the colours are inverted back to ink on paper. / @media print{ nav,footer,.hamburger,.nav-order,.crumbs,.share,.checklist-actions,.checklist-book,.related{display:none !important} html,body{background:#fff !important;color:#000 !important;overflow:visible} .page{padding-top:0 !important;min-height:0;animation:none} .page>div{padding:0 !important;max-width:100% !important} .section-label{color:#555 !important} .author-name-big{font-size:28pt !important;color:#000 !important} .topic-intro,.topic-intro p,.hub-intro{color:#000 !important;font-size:11pt !important;line-height:1.5 !important} .check-block{background:none !important;border-left:2px solid #000 !important;padding:8pt 0 8pt 12pt !important;margin-top:14pt !important;break-inside:avoid;page-break-inside:avoid} .check-heading{color:#000 !important;font-size:13pt !important} .check-num{color:#666 !important} .check-note{color:#333 !important;font-size:10pt !important;margin-bottom:8pt} .check-list li{color:#000 !important;font-size:10.5pt !important;line-height:1.45 !important;padding:5pt 0 5pt 20pt !important;border-top:1px solid #ddd !important} .check-list li::before{border:1px solid #000 !important;top:9pt} .checklist-close{border-top:1px solid #000 !important} .checklist-strap{color:#000 !important} .checklist-note,.checklist-site{color:#333 !important} a{color:#000 !important;text-decoration:none} } / Printing the Six Principles. After the checklist, the framework is the part of the site most likely to be wanted on paper — pinned up, handed to a learner or carried in a vehicle — so the hub and the six principle pages are set as ink on paper rather than as a dark screen. The rows keep their number, name and few words but lose the arrow, the tap target and the background they only need on screen; the two groups stay side by side, which puts the whole framework on one sheet. Anything that cannot be followed from paper — "on this page", the article cards, the closing buttons and the move to the next principle — is dropped. */ @media print{ #page-six-principles .hub-contents, #page-six-principles #reading, #page-six-principles .recognition, [id^="page-principle-"] #related-material, .principle-link-go, .principle-nav, .principle-note{display:none !important} .hub-tagline,.hub-heading,.hub-lead,.hub-note,.principle-lead{color:#000 !important} .hub-tagline{font-size:12pt !important} .hub-heading{font-size:13pt !important;margin-bottom:8pt !important} .hub-lead,.hub-note{font-size:10.5pt !important;line-height:1.5 !important} .hub-section{margin-top:16pt !important} .principle-groups{gap:18pt !important} .principle-group-heading{color:#000 !important;font-size:11pt !important;border-bottom:1.5pt solid #000 !important;padding-bottom:5pt !important} .principle-group-note{color:#333 !important;font-size:9pt !important;margin:5pt 0 6pt !important} .principle-group-list{background:none !important;gap:0 !important} .principle-link{background:none !important;border-left:1pt solid #000 !important;padding:5pt 0 5pt 10pt !important;gap:9pt !important;break-inside:avoid;page-break-inside:avoid} .principle-link-n{color:#000 !important;border-color:#666 !important;width:20pt;height:20pt;font-size:10pt} .principle-link-name{color:#000 !important;font-size:11pt !important} .principle-link-desc{color:#333 !important;font-size:9.5pt !important} .sequence-row-label{color:#333 !important} .sequence-step a{background:none !important;color:#000 !important;border-bottom:1pt solid #000 !important;padding:2pt 0 !important;font-size:9.5pt !important} .sequence-step:not(:last-child)::after{color:#000 !important} .practice-list li{color:#000 !important;font-size:10.5pt !important;line-height:1.5 !important;break-inside:avoid;page-break-inside:avoid} }