/* Generated by scripts/build.py from assets/components/*.css. Do not edit; edit the component
   stylesheet and rebuild. Each section below is one component, in the order listed in
   STYLE_ORDER in scripts/components.py. Components use semantic and component tokens only
   (assets/tokens.css, compiled from tokens/tokens.json). */

/* ==== component: base (assets/components/base.css) ======================================================== */
/* Base: element defaults every page shares. No classes here; components style their own parts. */
:root{color-scheme:light}
*{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}
}

/* ==== component: container (assets/components/container.css) =================================================== */
/* 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)}
}

/* ==== component: skip-link (assets/components/skip-link.css) =================================================== */
/* 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}

/* ==== component: wordmark (assets/components/wordmark.css) ==================================================== */
/* Wordmark: the Vloora wordmark image. --header fills the header's brand link; --giant runs the
   width of the footer container. */
.c-wordmark{max-width:100%}
.c-wordmark--header{width:100%;height:auto}
.c-wordmark--giant{display:block;width:100%;height:auto;margin:var(--space-2) 0 0;user-select:none}

/* ==== component: button (assets/components/button.css) ====================================================== */
/* Button: a link styled as a pill.
   --primary: accent fill; the default on brand and dark fields.
   --inverse: dark fill; for accent fields, where the accent fill would disappear.
   --secondary: an outline in the current text color.
   --small: the tighter header size. */
.c-button{display:inline-flex;justify-content:space-between;align-items:center;text-decoration:none;border:0;border-radius:var(--radius-pill);padding:var(--space-3) 22px;min-width:0;gap:10px;font:600 var(--text-ui)/1.25 var(--font-ui);transition:background var(--duration-base),color var(--duration-base),transform var(--duration-base)}
.c-button--secondary{box-shadow:inset 0 0 0 var(--border-hairline) currentColor}
.c-button--primary{background:var(--button-primary-bg);color:var(--button-primary-fg)}
.c-button--inverse{background:var(--button-inverse-bg);color:var(--button-inverse-fg)}
.c-button:hover{background:var(--button-primary-bg-hover);color:var(--button-primary-fg);transform:translateY(var(--space-lift));box-shadow:none}
.c-button--inverse:hover{background:var(--button-inverse-bg-hover);color:var(--button-inverse-fg)}
.c-button--small{justify-content:normal;min-width:auto;gap:20px;padding:10px 18px;transition:background var(--duration-base),transform var(--duration-base)}
@media (prefers-reduced-motion:reduce){
 .c-button{transition:none}
}

/* ==== component: text-link (assets/components/text-link.css) =================================================== */
/* 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)}

/* ==== component: site-header (assets/components/site-header.css) ================================================= */
/* 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}
 .c-site-header__brand{width:120px}
 .c-site-header__end{gap:15px}
}
@media print{
 .c-site-header{display:none}
}

/* ==== component: primary-nav (assets/components/primary-nav.css) ================================================= */
/* 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}
}

/* ==== component: menu-toggle (assets/components/menu-toggle.css) ================================================= */
/* 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}
}

/* ==== component: signup (assets/components/signup.css) ====================================================== */
/* Signup form: email field and Subscribe button in one row, a hidden spam trap and a status
   line. assets/site.js submits it in place and writes the result into the status line. */
.c-signup{width:100%;max-width:500px;margin:22px 0 var(--space-3)}
.c-signup__label{display:block;font:500 var(--text-ui-small)/1.4 var(--font-ui);margin-bottom:10px}
.c-signup__row{display:flex;align-items:center;gap:6px;background:var(--color-surface-raised);border:var(--border-hairline) solid var(--color-border-field);border-radius:var(--radius-field);padding:6px;box-shadow:var(--shadow-field);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.c-signup__row:focus-within{border-color:var(--color-brand);box-shadow:var(--shadow-field-focus)}
.c-signup__input{flex:1;min-width:0;border:0;border-radius:var(--radius-control);background:transparent;padding:var(--space-3) 14px;color:var(--color-text-primary);font:400 var(--text-control)/1.3 var(--font-ui)}
.c-signup__input::placeholder{color:var(--color-text-placeholder)}
.c-signup__input:focus-visible{outline:0;outline-offset:var(--focus-offset-tight)}
.c-signup__button{flex:0 0 auto;border:0;border-radius:var(--radius-control);cursor:pointer;background:var(--signup-button-bg);color:var(--signup-button-fg);padding:var(--space-3) 20px;font:600 var(--text-ui)/1.25 var(--font-ui);transform:none;transition:background var(--duration-base),transform var(--duration-base)}
.c-signup__button:hover{background:var(--signup-button-bg-hover);transform:none}
.c-signup__button:focus-visible{outline:var(--border-focus) solid var(--color-text-primary);outline-offset:var(--focus-offset-tight)}
.c-signup__button[disabled]{opacity:.6;cursor:default;transform:none}
.c-signup__trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.c-signup__status{min-height:1.4em;font:600 var(--text-control)/1.4 var(--font-ui);margin:6px 0 0}
.c-signup__status:empty{display:none}
.c-signup [hidden]{display:none!important}
@media (max-width:750px){
 .c-signup__row{flex-direction:row}
 .c-signup__button{align-self:auto;padding:var(--space-3) var(--space-4)}
}

/* ==== component: footer (assets/components/footer.css) ====================================================== */
/* 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}
}

/* ==== component: hero (assets/components/hero.css) ======================================================== */
/* Hero: the Home page opener on the brand field. A very large title (part of it can sit in the
   highlight color), a lead and one button. */
.c-hero{background:var(--color-surface-brand);color:var(--color-text-on-brand);overflow:hidden}
.c-hero__inner{display:flex;flex-direction:column;padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(72px,8vw,128px)}
.c-hero__title{font:600 var(--text-hero)/.9 var(--font-title);letter-spacing:-.055em;max-width:1330px;overflow-wrap:normal;text-wrap:balance;margin:0 0 clamp(44px,5vw,80px)}
.c-hero__accent{color:var(--color-text-on-brand-highlight)}
.c-hero__bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-content:space-between;align-items:end;gap:clamp(30px,6vw,90px)}
.c-hero__lead{font:500 var(--text-lead)/1.3 var(--font-body);letter-spacing:-.015em;max-width:34ch;margin:0;text-wrap:balance}
.c-hero__action{white-space:nowrap;margin-bottom:var(--space-1)}
@media (max-width:760px){
 .c-hero__bottom{grid-template-columns:1fr}
 .c-hero__action{justify-self:start;width:max-content}
}

/* ==== component: page-hero (assets/components/page-hero.css) =================================================== */
/* Page hero: the opener of a marketing page (Approach, Products, Company, Thanks): a display
   title and a lead on a colored field.
   Tones name the surface role: --accent-1, --accent-2, --inverse, --muted.
   Spacing variants keep each page's current padding: the default is 76 to 150px top and
   bottom; --space-160, --space-165 and --space-190 are the taller openers.
   __title--wide lets a longer title run to 16 characters a line. */
