/* ============================================================
Ansis Jānis Ozolins personal site
Warm · calm · light editorial one-page + blog
(inspired by the calm/warm designs on onepagelove.com)
============================================================ */
:root {
color-scheme: light;
/* Light theme (default) */
--bg: #F3EFE7; --bg-tint: #ECE6DA; --bg-2: #ECE6DA; --card: #FBFAF6;
--ink: #14161A; --ink-2: #23262C; --text: #23262C; --soft: #63615A; --muted: #63615A;
--rule: rgba(20,22,26,.12); --line: rgba(20,22,26,.12); --line-2: rgba(20,22,26,.22);
--accent: #C2613A; --accent-dk: #954920; --accent-strong: #B0522B; --accent-hover: #954920; --accent-soft: #F0DDCF; --tag-bg: #EDE7DB;
--ok: #2C6B42; --err: #A33223;
--ease: cubic-bezier(.2,.7,.3,1); --dur: .18s;
--panel-ink: #14161A; --panel-ink-2: #1C1F25;
--on-ink: #F1ECE2; --on-ink-muted: #A7A294; --on-ink-line: rgba(255,255,255,.14);
--shadow: 0 18px 44px -28px rgba(20,22,26,.42);
--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--sans: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
[data-theme="dark"] {
color-scheme: dark;
--bg: #0D0F11; --bg-tint: #131619; --bg-2: #131619; --card: #191C20;
--ink: #F1ECE2; --ink-2: #E7E2D7; --text: #E7E2D7; --soft: #8B877D; --muted: #8B877D;
--rule: rgba(255,255,255,.12); --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.22);
--accent: #C2613A; --accent-dk: #D2754E; --accent-strong: #B0522B; --accent-hover: #954920; --accent-soft: #2A211C; --tag-bg: #1C1F25;
--ok: #86C495; --err: #E8907C;
--panel-ink: #1B1F24; --panel-ink-2: #22262C;
--on-ink: #F1ECE2; --on-ink-muted: #A7A294; --on-ink-line: rgba(255,255,255,.14);
--shadow: 0 18px 44px -28px rgba(0,0,0,.6);
}
/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin: 0; padding: 0;
transition: background-color 0.25s ease, color 0.25s ease;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; }
p { color: var(--text); }
a { color: var(--ink); text-decoration: none; }
::selection { background: var(--accent-strong); color: #fff; }
::-moz-selection { background: var(--accent-strong); color: #fff; }
::placeholder { color: var(--muted); opacity: 1; }
html { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea { caret-color: var(--accent); }
.Select-input > input, .Select input, .lang-select input, .blog-filter input { caret-color: transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 70%, transparent); background-clip: padding-box; }
/* ---------------- Nav (minimal, warm) ---------------- */
.site-navbar {
background-color: var(--bg) !important;
border-bottom: 1px solid var(--rule);
padding-top: 8px; padding-bottom: 8px;
}
.site-navbar .navbar-toggler { border-color: var(--rule); padding: 4px 8px; }
.site-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
/* collapsed menu (small screens): give the links room to breathe */
.site-navbar .navbar-nav .nav-link { padding: 6px 10px; }
@media (max-width: 991px) {
.site-navbar .navbar-nav { padding-top: 8px; }
.site-navbar .navbar-nav .nav-link { padding: 8px 4px; }
}
.site-navbar .brand { font-weight: 700; color: var(--ink) !important; font-size: 1.02rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { height: 32px; width: 32px; display: block; border-radius: 9px; }
.brand-name { line-height: 1; }
.site-navbar .nav-link { color: var(--soft) !important; font-weight: 500; font-size: 0.95rem; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--accent) !important; }
.site-navbar .dropdown-menu { background: var(--bg-tint); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 30px rgba(59,48,38,0.10); }
.site-navbar .dropdown-item:hover { background: var(--accent-soft); }
/* ---------------- Layout ---------------- */
.site-main { min-height: 70vh; }
.wrap { max-width: 700px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 60px 0; }
.sec-first { padding-top: 46px; padding-bottom: 34px; }
.sec-tint { background: var(--bg-tint); }
.eyebrow-title {
font-family: var(--mono);
font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em;
color: var(--muted); font-weight: 500; margin-bottom: 22px;
}
/* ---------------- Hero ---------------- */
.hero-photo-min {
width: 124px; height: 124px; border-radius: 50%; object-fit: cover;
margin-bottom: 28px; box-shadow: 0 12px 30px rgba(59,48,38,0.16);
}
.eyebrow { font-size: 0.95rem; color: var(--soft); font-weight: 500; margin-bottom: 16px; }
.big-name { font-size: 3.6rem; line-height: 1.05; margin: 0 0 16px; color: var(--ink); }
.lead { font-size: 1.32rem; color: var(--ink); font-weight: 500; line-height: 1.45; margin-bottom: 22px; }
.intro { font-size: 1.13rem; line-height: 1.78; color: var(--ink-2); margin-bottom: 16px; }
.intro strong { color: var(--ink); font-weight: 600; }
.links-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* buttons */
.btn-ink {
background: var(--accent-strong); color: #fff !important; border: 1px solid var(--accent-strong);
border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: 0.95rem;
transition: background 0.15s ease; display: inline-block;
}
.btn-ink:hover { background: var(--accent-hover); color: #fff !important; }
.btn-ghost {
background: transparent; color: var(--ink) !important; border: 1px solid var(--rule);
border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: 0.95rem;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; display: inline-block;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent) !important; }
/* ---------------- Work ---------------- */
.work-item {
display: grid; grid-template-columns: 1fr auto; gap: 4px 18px;
padding: 22px 0; border-top: 1px solid var(--rule);
}
.work-role { font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.work-org { color: var(--soft); font-size: 0.96rem; margin-top: 1px; }
.work-period { color: var(--soft); font-size: 0.9rem; white-space: nowrap; text-align: right; padding-top: 2px; }
.work-desc { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.98rem; line-height: 1.62; margin: 8px 0 0; }
/* ---------------- Skills ---------------- */
.skill-cat { margin-bottom: 24px; }
.skill-cat:last-child { margin-bottom: 0; }
.skill-cat h3 { font-size: 1rem; margin-bottom: 12px; color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
background: var(--tag-bg); border: 1px solid var(--rule); color: var(--ink-2);
border-radius: 999px; padding: 6px 14px; font-size: 0.88rem; font-weight: 500;
}
/* ---------------- Certification ---------------- */
.cert { font-size: 1.1rem; line-height: 1.7; color: var(--ink-2); }
.cert strong { color: var(--ink); font-weight: 700; }
/* ---------------- Education ---------------- */
.edu-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.edu-row .d { font-weight: 600; color: var(--ink); }
.edu-row .s { color: var(--soft); text-align: right; }
/* ---------------- Projects ---------------- */
.proj-item { padding: 22px 0; border-top: 1px solid var(--rule); }
.proj-item h3 { font-size: 1.18rem; margin: 0 0 5px; color: var(--ink); }
.proj-desc { color: var(--ink-2); font-size: 0.98rem; line-height: 1.62; margin: 0 0 10px; }
.proj-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.proj-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.proj-link { color: var(--accent); font-weight: 600; font-size: 0.92rem; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.proj-link:hover { color: var(--accent-dk); border-color: var(--accent-dk); }
.proj-meta { color: var(--soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* ---------------- CTA / contact ---------------- */
.cta h2 { font-size: 2.5rem; margin-bottom: 14px; color: var(--ink); }
.cta p { font-size: 1.13rem; color: var(--ink-2); margin-bottom: 8px; line-height: 1.7; }
/* ---------------- Blog ---------------- */
.blog-h1 { font-size: 2.6rem; line-height: 1.08; margin: 22px 0 12px; color: var(--ink); }
.blog-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 0 26px; }
.blog-search {
flex: 1 1 240px; min-width: 0;
padding: 10px 16px; border: 1px solid var(--rule); border-radius: 999px;
background: var(--card); color: var(--ink); font-size: 0.95rem; font-family: inherit;
}
.blog-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.blog-filter { width: 185px; font-size: 0.92rem; }
.post-meta-row { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.post-cat {
background: var(--accent-soft); color: var(--accent-dk); border: 1px solid var(--rule);
border-radius: 999px; padding: 2px 12px; font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
}
/* Wider blog index, and a more generous single-post reading column */
.blog-wrap { max-width: 1080px; }
.post-wrap { max-width: 900px; }
.blog-wrap .intro { max-width: 65ch; }
.blog-wrap .subscribe { max-width: 760px; }
/* Responsive card grid */
.blog-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .blog-list { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.blog-card-link { display: block; height: 100%; }
.blog-card {
height: 100%;
display: flex; flex-direction: column;
padding: 24px 24px 22px;
background: var(--card);
border: 1px solid var(--rule);
border-radius: 16px;
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.blog-card-link:hover .blog-card { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-card-link:active .blog-card { transform: translateY(-1px); }
.blog-card .proj-link { margin-top: auto; }
.post-date { color: var(--soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.post-title-link { font-size: 1.4rem; margin: 0 0 8px; color: var(--ink); transition: color 0.15s ease; }
.blog-card-link:hover .post-title-link { color: var(--accent); }
.post-summary { color: var(--ink-2); margin: 0 0 12px; line-height: 1.6; }
/* single post */
.post-h1 { font-size: 2.7rem; line-height: 1.1; margin: 26px 0 14px; color: var(--ink); }
.post-content { color: var(--ink-2); font-size: 1.13rem; line-height: 1.8; overflow-wrap: break-word; }
.post-content > p, .post-content > ul, .post-content > ol, .post-content > blockquote { max-width: 72ch; }
.post-content > h2, .post-content > h3 { max-width: 60ch; }
.post-content h1, .post-content h2, .post-content h3 { color: var(--ink); margin: 1.6em 0 0.5em; }
.post-content h2 { font-size: 1.6rem; }
.post-content h3 { font-size: 1.25rem; }
.post-content p { margin: 0 0 1.15em; }
.post-content a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.post-content ul, .post-content ol { margin: 0 0 1.15em 1.25em; }
.post-content li { margin-bottom: 0.45em; }
.post-content blockquote { border-left: 1px solid var(--accent); margin: 1.3em 0; padding: 0.3em 0 0.3em 1.2em; color: var(--soft); font-style: italic; }
/* Tables (e.g. comparison matrices) - theme-aware, scrollable when wide */
.post-content table {
display: block; max-width: 100%; overflow-x: auto;
border-collapse: collapse; margin: 1.4em 0; font-size: 0.9rem; line-height: 1.45;
}
.post-content th, .post-content td {
border: 1px solid var(--rule); padding: 8px 12px; text-align: left; vertical-align: top;
min-width: 110px;
}
.post-content th { background: var(--tag-bg); color: var(--ink); font-weight: 600; white-space: nowrap; }
.post-content tr:nth-child(even) td { background: var(--bg-tint); }
/* Inline code keeps the page's warm tag colour */
.post-content code { background: var(--tag-bg); color: var(--ink); padding: 2px 6px; border-radius: 6px; font-size: 0.92em; }
/* Code blocks: one cohesive dark box with high-contrast syntax, in both light and dark site themes */
.post-content pre {
background: #14171c !important;
color: #e7e2d7;
padding: 18px 20px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .08);
overflow: auto;
font-size: 0.9rem;
line-height: 1.6;
}
.post-content pre code,
.post-content pre code.hljs {
background: transparent !important;
color: inherit;
padding: 0;
font-size: inherit;
}
/* highlight.js token palette tuned for the dark code surface */
.post-content .hljs { color: #e7e2d7; background: transparent !important; }
.post-content .hljs-comment, .post-content .hljs-quote { color: #7f8895 !important; font-style: italic; }
.post-content .hljs-keyword, .post-content .hljs-selector-tag, .post-content .hljs-literal, .post-content .hljs-section, .post-content .hljs-link { color: #e08a5b !important; }
.post-content .hljs-built_in, .post-content .hljs-type, .post-content .hljs-class .hljs-title { color: #e0b15b !important; }
.post-content .hljs-string, .post-content .hljs-attr, .post-content .hljs-meta .hljs-string, .post-content .hljs-regexp { color: #9ccb7c !important; }
.post-content .hljs-number, .post-content .hljs-symbol, .post-content .hljs-bullet { color: #cf8de0 !important; }
.post-content .hljs-title, .post-content .hljs-name, .post-content .hljs-function .hljs-title { color: #6fb0e8 !important; }
.post-content .hljs-attribute, .post-content .hljs-variable, .post-content .hljs-template-variable { color: #e7c07a !important; }
.post-content .hljs-meta { color: #8b94a3 !important; }
.post-content .hljs-emphasis { font-style: italic; }
.post-content .hljs-strong { font-weight: 700; }
.post-content img { max-width: 100%; border-radius: 12px; }
.back-link { color: var(--soft); font-weight: 500; font-size: 0.9rem; }
.back-link:hover { color: var(--accent); }
/* ---------------- Subscribe ---------------- */
.subscribe {
background: var(--accent-soft);
border: 1px solid var(--rule);
border-radius: 18px;
padding: 32px 28px;
margin-top: 44px;
}
.subscribe-title { font-size: 1.4rem; margin: 0 0 6px; color: var(--ink); }
.subscribe-text { color: var(--ink-2); margin: 0 0 18px; line-height: 1.6; }
.subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe-input {
flex: 1 1 260px; min-width: 0;
padding: 11px 18px; border: 1px solid var(--rule); border-radius: 999px;
background: var(--card); color: var(--ink); font-size: 0.95rem; font-family: inherit;
}
.subscribe-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.subscribe-msg { margin-top: 12px; color: var(--text); font-weight: 600; font-size: 0.95rem; min-height: 1.2em; }
.msg-ok { color: var(--ok); }
.msg-err { color: var(--err); }
.msg-ok::before { content: "\2713"; margin-right: 8px; }
.msg-err::before { content: "\0021"; margin-right: 8px; font-weight: 700; }
.consent { margin-top: 14px; font-size: 0.9rem; color: var(--ink-2); }
.consent label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; line-height: 1.5; }
.consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.gdpr-note { margin-top: 14px; font-size: 0.8rem; color: var(--soft); line-height: 1.55; }
.gdpr-note a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.footer-link { color: var(--soft); font-weight: 500; font-size: 0.9rem; }
.footer-link:hover { color: var(--accent); }
/* ---------------- Admin publisher ---------------- */
.admin-form { max-width: 660px; margin-top: 8px; }
.admin-label { display: block; font-weight: 600; color: var(--ink); margin: 16px 0 6px; font-size: 0.92rem; }
.admin-input {
width: 100%; box-sizing: border-box; padding: 10px 14px;
border: 1px solid var(--rule); border-radius: 10px; background: var(--card);
color: var(--ink); font-size: 0.95rem; font-family: inherit;
}
.admin-textarea {
width: 100%; box-sizing: border-box; min-height: 320px; padding: 12px 14px;
border: 1px solid var(--rule); border-radius: 10px; background: var(--card);
color: var(--ink); font-size: 0.95rem; line-height: 1.6;
font-family: ui-monospace, Menlo, Consolas, monospace;
}
.admin-input:focus, .admin-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.admin-status { margin-top: 14px; color: var(--accent-dk); font-weight: 600; }
/* ---------------- Videos ---------------- */
.video-section { margin-bottom: 44px; }
.video-section:last-child { margin-bottom: 0; }
.video-blurb { color: var(--soft); margin: -14px 0 18px; font-size: 0.95rem; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.video-card {
position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px;
overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow); background: #000;
}
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-empty { color: var(--soft); font-style: italic; }
/* ---------------- Downloads ---------------- */
.download-section { margin-bottom: 40px; }
.download-section:last-child { margin-bottom: 0; }
.download-link { display: block; height: 100%; }
.download-link .project-card { height: 100%; }
/* ---------------- Mobile ---------------- */
@media (max-width: 768px) {
.big-name { font-size: 2.5rem; }
.blog-h1, .post-h1 { font-size: 2rem; }
.lead { font-size: 1.18rem; }
.sec { padding: 42px 0; }
.work-item { grid-template-columns: 1fr; }
.work-period { text-align: left; }
.cta h2 { font-size: 2rem; }
}
/* ============================================================
Legacy styling kept for the Trader / financial dashboard pages
============================================================ */
button, input[type="submit"] { border-radius: 8px; font-weight: 500; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.dash-graph, .js-plotly-plot {
background-color: #ffffff !important; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); padding: 10px; margin-bottom: 20px;
}
.card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); padding: 16px; margin-bottom: 16px;
}
.fd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-input { width: 220px; }
.fd-dropdown { width: 180px; }
.fd-btn { padding: 8px 14px; }
.fd-status { margin-left: 6px; font-style: italic; color: #6b7280; }
.fd-controls { display: grid; gap: 12px; }
.fd-control { margin-bottom: 8px; }
.fd-peers-label { margin-right: 8px; }
.fd-peers-input { width: 420px; }
.cards-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; }
.kpi-card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
padding: 14px 18px; min-width: 160px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.kpi-value { font-size: 1.2rem; font-weight: 700; color: #111827; }
.kpi-label { color: #6b7280; font-size: 0.9rem; }
.dash-table-container { border-radius: 10px; overflow: hidden; }
/* ============================================================
2026 redesign: editorial, terracotta accent,
Newsreader (serif) + Schibsted Grotesk (sans) + JetBrains Mono
============================================================ */
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(194,97,58,.5);}70%{box-shadow:0 0 0 8px transparent;}100%{box-shadow:0 0 0 0 transparent;} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.btn-ink, .btn-ghost { border-radius: 6px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px,5vw,48px); }
.sec-pad { padding: clamp(56px,9vh,108px) 0; }
.ink-section { background: var(--panel-ink); color: var(--on-ink); }
.ink-section h1, .ink-section h2, .ink-section h3 { color: var(--on-ink); }
.sec-label { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.sec-label .n { color: var(--accent); }
.sec-label .ln { width: 22px; height: 1px; background: var(--line-2); display: inline-block; }
.ink-section .sec-label { color: var(--accent); }
.h-display { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; margin: 0; font-size: clamp(30px,5vw,54px); }
/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 12px clamp(16px,5vw,48px); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hdr-brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.hdr-badge { width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid var(--accent); border-radius: 6px; font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--ink); }
.hdr-name { font-weight: 600; font-size: 14px; letter-spacing: -.01em; color: var(--ink); line-height: 1.05; }
.hdr-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.hdr-nav { display: flex; align-items: center; gap: clamp(12px,2.2vw,28px); flex-wrap: wrap; }
.hdr-nav a { color: var(--text); font-size: 14px; font-weight: 500; padding: 4px 0; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; }
.hdr-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hdr-toggle { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); background: transparent; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 15px; transition: color .2s, border-color .2s; }
.hdr-toggle:hover { color: var(--accent-text); border-color: var(--accent); }
.hdr-links { display: flex; align-items: center; gap: clamp(12px,2.2vw,28px); flex-wrap: wrap; }
.lang-select { width: 122px; font-family: var(--mono); font-size: 12px; }
.lang-select .Select-control, .lang-select .Select__control { background: transparent; border-color: var(--line-2); border-radius: 6px; min-height: 36px; }
.lang-select .Select-value-label, .lang-select .Select__single-value { color: var(--text) !important; }
/* Hero */
.hero2 { position: relative; overflow: hidden; }
.hero2-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 96px 96px; -webkit-mask-image: radial-gradient(90% 70% at 82% 4%,#000,transparent 72%); mask-image: radial-gradient(90% 70% at 82% 4%,#000,transparent 72%); opacity: .35; pointer-events: none; }
.hero2-inner { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: clamp(32px,5vw,68px); align-items: center; padding: clamp(44px,8vh,96px) 0 clamp(34px,6vh,60px); }
.hero-name { font-family: var(--serif); font-weight: 500; font-size: clamp(44px,8.2vw,100px); line-height: .96; letter-spacing: -.022em; margin: 0 0 24px; color: var(--ink); }
.hero-name .dot { color: var(--accent); }
.hero-lead { font-family: var(--serif); font-size: clamp(19px,2.2vw,27px); line-height: 1.42; color: var(--text); max-width: 30ch; margin: 0 0 28px; }
.hero-lead em { font-style: italic; color: var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-dot { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); padding-left: 6px; }
.hero-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.hero-photo-wrap { position: relative; aspect-ratio: 4/5; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); }
.hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-tags { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.hero-photo-tags span { background: var(--panel-ink); color: var(--on-ink); padding: 5px 9px; border-radius: 4px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); border-top: 1px solid var(--line); padding-bottom: clamp(34px,6vh,56px); position: relative; }
.stat { padding: 18px 20px 0; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stat-v { font-size: 16px; font-weight: 600; color: var(--ink); font-family: var(--sans); }
/* Marquee */
.marquee-wrap { background: var(--panel-ink); overflow: hidden; border-top: 1px solid var(--on-ink-line); border-bottom: 1px solid var(--on-ink-line); }
.marquee { display: flex; width: max-content; animation: marquee 42s linear infinite; padding: 13px 0; }
.marquee .grp { display: flex; align-items: center; }
.marquee .m { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--on-ink); padding: 0 26px; white-space: nowrap; }
.marquee .d { color: var(--accent); font-size: 10px; }
/* Services (dark) */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 16px; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(3,1fr); } }
.svc-card { padding: 26px 24px; background: var(--panel-ink-2); border: 1px solid var(--on-ink-line); border-radius: 8px; transition: transform .25s, border-color .25s; }
.svc-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.svc-n { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 16px; }
.svc-title { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 9px; color: var(--on-ink); }
.svc-desc { font-size: 16px; line-height: 1.58; color: var(--on-ink-muted); margin: 0 0 16px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.svc-tag { font-family: var(--mono); font-size: 11px; color: var(--on-ink-muted); border: 1px solid var(--on-ink-line); padding: 4px 9px; border-radius: 999px; }
/* Section head with "more" link */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(28px,4vw,44px); }
.sec-more { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.sec-more:hover { color: var(--accent); }
/* Work / project rows */
.row-list { border-top: 1px solid var(--line); }
.row-item { display: grid; grid-template-columns: 52px 1fr; gap: 0 20px; padding: 24px 12px; border-bottom: 1px solid var(--line); color: inherit; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.row-item:hover { background: var(--card); transform: translateX(6px); }
.row-n { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 7px; }
.row-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.row-client { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.row-title { font-family: var(--serif); font-size: clamp(21px,3vw,29px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.row-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.row-tag { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line-2); padding: 3px 8px; border-radius: 999px; }
.row-arrow { font-size: 22px; color: var(--accent); line-height: 1; }
/* Writing */
.feat-card { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(18px,4vw,48px); padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; align-items: center; transition: border-color .25s, transform .25s; color: inherit; }
.feat-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.feat-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.feat-meta { display: flex; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 12px; flex-wrap: wrap; }
.feat-title { font-family: var(--serif); font-weight: 500; font-size: clamp(23px,3.2vw,34px); line-height: 1.14; margin: 0 0 12px; color: var(--ink); }
.feat-excerpt { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.post-row { display: grid; grid-template-columns: 104px 1fr auto; gap: 12px 20px; align-items: center; padding: 18px 12px; border-bottom: 1px solid var(--line); color: inherit; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.post-row:hover { background: var(--card); transform: translateX(6px); }
.post-row .d { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.post-row .t { font-family: var(--serif); font-size: clamp(18px,2.1vw,22px); line-height: 1.2; color: var(--ink); }
.post-row .pmeta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.post-row .cat { border: 1px solid var(--line-2); padding: 3px 8px; border-radius: 999px; }
/* About */
.about2-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: clamp(32px,5vw,64px); align-items: start; }
.about2-p { font-size: 16px; line-height: 1.66; color: var(--text); margin: 0 0 18px; max-width: 65ch; }
.about2-p.muted { color: var(--muted); }
.toolbox { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tool { font-size: 13px; font-weight: 500; color: var(--text); background: var(--card); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; font-family: var(--sans); }
/* FP&A modules grid */
.module-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 26px 24px; }
.module-group-title { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin: 0 0 14px; }
.module-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.module-chip { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; }
/* About-page timeline */
.atl { position: relative; max-width: 860px; }
.atl::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.atl-item { position: relative; padding: 0 0 34px 44px; }
.atl-item:last-child { padding-bottom: 0; }
.atl-node { position: absolute; left: 3px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg-2); }
.atl-year { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.atl-role { font-family: var(--serif); font-weight: 500; font-size: clamp(20px,2.6vw,26px); line-height: 1.15; color: var(--ink); margin: 0 0 4px; }
.atl-company { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 9px; }
.atl-desc { color: var(--muted); font-size: 0.97rem; line-height: 1.6; margin: 0; max-width: 65ch; }
.atl-roles { margin-top: 16px; max-width: 560px; }
.atl-role-row { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.atl-role-row:first-child { border-top: none; padding-top: 2px; }
.atl-roleyr { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); min-width: 116px; flex-shrink: 0; }
.atl-rolename { font-size: 1rem; color: var(--ink); font-weight: 500; }
.record-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.record-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.record-head .dot { color: var(--accent); }
.record-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.record-k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.record-v { font-size: 14px; font-weight: 500; color: var(--ink); text-align: right; font-family: var(--sans); }
/* Footer (redesign) */
.site-footer2 { background: var(--bg); border-top: 1px solid var(--line); padding: 26px 0 32px; }
.site-footer2 .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.foot-left { display: flex; align-items: center; gap: 11px; }
.foot-badge { width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--accent); border-radius: 5px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.foot-mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.foot-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foot-links a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.foot-links a:hover { color: var(--accent); }
@media (max-width: 860px) {
/* one row that scrolls, instead of four wrapped rows eating the viewport */
.site-header__inner { flex-wrap: nowrap; gap: 10px; padding: 10px 16px; }
.hdr-nav { flex: 1 1 auto; min-width: 0; gap: 10px; }
.hdr-links {
flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: linear-gradient(90deg,#000 88%,transparent);
}
.hdr-links::-webkit-scrollbar { display: none; }
.hdr-links a { white-space: nowrap; }
.hdr-name { font-size: 13px; }
.lang-select { width: 76px; }
}
@media (max-width: 720px) {
.hdr-tag { display: none; }
.hero-name { font-size: clamp(38px,12vw,60px); }
}
/* ---------------- Accessibility & motion ---------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.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; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--accent-strong); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
font-weight: 600; font-size: 14px;
}
.skip-link:focus { left: 0; }
.hdr-links a { padding: 8px 6px; }
.marquee-wrap:hover .marquee, .marquee-wrap:focus-within .marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.marquee { animation: none; }
.marquee-wrap { overflow-x: auto; }
.blog-card-link:hover .blog-card { transform: none; }
.hero-dot::before, .hero-dot::after { animation: none; }
.svc-card:hover, .feat-card:hover, .post-row:hover, .row-item:hover { transform: none; }
html { scroll-behavior: auto; }
}
/* ---------------- Skills-audit refinements ---------------- */
[id] { scroll-margin-top: 84px; }
a, button, input, select, textarea { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }
.h-display, .hero-name, .blog-h1, .post-h1, .feat-title, .post-title-link, .svc-title { text-wrap: balance; }
/* Dark-mode-safe dropdown menus (dcc.Dropdown / react-select) */
.blog-filter .Select-control, .lang-select .Select-menu-outer, .blog-filter .Select-menu-outer {
background: var(--card); border-color: var(--rule); color: var(--text);
}
.blog-filter .Select-control { border-radius: 999px; height: 42px; padding-left: 6px; }
.blog-filter .Select-control .Select-value, .blog-filter .Select-control .Select-placeholder { line-height: 40px; padding-left: 16px; }
.blog-filter .Select-menu-outer, .lang-select .Select-menu-outer {
border-radius: 12px; overflow: hidden; margin-top: 6px; box-shadow: var(--shadow); border: 1px solid var(--rule);
}
.blog-filter.is-focused:not(.is-open) > .Select-control { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.blog-filter .Select-value-label, .blog-filter .Select-placeholder { color: var(--text) !important; }
.blog-filter .Select-input > input { color: var(--text); }
.lang-select .VirtualizedSelectOption, .blog-filter .VirtualizedSelectOption { background: var(--card); color: var(--text); }
.lang-select .VirtualizedSelectFocusedOption, .blog-filter .VirtualizedSelectFocusedOption { background: var(--accent-soft); color: var(--accent-dk); }
.blog-filter .Select-arrow { border-top-color: var(--muted); }
/* On-ink secondary button (dark contact sections) */
.btn-onink { display: inline-block; color: var(--on-ink); font-size: 15px; font-weight: 600; padding: 15px 26px; border: 1px solid var(--on-ink-line); border-radius: 6px; transition: color .2s, border-color .2s; }
.btn-onink:hover { color: var(--accent); border-color: var(--accent); }
/* Text-sized terracotta needs 4.5:1; --accent stays for borders, fills, focus rings */
:root { --accent-text: #954920; --accent-text-onink: #D2754E; }
[data-theme="dark"] { --accent-text: #D2754E; }
.sec-label .n, .row-n, .feat-label, .atl-year, .module-group-title,
.hero-lead em, .proj-link, .post-content a, .gdpr-note a { color: var(--accent-text); }
.ink-section .sec-label, .ink-section .sec-label .n, .svc-n { color: var(--accent-text-onink); }
.hdr-nav a:hover, .sec-more:hover, .back-link:hover, .foot-links a:hover { color: var(--accent-text); }
.blog-card-link:hover .post-title-link { color: var(--accent-text); }
/* Current-page indicator + route-change focus target */
.hdr-links a[aria-current="page"] { color: var(--accent-text); }
#main:focus { outline: none; }
/* ---------------- Press and disabled states ---------------- */
.btn-ink:active, .btn-ghost:active, .btn-onink:active, .hdr-toggle:active { transform: translateY(1px); }
.svc-card:active, .feat-card:active { transform: translateY(-1px); }
button:disabled, .btn-ink:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.post-content a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-content table td, .atl-year, .post-date { font-variant-numeric: tabular-nums; }
/* the header sits over inverted panels: keep it a clean surface, not a muddy tint */
.site-header { border-bottom: 1px solid var(--line); }
/* Dark mode: panels are only 1.16:1 from the page, so give the edge a real line */
[data-theme="dark"] .ink-section,
[data-theme="dark"] .marquee-wrap { border-top: 1px solid var(--on-ink-line); border-bottom: 1px solid var(--on-ink-line); }
/* ---------------- Post timeline (```timeline fenced block) ---------------- */
.tl { --rail: 5.6rem; position: relative; margin: 2.4em 0 2.8em; }
.tl::before {
content: ""; position: absolute; left: var(--rail); top: .55rem; bottom: .55rem;
width: 1px; background: var(--line-2);
}
.tl-era {
font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); margin: 2.1em 0 1.15em; padding-left: calc(var(--rail) + 1.7rem);
}
.tl-era:first-child { margin-top: 0; }
.tl-item { position: relative; padding: 0 0 1.45rem calc(var(--rail) + 1.7rem); }
.tl-item:last-child { padding-bottom: 0; }
.tl-node {
position: absolute; left: var(--rail); top: .48rem; width: 9px; height: 9px; margin-left: -4px;
border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
.tl-year {
position: absolute; left: 0; top: .18rem; width: calc(var(--rail) - 1rem); text-align: right;
font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--accent-dk);
}
.tl-head { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.tl-body { color: var(--muted); font-size: .96rem; line-height: 1.65; margin: .28rem 0 0; max-width: 58ch; }
@media (max-width: 640px) {
.tl::before, .tl-node { display: none; }
.tl-era { padding-left: 1.15rem; }
.tl-item { padding-left: 1.15rem; border-left: 1px solid var(--line-2); }
.tl-year { position: static; width: auto; text-align: left; display: block; margin-bottom: .18rem; }
}
/* ---------------- Financial dashboard ---------------- */
.fd-page { max-width: 1180px; margin: 0 auto; padding: clamp(20px,4vw,42px) clamp(16px,3vw,28px) 60px; }
.fd-h1 { font-family: var(--serif); font-size: clamp(30px,4.4vw,46px); font-weight: 500; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
.fd-h3 { font-family: var(--serif); font-size: clamp(22px,3vw,30px); font-weight: 500; color: var(--ink); margin: 2.2rem 0 1rem; }
.fd-h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: .01em; color: var(--ink); margin: 0 0 .5rem; }
.fd-intro { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 20px; }
.fd-note { color: var(--muted); font-size: .88rem; line-height: 1.65; margin: 0 0 .7rem; }
.fd-block { margin-bottom: 30px; }
.fd-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: clamp(16px,2.4vw,24px); margin-bottom: 22px; }
.fd-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.fd-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fd-fields:last-child { margin-bottom: 0; }
.fd-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fd-label { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fd-input {
width: 100%; padding: 9px 12px; border-radius: 8px; font-family: var(--sans); font-size: 14px;
background: var(--card); color: var(--ink); border: 1px solid var(--line-2);
}
.fd-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fd-controls .fd-field { flex: 0 1 220px; }
.fd-run { padding: 10px 22px; font-size: 14px; white-space: nowrap; }
.fd-run:disabled { opacity: .55; cursor: progress; }
.fd-status { font-size: .88rem; color: var(--muted); align-self: center; }
.fd-method { margin: 0 0 24px; }
.fd-method-link { color: var(--accent-dk); font-weight: 600; border-bottom: 1px solid var(--accent-dk); }
.fd-dropdown .Select-control, .fd-dropdown .Select__control {
background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; min-height: 40px; color: var(--ink);
}
.fd-dropdown .Select-value-label, .fd-dropdown .Select__single-value, .fd-dropdown .Select-placeholder { color: var(--text) !important; }
.fd-dropdown .Select-menu-outer { background: var(--card); border: 1px solid var(--line-2); color: var(--text); }
.fd-dropdown .VirtualizedSelectOption { background: var(--card); color: var(--text); }
.fd-dropdown .VirtualizedSelectFocusedOption { background: var(--accent-soft); color: var(--accent-dk); }
.fd-dropdown.is-focused:not(.is-open) > .Select-control { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fd-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(16px,2.4vw,24px); margin-bottom: 22px; }
.fd-company-name { font-family: var(--serif); font-size: clamp(22px,3vw,32px); font-weight: 500; color: var(--ink); margin: 0 0 4px; }
.fd-company-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.fd-company-stats { color: var(--ink-2); font-size: .95rem; margin-bottom: 10px; }
.fd-card details summary { cursor: pointer; color: var(--accent-dk); font-size: .9rem; font-weight: 600; }
.fd-summary { color: var(--muted); font-size: .93rem; line-height: 1.7; margin: 10px 0 0; }
.fd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.fd-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.fd-kpi-k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.fd-kpi-v { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--ink); line-height: 1.1; }
.fd-disclaimer { color: var(--muted); font-size: .85rem; line-height: 1.7; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 26px; }
/* dash_table chrome that inline style props do not reach */
.fd-page .dash-table-container { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fd-page .dash-spreadsheet-container .dash-spreadsheet-inner input { color: var(--ink) !important; background: var(--card) !important; }
.fd-page .dash-filter input { color: var(--ink) !important; }
.fd-page .dash-filter--case, .fd-page .column-header--sort { color: var(--muted) !important; }
.fd-page .previous-next-container .page-number, .fd-page .previous-next-container button { color: var(--ink) !important; }
.fd-page .previous-next-container .current-page input { color: var(--ink) !important; background: var(--card) !important; }
@media (max-width: 640px) {
.fd-controls { flex-direction: column; align-items: stretch; }
.fd-controls .fd-field { flex: 1 1 auto; }
}
.fd-warn {
background: var(--accent-soft); border-left: 3px solid var(--accent-dk); color: var(--ink-2);
padding: 14px 20px; border-radius: 0 8px 8px 0; font-size: .92rem; line-height: 1.7;
margin: 0 0 22px;
}
/* Financial dashboard: classes added with the 2026 rewrite of the page */
.fd-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 12px 0 4px; }
.fd-stat { display: flex; flex-direction: column; gap: 2px; }
.fd-stat-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fd-stat-v { font-size: .98rem; color: var(--ink); font-weight: 500; }
.fd-hint { font-size: .78rem; color: var(--muted); }
.fd-details { margin: 0 0 26px; }
.fd-details > summary {
cursor: pointer; color: var(--accent-dk); font-weight: 600; font-size: .92rem;
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.fd-details > summary:hover { color: var(--accent); }
.fd-md { color: var(--ink-2); font-size: .95rem; line-height: 1.75; padding-top: 12px; }
.fd-md strong { color: var(--ink); }
.fd-highlight { color: var(--ink); font-weight: 600; font-size: .95rem; margin: 0 0 .6rem; }
/* Dash's bundled dcc stylesheet hardcodes `.dash-graph, .js-plotly-plot { background: #fff }`,
which paints a white slab behind every chart and is unmissable in dark mode. Our figures
set transparent paper and plot backgrounds themselves, so the containers must be
transparent too and let the card behind them show through in either theme. */
.dash-graph,
.js-plotly-plot,
.js-plotly-plot .plot-container,
.js-plotly-plot .svg-container,
.js-plotly-plot .main-svg { background: transparent !important; }
/* Control-row alignment.
Previously the row was bottom-aligned, so a field carrying a hint was taller and
its label and control sat ~20px above the others. Every field now renders the same
label / control / hint structure, the hint row is reserved even when empty, and the
row is top-aligned, so labels share one baseline and controls share another. */
.fd-controls .fd-hint,
.fd-fields .fd-hint { display: block; min-height: 1.15em; line-height: 1.15em; }
.fd-controls .fd-input,
.fd-controls .fd-dropdown .Select-control,
.fd-controls .fd-dropdown .Select__control { min-height: 42px; box-sizing: border-box; }
.fd-controls .fd-input { height: 42px; }
.fd-field-action { flex: 0 0 auto; }
.fd-field-action .fd-run { height: 42px; padding: 0 22px; }
.fd-field-action .fd-label { visibility: hidden; }
@media (max-width: 1000px) {
/* The control row wraps around here, so the button lands on its own line and the
spacer that keeps it on the controls' baseline becomes a gap above it. */
.fd-field-action .fd-label { display: none; }
}
@media (max-width: 640px) {
/* stacked: an empty reserved hint row would just add dead space */
.fd-controls .fd-hint:empty { display: none; min-height: 0; }
}
/* Prose on the tool pages fills the same column as the tables and charts beside it,
rather than stopping at a 62-80 character measure while a table next to it runs the
full width. The page is capped at 1180px so lines stay bounded; line-height is raised
a little to keep the longer measure comfortable. */
.fd-page .fd-intro,
.fd-page .fd-note,
.fd-page .fd-warn,
.fd-page .fd-md,
.fd-page .fd-summary,
.fd-page .fd-disclaimer,
.fd-page .fd-highlight { max-width: none; }
/* DataTable's native filter row ships with its own chrome that clashes with the site:
tinted inputs, a visible "Aa" case toggle and a left-aligned placeholder over
right-aligned numeric columns. Quieten it so it reads as part of the table. */
.fd-page .dash-filter input {
background: transparent !important; border: 1px solid var(--line) !important;
border-radius: 6px; padding: 3px 7px; font-family: var(--sans); font-size: 12.5px;
color: var(--ink) !important;
}
.fd-page .dash-filter input::placeholder { color: var(--muted); opacity: .8; }
.fd-page .dash-filter--case { display: none !important; }
.fd-page .dash-spreadsheet-inner tr:first-of-type .dash-filter { padding: 4px 8px; }
/* ---------------- Post diagrams (```flow and ```hub fences) ---------------- */
.flow-diagram {
display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
margin: 2em 0 2.2em;
}
.flow-step {
flex: 1 1 200px; min-width: 0;
background: var(--card); border: 1px solid var(--line-2); border-radius: 10px;
padding: 14px 16px;
}
.flow-title { font-weight: 600; color: var(--ink); font-size: .98rem; line-height: 1.3; }
.flow-caption { color: var(--muted); font-size: .86rem; line-height: 1.5; margin-top: 5px; }
.flow-arrow {
flex: 0 0 auto; align-self: center; width: 20px; height: 20px;
background: var(--accent-dk);
-webkit-mask: no-repeat center/20px url("data:image/svg+xml;utf8,");
mask: no-repeat center/20px url("data:image/svg+xml;utf8,");
}
@media (max-width: 680px) {
/* stacked: point the arrows down the column instead of across it */
.flow-diagram { flex-direction: column; }
.flow-arrow { transform: rotate(90deg); }
}
.hub-diagram { margin: 2em 0 2.4em; }
.hub-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.hub-line {
position: absolute; left: 50%; top: 50%; height: 1.5px;
background: var(--line-2); transform-origin: 0 50%;
}
.hub-center {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
background: var(--accent-strong); color: #fff; font-weight: 600;
padding: 14px 20px; border-radius: 12px; text-align: center;
font-size: .98rem; line-height: 1.3; max-width: 30%;
}
.hub-node {
position: absolute; transform: translate(-50%, -50%);
background: var(--card); color: var(--ink);
border: 1px solid var(--line-2); border-radius: 10px;
padding: 10px 14px; text-align: center;
font-size: .9rem; line-height: 1.3; width: 21%; min-width: 120px;
}
@media (max-width: 680px) {
/* a radial layout at phone width is unreadable: fall back to a plain list */
.hub-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 8px; }
.hub-line { display: none; }
.hub-center, .hub-node {
position: static; transform: none; width: auto; max-width: none; text-align: left;
}
}