/* jackhobbs.dev - tokens + base styles
   Direction: Signal / Swiss with a soft dusty-purple accent (brand-requested; LILA-rule
   override executed with intent - one muted purple, harmonised cool neutrals, no glow).
   Built through the design-taste-frontend skill. Self-hosted Inter woff2 (no CDN).
   Shared family token set - reuse on braze.* / demostore.* so the subdomains match. */

/* ---- self-hosted Inter (woff2, weights 400/700/800) ---- */
@font-face{font-family:'Inter';src:url('/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --bg:#ffffff;
  --ink:#141318;
  --soft:#5b5862;
  --hair:#e6e4ea;
  --accent:#6c5ca6;       /* soft dusty purple - the one locked accent */
  --accent-ink:#534683;   /* darker purple for text-on-light if needed */
  --on-accent:#ffffff;
  --max:1100px;
  --pad:clamp(20px,5vw,56px);
  --fd:"Inter",system-ui,sans-serif;  /* display */
  --fb:"Inter",system-ui,sans-serif;  /* body */
  --fm:ui-monospace,SFMono-Regular,Menlo,monospace;            /* data / labels */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--fb);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;line-height:1.05}

/* nav - one line, sharp, 2px rule */
.nav{display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);border-bottom:2px solid var(--ink)}
.nav .brand{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;font-size:18px}
.nav .menu{display:flex;gap:24px;align-items:center;font-size:14px;color:var(--soft)}
.nav .menu a{text-decoration:none}
.nav .menu a:hover{color:var(--ink)}
.btn{font-weight:700;font-size:13px;border:0;cursor:pointer;background:var(--accent);
  color:var(--on-accent);padding:10px 18px;border-radius:0;text-decoration:none;display:inline-block;
  transition:transform .12s ease,background .12s ease}
.btn:hover{background:var(--accent-ink)}
.btn:active{transform:translateY(1px)}

/* hero - split: copy left, portrait in the right whitespace */
.hero{padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(40px,6vw,72px);
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,62px);max-width:16ch}
.hero .sub{color:var(--soft);margin-top:20px;max-width:48ch;font-size:clamp(16px,1.5vw,19px)}
.hero .btn{margin-top:28px;padding:13px 22px;font-size:14px}

/* portrait frame: two photos, second crossfades in (hover on desktop, scroll on touch) */
.portrait{position:relative;width:100%;max-width:340px;aspect-ratio:4/5;justify-self:end;
  border:2px solid var(--ink);overflow:hidden;background:var(--hair)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.portrait .p2{opacity:0;transition:opacity .4s ease}
@media (hover:hover){.portrait:hover .p2{opacity:1}}
@media (hover:none){.portrait.swapped .p2{opacity:1}}

/* generic section */
section{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--hair)}
.eyebrow{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px}
.lead{font-size:clamp(22px,2.8vw,32px);max-width:24ch;font-weight:800;font-family:var(--fd);letter-spacing:-.02em}

/* transparency band - holds the live instrumentation (built by the loop) */
.panel{border:2px solid var(--ink);margin-top:24px}
.panel .bar{display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--hair);font-family:var(--fm);font-size:13px}
.panel .slot{padding:28px 16px;font-family:var(--fm);font-size:13px;color:var(--soft);
  background:repeating-linear-gradient(45deg,#faf9fc,#faf9fc 10px,#f3f1f7 10px,#f3f1f7 20px)}

/* what I do - 2-col divided list, not 3 equal cards */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;border-top:1px solid var(--hair)}
.svc > div{padding:22px 0;border-bottom:1px solid var(--hair);padding-right:24px}
.svc > div:nth-child(odd){border-right:1px solid var(--hair);padding-right:32px}
.svc > div:nth-child(even){padding-left:32px}
.svc h3{font-size:18px;font-weight:700;margin-bottom:6px}
.svc p{font-size:14.5px;color:var(--soft)}

/* selected outcomes - result number leads each row */
.out{margin-top:24px;border-top:1px solid var(--hair)}
.out .row{display:grid;grid-template-columns:minmax(120px,240px) 1fr;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.out .big{font-family:var(--fd);font-weight:800;font-size:clamp(26px,3.2vw,34px);
  letter-spacing:-.03em;color:var(--accent-ink)}
.out .what h3{font-size:17px;font-weight:700;margin-bottom:6px}
.out .what p{font-size:14.5px;color:var(--soft);max-width:60ch}

/* directory */
.dir-list{display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--hair)}
.dir-list a, .dir-list .soon{display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--hair);text-decoration:none;font-weight:700;font-family:var(--fd)}
.dir-list .soon{color:var(--soft);font-weight:600}
.dir-list .tag{font-family:var(--fm);font-size:12px;color:var(--soft);font-weight:400;letter-spacing:.04em}
.dir-list a:hover{color:var(--accent-ink)}
.dir-note{color:var(--soft);font-size:14px;margin-top:10px;max-width:56ch}