.c-page-hero{padding:clamp(76px,9vw,150px) 0}
.c-page-hero--accent-1{background:var(--color-surface-accent-1)}
.c-page-hero--accent-2{background:var(--color-surface-accent-2)}
.c-page-hero--inverse{background:var(--color-surface-inverse);color:var(--color-text-on-inverse)}
.c-page-hero--muted{background:var(--color-surface-muted)}
.c-page-hero--space-160{padding:var(--space-section) 0 clamp(84px,11vw,160px)}
.c-page-hero--space-165{padding:clamp(76px,9vw,155px) 0 clamp(84px,10vw,165px)}
.c-page-hero--space-190{padding:clamp(90px,12vw,190px) 0 clamp(100px,12vw,180px)}
.c-page-hero__title{font:600 var(--text-display)/.95 var(--font-title);letter-spacing:-.055em;max-width:12ch;margin:0 0 .35em}
.c-page-hero__title--wide{max-width:16ch}
.c-page-hero__lead{font:500 var(--text-lead)/1.3 var(--font-body);letter-spacing:-.015em;max-width:34ch;margin:0;text-wrap:balance}

/* ==== component: page-head (assets/components/page-head.css) =================================================== */
/* 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}

/* ==== component: section (assets/components/section.css) ===================================================== */
/* 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-accent)}
.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}

/* ==== component: split (assets/components/split.css) ======================================================= */
/* Two column split: the grids inside section blocks. Each variant stacks to one column on
   small screens.
   --ruled: two equal columns under a rule with a rule between them, and space below.
   --ruled-flush: the same with no space below and a slightly wider column offset.
   --media: text beside a phone screenshot (__screen), centered.
   --action: text beside a button (__action), aligned to the bottom.
   --lead: section title beside its text; the title wraps at 11 characters.
   --list: text beside a list. */
.c-split{display:grid}
.c-split--ruled{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(35px,7vw,110px);border-top:var(--border-hairline) solid var(--color-border-strong);margin-bottom:var(--space-8)}
.c-split--ruled>div{padding:35px 0 0;min-width:0}
.c-split--ruled>div+div{border-left:var(--border-hairline) solid var(--color-border-strong);padding-left:clamp(30px,5vw,85px)}
.c-split--ruled-flush{grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,110px);border-top:var(--border-hairline) solid var(--color-border-strong)}
.c-split--ruled-flush>div{padding:36px 0 0}
.c-split--ruled-flush>div+div{border-left:var(--border-hairline) solid var(--color-border-strong);padding-left:clamp(30px,5vw,90px)}
.c-split--media{grid-template-columns:minmax(0,1.3fr) minmax(220px,300px);gap:var(--space-feature-gap);align-items:center}
.c-split--action{grid-template-columns:minmax(0,1.3fr) minmax(250px,.5fr);gap:var(--space-feature-gap);align-items:end}
.c-split--lead{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(38px,9vw,155px)}
.c-split--list{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(50px,8vw,144px)}
.c-split--lead .c-section__title{max-width:11ch;margin:0}
.c-split__screen{display:block;width:100%;height:auto;border-radius:var(--radius-media-large);box-shadow:var(--shadow-screen)}
.c-split__action{justify-self:start;width:max-content;font-weight:600}
@media (max-width:1120px){
 .c-split--action,.c-split--lead,.c-split--list{grid-template-columns:1fr}
 .c-split--lead .c-section__title,.c-split--list .c-section__title{max-width:21ch}
}
@media (max-width:760px){
 .c-split--media{grid-template-columns:1fr}
 .c-split--action{display:block}
 .c-split__screen{max-width:260px}
 .c-split__action{margin-top:28px}
 .c-split--ruled,.c-split--ruled-flush{grid-template-columns:1fr;gap:0;margin-bottom:42px}
 .c-split--ruled>div,.c-split--ruled-flush>div{padding:29px 0 42px}
 .c-split--ruled>div+div,.c-split--ruled-flush>div+div{border-left:0;border-top:var(--border-hairline) solid var(--color-border-strong);padding:33px 0 0}
 .c-split--lead .c-section__title{margin-bottom:.45em}
}

/* ==== component: related (assets/components/related.css) ===================================================== */
/* Related links: a titled row of up to three linked cards (publication line, title, one line
   of description) with an "all" link in the head. Home's Latest writing. */
.c-related__head{display:flex;align-items:baseline;justify-content:space-between;gap:22px;border-bottom:var(--border-hairline) solid currentColor;padding-bottom:var(--space-5)}
.c-related__all,.c-related__all:hover{color:inherit}
.c-related__all{font:600 var(--text-body)/1.3 var(--font-ui);white-space:nowrap}
.c-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,72px)}
.c-related__card,.c-related__card:hover{color:inherit}
.c-related__card{text-decoration:none;padding-top:28px}
.c-related__card:hover .c-related__title{text-decoration:underline;text-underline-offset:4px}
.c-related__title{font:700 var(--text-step-2)/1.12 var(--font-heading);letter-spacing:-.03em;margin:.6em 0 .5em;text-wrap:balance}
.c-related__text{font:400 var(--text-body)/1.5 var(--font-body);margin:0}
@media (max-width:760px){
 .c-related__grid{grid-template-columns:1fr;gap:0}
 .c-related__card{border-bottom:var(--border-hairline) solid var(--color-border-subtle);padding:28px 0}
}
.c-related{min-width:0}

/* ==== component: record-layers (assets/components/record-layers.css) =============================================== */
/* Record layers: a ruled, counted list of what each layer of a record shows: a label on the
   left and the fact it establishes on the right. */
