/* Components from the Vloora design system (tokens in tokens.css). Concatenated in Vloora's order. */

/* ==== base ==== */
/* Base: element defaults every page shares. No classes here; components style their own parts. */
:root{color-scheme:only light}
:root[data-brand="dark"]{color-scheme:only dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-5)}
body{margin:0;min-width:0;color:var(--color-text-primary);background:var(--color-surface-canvas);font:400 var(--text-body)/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
main{min-width:0}
img{max-width:100%;height:auto}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:.22em}
a:hover{color:var(--color-link-hover)}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:var(--border-focus) solid var(--color-focus);outline-offset:var(--focus-offset)}
:focus-visible{outline:var(--border-focus) solid var(--color-focus-fallback);outline-offset:var(--focus-offset)}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3{font-weight:700;letter-spacing:-.04em}
h1,h2{line-height:1}
p{max-width:67ch}
strong{font-weight:600}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *{transition:none!important;animation:none!important}
}

/* ==== container ==== */
/* Container: the page column. Centered, 1536px at most, with the fluid gutter on both sides.
   Used inside every section; partials add it, content never needs to. */
.c-container{max-width:1536px;padding-inline:var(--space-gutter);margin-inline:auto;min-width:0}
@media (max-width:440px){
 .c-container{padding-inline:var(--space-gutter-narrow)}
}

/* ==== skip-link ==== */
/* Skip link: the first focusable element on every page; jumps to <main id="main">. */
.c-skip-link{position:absolute;left:12px;top:-100px;background:var(--color-accent);padding:var(--space-3);z-index:var(--z-skip)}
.c-skip-link:focus{top:8px}

/* ==== text-link ==== */
/* Text link: a short standalone link with a rule under it, such as "Read the research paper".
   The back link at the top of articles and news entries uses it too.
   --large: one step up, for links that sit under statement text. */
.c-text-link{display:inline-flex;gap:18px;font:600 var(--text-meta)/1.4 var(--font-ui);text-decoration:none;border-bottom:var(--border-hairline) solid currentColor;padding-bottom:6px}
.c-text-link--large{font-size:var(--text-small)}

/* ==== site-header ==== */
/* Site header: the brand field across the top of every page, with the wordmark, the primary
   nav, the contact button and, at 960px and below, the menu toggle. */
.c-site-header{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:var(--z-header);max-width:none;height:var(--space-header);background:var(--header-bg);color:var(--header-fg);border-bottom:0}
.c-site-header__brand{display:flex;align-items:center;flex:0 0 auto;width:152px;line-height:0;color:var(--header-fg);text-decoration:none}
.c-site-header__end{display:flex;align-items:center;gap:clamp(22px,3.3vw,60px);min-width:0}
@media (max-width:960px){
 .c-site-header{height:var(--space-header-compact)}
 .c-site-header__cta{display:none}
}
@media (max-width:750px){
 .c-site-header{flex-wrap:wrap;align-content:center;column-gap:12px}
 .c-site-header__brand{width:120px}
 .c-site-header__end{gap:10px}
}
@media print{
 .c-site-header{display:none}
}
@media (max-width:440px){
 .c-site-header__brand{width:88px}
}

/* ==== primary-nav ==== */
/* Primary nav: the section links in the header. The current page carries aria-current="page"
   and an accent bar under its link. At 960px and below the nav is the mobile menu: hidden until
   the menu toggle adds is-open, then a full-width panel under the header. Without scripts it
   stays open on phones. */
