/* emptylegapp. — shared primitives.
   Tokens + reset + nav + type + ticker + btn + footer chrome.
   Pages override :root and anything else they want. Chaos is a feature. */

:root{
  --paper:#f4efe5;
  --ink:#0b0b0c;
  --orange:#ff5a30;
  --red:#ff4e2f;
  --acid:#ff5a2a;
  --yellow:#ffdc55;
  --blue:#173c77;
  --green:#caff78;
  --purple:#2b1767;
  --pink:#d5369c;
  --muted:#726d64;
  --line:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.wrap{width:min(1440px,94vw);margin:auto}

/* nav */
nav,.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navin{min-height:58px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.brand,.wordmark{font:900 27px/1 Georgia,serif;letter-spacing:-1.4px}
.brand small{font:900 9px/1 Arial;display:block;letter-spacing:.15em;text-transform:uppercase;margin-top:5px}
.links{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap;justify-content:flex-end;font:900 11px/1 Arial;letter-spacing:.12em;text-transform:uppercase}
.links a:not(.btn){text-decoration:none}
.links a:not(.btn):hover,.links a:not(.btn)[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}

/* type */
.eyebrow,.micro,.tag{font:900 11px/1 Arial;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{margin-bottom:20px}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Georgia,serif;letter-spacing:-.06em}
h1{font-size:clamp(62px,9vw,150px);line-height:.78;margin-bottom:28px}
h2{font-size:clamp(44px,6.2vw,96px);line-height:.86;margin-bottom:22px}
.lede{font-size:clamp(22px,2.3vw,38px);line-height:1.08;max-width:1000px}
.tiny{font-size:11px;line-height:1.5;opacity:.63}

/* btn */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);padding:14px 18px;font:900 11px/1 Arial;letter-spacing:.12em;text-transform:uppercase;transition:.2s}
.btn:hover{background:var(--ink);color:#fff}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:var(--orange);border-color:var(--orange)}
.btn s{text-decoration:line-through;text-decoration-color:#e10600;text-decoration-thickness:2px}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;background:var(--yellow);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ticker span{display:inline-block;padding:14px 0;font:900 12px/1 Arial;letter-spacing:.1em;text-transform:uppercase;animation:marquee 18s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

/* footer chrome */
footer{background:var(--ink);color:#fff;padding:65px 0 30px}
.footbig{font:900 clamp(56px,9vw,130px)/.78 Georgia,serif;letter-spacing:-.06em;margin-bottom:55px}
.footrow{border-top:1px solid #444;padding-top:25px;display:flex;justify-content:space-between;gap:30px;align-items:end}

/* the label. slap it anywhere. */
.sticker{display:inline-block;width:min(360px,70vw);transform:rotate(-2.5deg);border:1px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink)}
.sticker img{display:block;width:100%;height:auto;border-radius:9px}
.sticker.navmark{width:min(92px,18.4vw);transform:rotate(-2deg);border-radius:6px;box-shadow:2px 2px 0 var(--ink)}
.sticker.navmark img{border-radius:5px}

/* terminal modal — used by WATCH WORK, SUPER KEY, STYPE */
.work{position:fixed;inset:0;z-index:99;background:rgba(10,10,11,.85);display:grid;place-items:center;padding:4vw}
.work[hidden]{display:none}
.workbox{width:min(860px,100%);background:#0b0b0c;color:#f7f7f2;border:1px solid var(--green);position:relative;overflow:hidden}
.worktop{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #34373e;font:900 10px/1 Arial;letter-spacing:.14em;color:var(--green)}
.worktop button{background:transparent;border:1px solid #34373e;color:#fff;font:900 12px/1 Arial;padding:6px 9px;cursor:pointer}
.worklog{margin:0;padding:22px;min-height:380px;max-height:60vh;overflow:auto;font:14px/1.7 "Courier New",monospace;white-space:pre-wrap}
.worklog .ok{color:var(--green)}.worklog .warn{color:var(--orange)}.worklog .dim{color:#7f7f87}.worklog .pink{color:#ff7ad9}
.worklog .cur::after{content:"█";animation:blink .6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* STYPE checkout */
.stype{padding:18px 22px;border-bottom:1px solid #34373e;font:14px/1.6 "Courier New",monospace}
.stypeline{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:6px 0;border-bottom:1px dashed #23262c}
.stypeline span{color:#7f7f87}.stypeline b{font-weight:400;color:#f7f7f2;min-height:1.6em}
.stypeline em{color:#7f7f87;font-style:italic}
.stypeline b.typing::after{content:"█";animation:blink .6s steps(1) infinite}
.workrich{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:var(--green);color:var(--ink);font:900 clamp(48px,11vw,130px)/.82 Arial;letter-spacing:-.07em;opacity:0;pointer-events:none;transition:opacity .15s}
.workbox.rich .workrich{opacity:1;animation:shake .4s ease-in-out 3}
@keyframes shake{25%{transform:translate(-6px,3px) rotate(-1deg)}75%{transform:translate(6px,-3px) rotate(1deg)}}

@media(max-width:900px){
  .links{width:100%;justify-content:flex-start}
  .footrow{align-items:flex-start;flex-direction:column}
}