.c-record-layers{counter-reset:layer;list-style:none;margin:0;padding:0;border-top:var(--border-hairline) solid var(--color-border-strong)}
.c-record-layers li{counter-increment:layer;border-bottom:var(--border-hairline) solid var(--color-border-subtle);padding:var(--space-5) 0;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.c-record-layers li::before{content:counter(layer,decimal-leading-zero);font:400 var(--text-meta) var(--font-meta);color:var(--color-text-muted)}
.c-record-layers__label{flex:1;font:500 var(--text-small)/1.4 var(--font-body)}
.c-record-layers__value{flex:1;font:600 var(--text-body)/1.3 var(--font-body)}
@media (max-width:760px){
 .c-record-layers li{display:grid;grid-template-columns:28px 1fr;gap:7px 15px}
 .c-record-layers__value{grid-column:2}
}

/* ==== component: mandate (assets/components/mandate.css) ===================================================== */
/* Permission demo: the interactive figure on Approach. Choice buttons on the left
   (aria-pressed marks the chosen one), a D3 drawing on the right with a text fallback until
   assets/visuals.js renders it (it adds is-rendered to __graphic), and a live caption. */
.c-mandate__heading{display:flex;justify-content:space-between;align-items:end;gap:65px;margin-bottom:55px}
.c-mandate__title{margin:0}
.c-mandate__intro{font:400 var(--text-body)/1.5 var(--font-body);max-width:29ch;margin:0}
.c-mandate__layout{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr);gap:clamp(45px,6vw,110px);align-items:stretch}
.c-mandate__choices{display:flex;flex-direction:column;gap:10px}
.c-mandate__choice{appearance:none;text-align:left;border:var(--border-hairline) solid var(--color-border-on-inverse-strong);border-radius:var(--radius-control);background:transparent;color:var(--color-text-on-inverse);padding:18px 22px;font-family:var(--font-ui);cursor:pointer}
.c-mandate__choice-label{display:block;font:600 var(--text-body)/1.25 var(--font-ui)}
.c-mandate__choice-note{display:block;font:400 var(--text-meta)/1.4 var(--font-ui);color:var(--color-text-on-inverse-secondary);margin-top:6px}
.c-mandate__choice[aria-pressed="true"]{background:var(--color-accent);color:var(--color-text-on-accent);border-color:var(--color-accent)}
.c-mandate__choice[aria-pressed="true"] .c-mandate__choice-note{color:var(--color-text-secondary)}
.c-mandate__choice:focus-visible{outline-color:var(--color-accent)}
.c-mandate__figure{margin:0;min-width:0;display:flex;flex-direction:column;gap:20px}
.c-mandate__graphic{background:var(--color-surface-inverse-raised);min-height:255px;padding:var(--space-5);border-radius:var(--radius-panel);display:grid;place-items:center}
.c-mandate__graphic svg{display:block;width:100%;height:auto}
.c-mandate__fallback{font:500 var(--text-small)/1.5 var(--font-body);text-align:center;color:var(--color-text-on-inverse);max-width:100%}
.is-rendered>.c-mandate__fallback{display:none}
.c-mandate__caption{padding-top:22px;border-top:var(--border-hairline) solid var(--color-border-on-inverse-strong);display:grid;gap:7px}
.c-mandate__status{font:700 var(--text-step-2)/1.12 var(--font-heading)}
.c-mandate__explainer{font:400 var(--text-small)/1.5 var(--font-body);color:var(--color-text-on-inverse-subtle)}
@media (max-width:760px){
 .c-mandate__heading{display:block;margin-bottom:35px}
 .c-mandate__title{margin-bottom:var(--space-5)}
 .c-mandate__layout{grid-template-columns:1fr;gap:35px}
 .c-mandate__graphic{min-height:180px}
}
@media (prefers-reduced-motion:reduce){
 .c-mandate__graphic svg *{transition:none!important}
}
.c-mandate{min-width:0}

/* ==== component: product (assets/components/product.css) ===================================================== */
/* Product line: one product on Products. The name in the product's own wordmark style
   (__name--stenodisc, --credidax, --varsityapex), a summary, body paragraphs and links, an
   optional screenshot (__art), and an aside with status, audience and a one-line detail. */
.c-product{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.65fr);gap:clamp(28px,7vw,110px);padding:clamp(44px,6vw,90px) 0;border-top:var(--border-hairline) solid var(--color-border-strong)}
.c-product:last-child{border-bottom:var(--border-hairline) solid var(--color-border-strong)}
.c-product__name{font:700 var(--text-section)/1.02 var(--font-heading);letter-spacing:-.045em;max-width:none;margin:0 0 .45em;text-wrap:balance}
.c-product__name--stenodisc{font-family:var(--font-title);letter-spacing:-.065em}
.c-product__name--credidax{font-family:var(--font-meta);text-transform:uppercase;font-size:calc(var(--text-section) * .94);letter-spacing:-.08em}
.c-product__name--varsityapex{font-family:var(--font-wordmark-serif);font-style:italic;letter-spacing:-.075em}
.c-product p{font:400 var(--text-body)/1.55 var(--font-body);max-width:33em;margin:0 0 1em}
.c-product a{font-weight:600;text-underline-offset:4px}
.c-product .c-product__summary{font:500 var(--text-step-1)/1.35 var(--font-body);letter-spacing:-.01em;max-width:30ch}
.c-product__art{margin:0 0 1.5em;max-width:240px}
.c-product__art img{display:block;width:auto;max-height:330px;border-radius:var(--radius-card);box-shadow:var(--shadow-art)}
.c-product__aside{padding-top:var(--space-2)}
.c-product__aside p{font-size:var(--text-small);line-height:1.5}
.c-product .c-product__status{font:400 var(--text-small)/1.5 var(--font-meta);margin-bottom:1.5em}
@media (max-width:760px){
 .c-product{grid-template-columns:1fr;gap:0}
 .c-product__aside{border-top:var(--border-hairline) solid var(--color-border-subtle);padding-top:var(--space-5);margin-top:var(--space-3)}
 .c-product .c-product__status{margin-bottom:var(--space-3)}
}

/* ==== component: product-page (assets/components/product-page.css) ================================================ */
/* Product pages, 18 October 2026.
   One layout for every Vloora product, loaded after site.css, editorial.css, type.css and refresh.css,
   the way case-study.css extends Writing. It uses the shared tokens (--ink, --cream, --mint, --line,
   --font, --display, --mono), the shared pill (.c-button), link (.c-text-link) and list (.c-entry__list),
   and adds only the product layout: title area, the product stage, rule-separated rows that pair
   copy with a screen or a request, and the dark mono code block. Structure is documented in DESIGN.md. */

/* Title area: Pangram title, Medium summary, then a rule with the status in mono and the actions. */
.c-product-page__head{background:var(--color-surface-canvas);padding:clamp(80px,9vw,150px) 0 clamp(56px,6vw,96px)}
.c-product-page__head h1{font:600 var(--text-product-title)/.95 var(--font-title);letter-spacing:-.055em;margin:0 0 38px}
.c-product-page__summary{font:500 var(--text-product-summary)/1.36 var(--font-body);letter-spacing:-.02em;max-width:36ch;margin:0 0 clamp(48px,6vw,88px)}
.c-product-page__head-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px;border-top:1px solid var(--color-border-subtle);padding-top:24px}
.c-product-page__status{font:400 var(--text-product-code)/1.5 var(--font-meta);color:var(--color-text-muted);margin:0;max-width:52ch}
.c-product-page__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.c-product-page__actions .c-text-link{font-size:var(--text-product-label)}
/* On light fields the primary pill is ink, as on the home page's acid section. */
.c-product-page .c-button.c-button--primary{background:var(--color-text-primary);color:var(--color-surface-page)}
.c-product-page .c-button.c-button--primary:hover{background:var(--color-brand);color:var(--color-surface-page)}

