/* upgrade.css (10 Nov 2026): typographic finish for jonathancole.me.
   Loaded last, after each page's inline CSS. Presentation only: no copy, link, form or script changes.
   The page stays white with black Newsreader text; the navy of the star mark (#182E6E) is the one accent. */

:root{
  --up-navy:#182E6E;
  --up-navy-deep:#101F4D;
  --up-tint:#F5F6FA;
  --link:#182E6E;
  --rule:#E2E4EC;
}
html{scroll-padding-top:92px}
::selection{background:rgba(24,46,110,.16)}
a{text-decoration-color:rgba(24,46,110,.45)}
a:hover{text-decoration-color:currentColor}

/* ---------- header: a slim floating navy bar, the width of the reading column ---------- */
.topnav{position:sticky;top:12px;z-index:30;flex-wrap:nowrap;gap:0 22px;width:calc(100% - 24px);max-width:620px;margin:12px auto 0;padding:2px 24px;border:0;border-radius:18px;background:var(--up-navy);box-shadow:0 10px 26px rgba(16,31,77,.16);font-size:.97rem;white-space:nowrap}
.topnav a{display:inline-flex;align-items:center;min-height:44px;color:#FFFFFF;opacity:.86;text-decoration:none}
.topnav a:hover{opacity:1;text-decoration:underline;text-decoration-color:rgba(255,255,255,.6)}
.topnav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-color:rgba(255,255,255,.6);text-decoration-thickness:1px}
.topnav a:last-child{margin-left:auto}
.topnav a:focus-visible{outline-color:#FFFFFF;opacity:1}

/* ---------- home: name, portrait and a larger opening paragraph ---------- */
main{padding-top:84px}
.intro{display:grid;grid-template-columns:minmax(0,1fr) 172px;column-gap:36px;align-items:start}
.intro>div{display:contents}
.intro .mark{grid-column:1;grid-row:1;width:104px;margin:6px 0 30px}
.intro h1{grid-column:1;grid-row:2;font-size:clamp(2.6rem,7.4vw,3.4rem);line-height:1.05;letter-spacing:-.018em;margin:0}
.intro h1 span{display:block;margin:14px 0 0;font-size:1.25rem;line-height:1.3;letter-spacing:0;font-style:italic}
.intro img{grid-column:2;grid-row:1/3;width:172px;height:172px;margin:0;border-radius:20px}
.intro p{grid-column:1/-1;grid-row:3;margin:38px 0 0;font-size:1.4rem;line-height:1.5}

/* ---------- sections ---------- */
main h2{font-size:1.75rem;line-height:1.2;letter-spacing:-.01em;margin:68px 0 18px;padding-top:40px}

/* companies: each name and its description read as one soft card */
dl{margin-top:26px}
dt{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-top:14px;padding:20px 24px 0;border:1px solid var(--rule);border-bottom:0;border-radius:18px 18px 0 0;background:var(--up-tint);font-size:1.3rem;line-height:1.3}
dt a{padding:2px 0}
dt small{margin-left:0;font-size:1rem}
dd{margin:0;padding:8px 24px 22px;border:1px solid var(--rule);border-top:0;border-radius:0 0 18px 18px;background:var(--up-tint)}

/* contact links as pills */
ul.plain{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
ul.plain li{margin:0}
ul.plain a{min-height:44px;min-width:48px;justify-content:center;padding:0 18px;border:1px solid rgba(24,46,110,.3);border-radius:999px;text-decoration:none;transition:background .15s,border-color .15s}
ul.plain a:hover{background:var(--up-tint);border-color:var(--up-navy)}

/* book a call: the one navy card (the block's own CSS sits later in the page, hence body) */
body main .book-call{padding:68px 0 0}
body .book-call .book-card{border:0;border-radius:22px;padding:34px 36px;color:#FFFFFF;background:linear-gradient(160deg,var(--up-navy-deep) 0,var(--up-navy) 62%,#24449A 100%)}
body .book-call .book-card h2{margin:0 0 10px;font-size:1.9rem;color:#FFFFFF}
body .book-call .book-card p{color:rgba(255,255,255,.9)}
body .book-call .book-card .book-eyebrow{color:#C9D4F2;opacity:1}
body .book-call .book-card .book-fine{color:rgba(255,255,255,.82);opacity:1}
body .book-call .book-actions a.bk-btn{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);color:#FFFFFF}
body .book-call .book-actions a.bk-primary{border-color:#FFFFFF;background:#FFFFFF}
body .book-call .book-actions a.bk-primary span{color:var(--up-navy-deep);mix-blend-mode:normal}
body .book-call .book-actions a:focus-visible{outline-color:#FFFFFF}

/* footer */
footer{margin-top:64px;padding-top:26px}

/* ---------- inner pages ---------- */
main.sub{padding-top:60px}
.crumbs{margin-bottom:22px}
.post h1,.hub h1,.pp h1{font-size:clamp(2.1rem,6.4vw,2.8rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 16px}
.hub h1+p{font-size:1.2rem;line-height:1.5}
.post h2{font-size:1.5rem;line-height:1.25;margin:46px 0 12px}
.post>h1+.meta{padding-bottom:28px;border-bottom:1px solid var(--rule)}
.postlist{margin-top:34px}
.postlist li{margin-top:14px;padding:24px 26px;border:1px solid var(--rule);border-radius:18px;background:var(--up-tint)}
.postlist h2{font-size:1.4rem;letter-spacing:-.005em;margin-bottom:6px}
.post-end{margin-top:52px;padding-top:24px}
/* privacy: the article's own padding doubled the page padding */
.pp{padding:0;max-width:none}
.pp h1{margin-bottom:10px}
.pp h2{font-size:1.4rem;margin:44px 0 10px;padding-top:30px}

/* ---------- phones ---------- */
@media (max-width:560px){
  html{scroll-padding-top:80px}
  .topnav{top:8px;width:calc(100% - 16px);margin-top:8px;padding:1px 18px;gap:0 20px;border-radius:16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{flex:none}
  .topnav a:last-child{margin-left:0}
  main,main.sub{padding-top:44px}
  .intro{grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
  .intro .mark{grid-row:1;align-self:end;width:96px;margin:0}
  .intro img{grid-column:2;grid-row:1;width:104px;height:104px;border-radius:16px}
  .intro h1{grid-column:1/-1;grid-row:2;margin-top:28px}
  .intro h1 span{font-size:1.15rem}
  .intro p{margin-top:28px;font-size:1.24rem}
  main h2{font-size:1.55rem;margin-top:52px;padding-top:32px}
  .post h2{font-size:1.35rem;margin-top:38px}
  .pp h2{font-size:1.3rem;margin-top:36px;padding-top:26px}
  dt{padding:18px 20px 0;font-size:1.2rem}
  dd{padding:8px 20px 20px}
  .postlist li{padding:20px}
  body main .book-call{padding-top:52px}
  body .book-call .book-card{padding:26px 22px;border-radius:18px}
}