.c-primary-nav{display:flex;align-items:center;gap:clamp(17px,2.2vw,38px)}
.c-primary-nav__link{position:relative;line-height:84px;white-space:nowrap;text-decoration:none;font-size:var(--text-ui);font-weight:500;color:var(--header-fg)}
.c-primary-nav__link:hover{color:var(--header-link-hover)}
.c-primary-nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:var(--nav-current-indicator-height);background:var(--nav-current-indicator);border-radius:var(--radius-subtle)}
@media (max-width:960px){
 .c-primary-nav{display:none;position:absolute;top:var(--space-header-compact);left:0;right:0;background:var(--nav-menu-bg);padding:12px clamp(22px,4vw,60px) 25px;box-shadow:var(--shadow-menu-wide);flex-direction:column;align-items:flex-start;gap:0}
 .c-primary-nav.is-open{display:flex}
 .c-primary-nav__link{display:block;width:100%;padding:15px 0;line-height:1.4;border-bottom:var(--border-hairline) solid var(--color-border-on-brand)}
 .c-primary-nav__link[aria-current="page"]::after{bottom:5px;right:auto;width:44px}
}
@media (max-width:750px){
 html:not(.js) .c-primary-nav{display:flex}
}

/* ==== menu-toggle ==== */
/* Menu toggle: the "Menu" button that opens the primary nav at 960px and below.
   assets/site.js sets aria-expanded and toggles is-open on #primary-nav. */
.c-menu-toggle{display:none;border:var(--border-hairline) solid var(--color-border-on-brand-control);border-radius:var(--radius-pill);background:transparent;color:var(--header-fg);padding:9px var(--space-4);font:600 var(--text-ui-small) var(--font-ui)}
@media (max-width:960px){
 .c-menu-toggle{display:inline-block}
}
@media (max-width:440px){
 .c-menu-toggle{padding:9px 12px}
}

/* ==== theme-switch ==== */
/* Theme switch: the Light and Dark switcher in the header, a pill with the current theme filled.
   Shown only when scripts run. */
.c-theme-switch{display:none;border:var(--border-hairline) solid var(--color-border-on-brand-control);border-radius:var(--radius-pill);padding:2px}
.js .c-theme-switch{display:inline-flex}
.c-theme-switch__option{border:0;border-radius:var(--radius-pill);background:transparent;color:var(--header-fg);padding:7px var(--space-3);font:600 var(--text-ui-small) var(--font-ui);cursor:pointer}
.c-theme-switch__option[aria-pressed="true"]{background:var(--header-fg);color:var(--header-bg)}
.c-theme-switch__option:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
@media (max-width:750px){
 .c-theme-switch__option{padding:6px 10px}
}
@media (max-width:440px){
 .c-theme-switch__option{padding:6px 8px}
}

/* ==== footer ==== */
/* Footer: the footer field with the signup form, the email address, the copyright and footer
   links, and the giant wordmark. --compact drops the signup head (used on Thanks). */
.c-footer{background:var(--footer-bg);color:var(--footer-fg);padding-top:110px;padding-bottom:clamp(28px,4vw,56px)}
.c-footer__head{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:0;padding-top:0}
.c-footer__head>div{min-width:0}
.c-footer__signup{margin:clamp(14px,2vw,30px) 0 28px}
.c-footer__note{font-size:var(--text-note);margin-bottom:0}
.c-footer__email{display:inline-block;margin-top:var(--space-1);text-decoration:none;border-bottom:var(--border-underline) solid var(--color-border-strong);font-size:var(--text-email);font-weight:500;letter-spacing:-.02em}
.c-footer__email:hover{color:var(--color-link)}
.c-footer__bar{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;margin-top:72px;padding:var(--space-5) 0;border-top:var(--border-hairline) solid var(--color-border-strong)}
.c-footer__legal,.c-footer__nav a{font:400 var(--text-legal) var(--font-meta);text-decoration:none}
.c-footer__nav{display:flex;flex-wrap:wrap;gap:10px var(--space-5);max-width:100%}
.c-footer__nav a{white-space:nowrap}
.c-footer.c-footer--compact{padding-top:var(--space-7)}
.c-footer--compact .c-footer__bar{margin-top:0}
@media (max-width:760px){
 .c-footer__nav{gap:var(--space-3) 20px}
}
@media (max-width:750px){
 .c-footer{padding-top:90px}
 .c-footer__head{grid-template-columns:1fr;gap:var(--space-stack)}
}
@media print{
 .c-footer{display:none}
}