/* The product itself, large, on the page's one color field. */
.c-product-page__stage{background:var(--color-surface-accent-1);padding:clamp(64px,7vw,120px) 0}
.c-product-page__shot{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.6fr);gap:clamp(32px,6vw,110px);align-items:end}
.c-product-page__shot>img{display:block;justify-self:center;width:100%;max-width:420px;height:auto;border-radius:24px;box-shadow:0 30px 60px var(--color-product-shadow)}
.c-product-page__shot>figcaption{border-top:1px solid var(--color-text-primary);padding-top:22px;font:400 var(--text-product-caption)/1.48 var(--font-body);max-width:34ch}

/* An example built from real fixtures. The label sits inside the component. */
.c-product-page__example{background:var(--color-surface-page);border:1px solid var(--color-text-primary);border-radius:12px;padding:clamp(20px,3vw,40px);min-width:0}
.c-product-page .c-product-page__example-label{font:400 var(--text-product-metadata)/1.5 var(--font-meta);color:var(--color-text-muted);margin:0 0 18px;max-width:72ch}
.c-product-page .c-product-page__example-title{font:700 var(--text-product-example-title)/1.12 var(--font-body);letter-spacing:-.03em;margin:0 0 16px}
.c-product-page__example>p{font:400 var(--text-product-example-body)/1.5 var(--font-body);margin:0 0 20px}
.c-product-page__checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border-subtle)}
.c-product-page__checks li{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--color-border-subtle);padding:13px 0;font:400 var(--text-product-check)/1.45 var(--font-body)}
.c-product-page__checks li::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--color-brand);transform:translateY(-1px)}
.c-product-page .c-product-page__result{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin:20px 0 0;font:400 var(--text-product-table)/1.5 var(--font-meta)}
.c-product-page__result strong{font:600 var(--text-product-result)/1.3 var(--font-body);background:var(--color-accent);border-radius:9999px;padding:7px 14px}

/* Sections after the stage: white and cream, each opened by a heading and closed by rules. */
.c-product-page__section{background:var(--color-surface-page);padding:clamp(76px,9vw,140px) 0}
.c-product-page__section--alt{background:var(--color-surface-canvas)}
.c-product-page__section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.65fr);gap:clamp(30px,6vw,125px);align-items:end;margin-bottom:clamp(44px,6vw,84px)}
.c-product-page__section h2{font:700 var(--text-product-section)/1 var(--font-body);letter-spacing:-.05em;margin:0;max-width:14ch}
.c-product-page__section-head p{font:400 var(--text-product-lead)/1.46 var(--font-body);margin:0;max-width:36ch}

/* Rule-separated rows: copy at left, the screen or request that shows it at right. */
.c-product-page__rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-text-primary)}
.c-product-page__rows>li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:start;padding:clamp(40px,4.5vw,72px) 0;border-bottom:1px solid var(--color-border-subtle)}
.c-product-page__rows>li>div{min-width:0}
.c-product-page__rows h3{font:700 var(--text-product-subhead)/1.08 var(--font-body);letter-spacing:-.04em;margin:0 0 20px;max-width:16ch}
.c-product-page__rows p{font:400 var(--text-product-body)/1.5 var(--font-body);margin:0 0 18px;max-width:36ch}
.c-product-page__rows p:last-child{margin-bottom:0}
.c-product-page__media{margin:0;min-width:0}
.c-product-page__media figcaption{font:400 var(--text-product-table)/1.45 var(--font-meta);color:var(--color-text-muted);margin-top:12px}
.c-product-page__phone>img{display:block;width:100%;max-width:340px;height:auto;border-radius:22px;border:1px solid var(--color-border-subtle);background:var(--color-surface-media)}
.c-product-page__wide>img{display:block;width:100%;height:auto;border:1px solid var(--color-border-subtle);border-radius:6px}
/* Phone screens cropped with their device frame and transparent corners: natural size or smaller, never scaled up. */
.c-product-page__device>img,.c-product-page__shot>img.c-product-page__device{display:block;width:auto;max-width:100%;height:auto;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 18px 32px var(--color-product-shadow-soft))}
.c-product-page__shot>img.c-product-page__device{filter:drop-shadow(0 22px 30px var(--color-product-shadow))}
.c-product-page__media .c-product-page__example{margin-bottom:0}

/* Requests and responses: the site's dark code block, in the mono, scrolling inside its box. */
.c-product-page code{font:400 .86em var(--font-meta);background:var(--color-product-code-inline);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.c-product-page .c-product-page__http{display:flex;flex-wrap:wrap;gap:4px 14px;font:400 var(--text-product-code)/1.5 var(--font-meta);margin:0 0 10px;max-width:none}
.c-product-page__http b{font-weight:400;color:var(--color-brand)}
.c-product-page__http span{color:var(--color-text-muted)}
.c-product-page pre{margin:0 0 26px;max-width:100%;overflow-x:auto;background:var(--color-surface-code);color:var(--color-surface-page);border-radius:12px;padding:20px 22px;font:400 var(--text-product-code)/1.6 var(--font-meta);white-space:pre;tab-size:2}
.c-product-page pre:last-child{margin-bottom:0}
.c-product-page pre code{font:inherit;background:none;padding:0;border-radius:0;overflow-wrap:normal;color:inherit}

/* Tables of codes and routes: rules only, mono where the cell is code. */
.c-product-page__table{max-width:100%;overflow-x:auto;margin:0 0 26px}
.c-product-page__table:last-child{margin-bottom:0}
.c-product-page__table table{width:100%;border-collapse:collapse;font:400 var(--text-product-table)/1.45 var(--font-body)}
.c-product-page__table caption{text-align:left;font:600 var(--text-product-label)/1.4 var(--font-body);padding:0 0 10px}
.c-product-page__table th{text-align:left;font:400 var(--text-product-metadata)/1.5 var(--font-meta);color:var(--color-text-muted);border-bottom:1px solid var(--color-text-primary);padding:8px 16px 8px 0}
.c-product-page__table td{border-bottom:1px solid var(--color-border-subtle);padding:11px 16px 11px 0;vertical-align:top}
.c-product-page__table td code{white-space:nowrap;overflow-wrap:normal}
.c-product-page__table--wide table{min-width:560px}
/* A text-rendered chart drawn by glyphcss (assets/product-glyph.js). Its table stays for screen readers. */
.c-product-page__glyph{margin:0 0 26px}
.c-product-page__glyph:last-child{margin-bottom:0}
.c-product-page .c-product-page__glyph-art{background:none;color:var(--color-text-primary);border-radius:0;border-top:1px solid var(--color-text-primary);padding:18px 0 0;font:400 var(--text-product-table)/1.1 var(--font-meta);overflow-x:auto}
.c-product-page__glyph.is-rendered .c-product-page__table{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.c-product-page__terms{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-text-primary);columns:2;column-gap:32px}
.c-product-page__terms li{break-inside:avoid;border-bottom:1px solid var(--color-border-subtle);padding:11px 0;font:400 var(--text-product-table)/1.4 var(--font-meta)}

/* How to start: the next step, then related Writing in the site's list style. */
.c-product-page__start{background:var(--color-surface-page);padding:clamp(76px,9vw,140px) 0}
.c-product-page__start-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,auto);gap:clamp(30px,6vw,120px);align-items:end}
.c-product-page__start h2{font:700 var(--text-product-section)/1 var(--font-body);letter-spacing:-.05em;margin:0 0 22px;max-width:14ch}
.c-product-page__start-grid p{font:400 var(--text-product-lead)/1.46 var(--font-body);margin:0;max-width:40ch}
.c-product-page__start-grid p+p{margin-top:18px}
.c-product-page__start-grid .c-button{justify-self:start;white-space:nowrap}
.c-product-page__start .c-entry__head{margin-top:clamp(64px,7vw,104px)}

