/* Inkling blog: everydaymactools.com/inkling/blog/
   Loaded after fonts.css and inkling.css, which bring the tokens, Bricolage Grotesque and Instrument
   Serif, 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: paper and ink, hairline rules, lavender cards with no
   borders, purple only as a marker, Instrument Serif italics for a quoted thought, "01 /" section
   numbers. The blog pages are built by everydaymactools/scripts/build-blogs.py. */

.post { --text-2: #46424e; }

/* ---------- breadcrumbs: set like the page's .eyebrow ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--purple); }
.crumbs a::after { content: "/"; margin-left: 8px; color: #b5afb9; }
.crumbs span[aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }

/* ---------- article ---------- */
.post { padding: clamp(36px, 5vw, 72px) 0 clamp(72px, 9vw, 112px); }
.post__head { max-width: 800px; }
.post__head h1 { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.04; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; }
.post__head .sub { margin-top: 20px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--muted); max-width: 36em; text-wrap: pretty; }
.post__meta { margin-top: 20px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.post__body { max-width: 680px; 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(26px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; }
.post__body h3 { margin: 30px 0 8px; font-size: 19px; letter-spacing: -.02em; font-weight: 600; }
.post__body p, .post__body li { font-size: 17px; line-height: 1.75; color: var(--text-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(--purple); }
.post__body a { color: var(--purple); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #c4b6dc; }
.post__body a:hover { color: #514268; text-decoration-color: currentColor; }
.post__body strong, .post__body b { color: var(--ink); font-weight: 600; }
.post__body em { font-size: 1.12em; } /* Instrument Serif italic, from inkling.css */
.post__body code { padding: 2px 6px; border-radius: 5px; background: rgba(119, 97, 169, .1); color: var(--ink); font: .86em/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
.post__body pre { margin: 1em 0; padding: 18px 20px; border-radius: 13px; overflow-x: auto; background: #161519; color: #e9e4f2; }
.post__body pre code { padding: 0; background: none; color: inherit; }
.post__body blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--lavender); }
.post__body blockquote p { color: var(--ink); font: italic 22px/1.4 var(--display); letter-spacing: -.01em; }
.post__body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }

/* comparison tables: the page's mini table, lavender head on a pale lavender sheet; scroll sideways on a phone */
.post__body table { display: block; max-width: 100%; overflow-x: auto; margin: 1.2em 0; border-collapse: collapse; border-radius: 10px; background: #f8f5fb; box-shadow: 0 4px 18px #65507710; font-size: 15px; line-height: 1.5; }
.post__body th, .post__body td { padding: 11px 14px; text-align: left; vertical-align: top; border: 1px solid #dbd2e4; }
.post__body th { color: var(--ink); font-weight: 600; background: #e4daf5; white-space: nowrap; }
.post__body td { color: var(--text-2); }

/* ---------- the call to action (the lavender price card) and Read next ---------- */
.post__cta { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: center; max-width: 680px; margin-top: 56px; padding: 30px 32px; border-radius: 22px; background: #e9e0f2; }
.post__cta img { width: 56px; height: 56px; transform: scale(1.16); }
.post__cta b { display: block; color: var(--ink); font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.035em; }
.post__cta p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.post__cta .button { margin-top: 16px; }

.post__more { max-width: 680px; margin-top: 48px; }
.post__more h2 { padding-bottom: 14px; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.post__more a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; letter-spacing: -.01em; text-decoration: none; transition: color .2s; }
.post__more a:first-of-type { border-top: 1px solid var(--line); }
.post__more a:hover { color: var(--purple); }

/* ---------- the blog index ---------- */
.blog__grid { display: grid; max-width: 860px; margin-top: clamp(36px, 5vw, 60px); counter-reset: cat; }
.blog__cat { margin: 52px 0 0; padding-bottom: 14px; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; color: #6e6179; }
.blog__cat::before { counter-increment: cat; content: counter(cat, decimal-leading-zero) " / "; }
.blog__cat:first-child { margin-top: 0; }
.blog__cat + .blog__item { border-top: 1px solid var(--line); }
.blog__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 20px 10px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .2s; }
.blog__item:hover { background: #efe9f6; color: var(--ink); }
.blog__item b { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -.025em; }
.blog__item span { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .post__cta { grid-template-columns: 1fr; padding: 24px 22px; }
  .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: 14px; }
  .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: 16.5px; }
  .blog__item { padding: 16px 2px; }
  .blog__item b { font-size: 17px; }
}