/* ==== page-head ==== */
/* Page head: the opener of an index page (Writing, News): a display title and a lead on the
   muted field. */
.c-page-head{background:var(--color-surface-muted);padding:var(--space-index-head-start) 0 var(--space-index-head-end)}
.c-page-head__title{font:600 var(--text-display)/.95 var(--font-title);letter-spacing:-.055em;margin:0 0 .3em}
.c-page-head__lead{font:500 var(--text-lead)/1.3 var(--font-body);letter-spacing:-.015em;max-width:34ch;margin:0;text-wrap:balance}

/* ==== section ==== */
/* Section block: a full-width colored field on a marketing or index page, holding a section
   title (h2), optional subtitles (h3) and statement text.
   Tones name the surface role: --page, --muted, --accent-1, --highlight, --inverse.
   Spacing: the default is --space-section top and bottom. The numbered variants keep the
   current padding of individual sections (76px up to the number); --space-list is the
   top-and-bottom padding of the Writing and News lists.
   __title: --gap and --gap-wide add the space under a title that sits above a split;
   --flush removes its margins; --free lets it run the full width.
   __text: statement paragraphs, 34 characters a line; --measure-32, 35, 38 and 40 set others. */
.c-section{padding:var(--space-section) 0}
.c-section--page{background:var(--color-surface-page)}
.c-section--muted{background:var(--color-surface-muted)}
.c-section--accent-1{background:var(--color-surface-accent-1)}
.c-section--highlight{background:var(--color-surface-highlight);color:var(--color-text-on-highlight)}
.c-section--inverse{background:var(--color-surface-inverse);color:var(--color-text-on-inverse)}
.c-section--space-140{padding:clamp(76px,9vw,140px) 0}
.c-section--space-146{padding:clamp(76px,9vw,146px) 0}
.c-section--space-150{padding:clamp(76px,9vw,150px) 0}
.c-section--space-154{padding:clamp(76px,9vw,154px) 0}
.c-section--space-155{padding:clamp(76px,9vw,155px) 0}
.c-section--space-158{padding:clamp(76px,9vw,158px) 0}
.c-section--space-160{padding:clamp(76px,10vw,160px) 0}
.c-section--space-list{padding:var(--space-list-start) 0 var(--space-section-end)}
.c-section__title{font:700 var(--text-section)/1.02 var(--font-heading);letter-spacing:-.045em;max-width:13ch;margin:0 0 .45em;text-wrap:balance}
.c-section__title--gap{margin-bottom:var(--space-heading-gap)}
.c-section__title--gap-wide{margin-bottom:clamp(44px,6vw,85px)}
.c-section__title--flush{margin:0}
.c-section__title--free{max-width:none}
.c-section__subtitle{font:700 var(--text-section-h3)/1.08 var(--font-heading);letter-spacing:-.035em;margin:0 0 .5em;text-wrap:balance}
.c-section__subtitle--narrow{max-width:14ch}
.c-section__text{font:400 var(--text-step-1)/1.4 var(--font-body);letter-spacing:-.01em;max-width:34ch;margin:0 0 1em}
.c-section__text--measure-32{max-width:32ch}
.c-section__text--measure-35{max-width:35ch}
.c-section__text--measure-38{max-width:38ch}
.c-section__text--measure-40{max-width:40ch}

/* ==== article-header ==== */
/* Article header: the head of a Writing piece, guide or news entry. Back link, publication
   line, title, subtitle and the Markdown source link; a news entry puts its facts list here.
   Tones name the surface role: the default is --color-surface-accent-1; --muted (essays),
   --note (technical notes and case studies), --highlight (guides), --inverse (research papers
   and news). --news sets the spacing of a news head, which has no publication line. */
