/* Forward Deployed Design: the few rules the site adds to the Vloora components. Fonts come from
   Ron's font library in assets/fonts/. Every face is a token, so swapping one is one edit here. */
@font-face{font-family:"Author";src:url("../fonts/author-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Author";src:url("../fonts/author-semibold.woff") format("woff");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Author";src:url("../fonts/author-bold-italic.woff") format("woff");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-semibold.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Azeret Mono";src:url("../fonts/azeret-mono-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"PP Fuji";src:url("../fonts/PPFuji-Bold.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"PP Object Sans";src:url("../fonts/PPObjectSans-Heavy.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"PP Pangram Sans Compressed";src:url("../fonts/PPPangramSans-CompressedExtrabold.woff") format("woff");font-weight:400 900;font-style:normal;font-display:swap}
:root,:root[data-brand="dark"]{
  --font-title:"PP Object Sans","Switzer",system-ui,sans-serif;
  --font-heading:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Author",Georgia,serif;
  --font-ui:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-meta:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.c-site-header__brand,.c-site-header__brand:hover{width:auto;max-width:55vw;line-height:1.1;font:700 var(--text-body)/1.1 var(--font-title);letter-spacing:-.01em;text-decoration:none;color:var(--header-fg)}
.c-footer__credit{margin:0;font:400 var(--text-legal) var(--font-meta)}
/* The site name is longer than the Vloora wordmark, so on phones the header grows to fit it and
   the open menu starts below the header instead of at a fixed height. */
@media (max-width:960px){
 .c-primary-nav{top:100%}
}
@media (max-width:750px){
 .c-site-header{height:auto;min-height:var(--space-header-compact);padding-block:var(--space-3);row-gap:var(--space-2)}
 .c-site-header__brand,.c-site-header__brand:hover{max-width:none;font-size:var(--text-ui)}
}
/* Artifact examples on /artifacts/: each artifact drawn as a filled-in sheet, labelled as an
   example in mono. The Outcome Map sorts work into three columns that stack on phones. */
.c-artifact{margin:1.5em 0 2.5em;padding:var(--space-5);background:var(--color-surface-raised);border:var(--border-hairline) solid var(--color-border-subtle);border-radius:var(--radius-card);max-width:100%;min-width:0}
.c-artifact__label{margin:0 0 var(--space-4);font:400 var(--text-meta)/1.4 var(--font-meta);color:var(--color-text-muted)}
.c-artifact .c-table{margin:0}
.c-artifact__outcome,.c-artifact__protocol{margin:0;font-size:var(--text-small);line-height:1.5}
.c-artifact__outcome dt,.c-artifact__protocol dt{font:600 var(--text-small)/1.4 var(--font-heading);color:var(--color-text-primary)}
.c-artifact__outcome dd,.c-artifact__protocol dd{margin:var(--space-1) 0 var(--space-4)}
.c-artifact__outcome dd:last-child,.c-artifact__protocol dd:last-child{margin-bottom:0}
.c-artifact__outcome{padding:var(--space-4);background:var(--color-surface-highlight);color:var(--color-text-on-highlight);border-radius:var(--radius-subtle)}
.c-artifact__outcome dt{color:inherit}
.c-artifact__vectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-4);font-size:var(--text-small);line-height:1.5}
.c-artifact__vector{border-top:3px solid var(--color-border-subtle);padding-top:var(--space-3)}
.c-artifact__vector--toward{border-top-color:var(--color-border-accent)}
.c-artifact__vector--away{border-top-style:dashed;border-top-color:var(--color-text-muted)}
.c-artifact__direction{margin:0 0 var(--space-2);font:600 var(--text-meta)/1.4 var(--font-ui);color:var(--color-text-primary)}
.c-artifact__vector ul{margin:0;padding-left:1.1em}
.c-artifact__vector li{margin:0 0 var(--space-2)}
@media (max-width:760px){
 .c-artifact{padding:var(--space-4)}
 .c-artifact__vectors{grid-template-columns:minmax(0,1fr)}
}