/* HeyWorks — article template, styled after arglio.com.
   Single centered 780px column, near-white lavender canvas, deep navy ink,
   Google Sans/system stack, generous editorial spacing. Light + dark.

   Loaded AFTER chrome.css so it overrides page tokens for article content only. */

:root{
  --art-bg:#FDFCFF;
  --art-ink:#08102B;
  --art-ink-2:#3C455C;
  --art-ink-3:#6B7280;
  --art-line:#E4E7F0;
  --art-line-2:#EEF1F7;
  --art-surface:#F6F7FC;
  --art-accent:#1A56DB;
  --art-font:"Google Sans Text","Google Sans",ui-sans-serif,system-ui,-apple-system,
    BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --art-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --art-r:5px;
}
html[data-theme="dark"]{
  --art-bg:#0C1018;
  --art-ink:#E9ECF5;
  --art-ink-2:#A9B0C4;
  --art-ink-3:#7C8499;
  --art-line:#232A3A;
  --art-line-2:#1A2130;
  --art-surface:#141A26;
  --art-accent:#7FB0FF;
}

.art-page{background:var(--art-bg);color:var(--art-ink);font-family:var(--art-font);
  font-size:16px;line-height:1.8;letter-spacing:-.005em;
  transition:background .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1)}

/* ---------- column: 780px centered, no sidebar ---------- */
.art{max-width:780px;margin:0 auto;padding:112px 22px 96px}
.art>*{max-width:780px}

/* ---------- back link ---------- */
.art-back{display:inline-flex;align-items:center;gap:8px;color:var(--art-ink-3);
  font-size:13px;font-weight:500;letter-spacing:.02em;text-decoration:none;
  margin-bottom:30px;transition:color .2s}
.art-back:hover{color:var(--art-accent)}
.art-back svg{width:15px;height:15px}

/* ---------- label ---------- */
.art-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--art-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--art-accent);
  margin-bottom:18px}

/* ---------- title ---------- */
.art-title{font-size:clamp(1.75rem,4.6vw,2.25rem);line-height:1.2;letter-spacing:-.025em;
  font-weight:700;color:var(--art-ink);margin:0 0 18px}

/* ---------- lead ---------- */
.art-lead{font-size:1.06rem;line-height:1.65;color:var(--art-ink-2);
  margin:0 0 28px;max-width:62ch}

/* ---------- meta row ---------- */
.art-meta{display:flex;align-items:center;gap:10px;color:var(--art-ink-3);
  font-size:13.5px;padding-bottom:24px;border-bottom:1px solid var(--art-line);margin-bottom:40px}
.art-meta span{font-family:var(--art-mono);font-size:11.5px;letter-spacing:.06em}
.art-meta b{color:var(--art-ink-2);font-weight:600}

/* ---------- cover image ---------- */
.art-cover{margin:0 0 40px;border-radius:var(--art-r);overflow:hidden;
  border:1px solid var(--art-line)}
.art-cover img{display:block;width:100%;height:auto}

/* ---------- prose ---------- */
.prose{font-size:16px;line-height:1.8;color:var(--art-ink)}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.7em}
.prose h2{font-size:1.7rem;line-height:1.25;letter-spacing:-.02em;font-weight:700;
  color:var(--art-ink);margin:2.55em 0 .9em}
.prose h3{font-size:1.25rem;line-height:1.35;letter-spacing:-.015em;font-weight:700;
  color:var(--art-ink);margin:2.1em 0 .7em}
.prose a{color:var(--art-accent);text-decoration:none;border-bottom:1px solid rgba(26,86,219,.3)}
.prose a:hover{border-color:var(--art-accent)}
.prose ul,.prose ol{margin:0 0 1.7em;padding-left:24px}
.prose li{margin-bottom:.7em;line-height:1.7}
.prose li::marker{color:var(--art-accent)}
.prose strong{font-weight:700;color:var(--art-ink)}
.prose em{font-style:italic;color:var(--art-ink-2)}
.prose img{display:block;width:100%;height:auto;border-radius:var(--art-r);
  border:1px solid var(--art-line);margin:1.8em 0}
.prose blockquote{margin:1.8em 0;padding:2px 0 2px 20px;border-left:3px solid var(--art-accent);
  color:var(--art-ink-2);font-style:italic}
.prose pre{background:var(--art-surface);border:1px solid var(--art-line);
  border-radius:var(--art-r);padding:16px 18px;overflow-x:auto;margin:1.8em 0;
  font-family:var(--art-mono);font-size:13.5px;line-height:1.7;color:var(--art-ink-2)}
.prose code{font-family:var(--art-mono);font-size:.88em;color:var(--art-accent)}
.prose pre code{color:inherit}
.prose table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.92rem;
  display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--art-line);padding:9px 12px;text-align:left}
.prose th{background:var(--art-surface);color:var(--art-ink);font-weight:700}

/* ---------- callout / calc boxes ---------- */
.callout{background:var(--art-surface);border:1px solid var(--art-line);
  border-radius:var(--art-r);padding:20px 22px;margin:1.6em 0}
.callout p{margin:0;color:var(--art-ink-2);font-size:.97rem;line-height:1.65}
.callout strong{color:var(--art-ink)}
.calc{background:var(--art-surface);border:1px solid var(--art-line);border-radius:var(--art-r);
  padding:24px;margin:1.8em 0}
.calc h3{font-size:1.1rem;font-weight:700;margin:0 0 14px}
.calc ul{margin:0;padding-left:22px}
.calc li{margin-bottom:10px;font-size:.97rem;color:var(--art-ink-2);line-height:1.65}
.calc b{color:var(--art-ink);font-weight:700}

/* ---------- CTA at end ---------- */
.art-cta{background:var(--art-surface);border:1px solid var(--art-line);
  border-left:3px solid var(--art-accent);border-radius:var(--art-r);
  padding:24px 26px;margin:48px 0 0}
.art-cta h3{margin:0 0 8px;font-size:1.15rem;font-weight:700;color:var(--art-ink)}
.art-cta p{margin:0 0 16px;font-size:.97rem;color:var(--art-ink-2);line-height:1.6}
.art-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:980px;
  font-size:14.5px;font-weight:600;color:#fff;background:var(--art-accent);
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.art-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--art-accent)}
.art-btn svg{width:16px;height:16px}

/* ---------- related posts ---------- */
.art-rel{border-top:1px solid var(--art-line);margin-top:56px;padding-top:34px}
.art-rel h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--art-mono);color:var(--art-ink-3);font-weight:500;margin:0 0 18px}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rel-card{display:flex;flex-direction:column;gap:8px;padding:18px;
  background:var(--art-surface);border:1px solid var(--art-line);border-radius:var(--art-r);
  text-decoration:none;color:var(--art-ink);transition:border-color .25s,transform .25s}
.rel-card:hover{border-color:var(--art-accent);transform:translateY(-2px)}
.rel-card span{font-family:var(--art-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--art-accent)}
.rel-card b{font-size:.97rem;font-weight:600;line-height:1.4}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .art{padding:88px 18px 72px}
  .rel-grid{grid-template-columns:1fr}
  .prose h2{font-size:1.42rem}
  .prose h3{font-size:1.12rem}
  .art-cta{padding:20px}
}