/* Blog layout. Loads AFTER product.css and reuses its variables, so a visitor's
   light/dark choice and the brand palette carry straight across from a product
   page to a post. Nothing here redefines a colour. */

.post-head{padding:56px 0 26px}
.post-wrap{max-width:720px;margin:0 auto;padding:0 32px}
.crumbs{font-size:.82rem;font-weight:700;color:var(--ink-mute);margin-bottom:20px}
.crumbs a{color:var(--ink-mute)}
.crumbs a:hover{color:var(--ink)}

.post-cat{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--emerald);
  background:color-mix(in srgb,var(--emerald) 12%,transparent);padding:6px 13px;border-radius:999px}
.post-head h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,2.9rem);
  line-height:1.14;letter-spacing:-.02em;margin:18px 0 16px}
.post-dek{font-size:1.16rem;color:var(--ink-soft);line-height:1.62}

/* Byline. The author is a real, named person with a verifiable record — that is
   the whole point of it, so it gets room rather than a one-line credit. */
.byline{display:flex;align-items:center;gap:14px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--border)}
.byline .who{font-weight:800;font-size:.98rem}
.byline .what{font-size:.86rem;color:var(--ink-mute);font-weight:600}
.byline .meta{margin-left:auto;text-align:right;font-size:.82rem;
  font-weight:700;color:var(--ink-mute);line-height:1.5}

.post-hero{margin:34px auto 0;max-width:1100px;padding:0 32px}
/* height:auto is load-bearing on every image in this file. The width/height
   attributes are there so the browser reserves the right box and the page does
   not jump — but product.css only sets max-width, so without this the HTML
   height attribute applies literally and every image renders stretched. */
.post-hero img{width:100%;height:auto;border-radius:20px;box-shadow:var(--shadow-card)}

.post-body{padding:40px 0 20px;font-size:1.06rem;line-height:1.75}
/* product.css sets section{padding:84px 0} for the marketing pages. Inside an
   article that lands as ~170px of dead air above and below the FAQ and the
   links block, so it is reset here and spacing is set by margins instead. */
.post-body section{padding:0}
/* Justified, with hyphenation on. Justifying without hyphens opens rivers of
   white space in a 656px column — the two settings belong together. */
.post-body p,.post-body li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.post-body p{margin-bottom:22px;color:var(--ink)}
.post-body h2{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;
  margin:46px 0 14px;line-height:1.26}
.post-body h3{font-family:var(--display);font-weight:700;font-size:1.12rem;margin:30px 0 10px}
.post-body ul{margin:0 0 24px 0;padding-left:0;list-style:none}
.post-body ul li{position:relative;padding-left:28px;margin-bottom:11px;color:var(--ink)}
.post-body ul li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--emerald)}
/* :not(.btn) matters — without it the article link colour repaints the CTA
   button's label green and underlines it on top of the filled pill. */
.post-body a:not(.btn){color:var(--emerald);text-decoration:underline;text-underline-offset:3px}

/* The answer-first block. AI answer engines lift a 40-60 word direct answer from
   the top of a page; this is where it lives, and it reads as a summary to a
   human either way. */
.answer{background:var(--soft);border-left:4px solid var(--emerald);border-radius:0 16px 16px 0;
  padding:24px 28px;margin:0 0 30px}
.answer p{margin:0;font-size:1.1rem;line-height:1.62}

.pull{margin:34px 0;padding:22px 26px;border-left:4px solid var(--teal);background:var(--soft);
  border-radius:0 14px 14px 0}
.pull p{margin:0;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.5}

.note{font-size:.92rem;background:var(--soft);border-radius:14px;padding:18px 22px;margin:30px 0}
.note p{margin:0;color:var(--ink-soft)}

/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
.tablewrap{overflow-x:auto;margin:30px 0;border:1px solid var(--border);border-radius:16px}
.post-body table{border-collapse:collapse;width:100%;font-size:.96rem;min-width:520px}
.post-body th,.post-body td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border)}
.post-body th{background:var(--soft);font-weight:800;font-size:.88rem}
.post-body tbody tr:last-child td{border-bottom:none}

