/* WBL Code Library: demo-page chrome only (never copy this into a site; modules carry their own CSS). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(fonts/Archivo-latin.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/InterTight-latin.woff2) format('woff2')}
/* metric-matched fallbacks (Archivo measured from this exact file with font-swap/calc.js; Inter Tight = build/font_fallbacks.json): the swap moves nothing */
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:98.07%;ascent-override:89.73%;descent-override:21.41%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:96.64%;ascent-override:100.24%;descent-override:24.96%;line-gap-override:0%}
:root{
  --paper:#F4EFE7;--paper-2:#EAE2D5;--ink:#211B17;--ink-2:#54493F;--line:#D6CABA;--accent:#8E3B2E;--on-accent:#FBF7F1;
  --band:#2A211C;--on-band:#F1EBE2;--card:#FBF8F3;
  --wbl-accent:var(--accent);--wbl-on-accent:var(--on-accent);--wbl-ink:var(--ink);--wbl-paper:var(--paper);--wbl-line:var(--line);
  --wbl-muted:var(--ink-2);--wbl-card:var(--card);--wbl-band:var(--band);--wbl-radius:6px;--wbl-head:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --head:'Archivo','Archivo Fallback',system-ui,sans-serif;--body:'Inter Tight','Inter Tight Fallback',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);line-height:1.02;letter-spacing:-.025em;margin:0 0 .4em;font-weight:750;text-wrap:balance}
h1{font-size:clamp(40px,8vw,72px)}h2{font-size:clamp(28px,4.4vw,44px)}h3{font-size:22px;letter-spacing:-.015em}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* demo top bar */
.lib-top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;background:var(--paper)}
.lib-top a{text-decoration:none;font-weight:600}
.lib-top .lib-tag{font:600 12px/1 var(--body);padding:6px 9px;border-radius:99px;background:var(--paper-2)}
.lib-head{padding:28px 0 8px}
.lib-head h1{font-size:clamp(34px,6vw,56px)}
.lib-head p{font-size:18px;color:var(--ink-2)}
.lib-stage{padding:8px 0 40px}
.lib-sample{font-size:13px;color:var(--ink-2);margin:10px 0 0}
.lib-doc{border-top:1px solid var(--line);padding:32px 0 64px;background:var(--paper)}
.lib-doc h2{font-size:28px;margin-top:8px}
.lib-doc h3{font-size:18px;margin:22px 0 6px}
.lib-doc ul{padding-left:20px;margin:0 0 1em}.lib-doc li{margin:.2em 0;max-width:70ch}
.lib-doc dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 18px}
.lib-doc dt{font-weight:600}.lib-doc dd{margin:0}
.lib-doc code{font:14px var(--mono);background:var(--paper-2);padding:1px 5px;border-radius:4px}
.lib-code{position:relative;margin:12px 0}
.lib-code pre{margin:0;background:var(--band);color:var(--on-band);padding:16px;border-radius:6px;overflow:auto;font:13px/1.5 var(--mono);max-height:420px}
.lib-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:6px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:600 15px/1 var(--body);cursor:pointer;text-decoration:none}
.lib-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lib-copy{position:absolute;top:8px;right:8px;min-height:36px;padding:8px 12px;background:var(--paper);font-size:13px}
/* filler sections used by page-level demos */
.sec{padding:64px 0}
.sec.alt{background:var(--paper-2)}
.sec.dk{background:var(--band);color:var(--on-band)}
.sec.dk p{color:var(--on-band)}
.cols{display:grid;gap:24px}
@media (min-width:760px){.cols{grid-template-columns:1fr 1fr;align-items:center}}
.ph{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:4px}
.mock-hero{position:relative;background:var(--paper)}
.mock-hero .ph{border-radius:0;aspect-ratio:3/2}
.mock-hero .in{padding:18px 16px 22px}
.mock-hero h1{font-size:clamp(40px,11vw,64px);margin:0 0 12px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.rows li b{font-weight:600}.rows .pr{font-family:var(--mono);font-size:15px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}