/* ============================================================ Ajna Consulting Services — design system Hand-authored. No framework, no build step, no CDN. ============================================================ */ /* ---------- tokens ---------- */ :root { color-scheme: light dark; --lift:none; /* neutrals — warm, not clinical */ --ink-900:#0a1020; --ink-800:#111a2e; --ink-700:#1b263f; --ink-600:#2a355a; --page:#ffffff; --paper:#ffffff; --paper-2:#f7f8fb; --paper-3:#eef1f7; --line:#e2e7f0; --text:#16203a; --text-2:#4b5772; --text-3:#5f6b86; /* brand accents — kept from the existing identity, used as topic colours */ --blue:#2f6fed; --red:#e0473a; --amber:#e8a317; --green:#1e9e63; --violet:#6d4aff; --teal:#0d9488; --accent:var(--blue); --accent-ink:#1b4fc4; --accent-soft:rgba(47,111,237,.10); --radius:14px; --radius-lg:22px; --radius-sm:9px; --shadow-1:0 1px 2px rgba(16,26,48,.06), 0 2px 8px rgba(16,26,48,.05); --shadow-2:0 4px 12px rgba(16,26,48,.08), 0 14px 38px rgba(16,26,48,.09); --shadow-3:0 10px 30px rgba(16,26,48,.12), 0 30px 70px rgba(16,26,48,.14); --measure:74ch; --art-col:700px; --art-aside:214px; --art-gap:3rem; --nav-h:68px; --gutter:clamp(1.15rem, 4vw, 2.75rem); --section-y:clamp(3.5rem, 8vw, 7rem); --font-display:'Montserrat',system-ui,sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --ease:cubic-bezier(.22,.61,.36,1); } [data-theme="dark"] { /* The ground sits well below the surfaces. Dark interfaces need a bigger step between levels than light ones do — at 2% apart every card reads as a hole rather than a panel. */ --page:#060a14; --paper:#0f1728; --paper-2:#151f38; --paper-3:#1d294a; --line:#28344f; --text:#e9eef8; --text-2:#aab6ce; --text-3:#808ead; --accent:#6f9bff; --accent-ink:#9dbaff; --accent-soft:rgba(111,155,255,.16); --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 6px 20px rgba(0,0,0,.55); --shadow-3:0 18px 50px rgba(0,0,0,.66); /* Shadows barely read on a dark ground; a lit top edge is what gives a panel its lift. */ --lift:inset 0 1px 0 rgba(255,255,255,.07); } /* Sepia: a third ground for long reads. Warmer than paper, easier than white under lamplight, and it has to define the whole token set — not a filter over the light theme, or the accents go muddy. */ [data-theme="sepia"] { --page:#f2eadb; --paper:#f9f3e7; --paper-2:#f0e7d5; --paper-3:#e7dcc6; --line:#ddd0b6; --text:#2f2718; --text-2:#5c5039; --text-3:#6a5e46; --accent:#9a5b1e; --accent-ink:#7d4715; --accent-soft:rgba(154,91,30,.12); --shadow-1:0 1px 2px rgba(80,62,30,.09); --shadow-2:0 6px 18px rgba(80,62,30,.12); --shadow-3:0 16px 44px rgba(80,62,30,.16); color-scheme: light; } /* ---------- reader preferences ---------- Set on by the viewer settings panel and replayed before first paint. Each one only redefines a token the article layout already reads, so no component needs to know these exist. */ :root{ --art-scale:1; --art-fs:calc(1.105rem * var(--art-scale)); --art-lh:1.8; --font-read:var(--font-body); --font-read-head:var(--font-display); } [data-rsize="s"]{--art-scale:.92;--art-lh:1.75} [data-rsize="m"]{--art-scale:1;--art-lh:1.8} [data-rsize="l"]{--art-scale:1.13;--art-lh:1.82} [data-rsize="xl"]{--art-scale:1.26;--art-lh:1.85} [data-rwidth="s"]{--art-col:600px} [data-rwidth="m"]{--art-col:700px} [data-rwidth="l"]{--art-col:820px} [data-rwidth="xl"]{--art-col:940px} [data-rface="sans"]{--font-read:var(--font-body);--font-read-head:var(--font-display)} [data-rface="serif"]{ --font-read:'Newsreader',Georgia,'Iowan Old Style',serif; --font-read-head:'Newsreader',Georgia,'Iowan Old Style',serif; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} /* Component display rules out-specify the UA's [hidden]{display:none}; without this every filtered card keeps painting. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{margin:0} img,svg,video{max-width:100%;height:auto;display:block} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl{margin:0} ul[class],ol[class]{list-style:none;padding:0} a{color:inherit} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1.25rem)} body{ font-family:var(--font-body); background:var(--page); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"cv05" 1,"ss01" 1; overflow-x:hidden; } /* ---------- type ---------- */ h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.022em;color:var(--text)} .h-display{font-size:clamp(2.35rem,6.2vw,4.3rem);letter-spacing:-.035em;line-height:1.02} .h1{font-size:clamp(2rem,4.6vw,3.1rem)} .h2{font-size:clamp(1.6rem,3.2vw,2.3rem)} .h3{font-size:clamp(1.18rem,2vw,1.42rem);font-weight:700} .lede{font-size:clamp(1.05rem,1.55vw,1.22rem);color:var(--text-2);line-height:1.62} .eyebrow{ font-family:var(--font-display);font-size:.72rem;font-weight:800; letter-spacing:.17em;text-transform:uppercase;color:var(--accent-ink); display:flex;align-items:center;gap:.6rem; } .eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;flex:none} .muted{color:var(--text-2)} .small{font-size:.86rem} /* ---------- layout ---------- */ .wrap{width:min(1220px,100% - var(--gutter)*2);margin-inline:auto} .wrap-narrow{width:min(820px,100% - var(--gutter)*2);margin-inline:auto} .section{padding-block:var(--section-y)} .stack>*+*{margin-top:var(--s,1rem)} .grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)} .g-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))} .g-3{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))} .g-4{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))} .row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap} .between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .center{text-align:center} .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} /* ---------- surfaces ---------- */ .surface{background:var(--paper-2)} .surface-3{background:var(--paper-3)} .hair{border-block:1px solid var(--line)} .rule{height:1px;background:var(--line);border:0;margin:0} .mesh{position:relative;isolation:isolate;overflow:hidden} .mesh::before{ content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:-1; background: radial-gradient(42rem 26rem at 78% 8%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 62%), radial-gradient(34rem 22rem at 12% 84%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 62%), radial-gradient(30rem 20rem at 52% 40%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 64%); filter:blur(6px); } .grid-bg{ background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(78% 62% at 50% 34%,#000 38%,transparent 78%); mask-image:radial-gradient(78% 62% at 50% 34%,#000 38%,transparent 78%); opacity:.5; } /* ---------- buttons ---------- */ .btn{ --bg:var(--accent);--fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:.5rem; background:var(--bg);color:var(--fg); font-family:var(--font-display);font-weight:700;font-size:.93rem;letter-spacing:-.005em; padding:.82rem 1.4rem;border:1px solid transparent;border-radius:var(--radius-sm); text-decoration:none;cursor:pointer;white-space:nowrap; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease); box-shadow:var(--shadow-1); } .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)} .btn:active{transform:translateY(0)} .btn-ghost{--bg:transparent;--fg:var(--text);border-color:var(--line);box-shadow:none} .btn-ghost:hover{background:var(--paper-2);border-color:var(--accent);color:var(--accent-ink)} .btn-lg{padding:1rem 1.8rem;font-size:1rem} .btn-sm{padding:.55rem 1rem;font-size:.84rem} .link-arrow{ display:inline-flex;align-items:center;gap:.4rem;font-weight:650;color:var(--accent-ink); text-decoration:none;font-size:.93rem; } .link-arrow svg{transition:transform .18s var(--ease)} .link-arrow:hover svg{transform:translateX(4px)} .link-arrow:hover{text-decoration:underline;text-underline-offset:3px} /* ---------- header ---------- */ .skip-link{ position:fixed;left:50%;top:.5rem;transform:translate(-50%,-220%);z-index:200; background:var(--accent);color:#fff;font-weight:700;padding:.7rem 1.3rem; border-radius:0 0 10px 10px;text-decoration:none;transition:transform .2s var(--ease); } .skip-link:focus{transform:translate(-50%,0)} .site-header{ position:sticky;top:0;z-index:100;height:var(--nav-h); display:flex;align-items:center; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s var(--ease),background .25s var(--ease); } .site-header.is-stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-1)} /* The lockup: the name is set in the cursive the old site used, the descriptor in the display face. Keeps the mark 40px without letting the full company name overpower the nav. */ .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);line-height:1} .brand svg{width:40px;height:40px;flex:none;display:block} .brand-name{display:flex;align-items:baseline;gap:.34em;white-space:nowrap} .brand-name em, .brand-name b{ font-family:'Quintessential',Georgia,'Iowan Old Style',serif; font-style:normal;font-weight:400;font-size:1.32rem;line-height:1; letter-spacing:0;color:inherit; } .site-footer .brand{color:#fff} /* Below the nav breakpoint the descriptor is the first thing to go. */ @media (max-width:860px){ .brand svg{width:34px;height:34px} .brand-name em,.brand-name b{font-size:1.2rem} } @media (max-width:640px){.brand-name b{display:none}} .nav{display:flex;align-items:center;gap:.1rem;margin-left:auto} .nav a{ padding:.5rem .8rem;border-radius:8px;text-decoration:none;font-size:.9rem;font-weight:550; color:var(--text-2);transition:color .15s,background .15s; } .nav a:hover{color:var(--text);background:var(--paper-2)} .nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent-soft)} /* The nav CTA is a .btn, and .nav a (0-1-1) beats .btn-sm (0-1-0) on both colour and size — so the CTA has to restate both here. */ .nav a.btn{color:var(--fg);background:var(--bg);font-size:.84rem;padding:0 1.1rem;height:40px} .nav a.btn:hover{color:var(--fg);background:var(--accent-ink)} .nav a:not(.btn){display:inline-flex;align-items:center;height:40px} .nav-actions{display:flex;align-items:center;gap:.5rem;margin-left:.6rem} .icon-btn{ width:40px;height:40px;display:grid;place-items:center;border-radius:9px; background:transparent;border:1px solid var(--line);cursor:pointer;color:var(--text-2); transition:background .15s,color .15s,border-color .15s; } .icon-btn:hover{background:var(--paper-2);color:var(--text);border-color:var(--accent)} .nav-toggle{display:none} @media (max-width:960px){ .nav-toggle{display:grid} .nav{ position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:stretch; background:var(--paper);border-bottom:1px solid var(--line);padding:.7rem var(--gutter) 1.2rem; gap:.1rem;box-shadow:var(--shadow-2); transform:translateY(-8px);opacity:0;visibility:hidden;transition:.22s var(--ease); } .nav.open{transform:none;opacity:1;visibility:visible} .nav a{padding:.8rem .6rem;font-size:1rem} } /* ---------- cards ---------- */ .card{ position:relative;display:flex;flex-direction:column; background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;text-decoration:none; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))} .card-body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .card-title{font-family:var(--font-display);font-weight:700;font-size:1.03rem;line-height:1.33;letter-spacing:-.012em} .card:hover .card-title{color:var(--accent-ink)} .card-desc{font-size:.9rem;color:var(--text-2);line-height:1.58;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card-meta{margin-top:auto;padding-top:.6rem;display:flex;gap:.6rem;align-items:center;font-size:.78rem;color:var(--text-3)} .card-art{aspect-ratio:16/9;background:var(--paper-3);border-bottom:1px solid var(--line);overflow:hidden} .card-art svg{width:100%;height:100%;display:block} .chip{ display:inline-flex;align-items:center;gap:.32rem; font-size:.7rem;font-weight:750;letter-spacing:.055em;text-transform:uppercase; padding:.3rem .6rem;border-radius:999px; background:var(--accent-soft);color:var(--accent-ink); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); text-decoration:none;white-space:nowrap; } .chip-plain{background:var(--paper-3);color:var(--text-2);border-color:var(--line)} .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex:none} /* topic accent colours */ [data-topic="Architecture"]{--accent:var(--blue);--accent-ink:#1b4fc4;--accent-soft:rgba(47,111,237,.10)} [data-topic="Cloud Architecture"]{--accent:var(--teal);--accent-ink:#0b7a70;--accent-soft:rgba(13,148,136,.11)} [data-topic="Enterprise AI"],[data-topic="AI & MLOps"]{--accent:var(--violet);--accent-ink:#5837e0;--accent-soft:rgba(109,74,255,.11)} [data-topic="Security"],[data-topic="DevSecOps"]{--accent:var(--red);--accent-ink:#c03a2e;--accent-soft:rgba(224,71,58,.10)} [data-topic="FinOps"]{--accent:var(--amber);--accent-ink:#a9760a;--accent-soft:rgba(232,163,23,.13)} [data-topic="Engineering Leadership"]{--accent:#0e7490;--accent-ink:#0b5f77;--accent-soft:rgba(14,116,144,.10)} [data-topic="Reliability"],[data-topic="Observability"]{--accent:var(--green);--accent-ink:#157a4c;--accent-soft:rgba(30,158,99,.11)} [data-theme="dark"] [data-topic]{--accent-ink:color-mix(in srgb,var(--accent) 62%,#ffffff)} /* Sepia keeps the topic's hue — it is how a reader tells one section of the site from another — but pulls it toward the ground's warmth and darkens the ink, because the light-theme inks were picked against white. */ [data-theme="sepia"] [data-topic]{ --accent-ink:color-mix(in srgb,var(--accent) 58%,#2f2718); --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent); } /* ---------- prose (articles) ---------- */ .prose{max-width:var(--measure);margin-inline:auto;font-size:1.105rem;line-height:1.8;color:var(--text)} .prose>*+*{margin-top:1.38em} .prose h2{font-size:clamp(1.35rem,2.4vw,1.78rem);margin-top:2.6em;letter-spacing:-.02em;scroll-margin-top:calc(var(--nav-h) + 1.5rem)} .prose h3{font-size:clamp(1.08rem,1.7vw,1.28rem);margin-top:2em;scroll-margin-top:calc(var(--nav-h) + 1.5rem)} .prose h2+*,.prose h3+*{margin-top:.75em} .prose p{text-wrap:pretty} .prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)} .prose a:hover{text-decoration-color:currentColor} .prose strong{font-weight:680;color:var(--text)} .prose ul,.prose ol{padding-left:1.35em} .prose li+li{margin-top:.5em} .prose li::marker{color:var(--accent);font-weight:700} .prose blockquote{ margin-inline:0;padding:1.1rem 1.35rem;border-left:3px solid var(--accent); background:var(--paper-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:1.02rem;color:var(--text-2); } .prose blockquote p{margin:0} .prose code{ font-family:var(--font-mono);font-size:.87em;padding:.14em .42em;border-radius:5px; background:var(--paper-3);border:1px solid var(--line);color:var(--accent-ink); } .prose pre{ background:var(--ink-900);color:#dbe4f5;border-radius:var(--radius); padding:1.1rem 1.25rem;overflow-x:auto;font-size:.87rem;line-height:1.65; border:1px solid var(--ink-700); } .prose pre code{background:none;border:0;padding:0;color:inherit;font-size:1em} .prose hr{border:0;height:1px;background:var(--line);margin-block:2.6em} .prose table{width:100%;border-collapse:collapse;font-size:.93rem} .prose th,.prose td{padding:.65rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .prose th{font-family:var(--font-display);font-weight:750;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)} .prose tbody tr:hover{background:var(--paper-2)} .prose figure{margin:2em 0} .prose figcaption{margin-top:.7rem;font-size:.83rem;color:var(--text-3);text-align:center} /* first paragraph of an article reads as a lede */ .prose>p:first-of-type{font-size:1.2rem;line-height:1.72;color:var(--text-2)} /* ---------- figures & data ---------- */ .figure{ margin:2.2em 0;border:1px solid var(--line);border-radius:var(--radius); background:var(--paper-2);padding:1.3rem;overflow:hidden; } .figure svg{width:100%;height:auto;display:block} .stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .stat{background:var(--paper);padding:1.1rem 1rem;text-align:center} .stat-val{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.03em;color:var(--accent-ink);line-height:1} .stat-lbl{font-size:.76rem;color:var(--text-3);margin-top:.35rem;letter-spacing:.03em} .callout{ margin:2em 0;padding:1.15rem 1.3rem;border-radius:var(--radius); background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); } .callout-label{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.4rem} .callout p{margin:0;font-size:.97rem;color:var(--text)} /* ---------- forms ---------- */ .field{display:flex;flex-direction:column;gap:.4rem} .field label{font-size:.83rem;font-weight:650;color:var(--text-2)} .field input,.field select,.field textarea{ width:100%;padding:.8rem .95rem;border:1px solid var(--line);border-radius:var(--radius-sm); background:var(--paper);color:var(--text);transition:border-color .15s,box-shadow .15s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); } .field textarea{min-height:120px;resize:vertical} .field-error{font-size:.8rem;color:var(--red);min-height:1em} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)} .form-note{font-size:.8rem;color:var(--text-3)} /* ---------- footer ---------- */ .site-footer{background:var(--ink-900);color:#c3cee4;padding-block:clamp(2.6rem,6vw,4.2rem) 1.6rem;margin-top:var(--section-y)} .site-footer a{color:#c3cee4;text-decoration:none;font-size:.9rem} .site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .site-footer ul{list-style:none;padding:0;margin:0} .site-footer ul li+li{margin-top:.5rem} .footer-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#7f8fb0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .social{display:flex;gap:.55rem} .social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:background .15s,transform .15s} .social a:hover{background:var(--accent);transform:translateY(-2px)} /* ---------- a11y ---------- */ :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } @media (forced-colors:active){ .card,.btn,.chip{border:1px solid ButtonText} } @media print{ .site-header,.site-footer,.nav,.no-print{display:none !important} body{background:#fff;color:#000} .prose{max-width:none} } /* ============================================================ Page components ============================================================ */ /* ---------- hero ---------- */ .hero{position:relative;padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);overflow:hidden} .hero .grid-bg{position:absolute;inset:0;z-index:-1} .hero-inner{position:relative} .hero .stat-strip{max-width:860px} /* ---------- marquee ---------- */ .marquee-wrap{background:var(--paper-2);padding-block:1rem;overflow:hidden} .marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{display:flex;gap:2.6rem;width:max-content;animation:slide 52s linear infinite} .marquee-track span{ font-family:var(--font-display);font-size:.84rem;font-weight:700;letter-spacing:.06em; color:var(--text-3);white-space:nowrap;text-transform:uppercase; } @keyframes slide{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}} /* ---------- service cards ---------- */ .svc-card{ position:relative;background:var(--paper);border:1px solid var(--line); border-radius:var(--radius-lg);padding:1.8rem 1.7rem 1.9rem;overflow:hidden; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease); } .svc-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--accent)} .svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 34%,var(--line))} .tick-list{margin-top:1.1rem;display:flex;flex-direction:column;gap:.55rem} .tick-list li{position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--text-2)} .tick-list li::before{ content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px; background:var(--accent);opacity:.85; } .feature{padding:1.4rem 1.5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)} /* ---------- methodology ---------- */ .method{margin-top:2.6rem;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))} .method li{background:var(--paper);padding:1.7rem 1.6rem;position:relative} .method .n{font-family:var(--font-display);font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--accent-ink);display:block;margin-bottom:.7rem} .method strong{display:block;font-family:var(--font-display);font-size:1.02rem;font-weight:750;letter-spacing:-.012em} .method p{margin-top:.5rem;font-size:.9rem;color:var(--text-2);line-height:1.6} /* ---------- quotes ---------- */ .quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.6rem;position:relative} .quote::before{content:"\201C";position:absolute;top:.4rem;left:1.1rem;font-family:Georgia,serif;font-size:3.4rem;color:var(--accent);opacity:.2;line-height:1} .quote blockquote{margin:0;font-size:.96rem;line-height:1.7;color:var(--text);position:relative} .quote figcaption{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.15rem} .quote figcaption strong{font-family:var(--font-display);font-size:.9rem;font-weight:750} .quote figcaption span{font-size:.8rem;color:var(--text-3)} /* ---------- cta ---------- */ .cta-panel{ background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(1.8rem,4vw,3rem); } .cta-wide{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap} /* ---------- insights index ---------- */ .filter-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem} .search-field{ position:relative;display:flex;align-items:center;gap:.55rem;flex:1;min-width:250px;max-width:430px; border:1px solid var(--line);border-radius:999px;padding:.6rem 1.05rem;background:var(--paper); color:var(--text-3);transition:border-color .15s,box-shadow .15s; } .search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .search-field input{border:0;background:none;outline:none;flex:1;font-size:.92rem;color:var(--text);padding:0} .chip-row{display:flex;gap:.45rem;flex-wrap:wrap} .chip-row .chip{cursor:pointer;font-size:.72rem} .chip-row .chip[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)} .topic-tile{ display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.2rem;text-decoration:none; background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); border-left:3px solid var(--accent);transition:transform .16s var(--ease),box-shadow .16s var(--ease); } .topic-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)} .topic-tile strong{font-family:var(--font-display);font-size:.98rem;font-weight:750} .topic-tile span{font-size:.8rem;color:var(--text-3)} /* ---------- article ---------- */ .read-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent;pointer-events:none} .read-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .08s linear} .article-head{padding-block:clamp(2.6rem,6vw,4.4rem) 2rem} .crumbs{font-size:.8rem;color:var(--text-3);margin-bottom:1.2rem;display:flex;gap:.45rem;flex-wrap:wrap} .crumbs a{text-decoration:none;color:var(--text-3)} .crumbs a:hover{color:var(--accent-ink);text-decoration:underline} .article-meta{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.84rem;color:var(--text-3)} .article-hero{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);margin-bottom:3.4rem;aspect-ratio:1200/380} .article-hero svg{width:100%;height:100%;display:block} /* One column governs the whole article. The title, the hero, the body, the references and the footer all take their width and their left edge from --art-col, so nothing shifts sideways as you scroll. The contents list is the only thing that sits outside it, in its own track on wide screens. */ .art-wrap{width:min(var(--art-col),100% - var(--gutter)*2);margin-inline:auto} .article .prose{max-width:none;margin-inline:0;font-family:var(--font-read);font-size:var(--art-fs);line-height:var(--art-lh)} .article-grid{display:block} .toc{ margin:0 0 2.2rem;padding:1.1rem 1.3rem;background:var(--paper-2); border:1px solid var(--line);border-radius:var(--radius); } .toc-title{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:.7rem} .toc ol{counter-reset:t;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem} .toc li{counter-increment:t} .toc a{font-size:.9rem;color:var(--text-2);text-decoration:none;display:block} .toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--font-mono);font-size:.74rem;color:var(--accent);margin-right:.6rem} .toc a:hover{color:var(--accent-ink);text-decoration:underline} @media (min-width:1180px){ /* Widen the shared container by exactly the aside track, then cap every block back to --art-col. The text column keeps the same left edge it had at every other width; only the contents list moves out beside it. */ .article.with-toc .art-wrap{ width:min(calc(var(--art-col) + var(--art-gap) + var(--art-aside)),100% - var(--gutter)*2); } .article.with-toc .art-wrap > *{max-width:var(--art-col)} .article.with-toc .article-grid{ display:grid;grid-template-columns:minmax(0,var(--art-col)) var(--art-aside); gap:var(--art-gap);align-items:start; } .article.with-toc .article-grid > *{max-width:none} /* The aside is the grid child, not the contents list inside it, so the order and the sticky both belong here. */ .article.with-toc .reader-aside{order:2;position:sticky;top:calc(var(--nav-h) + 1.4rem);margin-bottom:0} .article.with-toc .prose{order:1} .article.with-toc .toc, .article.with-toc .chapters{ margin:0;background:none;border:0;border-left:1px solid var(--line);border-radius:0; padding:.15rem 0 .15rem 1.2rem; } } .table-wrap{overflow-x:auto;margin-block:1.6em;border:1px solid var(--line);border-radius:var(--radius)} .table-wrap table{margin:0} .table-wrap th,.table-wrap td{white-space:normal} .article-foot{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2rem} .prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .prevnext a{ display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;text-decoration:none; border:1px solid var(--line);border-radius:var(--radius);transition:border-color .16s,transform .16s var(--ease); } .prevnext a:hover{border-color:var(--accent);transform:translateY(-2px)} .prevnext span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:700} .prevnext strong{font-family:var(--font-display);font-size:.93rem;font-weight:700;line-height:1.4} .prevnext .next{text-align:right;align-items:flex-end} @media (max-width:640px){.prevnext{grid-template-columns:1fr}.prevnext .next{text-align:left;align-items:flex-start}} /* ---------- series ---------- */ .series-box{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem} .series-list{counter-reset:s;display:flex;flex-direction:column;gap:.5rem;padding:0;list-style:none} .series-list li{counter-increment:s;font-size:.93rem} .series-list li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-mono);font-size:.76rem;color:var(--accent);margin-right:.7rem} .series-list a{color:var(--text-2);text-decoration:none} .series-list a:hover{color:var(--accent-ink);text-decoration:underline} .series-list li[aria-current="true"] a{color:var(--text);font-weight:650} .series-index{list-style:none;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .series-index a{display:flex;gap:1.2rem;padding:1.35rem 1.5rem;background:var(--paper);text-decoration:none;transition:background .15s} .series-index a:hover{background:var(--paper-2)} .series-index .n{font-family:var(--font-mono);font-size:.84rem;color:var(--accent);font-weight:500;padding-top:.15rem} .series-index strong{display:block;font-family:var(--font-display);font-size:1rem;font-weight:700;line-height:1.35} .series-index em{display:block;margin-top:.35rem;font-style:normal;font-size:.88rem;color:var(--text-2);line-height:1.55} /* ---------- case studies ---------- */ .case{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .case-art{aspect-ratio:16/7;border-bottom:1px solid var(--line)} .case-art svg{width:100%;height:100%;display:block} .case-body{padding:1.6rem 1.6rem 1.7rem} .case-measure{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--accent-ink);font-weight:600} /* ---------- notes ---------- */ .notes-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .note-row{display:block;padding:1.5rem 1.7rem;background:var(--paper);text-decoration:none;transition:background .15s} .note-row:hover{background:var(--paper-2)} .note-row time{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)} .note-row h2{font-family:var(--font-display);font-size:1.08rem;font-weight:700;margin-top:.4rem;line-height:1.4} .note-row:hover h2{color:var(--accent-ink)} .note-row p{margin-top:.45rem;font-size:.91rem;color:var(--text-2);line-height:1.6;max-width:70ch} /* ---------- forms panel ---------- */ .form-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3.5vw,2.4rem)} /* ---------- references ---------- */ .refs{ margin-top:3rem;padding:1.6rem 1.7rem;background:var(--paper-2); border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius); } .refs-title{font-family:var(--font-display);font-size:1rem;font-weight:750;letter-spacing:-.01em} .refs-note{font-size:.84rem;color:var(--text-3);margin-top:.3rem} .refs ul{list-style:none;padding:0;margin-top:1.1rem;display:flex;flex-direction:column;gap:.75rem} .refs li{display:flex;flex-direction:column;gap:.15rem;font-size:.9rem} .refs li a{color:var(--accent-ink);font-weight:600;text-decoration:none} .refs li a:hover{text-decoration:underline;text-underline-offset:3px} .refs li span{color:var(--text-3);font-size:.83rem} /* ---------- key figure pull-quote ---------- */ .keyfig{ margin:2.4em 0;padding:1.4rem 1.6rem;border-radius:var(--radius); background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-left:4px solid var(--accent); } .keyfig-label{ font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--accent-ink);margin-bottom:.55rem; } .keyfig-text{margin:0;font-size:1.06rem;line-height:1.62;color:var(--text)} .keyfig-text b{ font-family:var(--font-display);font-weight:800;font-size:1.28em; color:var(--accent-ink);letter-spacing:-.02em; } /* Long call-to-action labels must not push the page wider than the screen. */ @media (max-width:420px){ .btn{white-space:normal;text-align:center;max-width:100%} .btn-lg{padding:.9rem 1.2rem;font-size:.95rem} } /* ============================================================ Colour fields The page alternates grounds — deep, tinted, light — so it reads as a sequence of rooms rather than one long white wall. ============================================================ */ .band{position:relative;isolation:isolate;overflow:hidden} /* deep ground: used for the hero, the methodology and the quotes */ .band-deep{ background: radial-gradient(60rem 34rem at 78% -6%, rgba(109,74,255,.42), transparent 60%), radial-gradient(52rem 30rem at 6% 104%, rgba(13,148,136,.36), transparent 62%), radial-gradient(44rem 26rem at 44% 52%, rgba(47,111,237,.32), transparent 66%), linear-gradient(168deg, #0c1530 0%, #0a1020 52%, #10182f 100%); color:#eaf0ff; } .band-deep h1,.band-deep h2,.band-deep h3{color:#fff} .band-deep .lede,.band-deep .muted,.band-deep p{color:#b6c4e4} .band-deep .eyebrow{color:#8fb2ff} .band-deep .rule{background:rgba(255,255,255,.14)} /* the grid texture actually has to be visible to do anything */ .band-deep .grid-bg{ position:absolute;inset:0;z-index:-1;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px); background-size:62px 62px; -webkit-mask-image:radial-gradient(86% 72% at 50% 30%,#000 30%,transparent 80%); mask-image:radial-gradient(86% 72% at 50% 30%,#000 30%,transparent 80%); } /* tinted ground: a warm or cool wash rather than plain grey */ .band-tint{ background: radial-gradient(48rem 28rem at 88% 0%, color-mix(in srgb,var(--blue) 12%, transparent), transparent 62%), radial-gradient(40rem 24rem at 4% 100%, color-mix(in srgb,var(--violet) 10%, transparent), transparent 62%), var(--paper-2); } .band-warm{ background: radial-gradient(46rem 26rem at 8% 0%, color-mix(in srgb,var(--amber) 16%, transparent), transparent 60%), radial-gradient(40rem 24rem at 92% 100%, color-mix(in srgb,var(--red) 11%, transparent), transparent 62%), var(--paper-2); } /* glass panels sit on the deep ground without turning into white boxes */ .glass{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-radius:var(--radius-lg); } .band-deep .stat-strip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16)} .band-deep .stat{background:rgba(10,16,32,.5)} .band-deep .stat-val{color:#fff} .band-deep .stat-lbl{color:#9fb0d0} .band-deep .btn-ghost{--fg:#fff;border-color:rgba(255,255,255,.3)} .band-deep .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} /* service cards carry their topic colour instead of being white boxes */ .svc-card{ background: linear-gradient(180deg, color-mix(in srgb,var(--accent) 9%, transparent) 0%, transparent 46%), var(--paper); } [data-theme="dark"] .svc-card{ background: linear-gradient(180deg, color-mix(in srgb,var(--accent) 17%, transparent) 0%, transparent 46%), var(--paper-2); } .svc-card::before{height:5px} /* the methodology reads as a numbered sequence on a dark ground */ .band-deep .method{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)} .band-deep .method li{background:rgba(10,16,32,.55)} .band-deep .method .n{color:#8fb2ff} .band-deep .method strong{color:#fff} .band-deep .method p{color:#a9b8d8} /* quotes on the deep ground */ .band-deep .quote{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)} .band-deep .quote blockquote{color:#dfe7fa} .band-deep .quote figcaption{border-top-color:rgba(255,255,255,.13)} .band-deep .quote figcaption strong{color:#fff} .band-deep .quote figcaption span{color:#93a3c4} .band-deep .quote::before{color:#8fb2ff;opacity:.3} /* the closing call to action is a colour field in its own right */ .cta-field{ border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.6rem); background: radial-gradient(38rem 20rem at 88% 8%, rgba(109,74,255,.5), transparent 62%), radial-gradient(30rem 18rem at 4% 96%, rgba(13,148,136,.42), transparent 62%), linear-gradient(140deg,#123 0%, #0a1020 60%, #16204a 100%); color:#fff;display:flex;align-items:center;justify-content:space-between; gap:2rem;flex-wrap:wrap;border:1px solid rgba(255,255,255,.12); } .cta-field h2{color:#fff} .cta-field .lede{color:#bcc9ea} .cta-field .btn{--bg:#fff;--fg:#0a1020} .cta-field .btn:hover{--bg:#e8eeff} /* the marquee gets a tinted band so it separates from the sections */ .marquee-wrap{ background:linear-gradient(90deg, color-mix(in srgb,var(--blue) 7%, var(--paper-2)), color-mix(in srgb,var(--violet) 6%, var(--paper-2)), color-mix(in srgb,var(--teal) 7%, var(--paper-2))); } /* cards lift a little more so a grid of them is not a flat sheet */ .card{background:var(--paper)} .card-art{position:relative} .card-art::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--paper) 82%, transparent)); } [data-theme="dark"] .card{background:var(--paper-2)} /* a feature slot: one article given real size */ .feature-post{ display:grid;grid-template-columns:1.15fr 1fr;gap:0;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper); text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .feature-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)} .feature-post .art{min-height:280px;background:var(--paper-3)} .feature-post .art svg{width:100%;height:100%;display:block;object-fit:cover} .feature-post .body{padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.85rem;justify-content:center} .feature-post h3{font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.022em;line-height:1.22} .feature-post:hover h3{color:var(--accent-ink)} .feature-post p{color:var(--text-2);font-size:.98rem;line-height:1.6} [data-theme="dark"] .feature-post{background:var(--paper-2)} @media (max-width:820px){ .feature-post{grid-template-columns:1fr} .feature-post .art{min-height:190px} } /* ============================================================ Reader ============================================================ */ /* ---------- heading anchors ---------- */ .prose h2,.prose h3{position:relative} .h-anchor{ position:absolute;left:-1.5rem;top:.12em;width:1.2rem; font-family:var(--font-mono);font-size:.8em;font-weight:400; color:var(--text-3);text-decoration:none;opacity:0;transition:opacity .13s; } .prose h2:hover .h-anchor,.prose h3:hover .h-anchor,.h-anchor:focus-visible{opacity:1} .h-anchor:hover{color:var(--accent-ink)} @media (max-width:900px){.h-anchor{display:none}} /* ---------- viewer settings ---------- */ .reader-tools{ position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:5.2rem;z-index:90; display:flex;flex-direction:column;gap:.5rem; } .reader-tools .icon-btn{ background:var(--paper);box-shadow:var(--shadow-2);width:42px;height:42px; } .reader-panel{ /* Sits above the two tool buttons rather than on top of them, so the control that opened it stays visible and clickable. */ position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(5.2rem + 96px);z-index:95; width:min(292px,calc(100vw - 2rem));padding:1.05rem 1.15rem; max-height:calc(100vh - 12rem);overflow-y:auto; background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-3); } .reader-panel[hidden]{display:none} .reader-panel fieldset{border:0;padding:0;margin:0 0 1.05rem} .reader-panel fieldset:last-of-type{margin-bottom:0} .reader-panel legend{ font-family:var(--font-display);font-size:.64rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--text-3);padding:0;margin-bottom:.5rem; } .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.3rem} .seg button{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.16rem; padding:.5rem .3rem;min-height:46px;cursor:pointer; background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm); color:var(--text-2);font-size:.66rem;line-height:1;transition:background .13s,border-color .13s,color .13s; } .seg button:hover{border-color:var(--accent);color:var(--text)} .seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:650} .seg .sample{font-size:1.02rem;line-height:1} .seg .sample.s{font-size:.8rem}.seg .sample.l{font-size:1.25rem} .seg .swatch{width:100%;height:15px;border-radius:3px;border:1px solid var(--line)} .seg .swatch.light{background:#ffffff} .seg .swatch.sepia{background:#f6efe1} .seg .swatch.dark{background:#0a1020} .seg .serif{font-family:Georgia,serif} .reader-reset{ margin-top:1rem;width:100%;padding:.45rem;cursor:pointer;font-size:.74rem; background:none;border:1px dashed var(--line);border-radius:var(--radius-sm);color:var(--text-3); } .reader-reset:hover{border-color:var(--accent);color:var(--accent-ink)} .reader-note{margin-top:.75rem;font-size:.68rem;color:var(--text-3);line-height:1.45} /* ---------- chapter bar ---------- */ .chapter-bar{ position:fixed;left:0;right:0;bottom:0;z-index:88; display:flex;align-items:center;gap:1rem; padding:.55rem var(--gutter);padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb,var(--paper) 88%,transparent); border-top:1px solid var(--line);backdrop-filter:blur(12px); transform:translateY(105%);transition:transform .22s var(--ease); } .chapter-bar.is-on{transform:none} .chapter-where{flex:1;min-width:0} .chapter-where b{ display:block;font-family:var(--font-display);font-size:.84rem;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .chapter-where span{display:block;font-size:.7rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chapter-left{ font-family:var(--font-mono);font-size:.7rem;color:var(--text-3); font-variant-numeric:tabular-nums;white-space:nowrap; } .chapter-step{display:flex;gap:.35rem} .chapter-step a{ width:36px;height:36px;display:grid;place-items:center;border-radius:9px; border:1px solid var(--line);color:var(--text-2);text-decoration:none; } .chapter-step a:hover{border-color:var(--accent);color:var(--accent-ink)} .chapter-step a[aria-disabled="true"]{opacity:.32;pointer-events:none} @media (max-width:620px){.chapter-left{display:none}} /* ---------- contents panel ---------- */ .reader-aside{display:flex;flex-direction:column;gap:1.6rem;margin-bottom:2.2rem} .reader-aside .toc{margin:0} .chapters{margin-top:.2rem} .chapters-title{ font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--text-3);margin-bottom:.7rem; } .chapters ol{counter-reset:ch;list-style:none;padding:0;display:flex;flex-direction:column;gap:.45rem} .chapters li{counter-increment:ch} .chapters a{display:block;font-size:.86rem;color:var(--text-2);text-decoration:none;line-height:1.4} .chapters a::before{ content:counter(ch,decimal-leading-zero);font-family:var(--font-mono);font-size:.7rem; color:var(--accent);margin-right:.55rem; } .chapters a:hover{color:var(--accent-ink)} .chapters li[aria-current="true"] a{color:var(--text);font-weight:650} /* ---------- focus mode ---------- */ [data-focus="on"] .site-header, [data-focus="on"] .site-footer, [data-focus="on"] .article-foot, [data-focus="on"] .article > .section, [data-focus="on"] .crumbs, [data-focus="on"] .chapter-bar{display:none} [data-focus="on"] .article-head{padding-top:2.4rem} [data-focus="on"] #readBar{background:var(--accent)} .focus-exit{ position:fixed;top:1rem;right:1rem;z-index:96;display:none; align-items:center;gap:.4rem;padding:.42rem .8rem;cursor:pointer;font-size:.76rem; background:var(--paper);border:1px solid var(--line);border-radius:999px; color:var(--text-2);box-shadow:var(--shadow-2); } [data-focus="on"] .focus-exit{display:flex} .focus-exit:hover{border-color:var(--accent);color:var(--accent-ink)} @media print{.reader-tools,.reader-panel,.chapter-bar,.focus-exit,.read-bar{display:none!important}} @media (prefers-reduced-motion:reduce){.chapter-bar{transition:none}} /* ---------- reader typography ---------- The text-size and typeface controls govern the whole article, not the body paragraphs alone. Multiplying the existing clamps by --art-scale keeps the responsive behaviour these sizes already had. */ .article .article-head .h1{font-family:var(--font-read-head);font-size:calc(clamp(2rem,4.6vw,3.1rem) * var(--art-scale))} .article .article-head .lede{font-size:calc(clamp(1.05rem,1.55vw,1.22rem) * var(--art-scale))} .article .prose h2, .article .prose h3, .article .prose h4{font-family:var(--font-read-head)} .article .prose h2{font-size:calc(clamp(1.35rem,2.4vw,1.78rem) * var(--art-scale))} .article .prose h3{font-size:calc(clamp(1.08rem,1.7vw,1.28rem) * var(--art-scale))} .article .keyfig-text{font-family:var(--font-read);font-size:calc(1.06rem * var(--art-scale))} /* Everything inside the article that carried a fixed rem size is restated in em, so it rides the reader's choice instead of standing still while the text around it grows. */ .article .prose>p:first-of-type{font-size:1.086em} .article .prose code{font-size:.86em} .article .prose pre{font-size:.88em} .article .prose pre code{font-size:1em} .article .prose table{font-size:.85em} .article .prose th{font-size:.73em} .article .prose figcaption{font-size:.76em} .article .prose blockquote{font-size:.95em} /* A serif reading face wants a little more leading than the sans does. */ [data-rface="serif"] .article .prose{line-height:calc(var(--art-lh) + .04)} .article .article-head .lede{font-family:var(--font-read)} /* ---------- the mark blooms ---------- At rest it is the flat cut mark. On hover or keyboard focus the diamond draws down into a bud and eight leaves unfold from behind it. An earlier version prised the four petals apart instead. That opens a hole in the middle of a symmetric shape and closes it again, which reads as a mouth rather than a flower. Nothing gapes here: the silhouette is a diamond, then a diamond inside a rosette. Each leaf composes its own angle (--a) with the shared growth, which is why the angle is a custom property and not a transform attribute — a CSS transform overwrites the attribute outright. */ .ajna-mark{overflow:visible} .ajna-mark .am-bud, .ajna-mark .am-leaf, .ajna-mark .am-core{transform-box:view-box;transform-origin:50px 50px} .ajna-mark .am-bud{transition:transform .55s var(--ease)} .ajna-mark .am-leaf{ transform:rotate(var(--a)) scale(.16);opacity:0; transition:transform .55s var(--ease),opacity .3s var(--ease); } .ajna-mark .am-leaf-b{transition-delay:.06s} .ajna-mark .am-core{transition:transform .5s var(--ease)} .brand:hover .ajna-mark .am-bud, .brand:focus-visible .ajna-mark .am-bud, .ajna-mark.is-open .am-bud{transform:scale(.5) rotate(45deg)} .brand:hover .ajna-mark .am-leaf, .brand:focus-visible .ajna-mark .am-leaf, .ajna-mark.is-open .am-leaf{transform:rotate(var(--a)) scale(1);opacity:1} .brand:hover .ajna-mark .am-core, .brand:focus-visible .ajna-mark .am-core, .ajna-mark.is-open .am-core{transform:scale(.55)} /* One unfolding on arrival, then it settles. Header mark only. "backwards" not "both": a filled animation outranks normal declarations, so "both" would pin the petals and hover could never move them. */ @keyframes am-arrive{ 0%{transform:scale(.5) rotate(45deg)} 100%{transform:none} } .site-header .ajna-mark .am-bud{animation:am-arrive .9s var(--ease) backwards} @media (prefers-reduced-motion:reduce){ .ajna-mark .am-bud,.ajna-mark .am-leaf,.ajna-mark .am-core{transition:none} .site-header .ajna-mark .am-bud{animation:none} } @media print{.reader-tools,.reader-panel,.chapter-bar,.focus-exit,.read-bar{display:none!important}} @media (prefers-reduced-motion:reduce){.chapter-bar{transition:none}} /* ---------- reader typography ---------- The text-size and typeface controls govern the whole article, not the body paragraphs alone. Multiplying the existing clamps by --art-scale keeps the responsive behaviour these sizes already had. */ .article .article-head .h1{font-family:var(--font-read-head);font-size:calc(clamp(2rem,4.6vw,3.1rem) * var(--art-scale))} .article .article-head .lede{font-size:calc(clamp(1.05rem,1.55vw,1.22rem) * var(--art-scale))} .article .prose h2, .article .prose h3, .article .prose h4{font-family:var(--font-read-head)} .article .prose h2{font-size:calc(clamp(1.35rem,2.4vw,1.78rem) * var(--art-scale))} .article .prose h3{font-size:calc(clamp(1.08rem,1.7vw,1.28rem) * var(--art-scale))} .article .keyfig-text{font-family:var(--font-read);font-size:calc(1.06rem * var(--art-scale))} /* Everything inside the article that carried a fixed rem size is restated in em, so it rides the reader's choice instead of standing still while the text around it grows. */ .article .prose>p:first-of-type{font-size:1.086em} .article .prose code{font-size:.86em} .article .prose pre{font-size:.88em} .article .prose pre code{font-size:1em} .article .prose table{font-size:.85em} .article .prose th{font-size:.73em} .article .prose figcaption{font-size:.76em} .article .prose blockquote{font-size:.95em} /* A serif reading face wants a little more leading than the sans does. */ [data-rface="serif"] .article .prose{line-height:calc(var(--art-lh) + .04)} .article .article-head .lede{font-family:var(--font-read)} /* ---------- the mark blooms ---------- At rest it is the flat cut mark. On hover or keyboard focus the four petals push out along their diagonals, four leaves unfold into the gap that opens on the axes, and an amber heart is revealed at the centre — paper unfolding to show what is inside. Each petal composes its own angle (--a) with the shared push, which is why the angle is a custom property and not a transform attribute: a CSS transform would overwrite the attribute. */ .ajna-mark{overflow:visible} .ajna-mark .am-petal, .ajna-mark .am-leaf, .ajna-mark .am-core, .ajna-mark .am-heart{transform-box:view-box;transform-origin:50px 50px} .ajna-mark .am-petal{transform:rotate(var(--a));transition:transform .6s var(--ease)} .ajna-mark .am-leaf{ transform:rotate(var(--a)) scale(.1);opacity:0; transition:transform .6s var(--ease),opacity .35s var(--ease); } .ajna-mark .am-heart{transform:scale(0);opacity:0;transition:transform .6s var(--ease),opacity .4s var(--ease)} .ajna-mark .am-core{transition:transform .5s var(--ease)} .brand:hover .ajna-mark .am-petal, .brand:focus-visible .ajna-mark .am-petal, .ajna-mark.is-open .am-petal{transform:rotate(var(--a)) translate(9px,-9px)} .brand:hover .ajna-mark .am-leaf, .brand:focus-visible .ajna-mark .am-leaf, .ajna-mark.is-open .am-leaf{transform:rotate(var(--a)) scale(1);opacity:1} .brand:hover .ajna-mark .am-heart, .brand:focus-visible .ajna-mark .am-heart, .ajna-mark.is-open .am-heart{transform:scale(1);opacity:1} .brand:hover .ajna-mark .am-core, .brand:focus-visible .ajna-mark .am-core, .ajna-mark.is-open .am-core{transform:scale(.62)} /* One bloom on arrival, then it settles. Header mark only. */ @keyframes am-arrive{ 0%{transform:rotate(var(--a)) translate(9px,-9px)} 100%{transform:rotate(var(--a))} } .site-header .ajna-mark .am-petal{animation:am-arrive 1s var(--ease) backwards} @media (prefers-reduced-motion:reduce){ .ajna-mark .am-petal,.ajna-mark .am-leaf,.ajna-mark .am-core, .ajna-mark .am-heart{transition:none} .site-header .ajna-mark .am-petal{animation:none} } /* ============================================================ Dark The light page is structured by alternating a white ground against tinted and deep bands. Reuse that verbatim in dark and every band lands within a few percent of the ground: the structure disappears and the page becomes one wall. So in dark the relationship inverts — the ground is the darkest thing on the page and every band rises out of it, each with its own hue, so scrolling still moves through rooms. ============================================================ */ /* ---- surfaces lift off the ground ---- */ [data-theme="dark"] .card, [data-theme="dark"] .svc-card, [data-theme="dark"] .topic-tile, [data-theme="dark"] .series-box, [data-theme="dark"] .cta-panel, [data-theme="dark"] .keyfig, [data-theme="dark"] .reader-panel, [data-theme="dark"] .search-field{box-shadow:var(--lift),var(--shadow-1)} [data-theme="dark"] .card:hover, [data-theme="dark"] .topic-tile:hover{box-shadow:var(--lift),var(--shadow-2)} /* ---- the deep band rises instead of sinking ---- */ [data-theme="dark"] .band-deep{ background: radial-gradient(58rem 32rem at 80% -8%, rgba(124,92,255,.40), transparent 62%), radial-gradient(50rem 30rem at 4% 106%, rgba(16,178,164,.30), transparent 64%), radial-gradient(44rem 26rem at 46% 48%, rgba(64,124,255,.26), transparent 68%), linear-gradient(168deg,#141d42 0%,#101835 54%,#18214a 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.05); } [data-theme="dark"] .band-deep .grid-bg{opacity:.7} /* ---- the warm band keeps its warmth instead of going grey ---- */ [data-theme="dark"] .band-warm{ background: radial-gradient(46rem 26rem at 8% 0%, rgba(214,146,38,.20), transparent 62%), radial-gradient(40rem 24rem at 92% 100%, rgba(200,72,58,.16), transparent 64%), linear-gradient(180deg,#1b1a2c 0%,#171728 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.04); } /* ---- a plain section still needs an edge to sit against ---- */ [data-theme="dark"] .surface{ background:linear-gradient(180deg,var(--paper-2) 0%,color-mix(in srgb,var(--paper-2) 82%,var(--page)) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.055); } [data-theme="dark"] .hair{border-block-color:rgba(255,255,255,.07)} /* ---- the closing field carries the most colour on the page ---- */ [data-theme="dark"] .cta-field{ background: radial-gradient(38rem 20rem at 88% 8%, rgba(132,98,255,.55), transparent 62%), radial-gradient(30rem 18rem at 4% 96%, rgba(16,178,164,.46), transparent 62%), linear-gradient(140deg,#16204a 0%,#101835 60%,#1b2556 100%); background-color:#101835; border-color:rgba(255,255,255,.16); box-shadow:0 0 0 1px rgba(124,92,255,.14),0 24px 70px rgba(10,6,40,.6); } /* ---- the header floats rather than merging with the hero ---- */ [data-theme="dark"] .site-header{background:color-mix(in srgb,var(--page) 76%,transparent)} [data-theme="dark"] .site-header.is-stuck{ background:color-mix(in srgb,var(--paper) 90%,transparent); border-bottom-color:rgba(255,255,255,.09); } /* ---- topic colour survives the dark ground ---- */ [data-theme="dark"] [data-topic] .card-meta .chip, [data-theme="dark"] .chip{background:color-mix(in srgb,var(--accent) 17%,transparent);border-color:color-mix(in srgb,var(--accent) 34%,transparent)} [data-theme="dark"] .card{border-color:color-mix(in srgb,var(--line) 82%,var(--accent))} /* ---- the article column gets its own page, not the site ground ---- */ [data-theme="dark"] .article-hero{border-color:rgba(255,255,255,.09)} [data-theme="dark"] .prose pre{box-shadow:var(--lift)} /* ---- ambience ---- Measured down the left gutter, the dark page held a 2,400px run at exactly one value: the insights section, flat between two lit bands, reading as a hole rather than a room. A fixed field behind the content means no stretch of the page is ever dead flat, and it costs nothing to scroll because it never moves. */ [data-theme="dark"] body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(70rem 44rem at 84% 6%, rgba(124,92,255,.13), transparent 58%), radial-gradient(60rem 42rem at 6% 40%, rgba(16,178,164,.09), transparent 60%), radial-gradient(64rem 46rem at 74% 84%, rgba(64,124,255,.10), transparent 60%); } /* A plain section between two bands still needs to be a surface of its own. */ [data-theme="dark"] .section:not(.band):not(.mesh){ background:linear-gradient(180deg,rgba(255,255,255,.022) 0%,transparent 42%,rgba(255,255,255,.016) 100%); } [data-theme="dark"] .section + .section{border-top:1px solid rgba(255,255,255,.045)} /* Footer group labels: heading semantics, the size they always were. */ .site-footer .foot-title{ font-family:var(--font-display);font-size:.78rem;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:.9rem; }