/* Sprega — shared chrome (nav + footer). Prefixed classes so page CSS can't collide.
   Uses each page's own design tokens (--navy/--amber/--serif/--sans/--mono/--line/--surface/--shadow). */

.spnav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.spnav-in{max-width:1080px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:8px;height:62px}
.spnav-brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:20px;font-weight:800;letter-spacing:-.01em;text-decoration:none;color:inherit}
.spnav-brand svg{width:28px;height:28px;flex:0 0 auto}
.spnav-brand small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block;margin-top:1px}
.spnav-links{display:flex;align-items:center;gap:21px;margin-left:26px}
.spnav-links a{font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none}
.spnav-links a:hover{color:var(--ink)}
.spnav-sp{flex:1}
.spnav-cta{display:flex;align-items:center;gap:8px}
.spnav-login{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:9px 10px;border-radius:9px}
.spnav-login:hover{color:var(--ink);background:var(--surface-2)}
.spicon{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--muted);font-size:16px}
.spicon:hover{color:var(--ink)}
.spbtn{font-family:var(--sans);font-size:14px;font-weight:700;border:1.5px solid transparent;border-radius:11px;padding:10px 17px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:background .16s}
.spbtn:focus-visible{outline:3px solid color-mix(in srgb,var(--amber) 55%,transparent);outline-offset:2px}
.spbtn-primary{background:var(--amber);color:#241203}
.spbtn-primary:hover{background:var(--amber-600)}
@media(max-width:880px){.spnav-links{display:none}}
@media(max-width:460px){.spnav-login{display:none}}

.spft{border-top:1px solid var(--line);margin-top:44px;padding:42px 0 40px;background:var(--surface)}
.spft-in{max-width:1080px;margin:0 auto;padding:0 22px}
.spft-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){.spft-cols{grid-template-columns:1fr 1fr}}
.spft-brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:20px;font-weight:800;text-decoration:none;color:inherit;margin-bottom:12px}
.spft-brand svg{width:28px;height:28px}
.spft-brand small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block;margin-top:1px}
.spft-about p{color:var(--muted);font-size:13.5px;max-width:34ch;margin:0}
.spft-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 13px;font-weight:600}
.spft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.spft ul a{font-size:14px;color:var(--ink);opacity:.85;text-decoration:none}
.spft ul a:hover{opacity:1;color:var(--amber-600)}
.spft-base{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}