/* about */
.about p{max-width:62ch;margin-top:16px;color:var(--ink);font-size:clamp(16px,1.4vw,18px)}

/* stack strip - muted brand logos, uniform height, currentColor */
.stack-strip{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,36px);align-items:center;
  margin-top:24px;padding:20px 0;border-top:1px solid var(--hair)}
.stack-strip img{height:26px;width:auto;opacity:.45;transition:opacity .2s ease;
  filter:grayscale(1);color:var(--soft)}
.stack-strip .chip{position:relative;display:inline-flex}
.stack-strip .chip:hover img{opacity:1}
.stack-strip .chip::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);background:var(--ink);color:#fff;font:11px/1 var(--fm);white-space:nowrap;
  padding:5px 7px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .12s ease}
.stack-strip .chip:hover::after{opacity:1}

/* footer */
/* sidecar event feed — live instrumentation, monospace, clean rows */
.sc-feed{max-height:320px;overflow-y:auto;font-family:var(--fm);font-size:12px;line-height:1.5}
.sc-evt{padding:7px 16px;border-bottom:1px solid var(--hair)}
div.sc-evt,.sc-evt>summary{display:flex;gap:8px;align-items:baseline}
.sc-evt>summary{cursor:pointer;list-style:none}
.sc-evt>summary::-webkit-details-marker{display:none}
.sc-evt>summary:hover .sc-ev-props{text-decoration:underline}
.sc-json{margin:6px 0 0;padding:8px 10px;background:#faf9fc;border-radius:3px;
  white-space:pre-wrap;word-break:break-word;color:var(--ink);font-size:11px;line-height:1.45}
.sc-feed > .sc-evt:first-child{animation:sc-in .2s ease}
@keyframes sc-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.sc-ev-name{font-weight:700;color:var(--ink);white-space:nowrap}
.sc-ev-meta{color:var(--soft);font-size:11px;white-space:nowrap}
.sc-source{font-size:10px;padding:1px 5px;border-radius:2px;white-space:nowrap;background:#eef2f7;color:#334}
.sc-net{font-size:10px;padding:1px 5px;border-radius:2px;white-space:nowrap;background:var(--accent);color:#fff}
.sc-ev-props{color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.sc-badge{font-size:10px;padding:1px 5px;border-radius:2px;margin-left:auto;white-space:nowrap}
.sc-granted{background:#d4edda;color:#155724}
.sc-denied{background:#f8d7da;color:#721c24}
.sc-sent{font-size:10px;padding:1px 5px;border-radius:2px;white-space:nowrap;border:1px solid var(--accent);color:var(--accent);margin-left:auto;margin-right:4px}
.sc-empty{padding:28px 16px;font-family:var(--fm);font-size:13px;color:var(--soft);text-align:center;
  background:repeating-linear-gradient(45deg,#faf9fc,#faf9fc 10px,#f3f1f7 10px,#f3f1f7 20px)}
.sc-feed::-webkit-scrollbar{width:4px}
.sc-feed::-webkit-scrollbar-thumb{background:var(--hair);border-radius:2px}
.sc-feed::-webkit-scrollbar-track{background:transparent}

footer{border-top:2px solid var(--ink);padding:24px var(--pad);
  display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--soft)}
footer a{text-decoration:underline;text-underline-offset:3px}

/* ---------- DRAFT COPY FLAG ----------
   Any string Jack has NOT reviewed/signed off is wrapped in .draft.
   Sign-off = remove the class. Launch gate = zero .draft left (see verify in PLAN). */
.draft{background:#fdf3c7;box-shadow:inset 3px 0 0 #d9a400;border-radius:2px;
  padding:1px 4px;scroll-margin-top:80px}
body.hide-drafts .draft{background:none;box-shadow:none;padding:0}

.draftbar{position:fixed;top:0;right:0;z-index:100;display:flex;gap:10px;align-items:center;
  background:var(--ink);color:#fff;font:12px/1 var(--fm);padding:9px 12px;border-bottom-left-radius:4px}
.draftbar b{color:#ffd23f}
.draftbar button{font:12px/1 var(--fm);cursor:pointer;background:#fff;color:var(--ink);
  border:0;border-radius:2px;padding:5px 8px}

@media(max-width:820px){
  .hero{grid-template-columns:1fr;gap:32px}
  .portrait{justify-self:start;max-width:260px;order:2}
}
@media(max-width:680px){
  .nav .menu{gap:14px}
  .nav .menu a{display:none}
  .svc{grid-template-columns:1fr}
  .svc > div:nth-child(odd){border-right:0;padding-right:0}
  .svc > div:nth-child(even){padding-left:0}
  .out .row{grid-template-columns:1fr;gap:6px}
}