.c-article-header{background:var(--color-surface-accent-1);padding:var(--space-head-start) 0 clamp(56px,6vw,90px)}
.c-article-header--muted{background:var(--color-surface-muted);color:var(--color-text-primary)}
.c-article-header--note{background:var(--color-surface-note);color:var(--color-text-primary)}
.c-article-header--highlight{background:var(--color-surface-highlight);color:var(--color-text-on-highlight)}
.c-article-header--inverse{background:var(--color-surface-inverse);color:var(--color-text-on-inverse)}
.c-article-header--news{padding-bottom:clamp(48px,6vw,80px)}
.c-article-header a{color:inherit}
.c-article-header--inverse .c-publication-line{color:var(--color-text-on-inverse-muted)}
.c-article-header__title{font:600 var(--text-title)/1 var(--font-title);letter-spacing:-.05em;max-width:14em;margin:.3em 0 .36em;text-wrap:pretty}
.c-article-header--news .c-article-header__title{margin:var(--space-title-gap) 0 clamp(40px,5vw,64px)}
.c-article-header__subtitle{font:500 var(--text-subtitle)/1.3 var(--font-body);letter-spacing:-.015em;max-width:38ch;margin:0;text-wrap:balance}
.c-article-header__meta{display:flex;gap:40px;flex-wrap:wrap;border-top:var(--border-hairline) solid var(--color-border-subtle);padding-top:14px;margin-top:clamp(40px,5vw,72px)}
.c-article-header--inverse .c-article-header__meta{border-color:var(--color-border-on-inverse-mid)}
.c-article-header__source{font:500 var(--text-meta)/1.5 var(--font-ui);text-decoration:underline;text-underline-offset:.25em}
@media print{
 .c-article-header{background:var(--color-surface-page)}
}

/* ==== publication-line ==== */
/* Publication line: kind, date and author in the meta face, such as
   "Essay · October 17, 2026". Sits above an article title, or inline at the top of a related
   card, where its top margin has no effect. */
.c-publication-line{font:400 var(--text-meta)/1.5 var(--font-meta);letter-spacing:0;max-width:none;margin:var(--space-title-gap) 0 0}

/* ==== side-nav ==== */
/* In-page side nav: links to the H2 sections of a long piece, sticky beside the text. Hidden at
   1120px and below and in print. */
.c-side-nav{position:sticky;top:var(--space-5);align-self:start;max-height:calc(100vh - 48px);overflow-y:auto;font:500 var(--text-meta)/1.4 var(--font-ui)}
.c-side-nav a{display:block;padding:var(--space-3) 0;border-top:var(--border-hairline) solid var(--color-border-subtle);text-decoration:none;overflow-wrap:anywhere}
.c-side-nav a:hover{color:var(--color-link)}
@media (max-width:1120px){
 .c-side-nav{display:none}
}
@media print{
 .c-side-nav{display:none}
}

/* ==== article-layout ==== */
/* Article layout: the reading section under an article header. A side nav column and the
   prose, or the prose alone and centered (__grid--single). */
.c-article-layout{background:var(--color-surface-page);padding:var(--space-reading-start) 0 clamp(90px,10vw,158px);min-width:0;max-width:100%}
.c-article-layout__grid{display:grid;grid-template-columns:minmax(180px,230px) minmax(0,1fr);gap:clamp(40px,6vw,96px);min-width:0;max-width:100%}
.c-article-layout__grid>*{min-width:0;max-width:100%}
.c-article-layout__grid--single{grid-template-columns:minmax(0,1fr)}
.c-article-layout__grid--single>.c-prose{margin-inline:auto}
@media (max-width:1120px){
 .c-article-layout__grid{grid-template-columns:minmax(0,1fr)}
 .c-article-layout__grid>.c-prose{margin-inline:auto}
}
@media print{
 .c-article-layout{background:var(--color-surface-page)}
}

/* ==== prose ==== */
/* Prose: the body of a Writing piece or guide, as the Markdown renderer writes it. Styles plain
   elements (headings, paragraphs, lists, quotes, code, captions), so Markdown needs no
   classes. 33em of the body size keeps lines near 65 characters. __lead is the larger opening paragraph of a case study.
   --guide is the internal style manual's variant. */