/* Keyboard focus on scrolling regions. */
.c-product-page pre:focus-visible,.c-product-page__table:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}

@media(max-width:1000px){
 .c-product-page__shot,.c-product-page__section-head,.c-product-page__rows>li,.c-product-page__start-grid{grid-template-columns:minmax(0,1fr)}
 .c-product-page__shot>img{justify-self:start}
 .c-product-page__rows>li{gap:30px}
}
@media(max-width:760px){
 .c-product-page__head{padding:75px 0 56px}
 .c-product-page__head h1{font-size:var(--text-product-title-mobile)}
 .c-product-page__summary{font-size:var(--text-product-summary-mobile);margin-bottom:40px}
 .c-product-page__head-foot{display:block}
 .c-product-page__status{margin-bottom:26px}
 .c-product-page__stage,.c-product-page__section,.c-product-page__start{padding:72px 0}
 .c-product-page__shot>img{max-width:300px}
 .c-product-page__section h2,.c-product-page__start h2{font-size:var(--text-product-section-mobile)}
 .c-product-page__section-head{margin-bottom:36px;gap:22px}
 .c-product-page__rows>li{padding:36px 0}
 .c-product-page__rows h3{font-size:var(--text-product-subhead-mobile)}
 .c-product-page__rows p{font-size:var(--text-product-body-mobile)}
 .c-product-page__phone>img{max-width:260px}
 .c-product-page pre{padding:16px 18px;font-size:var(--text-product-metadata)}
 .c-product-page .c-product-page__glyph-art{padding:16px 0 0;font-size:var(--text-product-chart-mobile)}
 .c-product-page__terms{columns:1}
 .c-product-page__start-grid .c-button{margin-top:8px}
}

/* ==== component: team-card (assets/components/team-card.css) =================================================== */
/* Team member card: portrait with photo credit, name, role and bio. Cards sit in a two-column
   __list. Prerendered by scripts/build.py from data/team.json; assets/team.js redraws them
   from the same file. */
.c-team-card__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,70px);align-items:start}
.c-team-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(19px,3vw,38px);align-items:start;min-width:0;border-top:var(--border-hairline) solid var(--color-border-strong);padding-top:clamp(30px,4vw,48px)}
.c-team-card__portrait{margin:0;min-width:0}
.c-team-card__portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:var(--radius-portrait);background:var(--color-surface-muted)}
.c-team-card__portrait figcaption{font:400 var(--text-meta)/1.45 var(--font-body);color:var(--color-text-muted);margin-top:10px}
.c-team-card__body{min-width:0}
.c-team-card__name{font:700 var(--text-section-h3)/1.08 var(--font-heading);letter-spacing:-.035em;margin:0 0 .5em;text-wrap:balance}
.c-team-card__role{font:400 var(--text-meta)/1.45 var(--font-meta);margin:0 0 var(--space-5)}
.c-team-card__bio{font:400 var(--text-body)/1.5 var(--font-body);max-width:33em;margin:0}
@media (max-width:960px){
 .c-team-card__list{grid-template-columns:1fr}
 .c-team-card{max-width:780px}
}
@media (max-width:760px){
 .c-team-card{display:block;max-width:470px}
 .c-team-card__portrait{max-width:440px;margin:0 0 28px}
}

/* ==== component: entry (assets/components/entry.css) ======================================================= */
/* Writing index entry: one linked row in the Writing list. Date and kind on the left, title and
   summary on the right; the title takes the link color on hover. Rows sit in __list. */
.c-entry__list{list-style:none;margin:0;padding:0}
.c-entry{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(24px,3vw,40px) 0;border-top:var(--border-hairline) solid var(--color-border-subtle);color:var(--color-text-primary);text-decoration:none}
.c-entry__list li:last-child .c-entry{border-bottom:var(--border-hairline) solid var(--color-border-subtle)}
.c-entry:hover{color:var(--color-text-primary)}
.c-entry:hover .c-entry__title{color:var(--color-link)}
.c-entry__meta{display:flex;flex-direction:column;gap:var(--space-half);font:400 var(--text-meta)/1.5 var(--font-meta);color:var(--color-text-muted);padding-top:.5em;white-space:nowrap}
.c-entry__body{display:block;max-width:920px}
.c-entry__title{display:block;font:700 var(--text-step-3)/1.1 var(--font-heading);letter-spacing:-.03em;text-wrap:balance;transition:color var(--duration-base)}
.c-entry__desc{display:block;font:400 var(--text-body)/1.5 var(--font-body);max-width:33em;margin-top:.5em;color:var(--color-text-secondary)}
@media (max-width:750px){
 .c-entry{grid-template-columns:1fr;gap:10px}
 .c-entry__meta{flex-direction:row;gap:14px;padding-top:0}
}

/* ==== component: news-row (assets/components/news-row.css) ==================================================== */
/* News row: one linked row in the News list. Date, headline with its venue, and format.
   Rows sit in __list. */
.c-news-row__list{list-style:none;margin:0;padding:0;border-top:var(--border-hairline) solid var(--color-border-subtle)}
.c-news-row{display:grid;grid-template-columns:150px minmax(0,1fr) 170px;gap:var(--space-6);align-items:baseline;padding:clamp(24px,3vw,36px) 0;border-bottom:var(--border-hairline) solid var(--color-border-subtle);color:var(--color-text-primary);text-decoration:none}
.c-news-row:hover{color:var(--color-text-primary)}
.c-news-row:hover .c-news-row__title{color:var(--color-link)}
.c-news-row__date,.c-news-row__type{font:400 var(--text-meta)/1.5 var(--font-meta);color:var(--color-text-muted);white-space:nowrap}
.c-news-row__type{justify-self:end}
.c-news-row__title{display:block;font:700 var(--text-step-2)/1.15 var(--font-heading);letter-spacing:-.025em;text-wrap:balance;transition:color var(--duration-base)}
.c-news-row__event{display:block;font:400 var(--text-small)/1.5 var(--font-body);color:var(--color-text-tertiary);margin-top:.4em}
@media (max-width:750px){
 .c-news-row{grid-template-columns:1fr;gap:var(--space-2)}
 .c-news-row__date,.c-news-row__type{order:-1}
 .c-news-row__type{justify-self:start}
}

