/* Shoji blog: everydaymactools.com/shoji/blog/
   Loaded after css/shoji.css, which brings the tokens, the system fonts, the nav, the footer and the
   buttons. This file only styles the article, the blog index and the breadcrumbs, in the page's own
   vocabulary: cool paper and sumi ink, hairlines, one indigo accent, mono labels, the lattice as a
   texture. No amber, no cream. The blog pages are built by everydaymactools/scripts/build-blogs.py. */

/* ---------- breadcrumbs: set like the page's mono .label ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--indigo); }
.crumbs a::after { content: "/"; margin-left: 8px; color: var(--ink-3); opacity: .6; }
.crumbs span[aria-current] { max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- article ---------- */
/* the nav is fixed (64px tall), so the page starts below it */
.post { padding: calc(64px + clamp(40px, 6vw, 84px)) 0 clamp(72px, 9vw, 120px); }
.post__head { max-width: 780px; }
.post__head h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.03em; font-weight: 650; text-wrap: balance; }
.post__head .sub { margin-top: 18px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.post__meta { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.post__body { max-width: 700px; margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.post__body h2 { margin: 48px 0 12px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.022em; font-weight: 640; }
.post__body h3 { margin: 30px 0 8px; font-size: 19px; }
.post__body p, .post__body li { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.post__body p + p, .post__body ul + p, .post__body ol + p, .post__body table + p, .post__body pre + p { margin-top: 1em; }
.post__body ul, .post__body ol { display: grid; gap: .45em; margin: .7em 0 1em; padding-left: 1.3em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li::marker { color: var(--indigo); }
.post__body a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post__body a:hover { color: var(--indigo-2); }
.post__body strong, .post__body b { color: var(--ink); font-weight: 620; }
.post__body code { padding: 2px 6px; border-radius: 6px; background: var(--paper-2); color: var(--ink); font: .88em/1.4 var(--mono); }
.post__body pre { margin: 1em 0; padding: 18px 20px; border-radius: 16px; overflow-x: auto; background: var(--ink); color: #c8cfdb; font: 13.5px/1.75 var(--mono); }
.post__body pre code { padding: 0; background: none; color: inherit; font: inherit; }
.post__body blockquote { margin: 1.2em 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--indigo); }
.post__body blockquote p { color: var(--ink); }
.post__body hr { margin: 2em 0; border: 0; height: 22px; background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 44px) 0 0 / 100% 100%; }

/* comparison tables: the page's .compare, translucent white on paper; scroll sideways on a phone rather than squash */
.post__body table { display: block; max-width: 100%; overflow-x: auto; margin: 1.2em 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .6); font-size: 15.5px; line-height: 1.5; }
.post__body th, .post__body td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.post__body th { font-family: var(--display); color: var(--ink); font-weight: 620; background: var(--paper-2); white-space: nowrap; }
.post__body td { color: var(--ink-2); }
.post__body tr:last-child td { border-bottom: 0; }

/* ---------- the call to action (the price card, with its lattice) and Read next ---------- */
.post__cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; max-width: 700px; margin-top: 52px; padding: 28px 30px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(20, 30, 60, .45); }
.post__cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, var(--line-2) 0 1px, transparent 1px 44px);
  mask-image: linear-gradient(160deg, #000, transparent 55%); -webkit-mask-image: linear-gradient(160deg, #000, transparent 55%); }
.post__cta > * { position: relative; }
.post__cta img { width: 56px; height: 56px; transform: scale(1.14); }
.post__cta b { display: block; color: var(--ink); font-family: var(--display); font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.post__cta p { margin-top: 4px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.post__cta .btn { margin-top: 16px; }

.post__more { max-width: 700px; margin-top: 44px; border-top: 1px solid var(--ink); }
.post__more h2 { padding: 16px 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.post__more a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 560; text-decoration: none; transition: color .2s; }
.post__more a:hover { color: var(--indigo); }

/* ---------- the blog index ---------- */
.blog__grid { display: grid; max-width: 860px; margin-top: clamp(32px, 4vw, 52px); }
.blog__cat { margin: 48px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 640; }
.blog__cat:first-child { margin-top: 0; }
.blog__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease); }
.blog__item:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.blog__item b { font-size: 17px; font-weight: 600; }
.blog__item:hover b { color: var(--indigo); }
.blog__item span { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .post__cta { grid-template-columns: 1fr; padding: 22px 20px; }
  .crumbs span[aria-current] { display: none; }
  .crumbs a:nth-last-child(2)::after { display: none; } /* no dangling "/" once the title is hidden */
  .post__body table { font-size: 14.5px; }
  .post__body th, .post__body td { padding: 10px 12px; }
  .post__body td + td, .post__body th + th { min-width: 8em; } /* scroll sideways before columns get too thin */
  .post__body p, .post__body li { font-size: 17px; }
  .blog__item { padding: 14px 2px; }
}