figure{margin:32px 0}
figure img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border)}
figcaption{font-size:.86rem;color:var(--ink-mute);font-weight:600;margin-top:10px;text-align:center}

.faq{margin:40px 0 0}
.faq h2{margin-bottom:20px}
.faq details{border:1px solid var(--border);border-radius:14px;padding:0;margin-bottom:10px;
  background:var(--surface)}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:700;font-size:1rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--ink-mute);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 20px 18px;color:var(--ink-soft);font-size:.98rem}

.post-cta{margin:44px 0 10px;padding:34px 32px;border-radius:22px;background:var(--soft);
  border:1px solid var(--border);text-align:center}
.post-cta h3{font-family:var(--display);font-weight:800;font-size:1.35rem;margin-bottom:10px}
.post-cta p{color:var(--ink-soft);max-width:34em;margin:0 auto 22px}

.post-foot{border-top:1px solid var(--border);margin-top:46px;padding:26px 0 70px;
  font-size:.9rem;color:var(--ink-mute)}

/* ---- blog index ---- */
.blog-hd{padding:60px 0 10px;text-align:center}
.blog-hd h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,2.8rem);
  letter-spacing:-.02em;margin-bottom:14px}
.blog-hd p{color:var(--ink-soft);font-size:1.1rem;max-width:34em;margin:0 auto}
.blog-list{max-width:900px;margin:0 auto;padding:36px 32px 80px;display:grid;gap:22px}
.bcard{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:18px;
  transition:.2s}
.bcard:hover{box-shadow:var(--shadow-card);border-color:var(--acc)}
.bcard img{width:100%;height:auto;border-radius:13px;display:block}
.bcard h2{font-family:var(--display);font-weight:800;font-size:1.28rem;line-height:1.25;margin-bottom:8px}
.bcard h2 a{color:var(--ink)}
.bcard p{color:var(--ink-soft);font-size:.98rem;margin-bottom:10px}
.bcard .m{font-size:.8rem;font-weight:700;color:var(--ink-mute)}

@media(max-width:760px){
  .post-head{padding:36px 0 20px}
  .post-wrap,.post-hero{padding:0 22px}
  .post-body{font-size:1.02rem}
  .byline{flex-wrap:wrap;gap:10px}
  .byline .meta{margin-left:0;text-align:left;width:100%}
  .bcard{grid-template-columns:1fr}
}

/* ---- the family photograph ----
   A real photograph of real people, so it gets a little more room than the
   article column and a softer frame than a product screenshot. */
.famshot{margin:32px 0 6px}
.famshot img{width:100%;height:auto;border-radius:18px;display:block;
  box-shadow:0 2px 6px rgba(60,52,44,.06),0 18px 40px rgba(60,52,44,.13)}
.famshot figcaption{text-align:center;font-size:.88rem;color:var(--ink-mute);font-weight:600;
  margin-top:12px;text-align:center;max-width:38em;margin-left:auto;margin-right:auto}

/* ---- wide 21:9 photograph (About) ----
   Deliberately a different frame and a different aspect from the 16:9 crop the
   intro post uses, so the two pages are not showing the same picture twice. */
.wideshot{position:relative;left:50%;transform:translateX(-50%);
  width:min(1000px,calc(100vw - 48px));margin:36px 0 8px}
.wideshot img{width:100%;height:auto;border-radius:18px;display:block;border:none;
  box-shadow:0 2px 6px rgba(60,52,44,.06),0 18px 40px rgba(60,52,44,.13)}
.wideshot figcaption{text-align:center;font-size:.88rem;color:var(--ink-mute);
  font-weight:600;margin-top:12px}

/* ---- the fourteen-planner index (About) ----
   Four across, so it reads as one glanceable set rather than a long list.
   Breaks out well past the 720px article column to earn the room, and clamps
   against the viewport so the breakout can never cause a sideways scroll. */
