/* Technology concepts: shared tokens and chrome.
   Values mirror site-v136/style.css :root (DESIGN.md §1) so a chosen concept can move into the
   live site without changing colours. Test folder only; never uploaded. */
:root{
  --ch:#1B1D1F; --ch2:#24272A; --ch3:#2C3033;
  --br:#C9963D; --br2:#E0AC55;
  --off:#ECE8DF; --dim:#B9B5AB;
  --line:rgba(236,232,223,.12); --line2:rgba(236,232,223,.22);
  --ok:#7fd39a;                       /* status only (charging / online), never an action */
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Jost','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --e:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ch);color:var(--off);font-family:var(--fb);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--fd);font-weight:400;letter-spacing:.005em;margin:0}
h1 em,h2 em{font-style:italic;color:var(--br2)}
.eye{font:11px/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--br2)}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--br2);outline-offset:3px;border-radius:4px}

/* test-page chrome: slim top bar with concept switcher */
.tbar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,40px);background:rgba(27,29,31,.88);border-bottom:1px solid var(--line)}
.tbar .mark{font-family:var(--fd);font-size:1.25rem;letter-spacing:.32em;text-decoration:none}
.tbar nav{display:flex;gap:4px;flex-wrap:wrap}
.tbar nav a{font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--dim);
  padding:8px 12px;border-radius:6px;border:1px solid transparent;transition:color .3s,border-color .3s}
.tbar nav a:hover{color:var(--off);border-color:var(--line2)}
.tbar nav a[aria-current="page"]{color:var(--ch);background:linear-gradient(120deg,var(--br),var(--br2))}
.sample{display:inline-flex;align-items:center;gap:8px;font:10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);border:1px dashed var(--line2);border-radius:999px;padding:5px 11px}
@media (max-width:640px){ .tbar .mark{display:none} .tbar{justify-content:center} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} }