/* ============================================================
   THE CONTENT SURGEON, Journal (blog) stylesheet
   Editorial reading layout. Self-contained: brand tokens copied
   from the global stylesheet so journal pages stand alone.
   ============================================================ */
:root{
  --bg: #faf7f2;
  --bg-elev: #f3ede3;
  --ink: #0b0b0b;
  --ink-70: rgba(11,11,11,.72);
  --ink-55: rgba(11,11,11,.62);
  --ink-30: rgba(11,11,11,.34);
  --line: rgba(11,11,11,.12);
  --line-strong: rgba(11,11,11,.22);
  --accent: #c8342c;
  --accent-soft: rgba(200,52,44,.10);
  --radius: 14px;
  --radius-lg: 22px;
  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-italic: "Instrument Serif", Georgia, serif;
  --read: 720px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Header ---------- */
.j-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding: 20px clamp(20px,5vw,40px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(250,247,242,.86);
  backdrop-filter:saturate(140%) blur(10px); z-index:10;
}
.j-header__brand{ display:inline-flex; align-items:center; color:var(--ink); }
.j-header__brand img{ height:44px; width:auto; }
@media (min-width:900px){ .j-header__brand img{ height:50px; } }
.j-header__nav{ display:flex; gap:22px; font-size:14px; font-weight:600; }
.j-header__nav a{ color:var(--ink-70); }
.j-header__nav a:hover{ color:var(--ink); text-decoration:none; }
@media (max-width:560px){ .j-header__nav{ display:none; } }

/* ---------- Shared wrap ---------- */
.j-wrap{ max-width: var(--read); margin:0 auto; padding: clamp(28px,6vw,60px) clamp(20px,5vw,40px); }
.j-eyebrow{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:800; color:var(--accent); margin:0 0 14px;
}

/* ---------- Index ---------- */
.j-hero h1{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.02em;
  line-height:1.04; font-size:clamp(34px,6vw,56px); margin:0 0 16px; color:var(--ink);
}
.j-hero p{ font-size:clamp(17px,2.2vw,21px); color:var(--ink-70); margin:0; max-width:60ch; }
.j-hero .j-italic{ font-family:var(--font-italic); font-style:italic; }

/* Filter + search controls */
.j-controls{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; margin:clamp(26px,4vw,40px) 0 0; }
.j-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.j-filter__chip{ flex:0 0 auto; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink-70); cursor:pointer; white-space:nowrap; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.j-filter__chip:hover{ border-color:var(--line-strong); color:var(--ink); }
.j-filter__chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.j-search{ flex:0 1 240px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font-family:var(--font-body); font-size:14px; color:var(--ink); outline:none; }
.j-search::placeholder{ color:var(--ink-30); }
.j-search:focus{ border-color:var(--accent); }
@media (max-width:600px){
  .j-filter{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1*clamp(20px,5vw,40px)); padding:2px clamp(20px,5vw,40px); }
  .j-filter::-webkit-scrollbar{ display:none; }
  .j-search{ flex:1 1 100%; }
}
.j-empty{ color:var(--ink-55); font-size:15px; padding:24px 2px; }

.j-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.j-list > li[hidden]{ display:none; }
.j-card{
  display:block; padding:26px clamp(18px,3vw,30px);
  border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff;
  transition:border-color .2s ease, transform .2s ease;
}
.j-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); text-decoration:none; }
.j-card__meta{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-55); font-weight:700; }
.j-card__title{ font-family:var(--font-display); font-weight:900; letter-spacing:-.02em; font-size:clamp(22px,3vw,28px); line-height:1.1; color:var(--ink); margin:8px 0 8px; }
.j-card__dek{ font-size:16px; color:var(--ink-70); margin:0; }

/* ---------- Article ---------- */
.j-article{ }
.j-article__head{ margin-bottom: clamp(26px,4vw,40px); }
.j-article__head h1{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.02em;
  line-height:1.06; font-size:clamp(30px,5.2vw,50px); margin:6px 0 16px; color:var(--ink);
}
.j-article__dek{ font-size:clamp(18px,2.4vw,22px); line-height:1.5; color:var(--ink-70); margin:0 0 20px; font-family:var(--font-italic); font-style:italic; }
.j-byline{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-55); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; }
.j-byline strong{ color:var(--ink); font-weight:700; }