.idxgrid{position:relative;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100vw - 48px));margin:28px 0 36px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* Each link carries its own product's accent as --ac and its tint as --acs,
   set inline from .build/apps.json — the same pair the product pages and the
   homepage cards use, so a planner is the same colour wherever it appears.
   Stacked rather than side-by-side: at four across a horizontal icon+text row
   leaves the blurb about 150px, which wraps to four ragged lines. */
.idxlink{display:flex;flex-direction:column;gap:9px;padding:18px 18px 17px;border-radius:16px;
  border:1px solid var(--border);background:var(--surface);transition:.18s;
  border-top:3px solid var(--ac)}
.idx-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:1.25rem;color:var(--ac);background:var(--acs)}
.idx-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.idxlink strong{font-family:var(--display);font-weight:800;font-size:.98rem;line-height:1.25;
  color:var(--ink)}
.idxlink .idx-t span{font-size:.83rem;color:var(--ink-soft);line-height:1.45}
.idxlink:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);
  border-color:color-mix(in srgb,var(--ac) 55%,transparent);border-top-color:var(--ac)}
.idxlink:hover .idx-i{background:var(--ac);color:#fff}
/* the card is the link, so it must not take the article's underlined link colour */
.post-body a.idxlink,.post-body a.idxlink:hover{color:inherit;text-decoration:none}

/* The tints are light-mode swatches. On a dark surface they would be four
   near-white blocks, so dark mode derives the tint from the accent instead. */
:root[data-theme="dark"] .idx-i{background:color-mix(in srgb,var(--ac) 22%,transparent)}

/* 4 -> 3 -> 2 -> 1 as the room runs out. The card stops being readable below
   about 200px wide, which is what sets each step. */
@media(max-width:1080px){.idxgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){
  .wideshot,.idxgrid{left:auto;transform:none;width:auto}
  .idxgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){.idxgrid{grid-template-columns:1fr}}

/* ---- "other work" links block ----
   Four across needs more room than the 720px article column, so this one
   section breaks out to the hero's width and re-centres itself. Width is
   clamped against the viewport so the breakout can never cause a sideways
   scroll on a phone. */
.alsoby{position:relative;left:50%;transform:translateX(-50%);
  width:min(1100px,calc(100vw - 48px));margin:44px 0 0}
.alsohd{text-align:center;max-width:34em;margin:0 auto 26px}
.alsoby h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin-bottom:8px}
.alsohd p{color:var(--ink-soft)}

.alsogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.alsocard{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:24px 22px 20px;border-radius:20px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
/* the accent edge names the brand without printing a logo we do not own a file for */
.alsocard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--ac)}
.alsocard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);
  border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.post-body a.alsocard,.post-body a.alsocard:hover{color:inherit;text-decoration:none}

.ab-i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:1.2rem;color:var(--ac);background:color-mix(in srgb,var(--ac) 13%,transparent);
  margin-bottom:8px}
.ab-k{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-mute)}
.ab-t{font-family:var(--display);font-weight:800;font-size:1.04rem;line-height:1.25;color:var(--ink)}
.ab-d{font-size:.86rem;color:var(--ink-soft);line-height:1.5;flex:1}
/* the domain line is the only part that should read as a link */
.ab-l{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  font-size:.74rem;font-weight:700;color:var(--ac);
  display:flex;align-items:center;gap:5px;word-break:break-all}
.ab-l i{margin-left:auto;flex:none;transition:transform .22s}
.alsocard:hover .ab-l i{transform:translateX(3px)}

.c-ink{--ac:#6FA688}
.c-etsy{--ac:#C9917E}
.c-amb{--ac:#B0834F}
.c-cnc{--ac:#2A9D8F}

@media(max-width:1000px){.alsogrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .alsoby{left:auto;transform:none;width:auto;margin-left:0;margin-right:0}
  .alsogrid{grid-template-columns:1fr}
}