/* ZeroJumpApps blog: the zerojumpapps.com look (tokens from the website's global.css) for Blogger.
   Served from zerojumpapps.com/blogger/theme.css; built by build_theme.py. */
:root {
  --ink: #2e2a25;
  --gold: #b07c3c;
  --gold-dark: #8a5f2b;
  --cream-hi: #fbf4ea;
  --cream-lo: #f6e9d6;
  --sand: #e8c79a;
  --chip: #f6efe4;
  --panel: #fbf7f1;
  --white: #fff;
  --ink-08: rgb(46 42 37 / 0.08);
  --ink-10: rgb(46 42 37 / 0.1);
  --ink-16: rgb(46 42 37 / 0.16);
  --ink-50: rgb(46 42 37 / 0.5);
  --ink-62: rgb(46 42 37 / 0.62);
  --ink-72: rgb(46 42 37 / 0.72);
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: 56px;
}
@media (max-width: 900px) {
  :root { --pad: 20px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; height: auto; }

.shell { max-width: 1240px; margin: 0 auto; }
.eyebrow {
  font: 500 11px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Header ------------------------------------------------------------------ */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-08);
}
.top__in {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px var(--pad);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark { width: 34px; height: 34px; display: block; }
.brand__name { font: 800 18px var(--sans); letter-spacing: -0.02em; }
.brand__tag {
  font: 500 10px var(--mono);
  letter-spacing: 0.12em;
  color: var(--gold);
  border: 1px solid var(--sand);
  border-radius: 6px;
  padding: 3px 7px;
}
.top__nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.top__nav a { color: var(--ink-62); font: 500 14px var(--sans); }
.top__nav a:hover { color: var(--ink); }
.top__nav .pill-dark { color: var(--white); }
.pill-dark {
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  padding: 10px 18px;
  font: 700 13px var(--sans);
  white-space: nowrap;
}
.pill-dark:hover { background: var(--gold); color: var(--white); }
@media (max-width: 640px) {
  .top__nav a:not(.pill-dark) { display: none; }
  .brand__tag { display: none; }
}

/* Home hero ----------------------------------------------------------------- */
.hero { padding: 18px 24px 0; }
.hero__panel {
  border-radius: 28px;
  background: linear-gradient(180deg, var(--cream-hi) 0%, var(--cream-lo) 100%);
  padding: 72px 56px 64px;
  position: relative;
  overflow: hidden;
}
.hero__panel::after {
  content: '';
  position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(176 124 60 / 0.16), transparent 70%);
}
.hero__title {
  margin: 18px 0 0;
  max-width: 820px;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 900;
}
.hero__lede {
  margin: 22px 0 0;
  max-width: 600px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--ink-72);
}
.hero__chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 12px var(--mono);
  color: var(--ink-62);
  border: 1px solid var(--ink-16);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgb(255 255 255 / 0.5);
}
a.chip:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 900px) {
  .hero { padding: 12px 12px 0; }
  .hero__panel { padding: 44px 24px 40px; }
}

/* Posts: Blogger's own Blog1 markup ------------------------------------------
   .blog-posts holds one article.post-outer-container per post, each with
   .post-title, .post-header (date), .post-body and .post-footer (labels, share).
   body.is-index on lists, body.is-item on a post or page (template b:class). */
.main { padding: 56px var(--pad) 0; }
.posts .widget { margin: 0; }
/* Widgets carried over from Blogger's previous theme stay hidden. */
.posts .widget:not(.Blog) { display: none; }
.blog-posts { display: grid; gap: 20px; }
.post-title { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.post-title a { color: var(--ink); }
.post-share-buttons, .comments, #comments, .post-comment-link, .comment-link,
.reactions, .post-feeds, .author-profile, .jump-link, .post-labels .byline-label { display: none; }

.is-index .blog-posts { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.is-index .post-outer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--ink-10);
  border-radius: 20px;
  background: var(--white);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.is-index .post-outer-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px var(--ink-08);
  border-color: var(--sand);
}
.is-index .post-outer { flex: 1; }
.is-index .post-outer-container::after {
  content: 'Read the guide \2192';
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-08);
  font: 500 12px var(--mono);
  color: var(--gold);
}
.is-index .post-title { font-size: 23px; line-height: 1.2; }
/* The title link covers the whole card. */
.is-index .post-title a::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.is-index .post-header, .is-index .post-footer { display: none; }
.is-index .post-body {
  position: relative;
  margin-top: 12px;
  max-height: 8.2em;
  overflow: hidden;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-62);
}
.is-index .post-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.4em;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
}
.is-index .post-body p, .is-index .post-body p:first-child { margin: 0 0 8px; font-size: inherit; color: inherit; }
.is-index .post-body h2, .is-index .post-body h3, .is-index .post-body table,
.is-index .post-body ul, .is-index .post-body ol, .is-index .post-body .note { display: none; }

.blog-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.blog-pager a {
  border: 1px solid var(--ink-16);
  border-radius: 999px;
  padding: 10px 18px;
  font: 600 13px var(--sans);
  color: var(--ink);
}
.blog-pager a:hover { border-color: var(--gold); color: var(--gold); }
.blog-pager .home-link { display: none; }