/* ==== component: news-facts (assets/components/news-facts.css) ================================================== */
/* News facts: the date, event, format and place of a news entry, in a ruled row of four on the
   dark news header. */
.c-news-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-stack);margin:0;border-top:var(--border-hairline) solid var(--color-border-on-inverse);padding-top:20px}
.c-news-facts dt{font:400 var(--text-meta)/1.5 var(--font-meta);color:var(--color-text-on-inverse-label);margin-bottom:var(--space-1)}
.c-news-facts dd{margin:0;font:500 var(--text-body)/1.3 var(--font-body);letter-spacing:-.01em}
@media (max-width:900px){
 .c-news-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
 .c-news-facts{grid-template-columns:1fr;gap:var(--space-4)}
}

/* ==== component: news-body (assets/components/news-body.css) =================================================== */
/* News body: the reading section of a news entry. An optional photo, then __copy: paragraphs,
   lists, quotes and section headings at the article reading size. */
.c-news-body{background:var(--color-surface-page);padding:var(--space-reading-start) 0 var(--space-section-end)}
.c-news-body__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
.c-news-body__copy{font:400 var(--text-body)/1.6 var(--font-body);max-width:33em;min-width:0}
@media (min-width:1024px){
 .c-news-body__copy{line-height:1.55}
}
.c-news-body__copy p{max-width:none;margin:0 0 1em}
.c-news-body__copy h2{font:700 var(--text-h2)/1.1 var(--font-heading);letter-spacing:-.03em;margin:calc(var(--text-body) * 2.25) 0 calc(var(--text-body) * .75)}
.c-news-body__copy ol,.c-news-body__copy ul:not(.c-news-links){padding-left:1.25em;margin:0 0 1.25em}
.c-news-body__copy li{margin:0 0 .5em}
.c-news-body__copy li::marker{color:var(--color-text-muted)}

/* ==== component: quote (assets/components/quote.css) ======================================================= */
/* Quote: a blockquote with a rule on the left and an attribution footer. --abstract is a talk
   description quoted at reading size with a quiet rule. Prose Markdown quotes are styled by
   the prose component instead. */
.c-quote{margin:1.5em 0;padding:.1em 0 .1em 1em;border-left:var(--border-quote) solid var(--color-border-accent)}
.c-quote p{font:500 var(--text-step-1)/1.3 var(--font-body);letter-spacing:-.015em;margin:0 0 .5em}
.c-quote footer{font:400 var(--text-meta)/1.5 var(--font-meta);color:var(--color-text-muted)}
.c-quote--abstract{border-left-color:var(--color-border-subtle)}
.c-quote--abstract p{font:400 var(--text-body)/1.55 var(--font-body);letter-spacing:0}

/* ==== component: news-links (assets/components/news-links.css) ================================================== */
/* News links: a ruled list of coverage links, each with its source on the left. */
.c-news-links{list-style:none;margin:0;padding:0;border-top:var(--border-hairline) solid var(--color-border-subtle)}
.c-news-links li{border-bottom:var(--border-hairline) solid var(--color-border-subtle);margin:0}
.c-news-links a{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:20px;align-items:baseline;padding:.6em 0;font:500 var(--text-body)/1.35 var(--font-body);text-decoration:none;color:var(--color-text-primary)}
.c-news-links a:hover{color:var(--color-link)}
.c-news-links__source{font:400 var(--text-meta)/1.5 var(--font-meta);color:var(--color-text-muted)}
@media (max-width:520px){
 .c-news-links a{grid-template-columns:1fr;gap:var(--space-1)}
}

/* ==== component: article-header (assets/components/article-header.css) ============================================== */
/* 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-accent)}
.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)}
}

/* ==== component: publication-line (assets/components/publication-line.css) ============================================ */
/* 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}

/* ==== component: side-nav (assets/components/side-nav.css) ==================================================== */
/* 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}
}

/* ==== component: article-layout (assets/components/article-layout.css) ============================================== */
/* 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)}
}

/* ==== component: prose (assets/components/prose.css) ======================================================= */
/* Prose: the body of a Writing piece or guide, as the Markdown renderer writes it. Styles plain
   elements (headings, paragraphs, lists, quotes, code, tables, captions), so Markdown needs no
   classes. 33em of the body size keeps lines near 65 characters. Phone tables become one card
   per row, labelled by column. __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 table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--text-small);line-height:1.5;margin:1.25em 0 1.75em}
.c-prose th,.c-prose td{padding:.65em .75em;border:var(--border-hairline) solid var(--color-border-table);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.c-prose th{background:var(--color-surface-muted);font-weight:600}
.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)}
.c-prose--guide td:first-child{font-weight:500}
@media (max-width:760px){
 .c-prose table{display:block;border:0}
 .c-prose table thead{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
 .c-prose table tbody{display:block}
 .c-prose table tbody tr{display:block;margin:0 0 var(--space-3);padding:var(--space-1) 14px;border:var(--border-hairline) solid var(--color-border-table-card);background:var(--color-surface-raised)}
 .c-prose table tbody td{display:block;border:0;border-bottom:var(--border-hairline) solid var(--color-border-subtle);padding:var(--space-3) 0}
 .c-prose table tbody td:last-child{border-bottom:0}
 .c-prose table tbody td::before{content:attr(data-label);display:block;margin:0 0 var(--space-1);font:600 var(--text-meta)/1.4 var(--font-ui);color:var(--color-text-muted)}
 .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}
}

/* ==== component: abstract (assets/components/abstract.css) ==================================================== */
/* Abstract box: the abstract of a research paper, on the accent-1 field at the top of the
   prose. scripts/build.py wraps the "Abstract" section of a discussion paper in it. */
.c-abstract{background:var(--color-surface-accent-1);padding:clamp(24px,4vw,52px);margin:0 0 calc(var(--text-body) * 2.75);border-radius:var(--radius-subtle)}
.c-abstract h2{font-size:var(--text-step-2);margin:0 0 .5em}
.c-abstract p:last-child{margin-bottom:0}

/* ==== component: table-scroll (assets/components/table-scroll.css) ================================================ */
/* Scrolling table: a wide prose table in a box that scrolls sideways instead of squeezing.
   Research papers and guides get it from the Markdown renderer. */
.c-table-scroll{max-width:100%;overflow-x:auto;margin:1.25em 0 1.75em}
.c-table-scroll table{margin:0}

/* ==== component: source-list (assets/components/source-list.css) ================================================= */
/* 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}

/* ==== component: figure (assets/components/figure.css) ====================================================== */
/* Figure with caption: one image and its caption.
   --wide: a wide screenshot in prose, with a hairline border.
   --phone: a phone screenshot, rounded like a device on a dark backing.
   --photo: a news photo above the text, with its own caption. */
