/* Figure Toolbox — shared shell.
   Type: Bricolage Grotesque (display), Public Sans (body), DM Mono (every
   number). The mono face is not decoration: this whole site is measurements,
   so figures get their own voice throughout. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#EDEEF0; --panel:#FFF; --ink:#14171C; --muted:#69707A;
  --rule:#C6CCD3; --hair:#DFE3E7;
  --accent:#1F6F73; --accent-lo:#E6F0F0; --warn:#A8501E;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Public Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.55}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}

/* masthead */
.mast{border-bottom:1px solid var(--rule);background:var(--panel)}
.mast .wrap{display:flex;align-items:baseline;gap:18px;padding:14px 20px;
  flex-wrap:wrap}
.brand{font-family:var(--disp);font-size:20px;font-weight:800;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--accent)}
.mast nav{display:flex;gap:14px;margin-left:auto;font-family:var(--mono);
  font-size:11px;text-transform:uppercase;letter-spacing:.09em}
.mast nav a{text-decoration:none;color:var(--muted);padding-bottom:2px;
  border-bottom:1px solid transparent}
.mast nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.mast nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}

/* page head */
.head{padding:30px 0 18px}
.head h1{font-family:var(--disp);font-size:34px;font-weight:800;margin:0 0 6px;
  letter-spacing:-.025em;line-height:1.1}
.head p{margin:0;color:var(--muted);max-width:56ch}
.eyebrow{font-family:var(--mono);font-size:10px;color:var(--accent);
  text-transform:uppercase;letter-spacing:.13em;margin:0 0 8px}

/* shared controls */
label{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}
input[type=text],input[type=number],select{font-family:var(--mono);font-size:13px;
  padding:9px;border:1px solid var(--rule);background:var(--panel);
  color:var(--ink);border-radius:0;width:100%}
input:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}
button{font-family:var(--mono);font-size:12px;padding:9px 14px;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:0}
button:hover{background:var(--accent);border-color:var(--accent)}
button.ghost{background:none;color:var(--ink);border-color:var(--rule)}
button.ghost:hover{color:var(--accent);border-color:var(--accent);background:none}

footer{border-top:1px solid var(--rule);margin-top:50px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  padding:16px 0 40px;line-height:1.7}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}