/* Portfolio site — styled exclusively from the Valor charter (ValorCloud/brand).
   --valor-* variables are generated from brand/valor-brand.lock.json (site-light, site-dark, siteGeometry). */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;font:16px/1.6 var(--valor-font-body);color:var(--valor-text);
  background:radial-gradient(1200px 600px at 85% -10%,color-mix(in srgb,var(--valor-primary) 14%,transparent),transparent 70%),
             radial-gradient(900px 500px at -10% 30%,color-mix(in srgb,var(--valor-accent) 10%,transparent),transparent 70%),var(--valor-bg);
  background-attachment:fixed}
img{max-width:100%;height:auto;display:block}
a{color:var(--valor-primary)}
h1,h2,h3,h4{font-family:var(--valor-font-heading);color:var(--valor-heading);line-height:1.2}
button,input,select,textarea{font-family:var(--valor-font-body)}
:focus-visible{outline:3px solid var(--valor-primary);outline-offset:5px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--valor-reading);padding:.5rem;z-index:10}
/* Glass header (charter: white glass + 24px blur, opaque fallback) */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1.5rem;padding:.6rem clamp(1rem,4vw,3rem);
  background:var(--valor-reading);border-bottom:1px solid color-mix(in srgb,var(--valor-primary) 14%,transparent)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:var(--valor-glass,var(--valor-reading));backdrop-filter:blur(var(--valor-blur,24px));-webkit-backdrop-filter:blur(var(--valor-blur,24px))}}