.c-figure{margin-left:0;margin-right:0}
.c-figure img{display:block;width:100%;height:auto}
.c-figure--wide{margin:1.25em 0 2.5em}
.c-figure--wide img{border:var(--border-hairline) solid var(--color-border-subtle);border-radius:var(--radius-image)}
.c-figure--phone{margin:0}
.c-figure--phone img{border-radius:var(--radius-device);background:var(--color-surface-media);border:var(--border-hairline) solid var(--color-border-subtle)}
.c-figure--photo{margin:0;max-width:1000px}
.c-figure--photo img{border-radius:var(--radius-media)}
.c-figure--photo figcaption{font:400 var(--text-small)/1.5 var(--font-body);color:var(--color-text-muted);margin-top:.75em}

/* ==== component: screens (assets/components/screens.css) ===================================================== */
/* Screens: phone screenshots in a row of three with captions; on phones a sideways scroller
   that snaps to each screen. */
.c-screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);padding:0!important;list-style:none}
.c-screens li{margin:0}
.c-screens figure{margin-left:0;margin-right:0}
.c-screens img{display:block;width:100%;height:auto;border-radius:var(--radius-device);background:var(--color-surface-media);border:var(--border-hairline) solid var(--color-border-subtle)}
@media (max-width:760px){
 .c-screens{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px!important}
 .c-screens li{scroll-snap-align:start}
}

/* ==== component: pair (assets/components/pair.css) ======================================================== */
/* Pair: prose beside a phone screenshot inside an article; stacks on phones. */
.c-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:clamp(24px,4vw,48px);align-items:start;margin:1.25em 0 2.5em}
.c-pair p:last-child{margin-bottom:0}
@media (max-width:760px){
 .c-pair{grid-template-columns:1fr}
 .c-pair .c-figure--phone{max-width:280px}
}

/* ==== component: steps (assets/components/steps.css) ======================================================= */
/* Steps: a numbered list of situations in a case study. A large numeral, what the person said,
   a note on what happened and an outcome pill. Steps sit in prose, so the rules are scoped to
   it to win over the prose list styles. */
.c-prose .c-steps{list-style:none;padding:0;margin:1.25em 0 2.5em;display:grid;gap:clamp(28px,3vw,44px)}
.c-prose .c-steps li{display:grid;grid-template-columns:clamp(44px,5vw,64px) minmax(0,1fr);gap:clamp(14px,2vw,24px);margin:0}
.c-steps__num{font:600 var(--text-step-3)/.95 var(--font-title);color:var(--color-brand)}
.c-prose .c-steps__said{font:600 var(--text-body)/1.35 var(--font-body);margin:0 0 .4em}
.c-prose .c-steps__note{font-size:var(--text-small);line-height:1.5;color:var(--color-text-secondary);margin:0 0 .6em}

/* ==== component: pill (assets/components/pill.css) ======================================================== */
/* Pill: a short outcome label with an outline. --sent fills it with the accent. */
.c-pill{display:inline-block;font:600 var(--text-meta)/1 var(--font-ui);padding:9px 14px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 var(--border-hairline) var(--color-border-strong)}
.c-pill--sent{background:var(--color-accent);box-shadow:none}

/* ==== component: chart (assets/components/chart.css) ======================================================= */
/* Chart: a drawn SVG chart in a boxed figure with a title, a short intro and an optional legend.
   __wide holds the desktop drawing and __tall the phone drawing; one shows at a time.
   The drawings paint with __fill-* and __stroke-* classes so their colors come from the
   --color-figure-* tokens. */
.c-chart{margin:2.5em 0 3em;padding:var(--space-figure-pad);background:var(--color-surface-muted);border-top:var(--border-figure) solid var(--color-border-accent)}
.c-chart .c-chart__title{margin:0 0 .4em}
.c-chart .c-chart__intro{font-size:var(--text-small);line-height:1.5;max-width:52ch;margin-bottom:1em}
.c-chart__frame{background:var(--color-figure-surface);border:var(--border-hairline) solid var(--color-border-subtle);padding:clamp(10px,2vw,22px)}
.c-chart__svg{display:block;width:100%;height:auto;font-family:var(--font-figure)}
.c-chart__tall{display:none}
.c-prose .c-chart__legend{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:18px 0 0;font:400 var(--text-meta)/1.4 var(--font-body)}
.c-prose .c-chart__legend li{display:flex;align-items:center;gap:9px;margin:0}
.c-chart__legend svg{flex:none}
.c-chart__fill-brand{fill:var(--color-figure-series-1)}
.c-chart__fill-ink{fill:var(--color-figure-ink)}
.c-chart__fill-muted{fill:var(--color-figure-muted)}
.c-chart__fill-surface{fill:var(--color-figure-surface)}
.c-chart__stroke-brand{stroke:var(--color-figure-series-1)}
.c-chart__stroke-ink{stroke:var(--color-figure-ink)}
.c-chart__stroke-muted{stroke:var(--color-figure-muted)}
.c-chart__stroke-grid{stroke:var(--color-figure-grid)}
@media (max-width:760px){
 .c-chart__wide{display:none}
 .c-chart__tall{display:block}
}

/* ==== component: viz (assets/components/viz.css) ========================================================= */
/* Interactive figure: a D3 drawing in a boxed figure with a title, a short intro, toggle buttons
   (aria-pressed marks the chosen one) and a live caption. The text __fallback shows until
   assets/research-figures.js draws the figure and adds is-rendered to __graphic. */
