/* shared nav + footer finale for the preview pages */
:root{--c-ink:#1a1a1a;--c-cream:#f2e6c4;--c-red:#e0201b;--c-chart:#d9f227;--c-plate:#d8f708;--navh:46px}
.snav{position:fixed;left:0;right:0;top:0;z-index:20;height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;font:11px/1 'DotGothic16',monospace;letter-spacing:.08em;color:var(--c-ink);pointer-events:none}
.snav>*{pointer-events:auto}
.chip{background:var(--c-cream);border:1.5px solid var(--c-ink);box-shadow:3px 3px 0 var(--c-ink)}
.snav .brand{display:flex;align-items:center;gap:7px;padding:3px 9px 3px 4px;text-decoration:none;color:var(--c-ink);font:17px/1 'Marcellus',serif;letter-spacing:0}
.snav .brand img{width:24px;height:24px;display:block}
.snav .r{color:var(--c-red)}
.snav .links{display:flex;align-items:center;gap:8px}
.snav .menu{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.snav .menu>li{position:relative}
.snav .menu a,.snav .menu button{display:block;font:inherit;letter-spacing:inherit;text-transform:uppercase;color:var(--c-ink);text-decoration:none;background:none;border:0;padding:8px 10px;cursor:pointer}
.snav .menu a:hover,.snav .menu button:hover{color:var(--c-red)}
.snav .drop{position:absolute;left:-1.5px;top:calc(100% + 6px);min-width:200px;list-style:none;margin:0;padding:4px 0;display:none}
.snav .drop.on{display:block}
.snav .drop a{text-transform:none;font:12px/1.2 'JetBrains Mono',monospace;letter-spacing:0;padding:7px 12px}
.snav .drop a b{font-weight:800}
.snav .go{display:block;background:var(--c-red);color:var(--c-cream);border:1.5px solid var(--c-ink);box-shadow:3px 3px 0 var(--c-ink);font:800 12px/1 'JetBrains Mono',monospace;letter-spacing:-.01em;text-decoration:none;padding:8px 11px;cursor:pointer;white-space:nowrap}
.snav .go:hover{background:var(--c-ink)}
.snav .go:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--c-ink)}
.snav .burger{display:none;font:inherit;letter-spacing:inherit;text-transform:uppercase;color:var(--c-ink);padding:7px 10px;cursor:pointer}
@media (max-width:760px){
  :root{--navh:42px}
  .snav{padding:0 10px}
  .snav .brand{font-size:15px}.snav .brand img{width:20px;height:20px}
  .snav .burger{display:block}
  .snav .links{display:none;position:absolute;right:10px;top:calc(100% + 2px);flex-direction:column;align-items:stretch;gap:0;padding:6px;background:var(--c-cream);border:1.5px solid var(--c-ink);box-shadow:3px 3px 0 var(--c-ink);min-width:220px}
  .snav.open .links{display:flex}
  .snav .links>.menu{flex-direction:column;align-items:stretch;background:none;border:0;box-shadow:none}
  .snav .drop{position:static;display:block;border:0;box-shadow:none;background:none;padding:0 0 4px 8px;min-width:0}
  .snav .drop-btn{pointer-events:none;opacity:.55}
  .snav .go{margin-top:6px;text-align:center}
}

/* footer finale: the world continues */
.fin{position:relative;z-index:6;background:var(--c-plate);color:var(--c-ink);overflow:hidden;font:12px/1.55 'JetBrains Mono',monospace}
.fin-body{position:relative;max-width:1180px;margin:0 auto;padding:30px 16px 0}
.fin-giant{position:absolute;left:50%;top:10px;transform:translateX(-50%);font:200 clamp(72px,19vw,260px)/.85 'Oswald',sans-serif;letter-spacing:-.01em;white-space:nowrap;color:rgba(26,26,26,.09);pointer-events:none;user-select:none}
.fin-giant span{color:inherit}
.fin-cols{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--c-cream);border:1.5px solid var(--c-ink);box-shadow:5px 5px 0 var(--c-ink);padding:18px 20px;margin:clamp(42px,11vw,150px) 5px 40px 0}
.fin h4{font:800 14px/1.2 'JetBrains Mono',monospace;letter-spacing:-.02em;color:var(--c-ink);margin:0 0 10px}
.fin ul{list-style:none;margin:0;padding:0}
.fin li{margin:0 0 6px}
.fin a{color:var(--c-ink);text-decoration:none}
.fin a:hover{color:var(--c-red)}
.fin .op{font-size:11px;margin-top:10px;opacity:.75}
.fin-bottom{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px 0 22px;border-top:1px solid var(--c-ink);font-size:11px;color:var(--c-ink)}
@media (max-width:760px){.fin-cols{grid-template-columns:1fr 1fr}}
.fin li::before{content:none}