/* Jake Makes AI · Newsprint Noir
   Dark editorial broadsheet · high-contrast serif heads · single blood-red accent */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,800;0,900;1,600&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --bg:#ece3cf; --bg2:#e4dac2; --ink:#201913; --ink-dim:#5a4f3e; --faint:#8a7d64;
  --red:#bf2a1c; --red-2:#971c11; --gold:#9a6f2e;
  --line:rgba(32,25,19,.16); --line-strong:rgba(32,25,19,.32);
  --serif:'Spectral',Georgia,serif; --display:'Playfair Display',Georgia,serif; --mono:'JetBrains Mono',monospace;
  --maxw:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--serif); line-height:1.7;
  font-size:19px; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(130% 90% at 50% -8%, #f5eedc 0%, #ece3cf 60%, var(--bg) 88%);
}
/* subtle paper grain for newsprint tactility */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ── Masthead ── */
.masthead{border-bottom:3px double var(--line-strong);margin-bottom:6px}
.masthead .wrap{padding-top:26px;padding-bottom:18px;text-align:center}
.masthead-mark{display:block;width:62px;height:auto;margin:0 auto 14px}
.brand{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(2.6rem,8vw,4.6rem);text-transform:uppercase}
.brand .ai{color:var(--red)}
.kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--faint);margin-top:14px}
.tagline{font-family:var(--serif);font-style:italic;color:var(--ink-dim);margin-top:8px;font-size:1.02rem}
nav.top{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:18px}
nav.top a{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;padding:11px 4px;transition:color .15s}
nav.top a:hover,nav.top a.on{color:var(--red-2)}

/* ── Front page list ── */
.lead{padding:34px 0 10px;border-bottom:1px solid var(--line)}
.dateline{font-family:var(--mono);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.card{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line)}
.card--full{display:block}
.card .thumb{display:block;overflow:hidden;border:1px solid var(--line-strong);aspect-ratio:3/2;box-shadow:0 8px 24px rgba(32,25,19,.18)}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);filter:saturate(1.02)}
.card .thumb:hover img{transform:scale(1.05)}
.card .body{min-width:0}
.card .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.card h2{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(1.6rem,4.4vw,2.4rem);margin:.35rem 0 .5rem}
.card h2 a{color:var(--ink);text-decoration:none}
.card h2 a:hover{color:var(--red-2)}
.card .dek{font-style:italic;color:var(--ink-dim);font-size:1.08rem;margin-bottom:.7rem}
.card .meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.card .more{color:var(--red);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:1px}
@media(max-width:620px){.card{grid-template-columns:1fr;gap:14px}}
/* article hero image */
.post .hero{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line-strong);
  box-shadow:0 14px 36px rgba(32,25,19,.22);margin:2.4rem 0 16px}
.post .hero-cap{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:-6px 0 26px;text-align:center}

/* ── Article page ── */
.post{padding:38px 0 60px}
.post .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.post h1{font-family:var(--display);font-weight:900;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2.1rem,6.5vw,3.6rem);margin:.5rem 0 .6rem}
.post .dek{font-family:var(--serif);font-style:italic;font-size:1.22rem;color:var(--ink-dim);
  line-height:1.45;margin:.4rem 0 1.4rem}
.post .byline{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:30px}
.post .byline b{color:var(--ink-dim);font-weight:700}
.post p{margin:0 0 1.25rem}
.post p:first-of-type::first-letter{font-family:var(--display);font-weight:900;float:left;
  font-size:3.5rem;line-height:.74;padding:6px 10px 0 0;color:var(--red)}
.post .pull{font-family:var(--display);font-weight:700;font-style:italic;font-size:1.5rem;line-height:1.3;
  color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:26px 0}
.post a{color:var(--red-2)}
.end{font-family:var(--mono);color:var(--red);text-align:center;margin:34px 0 0;letter-spacing:.4em}

/* ── Footer ── */
footer{border-top:3px double var(--line-strong);margin-top:30px}
footer .wrap{padding:26px 0 50px;text-align:center;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
footer a{color:var(--ink-dim);text-decoration:none}
footer a:hover{color:var(--red-2)}
.back{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;margin:24px 0 0}
.back:hover{color:var(--red-2)}

/* ── LinkedIn post-ready card ── */
.li-card{border:1px solid var(--line-strong);background:var(--bg2);margin:46px 0 10px;box-shadow:0 10px 30px rgba(32,25,19,.10)}
.li-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(32,25,19,.045)}
.li-card__label{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.li-card__label svg{color:var(--red);flex:none}
.li-copy{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bg);background:var(--ink);border:none;padding:9px 15px;transition:background .15s}
.li-copy:hover{background:var(--red-2)}
.li-copy.copied{background:var(--gold)}
.li-card__body{font-family:var(--serif);font-size:1rem;line-height:1.62;color:var(--ink);white-space:pre-wrap;padding:20px 18px;margin:0}
@media(max-width:560px){.li-card__head{flex-direction:column;align-items:flex-start}}