.c-prose{font:400 var(--text-body)/1.6 var(--font-body);letter-spacing:0;max-width:33em;min-width:0;overflow-wrap:break-word}
@media (min-width:1024px){
 .c-prose{line-height:1.55}
}
.c-prose p{max-width:none;margin:0 0 1em}
.c-prose strong{font-weight:500}
.c-prose a{color:var(--color-link);text-decoration-thickness:1px;text-underline-offset:.2em}
.c-prose h2{font:700 var(--text-h2)/1.1 var(--font-heading);letter-spacing:-.03em;margin:calc(var(--text-body) * 2.75) 0 calc(var(--text-body) * .75);scroll-margin-top:32px;text-wrap:balance}
.c-prose h3{font:700 var(--text-h3)/1.2 var(--font-heading);letter-spacing:-.015em;margin:calc(var(--text-body) * 1.75) 0 calc(var(--text-body) * .5);text-wrap:balance}
.c-prose h2:first-child,.c-prose h2+h3{margin-top:0}
.c-prose ul,.c-prose ol{padding-left:1.25em;margin:0 0 1.25em}
.c-prose li{margin:0 0 .5em}
.c-prose li::marker{color:var(--color-text-muted)}
.c-prose blockquote{font-weight:500;border-left:var(--border-quote) solid var(--color-border-accent);margin:1.5em 0;padding:.1em 0 .1em 1em}
.c-prose blockquote p:last-child{margin-bottom:0}
.c-prose hr{border:0;border-top:var(--border-hairline) solid var(--color-border-subtle);margin:2.5em 0}
.c-prose small{font-size:var(--text-small);color:var(--color-text-muted)}
.c-prose code{font:400 max(.85em,var(--text-meta)) var(--font-meta);background:var(--color-surface-code-inline);padding:.1em .3em;border-radius:var(--radius-subtle)}
.c-prose pre{max-width:100%;overflow-x:auto;background:var(--color-surface-code);color:var(--color-text-on-code);border-radius:var(--radius-card);padding:var(--space-5) 26px;margin:0 0 1.5em}
.c-prose pre code{background:none;color:inherit;padding:0;font:400 var(--text-meta)/1.6 var(--font-meta)}
.c-prose figcaption{font:400 var(--text-small)/1.5 var(--font-body);color:var(--color-text-muted);max-width:60ch;margin-top:.75em}
.c-prose .c-prose__lead{font:400 var(--text-step-1)/1.4 var(--font-body);letter-spacing:-.01em}
.c-prose--guide code{font-size:max(.85em,var(--text-meta));background:var(--color-surface-muted);padding:.08em .32em;border-radius:var(--radius-chip)}
.c-prose--guide pre{background:var(--color-surface-inverse)}
@media (max-width:760px){
 .c-prose pre{padding:var(--space-4) 18px}
 .c-prose pre code{white-space:pre-wrap;overflow-wrap:anywhere}
}
@media print{
 .c-prose{max-width:none}
}

/* ==== table ==== */
/* Table: a data table from the Markdown renderer, in a box that scrolls sideways on a phone.
   Default: a large caption, large bold column headers, the first column as a tinted highlight
   field, regular values and light rules between rows. --grouped is for tables with group rows:
   small muted column headers over one dark rule, light row labels, bold values and bold group
   rows. --stacked turns each row into a block, the row header beside the details with each detail
   labelled by its column, for tables with long text. --wide sets a minimum width on phones. The
   scroll box is 0 wide with a 100% minimum so a wide table never stretches its article. */
