/* WorkMate OS — Dispatches post stylesheet.
   Tokens mirror the live site's own blog reader: #0B0B10 ground, Anton for
   headings, Inter for body, monospace kept for labels only, cyan accent and
   cyan/violet glow. The old all-Space-Mono, pink-gradient sheet was a
   different design language and made every post look unlike the site. */
:root{
  color-scheme:dark;
  --bg:#0B0B10; --panel:rgba(9,14,25,.94); --ink:#FFFFFF;
  --soft:#e0e5ef; --muted:#bcc9db; --faint:rgba(255,255,255,.34);
  --line:#7DD3FC66; --line-faint:rgba(255,255,255,.10);
  --accent:#38E1FF; --cyan:#7DD3FC; --violet:#B36BFF; --pink:#FF7DA4;
  --g-primary:linear-gradient(125deg,#38E1FF 0%,#B36BFF 60%,#FF7DA4 100%);
  --g-cyan:linear-gradient(137deg,#FFFFFF 0%,#7DD3FC 45%,#38E1FF 100%);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--soft);font:16px/1.65 Inter,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--accent);color:#04121a}
img{max-width:100%;display:block}
h1,h2,h3{color:#fff;line-height:1.04}

/* Soft radial glow washes behind the page — cyan top-right, violet mid-left. */
.glow-wash{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 420px at 88% 4%, rgba(56,225,255,.12), transparent 70%),
    radial-gradient(620px 520px at 4% 52%, rgba(179,107,255,.10), transparent 70%)}

nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(rgba(11,11,16,.88),transparent);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}
.nav-in{max-width:1100px;margin:0 auto;padding:16px clamp(20px,4vw,48px);display:flex;align-items:center}
.mark{display:block}
.mark img,
nav .nav-in>a:first-child img{width:120px;height:48px;object-fit:contain}
.back{margin-left:auto;color:var(--muted);text-decoration:none;font-size:13px;
  letter-spacing:.06em;transition:color .3s}
.back:hover{color:var(--accent)}

.hero{position:relative;height:min(62vh,560px);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,16,.5),transparent 40%,rgba(11,11,16,.97))}

article{max-width:850px;margin:0 auto;padding:0 clamp(20px,5vw,48px) 40px;
  position:relative;z-index:2;margin-top:-120px}
/* The label stays monospace — it is a tag, not prose. */
.tag{display:block;font-family:monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 18px}
h1{font:clamp(34px,5vw,62px)/1.08 Anton,sans-serif;text-transform:uppercase;
  letter-spacing:-.02em;margin:.2em 0 24px}
.meta{color:var(--muted);font-family:monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:34px}
article p{font-size:clamp(16px,1.35vw,18px);line-height:1.85;color:var(--soft);margin-bottom:1.5em}
article p strong{color:var(--ink);font-weight:700}
article p em{color:var(--cyan);font-style:normal}
article a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
article a:hover{border-color:var(--accent)}
article h2{font:clamp(24px,3.2vw,38px)/1.1 Anton,sans-serif;text-transform:uppercase;
  letter-spacing:-.01em;margin:1.9em 0 .6em}

/* Pull quote: the site's cyan/violet glass, not the old pink frame. */
.pull{position:relative;margin:36px 0;padding:clamp(24px,4vw,38px);
  border:1px solid #7DD3FC99;border-radius:20px;
  background:linear-gradient(125deg,#38E1FF16,#B36BFF1d 65%,#FF7DA415);
  box-shadow:0 0 28px #38E1FF26,0 0 52px #B36BFF1e,inset 0 1px #ffffff12;
  color:#fff;font-size:clamp(21px,2.4vw,29px);font-weight:650;line-height:1.5}
.pull .who{display:block;margin-top:18px;font-size:12px;font-weight:400;
  letter-spacing:.04em;color:#9bdfff}

/* Console note: quiet hairline panel for footnotes and honesty boxes. */
.note{margin:3em 0 0;padding:18px 22px;border:1px solid var(--line-faint);border-radius:12px;
  background:rgba(255,255,255,.03);color:var(--muted);font-size:14px;line-height:1.7}

.next{max-width:850px;margin:0 auto;padding:34px clamp(20px,5vw,48px) 90px;
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;
  border:2px solid transparent;text-decoration:none;font-family:inherit;font-size:14px;
  font-weight:600;letter-spacing:.03em;color:var(--ink);
  background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--g-cyan) border-box;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(56,225,255,.35)}
.btn.primary{background:linear-gradient(#101624,#101624) padding-box,var(--g-primary) border-box;
  box-shadow:0 0 32px rgba(56,225,255,.28)}
.btn.primary:hover{box-shadow:0 0 46px rgba(179,107,255,.45)}

/* Inline figures — office scenes inside the body copy. */
.fig{margin:2.6em 0}
.fig img{width:100%;border-radius:14px;border:1px solid var(--line-faint)}
.fig figcaption{margin-top:12px;font-size:13px;line-height:1.6;color:var(--muted)}
.grid2{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin:2.6em 0}
.grid2 img{width:100%;border-radius:14px;border:1px solid var(--line-faint)}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}