/* Single post --------------------------------------------------------------- */
.backbar, .is-item .blog-posts { max-width: 760px; margin: 0 auto; }
.back { font: 600 13px var(--sans); color: var(--ink-50); }
.back:hover { color: var(--gold); }
.is-item .post-title {
  margin-top: 26px;
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 900;
}
.is-item .post-header { margin-top: 16px; font: 500 12px var(--mono); letter-spacing: 0.06em; color: var(--ink-50); }
.is-item .post-header a { color: inherit; }
.is-item .post-body { margin-top: 36px; }
.is-item .post-footer {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-10);
  font: 500 12px var(--mono);
  color: var(--ink-50);
}
.post-footer a[rel='tag'] {
  display: inline-block;
  margin: 0 6px 6px 0;
  font: 500 11px var(--mono);
  letter-spacing: 0.06em;
  background: var(--chip);
  color: var(--gold-dark);
  padding: 5px 10px;
  border-radius: 999px;
}
.post-footer a[rel='tag']:hover { color: var(--ink); }

.post-body { font-size: 18px; line-height: 1.72; color: var(--ink-72); }
.post-body p:first-child { font-size: 20px; color: var(--ink); }
.post-body h2 {
  margin: 48px 0 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.post-body h3 { margin: 32px 0 0; font-size: 21px; font-weight: 800; color: var(--ink); }
.post-body p, .post-body ul, .post-body ol { margin: 16px 0 0; }
.post-body li + li { margin-top: 6px; }
.post-body strong { color: var(--ink); }
.post-body a { color: var(--gold-dark); text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: var(--gold); }
.post-body .note { margin-top: 36px; font-size: 14px; line-height: 1.6; color: var(--ink-50); font-style: italic; }
.post-body table {
  width: 100%;
  margin: 24px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
/* On a phone a wide table scrolls sideways instead of widening the page. */
@media (max-width: 640px) {
  .post-body table { display: block; overflow-x: auto; }
}
.post-body thead th {
  background: var(--panel);
  font: 500 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
  text-align: left;
}
.post-body th, .post-body td { padding: 10px 14px; border-bottom: 1px solid var(--ink-08); text-align: left; }
.post-body tbody tr:last-child th, .post-body tbody tr:last-child td { border-bottom: none; }
.post-body tbody tr:hover th, .post-body tbody tr:hover td { background: var(--panel); }
.post-body blockquote {
  margin: 24px 0 0;
  padding: 18px 22px;
  background: var(--panel);
  border-left: 3px solid var(--gold);
  border-radius: 0 14px 14px 0;
}
.post-body code { font: 500 0.9em var(--mono); background: var(--chip); padding: 2px 6px; border-radius: 6px; }

/* Studio CTA and footer ----------------------------------------------------- */
.cta { padding: 88px 24px 0; }
.cta__panel {
  border-radius: 28px;
  background: var(--ink);
  color: var(--white);
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta__title { margin: 12px 0 0; font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; letter-spacing: -0.03em; }
.cta__text { margin: 12px 0 0; max-width: 560px; font-size: 16.5px; line-height: 1.6; color: var(--cream-lo); }
.pill-sand {
  background: var(--sand);
  color: var(--ink);
  border-radius: 999px;
  padding: 16px 28px;
  font: 700 15px var(--sans);
  white-space: nowrap;
}
.pill-sand:hover { background: var(--white); color: var(--ink); }
.foot {
  padding: 36px var(--pad) 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-50);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot__links a { color: var(--ink-62); }
.foot__links a:hover { color: var(--gold); }
@media (max-width: 900px) {
  .cta { padding: 64px 12px 0; }
  .cta__panel { padding: 36px 24px; }
}

/* Contempo underneath --------------------------------------------------------
   The theme is Blogger's Contempo Light with our header, hero, CTA and footer
   added (body.zj). Contempo's own photo header, title bar, sidebar and footer
   are hidden and its centred column is reset, so only its posts remain. */
body.zj { background: var(--white); color: var(--ink); font-family: var(--sans); }
.zj .bg-photo-overlay, .zj .bg-photo-container, .zj .centered-top-placeholder,
.zj .centered-top-container, .zj .sidebar-container, .zj .page_body .navigation,
.zj #footer, .zj .footer-outer, .zj #page_list_top, .zj .vertical-ad-container,
.zj .desktop-ad, .zj .mobile-ad, .zj .skip-navigation { display: none !important; }
.zj .page, .zj .page_body, .zj .page_body .centered, .zj .centered-bottom {
  position: static;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.zj .page_body { padding: 0 !important; }
.zj #page_body { margin: 0; padding: 0; }
.zj #page_body .widget:not(.Blog) { display: none; }
.zj .centered-bottom { padding: 56px var(--pad) 0 !important; max-width: 1240px; margin: 0 auto; }
.zj .post-outer-container, .zj .post-outer { background: none; box-shadow: none; margin: 0; padding: 0; }
.zj .post-title { font-family: var(--sans); color: var(--ink); }
/* Contempo sizes the title link itself; let it take the heading's size instead. */
.zj .post-title a { font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--ink); }
.zj .post-body { font-family: var(--sans); }
.zj.is-item .post-outer-container { padding: 0; }
.zj .backbar { padding: 40px var(--pad) 0; box-sizing: content-box; }

/* No .shell wrapper around Contempo: keep our parts at the site's width. */
.zj .top__in, .zj .hero, .zj .cta, .zj .foot { max-width: 1240px; margin-left: auto; margin-right: auto; }
.zj .top__in { box-sizing: border-box; }