.c-viz{margin:2.5em 0 3em;padding:var(--space-figure-pad);background:var(--color-surface-muted);border-top:var(--border-figure) solid var(--color-border-accent)}
.c-viz .c-viz__title{margin:0 0 .5em}
.c-viz .c-viz__intro{font-size:var(--text-small);line-height:1.5;max-width:46ch;margin-bottom:1em}
.c-viz__graphic{background:var(--color-figure-surface);min-height:175px;display:grid;place-items:center;padding:18px;border:var(--border-hairline) solid var(--color-border-subtle)}
.c-viz__graphic svg{display:block;width:100%;height:auto}
.c-viz__fallback{font:500 var(--text-small)/1.5 var(--font-body);text-align:center;color:var(--color-figure-ink);max-width:100%}
.is-rendered>.c-viz__fallback{display:none}
.c-viz__controls{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:20px 0}
.c-viz__controls button{font:600 var(--text-meta)/1.3 var(--font-ui);padding:10px var(--space-4);cursor:pointer;border:var(--border-hairline) solid var(--color-border-strong);color:var(--color-text-primary);background:transparent;border-radius:var(--radius-pill)}
.c-viz__controls button[aria-pressed=true]{background:var(--color-surface-inverse);color:var(--color-text-on-inverse)}
@media (max-width:760px){
 .c-viz{margin-inline:-4px;padding:22px var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
 .c-viz__graphic svg *{transition:none!important}
}

/* ==== component: architecture (assets/components/architecture.css) ================================================ */
/* Architecture diagram: a row of five labelled boxes from the person to the receiving service,
   a dark return bar under them, a caption and the original text diagram in a disclosure. */
.c-architecture{margin:2em 0 2.5em;min-width:0}
.c-architecture__path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)}
.c-architecture__node{min-width:0;padding:var(--space-4) var(--space-3);background:var(--color-surface-muted);border-top:var(--border-node) solid var(--color-border-accent);display:flex;flex-direction:column;gap:var(--space-2)}
.c-architecture__node:nth-child(2){border-color:var(--color-figure-series-5);background:var(--color-surface-accent-2)}
.c-architecture__node:nth-child(4){border-color:var(--color-figure-series-6);background:var(--color-surface-accent-1)}
.c-architecture .c-architecture__label{font:700 var(--text-meta)/1.25 var(--font-body)}
.c-architecture .c-architecture__text{font:400 var(--text-meta)/1.45 var(--font-body)}
.c-architecture__return{margin-top:var(--space-3);padding:var(--space-4) 20px;background:var(--color-surface-inverse);color:var(--color-text-on-inverse);font:500 var(--text-small)/1.45 var(--font-body)}
.c-architecture__source{margin:1em 0;font-size:var(--text-small)}
.c-architecture__source summary{cursor:pointer;font:500 var(--text-small)/1.5 var(--font-ui);text-decoration:underline;text-underline-offset:3px}
.c-architecture__source pre{margin-top:var(--space-4)}
@media (max-width:960px){
 .c-architecture__path{grid-template-columns:repeat(2,minmax(0,1fr))}
 .c-architecture__node:last-child{grid-column:1/-1}
}
@media (max-width:760px){
 .c-architecture__path{grid-template-columns:1fr}
 .c-architecture__node:last-child{grid-column:auto}
 .c-architecture .c-architecture__label,.c-architecture .c-architecture__text{font-size:var(--text-small)}
}

/* ==== component: example (assets/components/example.css) ===================================================== */
/* Example: an "Instead of" and "Write" pair in the internal style manual. */
.c-example{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-2) 0 1.5em}
.c-example>div{padding:18px 20px var(--space-1);border-radius:var(--radius-card)}
.c-example__before{background:var(--color-surface-accent-3)}
.c-example__after{background:var(--color-surface-accent-1)}
.c-example p{margin:0 0 .75em;font-size:var(--text-small);line-height:1.5}
.c-example .c-example__label{font:600 var(--text-meta)/1.3 var(--font-ui);color:var(--color-text-muted);margin-bottom:var(--space-2)}
@media (max-width:700px){
 .c-example{grid-template-columns:1fr}
}

/* ==== component: visually-hidden (assets/components/visually-hidden.css) ============================================= */
/* 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}

/* ==== component: player (assets/components/player.css) ====================================================== */
/* Radio player: Vloora Radio, a compact receiver fixed to the bottom right, with its own dark
   palette (--color-player-*), faces (--font-player*) and sizes (--text-player-*). assets/vloora-am.js
   writes the markup and keeps it mounted across page changes, so it has no partial.
   While the visitor scrolls down it shrinks to a see-through pill (is-compact: cover and play
   button). It opens again at the top of the page, on hover, on keyboard focus, or when the
   cover is tapped. is-covered marks a track with cover art; is-playing marks playback. */
.c-player{position:fixed;bottom:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);z-index:var(--z-player);display:flex;align-items:center;gap:11px;width:min(315px,calc(100vw - 24px));padding:10px 12px;background:var(--color-player-surface);color:var(--color-player-text);border:var(--border-hairline) solid var(--color-player-border);border-radius:var(--radius-player);box-shadow:var(--shadow-player);font-family:var(--font-player);line-height:1.25;transition:background var(--duration-fast),padding var(--duration-fast),border-radius var(--duration-fast)}
.c-player__art{height:44px;width:44px;flex:0 0 44px;border-radius:var(--radius-player-art);background:var(--color-player-art);display:grid;place-items:center;color:var(--color-player-glyph);background-size:cover;background-position:center}
.c-player__glyph{font:600 var(--text-player-symbol)/1 var(--font-player-symbol)}
.c-player__art.is-covered .c-player__glyph{display:none}
.c-player__info{min-width:0;flex:1}
.c-player__label{font:600 var(--text-player-label)/1.4 var(--font-player-label);letter-spacing:.12em;color:var(--color-player-label);display:flex;gap:8px}
.c-player__onair{color:var(--color-player-signal)}
.c-player__title{font-size:var(--text-player-title);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:3px 0}
.c-player__artist{font-size:var(--text-player-artist);color:var(--color-player-artist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-player__play{flex:0 0 33px;width:33px;height:33px;display:grid;place-items:center;padding:0;background:var(--color-player-button);border:var(--border-hairline) solid var(--color-player-button-border);color:var(--color-player-text-strong);border-radius:var(--radius-round);font:600 var(--text-player-title)/1 var(--font-player-symbol);cursor:pointer}
.c-player__play:hover{background:var(--color-player-button-hover)}
.c-player__play:disabled{cursor:default;opacity:.5}
.c-player__play:focus-visible{outline:var(--border-focus-player) solid var(--color-player-signal);outline-offset:3px}
@media (max-width:600px){
 .c-player{bottom:8px;right:8px;width:min(285px,calc(100vw - 16px));padding:8px 10px}
}
.c-player.is-compact{width:auto;padding:6px;gap:8px;background:var(--color-player-surface-compact);border-color:var(--color-player-border-compact);border-radius:var(--radius-player-pill);box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.c-player.is-compact .c-player__art{height:33px;width:33px;flex-basis:33px;border-radius:var(--radius-round);cursor:pointer}
.c-player.is-compact .c-player__info{display:none}
.c-player.is-compact .c-player__play{background:var(--color-player-button-compact)}
.c-player.is-compact:has(.c-player__play:focus-visible){width:min(315px,calc(100vw - 24px));padding:10px 12px;gap:11px;background:var(--color-player-surface);border-color:var(--color-player-border);border-radius:var(--radius-player)}
.c-player.is-compact:has(.c-player__play:focus-visible) .c-player__info{display:block}
.c-player.is-compact:has(.c-player__play:focus-visible) .c-player__art{height:44px;width:44px;flex-basis:44px;border-radius:var(--radius-player-art)}
@media (hover:hover){
 .c-player.is-compact:hover{width:min(315px,calc(100vw - 24px));padding:10px 12px;gap:11px;background:var(--color-player-surface);border-color:var(--color-player-border);border-radius:var(--radius-player)}
 .c-player.is-compact:hover .c-player__info{display:block}
 .c-player.is-compact:hover .c-player__art{height:44px;width:44px;flex-basis:44px;border-radius:var(--radius-player-art)}
}
@media (max-width:600px){
 .c-player.is-compact{bottom:10px;right:10px;padding:5px}
}