@media (prefers-reduced-transparency:reduce){.topbar{background:var(--valor-reading);backdrop-filter:none}}
@media (max-width:700px){.topbar{backdrop-filter:blur(16px)}}
.topbar a{color:var(--valor-heading);text-decoration:none}
.brand{font-family:var(--valor-font-heading);font-weight:700;font-size:1.3rem;letter-spacing:.04em}.brand span{color:var(--valor-accent)}
.topbar nav{display:flex;gap:.25rem;flex-wrap:wrap;flex:1;font-size:.95rem}
.topbar nav a{padding:.45rem .7rem;border-radius:var(--valor-radius-control);transition:background var(--valor-duration) var(--valor-easing)}
.topbar nav a:hover{background:color-mix(in srgb,var(--valor-primary) 10%,transparent)}
.lang{display:inline-flex;align-items:center;min-height:var(--valor-touch);padding:0 1rem;border-radius:var(--valor-radius-group);border:1px solid color-mix(in srgb,var(--valor-primary) 30%,transparent);font-size:.9rem}
main>section{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,6vw,6rem);max-width:1200px;margin:0 auto}
h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 1.5rem;position:relative;padding-bottom:.55rem}
h2::after{content:"";position:absolute;left:0;bottom:0;width:3rem;height:3px;border-radius:2px;background:var(--valor-accent)}
h3.sub{font-size:1.05rem;margin:2rem 0 1rem;color:var(--valor-muted);text-transform:uppercase;letter-spacing:.08em}
.hero{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:.2rem 0 .6rem}
.eyebrow{color:var(--valor-muted);font-size:.9rem;margin:0}
.headline{font-size:1.15rem;font-weight:600;color:var(--valor-primary)}
.figures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.figures li{background:var(--valor-reading);border-radius:var(--valor-radius-card);padding:1.2rem;border:1px solid color-mix(in srgb,var(--valor-primary) 14%,transparent);box-shadow:0 10px 30px color-mix(in srgb,var(--valor-heading) 8%,transparent)}
.figures strong{display:block;font-family:var(--valor-font-heading);font-size:2rem;color:var(--valor-primary)}
.figures span{font-size:.88rem;color:var(--valor-muted)}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.btn{display:inline-flex;align-items:center;min-height:var(--valor-touch);padding:0 1.15rem;border-radius:var(--valor-radius-control);border:1.5px solid var(--valor-primary);text-decoration:none;font-weight:600;color:var(--valor-primary);background:var(--valor-reading);transition:background var(--valor-duration) var(--valor-easing),color var(--valor-duration) var(--valor-easing)}
.btn:hover{background:color-mix(in srgb,var(--valor-primary) 10%,var(--valor-reading))}
.btn.primary{background:var(--valor-primary);color:var(--valor-reading)}
.btn.primary:hover{background:var(--valor-heading)}
.grid{display:grid;gap:1.25rem}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}
.hero>*,.grid>*{min-width:0}
h1,h2,.headline{overflow-wrap:break-word;hyphens:auto}
/* Reading surfaces stay opaque (charter: stable surface for long text) */
.card{background:var(--valor-reading);border-radius:var(--valor-radius-card);padding:1.3rem;border:1px solid color-mix(in srgb,var(--valor-primary) 12%,transparent);box-shadow:0 10px 30px color-mix(in srgb,var(--valor-heading) 7%,transparent)}
.card h3,.card h4{margin:.2rem 0 .5rem}
.card.media{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.media>div{padding:1.1rem 1.3rem 1.3rem}
.tags{color:var(--valor-primary);font-weight:600;font-size:.9rem;margin:0 0 .5rem}
.note{color:var(--valor-muted);font-size:.88rem}
.link{font-weight:600}
.band{background:var(--valor-reading);border-radius:var(--valor-radius-card);max-width:1100px!important;border:1px solid color-mix(in srgb,var(--valor-primary) 14%,transparent);box-shadow:0 18px 50px color-mix(in srgb,var(--valor-heading) 9%,transparent)}
.lead{font-size:1.1rem;color:var(--valor-text)}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.steps li{counter-increment:s;background:var(--valor-bg);border-radius:var(--valor-radius-group);padding:1rem 1rem 1rem 3.4rem;position:relative;color:var(--valor-heading)}
.steps li::before{content:counter(s);position:absolute;left:1rem;top:.85rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--valor-primary);color:var(--valor-reading);font-weight:700;display:grid;place-items:center;font-size:.85rem}
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid color-mix(in srgb,var(--valor-primary) 25%,transparent)}
.timeline>li{position:relative;padding:0 0 1.8rem 1.6rem}
.timeline>li::before{content:"";position:absolute;left:-8px;top:.4rem;width:14px;height:14px;border-radius:50%;background:var(--valor-primary);box-shadow:0 0 0 4px var(--valor-bg)}
.timeline h3{margin:.1rem 0}.when{margin:0;color:var(--valor-primary);font-weight:700;font-size:.9rem}.org{margin:.1rem 0 .4rem;color:var(--valor-muted);font-weight:600}
.cols{columns:2;column-gap:2rem}.cols li{break-inside:avoid;margin-bottom:.4rem}
.dated{display:grid;grid-template-columns:5.5rem 1fr;gap:.4rem 1rem;margin:0}
.dated dt{font-weight:700;color:var(--valor-primary)}.dated dd{margin:0}
.langs{list-style:none;padding:0}.langs li{display:grid;grid-template-columns:7rem 8rem 1fr;align-items:center;gap:.6rem}
meter{width:8rem;accent-color:var(--valor-primary)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;min-height:var(--valor-touch);padding:0 1rem;border-radius:var(--valor-radius-group);background:var(--valor-reading);border:1.5px solid var(--valor-primary);color:var(--valor-primary);text-decoration:none;font-weight:600;font-size:.9rem;transition:background var(--valor-duration) var(--valor-easing)}
.chip:hover{background:var(--valor-primary);color:var(--valor-reading)}
.site-footer{text-align:center;padding:2rem 1rem;color:var(--valor-muted);font-size:.85rem}
@media (max-width:900px){.hero,.grid.two,.grid.three{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.cols{columns:1}.topbar nav{display:none}.lang{margin-left:auto}.figures strong{font-size:1.6rem}.langs li{grid-template-columns:6rem 1fr}.langs small{grid-column:2}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media (forced-colors:active){.btn,.chip,.card,.band{border:1px solid CanvasText}}
/* Printing the site: A4 + running footer come from src/print.mjs (injected <style media=print>) */
@media print{body{background:#fff;font-size:10.5pt}.topbar,.cta,.skip{display:none}main>section{padding:6mm 0;max-width:none}.card,.band,.figures li{box-shadow:none;break-inside:avoid}.grid.three{grid-template-columns:repeat(3,1fr)}.site-footer{display:none}a{color:inherit;text-decoration:none}}
/* Language meters in charter colours (browsers ignore accent-color on <meter>) */
meter{appearance:none;height:.55rem;border-radius:999px;background:color-mix(in srgb,var(--valor-primary) 14%,transparent)}
meter::-webkit-meter-bar{background:color-mix(in srgb,var(--valor-primary) 14%,transparent);border:0;border-radius:999px}
meter::-webkit-meter-optimum-value,meter::-webkit-meter-suboptimum-value,meter::-webkit-meter-even-less-good-value{background:var(--valor-primary);border-radius:999px}
meter::-moz-meter-bar{background:var(--valor-primary);border-radius:999px}


/* The manual controls enhance, never replace, the CSS system default. */
.theme-controls{display:flex;gap:.3rem;flex-shrink:0}
.theme-button{font:inherit;font-size:.85rem;min-height:44px;padding:.4rem .65rem;border:1px solid var(--valor-primary);border-radius:var(--valor-radius-control);color:var(--valor-heading);background:var(--valor-reading);cursor:pointer}
.theme-button[hidden]{display:none}
.theme-button[aria-pressed="true"]{border-width:2px;font-weight:700}
[data-theme="valor"] .hero-text{background:var(--valor-reading);border-radius:var(--valor-radius-card);padding:1.25rem}
@media(max-width:480px){.topbar{gap:.5rem;flex-wrap:wrap}.lang{padding:0 .5rem}.theme-controls{margin-left:auto}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active){.topbar{background:var(--valor-reading);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media print{:root[data-theme="valor"] body{background:#fff}.theme-controls{display:none}}