.c-table{max-width:100%;min-width:0;margin:1.25em 0 1.75em}
.c-table__scroll{width:0;min-width:100%;max-width:100%;overflow-x:auto}
.c-table table{width:100%;border-collapse:collapse;font:400 var(--text-small)/1.5 var(--font-body);text-align:left}
.c-table caption{caption-side:top;text-align:left;font:700 var(--text-step-1)/1.2 var(--font-heading);letter-spacing:-.02em;color:var(--color-text-primary);padding:0 0 .9em}
.c-table th,.c-table td{text-align:left;vertical-align:top;padding:.85em 1em;border-bottom:var(--border-hairline) solid var(--color-border-subtle);overflow-wrap:break-word}
.c-table thead th{font:700 var(--text-body)/1.25 var(--font-heading);letter-spacing:-.015em;color:var(--color-text-primary);padding:0 1em .9em;border-bottom:0}
.c-table tbody th[scope=row]{font:700 var(--text-small)/1.4 var(--font-ui);background:var(--color-surface-highlight);color:var(--color-text-on-highlight);position:sticky;left:0}
.c-table td{font-weight:400;color:var(--color-text-primary)}
.c-table td code,.c-table th code{font:400 max(.85em,var(--text-meta)) var(--font-meta);background:var(--color-surface-code-inline);padding:.1em .3em;border-radius:var(--radius-subtle)}
.c-table td a{color:var(--color-link)}
.c-table tbody:last-child tr:last-child th,.c-table tbody:last-child tr:last-child td{border-bottom:0}
.c-table__group th{font:700 var(--text-step-1)/1.2 var(--font-heading);letter-spacing:-.02em;color:var(--color-text-primary);background:none;padding:1.2em 1em .4em}
.c-table--grouped th,.c-table--grouped td{padding:.8em 1.5em .8em 0}
.c-table--grouped th:last-child,.c-table--grouped td:last-child{padding-right:0}
.c-table--grouped thead th{font:600 var(--text-meta)/1.3 var(--font-ui);letter-spacing:0;color:var(--color-text-muted);padding:0 1.5em .6em 0;border-bottom:var(--border-hairline) solid var(--color-text-primary)}
.c-table--grouped tbody th[scope=row]{font:500 var(--text-small)/1.5 var(--font-ui);color:var(--color-text-secondary);background:var(--color-surface-page)}
.c-table--grouped td{font-weight:600}
.c-table--grouped tbody:last-child tr:last-child th,.c-table--grouped tbody:last-child tr:last-child td{border-bottom:var(--border-hairline) solid var(--color-border-subtle)}
.c-table--grouped .c-table__group th{padding:1.4em 0 .5em}
.c-table--stacked table,.c-table--stacked tbody,.c-table--stacked caption{display:block}
.c-table--stacked thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.c-table--stacked tr{display:grid;grid-template-columns:minmax(10em,16em) minmax(0,1fr);column-gap:2rem;padding:1.2em 0;border-top:var(--border-hairline) solid var(--color-text-primary)}
.c-table--stacked th,.c-table--stacked td,.c-table--stacked tbody tr:last-child td{display:block;padding:0 0 .6em;border:0}
.c-table--stacked tbody th[scope=row]{grid-row:1 / span 8;position:static;background:none;font:700 var(--text-step-1)/1.15 var(--font-heading);letter-spacing:-.02em;color:var(--color-text-primary)}
.c-table--stacked td{grid-column:2;font-weight:400}
.c-table--stacked td::before{content:attr(data-label);display:block;font:600 var(--text-meta)/1.4 var(--font-ui);color:var(--color-text-muted)}
.c-table--stacked .c-table__group{display:block;border-top:0;padding:1.6em 0 .2em}
.c-table--stacked .c-table__group th{padding:0}
@media (max-width:760px){
 .c-table--wide:not(.c-table--stacked) table{min-width:36em}
 .c-table--stacked tr{grid-template-columns:minmax(0,1fr)}
 .c-table--stacked tbody th[scope=row]{grid-row:auto}
 .c-table--stacked td{grid-column:1}
}
@media print{
 .c-table__scroll{overflow:visible}
 .c-table--wide table{min-width:0}
}

/* ==== source-list ==== */
/* Source list: the numbered notes and sources at the end of a research paper, a step smaller
   than the text, with long URLs allowed to break. */
.c-source-list{font-size:var(--text-small);line-height:1.5}
.c-source-list li{margin-bottom:.75em}
.c-source-list a{word-break:break-word}

/* ==== visually-hidden ==== */
/* Visually hidden: text for screen readers only, such as the signup field's label. */
.c-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}