.j-prose{ }
.j-prose > p{ margin:0 0 22px; }
.j-prose h2{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.02em;
  font-size:clamp(22px,3.2vw,30px); line-height:1.12; margin:44px 0 14px; color:var(--ink);
}
.j-prose h3{
  font-family:var(--font-body); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(18px,2.2vw,21px); margin:30px 0 10px; color:var(--ink);
}
.j-prose strong{ font-weight:700; color:var(--ink); }
.j-prose em{ font-style:italic; }
.j-prose ul{ margin:0 0 22px; padding-left:22px; }
.j-prose li{ margin:0 0 10px; }
.j-prose blockquote{
  margin:28px 0; padding:18px 24px; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-italic); font-style:italic; font-size:21px; line-height:1.45; color:var(--ink);
}
.j-pull{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.02em;
  font-size:clamp(22px,3.4vw,30px); line-height:1.18; color:var(--ink);
  margin:36px 0; padding:0; border:0;
}

/* Stat strip */
.j-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0; }
.j-stat{ border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:#fff; text-align:center; }
.j-stat b{ display:block; font-family:var(--font-display); font-size:clamp(22px,3.4vw,30px); color:var(--accent); letter-spacing:-.02em; }
.j-stat span{ font-size:12.5px; color:var(--ink-55); line-height:1.35; }
@media (max-width:560px){ .j-stats{ grid-template-columns:1fr; } }

/* FAQ */
.j-faq{ margin:40px 0 8px; }
.j-faq h2{ margin-bottom:8px; }
.j-faq details{ border-bottom:1px solid var(--line); padding:16px 0; }
.j-faq summary{ font-weight:700; font-size:18px; color:var(--ink); display:flex; justify-content:space-between; gap:16px; }
.j-faq summary::after{ content:"+"; color:var(--accent); font-weight:800; }
.j-faq details[open] summary::after{ content:"\2013"; }
.j-faq details p{ margin:12px 0 0; color:var(--ink-70); }

/* CTA */
.j-cta{
  margin:48px 0 0; padding:clamp(26px,4vw,38px);
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-elev);
}
.j-cta h3{ font-family:var(--font-display); font-weight:900; letter-spacing:-.02em; font-size:clamp(20px,2.6vw,26px); margin:0 0 10px; color:var(--ink); }
.j-cta p{ margin:0 0 18px; color:var(--ink-70); }
.j-btn{
  display:inline-block; background:var(--ink); color:#fff; padding:13px 22px;
  border-radius:999px; font-weight:700; font-size:15px;
}
.j-btn:hover{ text-decoration:none; opacity:.9; }

/* Playbook series cross-links */
.j-series{ margin:48px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.j-series__label{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--ink-55); margin:0 0 10px; }
.j-series a{ display:block; color:var(--ink); font-weight:700; padding:10px 0; border-bottom:1px solid var(--line); }
.j-series a:hover{ color:var(--accent); text-decoration:none; }

/* Email opt-in */
.j-subscribe{ margin:clamp(40px,6vw,64px) 0 0; padding:clamp(26px,4vw,38px); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-elev); }
.j-subscribe h3{ font-family:var(--font-display); font-weight:900; letter-spacing:-.02em; font-size:clamp(20px,2.6vw,26px); margin:0 0 8px; color:var(--ink); }
.j-subscribe > p{ margin:0 0 16px; color:var(--ink-70); font-size:15px; }
.j-subscribe__form{ display:flex; gap:10px; flex-wrap:wrap; }
.j-subscribe__form input{ flex:1 1 180px; padding:12px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font-family:var(--font-body); font-size:15px; color:var(--ink); outline:none; }
.j-subscribe__form input:focus{ border-color:var(--accent); }
.j-subscribe__form button{ flex:0 0 auto; background:var(--ink); color:#fff; border:0; padding:12px 24px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; }
.j-subscribe__form button:hover{ opacity:.9; }
.j-subscribe__form button:disabled{ opacity:.5; cursor:default; }
.j-subscribe__msg{ margin:12px 0 0; font-size:14px; }
@media (max-width:480px){ .j-subscribe__form input, .j-subscribe__form button{ flex:1 1 100%; } }

/* ---------- Footer ---------- */
.j-footer{ border-top:1px solid var(--line); margin-top:clamp(40px,6vw,72px); }
.j-footer__in{ max-width:var(--read); margin:0 auto; padding:28px clamp(20px,5vw,40px); display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; font-size:14px; color:var(--ink-55); }
.j-footer a{ color:var(--ink-70); }
.j-footer a:hover{ color:var(--ink); text-decoration:none; }
.j-footer__links{ display:flex; gap:20px; flex-wrap:wrap; }