/* ==========================================================================
   FreeSiteCrew blog
   Loaded after styles.css on /blog/ pages only, so the homepage never pays
   for it. Uses the same tokens, shell, buttons, header and footer; this file
   adds only what the index and article pages need.

   Layout: a dark hero band on the index; every post carries a banner
   illustration (ink ground, lime line art) that heads its card and its
   article; the article itself sits between a sticky contents column and a
   share column from 1040px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Index hero: the dark band from the homepage comparison, centred
   -------------------------------------------------------------------------- */
.blog-hero{background:var(--bg-compare);color:#fff;padding-block:3rem 3.25rem;text-align:center}
.blog-hero__inner{max-width:48rem;margin-inline:auto}
.blog-hero__eyebrow{color:var(--lime)}
.blog-hero h1{
  margin-top:1rem;color:#fff;
  font-size:clamp(2rem,1.2rem + 3.4vw,3.375rem);
  line-height:1.06;letter-spacing:-.04em;text-wrap:balance;
}
.blog-hero h1 span{color:var(--lime)}
.blog-hero__lede{
  margin-top:1.25rem;margin-inline:auto;max-width:34rem;
  font-size:1.0625rem;line-height:1.7;color:rgba(255,255,255,.72);
}
.blog-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem}
.blog-hero .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.blog-hero .btn--ghost:hover{border-color:#fff}

/* --------------------------------------------------------------------------
   2. Index list
   -------------------------------------------------------------------------- */
.blog-list{background:var(--bg-hero);padding-block:2rem 3rem}

/* Category chips. Buttons, so a filter is a real control with pressed
   state; without the script every post simply shows, which is the correct
   fallback for a page of links. */
.blog__filters{display:flex;flex-wrap:wrap;gap:.5rem}
.blog__filters button{
  min-height:44px;padding:.5rem 1.05rem;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  font-size:.875rem;font-weight:500;color:var(--ink);
  transition:border-color .18s,background-color .18s,color .18s;
}
.blog__filters button:hover{border-color:var(--ink)}
.blog__filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.post-grid{display:grid;gap:1.25rem;margin-top:1.75rem}
.post-grid__empty{padding:2rem 0;text-align:center;color:var(--faint)}
.post-grid__empty[hidden]{display:none}

/* One card pattern for the index and the "read next" row. The whole card
   is the link, so the tap target is the card and not just the title. The
   banner is the same file the article uses, cropped shorter. */
.post-card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.post-card[hidden]{display:none}
/* Same ratio as the file, so nothing is cropped: a taller box would scale
   the art up and trim the wordmark off the left edge. */
.post-card__art{display:block;aspect-ratio:1200/360;background:var(--bg-compare);overflow:hidden}
.post-card__art img{width:100%;height:100%;object-fit:cover;object-position:center}
.post-card__body{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.375rem 1.375rem}
.post-card__cat{color:var(--lime-deep)}
.post-card h2,.post-card h3{margin-top:.7rem;font-size:1.1875rem;line-height:1.28;letter-spacing:-.025em}
.post-card p{margin-top:.6rem;font-size:.9375rem;line-height:1.6}
.post-card__meta{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--faint);
}
/* Pushes the meta rule to the bottom so it lines up across a row of cards. */
.post-card__body > :nth-last-child(2){margin-bottom:auto}
@media (hover:hover){
  .post-card:hover{
    transform:translateY(-4px);
    border-color:rgba(15,16,16,.22);
    box-shadow:0 12px 24px -18px rgba(15,16,16,.5);
  }
}

/* --------------------------------------------------------------------------
   3. Article
   -------------------------------------------------------------------------- */
.article{background:var(--bg-hero);padding-block:1.5rem 3rem}
.article__banner{aspect-ratio:1200/360;border-radius:var(--radius);overflow:hidden;background:var(--bg-compare)}
.article__banner img{width:100%;height:100%;object-fit:cover}

/* minmax(0,1fr) and min-width:0 so the scrolling contents row on small
   screens overflows inside its own box instead of widening the page. */
.article__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;margin-top:1.75rem;align-items:start}
.article__side,.toc{min-width:0}
.article__col{min-width:0;max-width:44rem}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--faint)}
.crumbs a:hover{color:var(--ink)}
.crumbs li + li::before{content:"/";margin-right:.4rem;opacity:.6}
.crumbs [aria-current]{color:var(--body)}

.article__head{margin-top:1.25rem}
.article__head h1{
  margin-top:.75rem;
  font-size:clamp(1.875rem,1.2rem + 2.6vw,2.75rem);
  line-height:1.08;letter-spacing:-.04em;text-wrap:balance;
}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem;font-size:.875rem;color:var(--faint)}
.article__meta b{font-weight:600;color:var(--ink)}
.article__meta span + span::before{content:"·";margin-right:.5rem}
.article__lede{margin-top:1.5rem;font-size:1.1875rem;line-height:1.65;color:var(--ink);font-weight:500}

/* Contents. A card on small screens, a sticky column from 1040px. The
   current section is marked by the script; without it the list is plain. */
.toc{padding:1.25rem 1.25rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.toc ol{margin-top:.75rem;counter-reset:toc;display:grid;gap:.15rem}
.toc li{counter-increment:toc}
.toc ol a{
  display:flex;gap:.6rem;padding:.45rem .6rem;border-radius:var(--radius);
  font-size:.875rem;line-height:1.35;color:var(--body);
  transition:background-color .15s,color .15s;
}
.toc ol a::before{content:counter(toc) ".";flex:none;color:var(--faint);font-variant-numeric:tabular-nums}
.toc ol a:hover{color:var(--ink);background:var(--bg-faq)}
.toc ol a[aria-current="true"]{background:rgba(202,232,4,.22);color:var(--ink);font-weight:600}
.toc ol a[aria-current="true"]::before{color:var(--ink)}
.toc__cta{
  display:flex;align-items:center;gap:.4rem;margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--line);font-size:.875rem;font-weight:600;color:var(--ink);
}
.toc__cta .btn__arrow{width:15px;height:15px}
.toc__cta:hover{text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px}

/* Share. Square icon buttons, matching the footer social squares. */
.share ul{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.share a,.share button{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
  transition:border-color .18s;
}
.share a:hover,.share button:hover{border-color:var(--ink)}
.share .icon{width:19px;height:19px}
.share__copy[hidden]{display:none}
.share__done{margin-top:.5rem;font-size:.8125rem;color:var(--faint);min-height:1.2em}

/* Body typography. Everything measures from the paragraph size so the
   rhythm holds whatever mix of elements a piece uses. */
.article__body{margin-top:2.25rem;font-size:1.0625rem;line-height:1.75;min-width:0}
/* Example domains and addresses are long unbreakable strings. Allow a break
   inside them rather than letting one word widen the page. Not in tables or
   the offer, where a short label like "Home" would split mid-word. */
.article__body p,.article__body li{overflow-wrap:anywhere;min-width:0}
.article__body table,.article__offer{overflow-wrap:normal}
.article__body tbody th{white-space:nowrap}
.article__body > * + *{margin-top:1.25rem}
.article__body h2{
  margin-top:2.75rem;font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);
  line-height:1.2;letter-spacing:-.03em;scroll-margin-top:6.5rem;
}
.article__body h3{margin-top:2rem;font-size:1.125rem;letter-spacing:-.02em}
.article__body h2 + *,.article__body h3 + *{margin-top:.85rem}
.article__body a{
  color:var(--ink);font-weight:500;
  text-decoration:underline;text-decoration-color:var(--lime-deep);
  text-decoration-thickness:2px;text-underline-offset:.15em;
}
.article__body a:hover{text-decoration-color:var(--ink)}
/* The offer button sits inside the body, where links are underlined ink.
   It is a button, so it keeps its own colours. */
.article__body .btn,.article__body .btn:hover{text-decoration:none}
.article__body .btn--ink{color:#fff}
.article__body strong{color:var(--ink);font-weight:600}

.article__body ul,.article__body ol{display:grid;gap:.55rem;padding-left:0}
.article__body ul li{position:relative;padding-left:1.4rem}
.article__body ul li::before{content:"";position:absolute;left:.2rem;top:.7em;width:7px;height:7px;background:var(--lime)}
/* Numbered steps use the same circled figure as the homepage timeline. */
.article__body ol{counter-reset:step;gap:.9rem}
.article__body ol li{counter-increment:step;position:relative;padding-left:2.75rem}
.article__body ol li::before{
  content:counter(step);position:absolute;left:0;top:.1em;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--lime);font-size:.8125rem;font-weight:600;color:var(--ink);
}

.callout{padding:1.15rem 1.35rem;border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:var(--radius);background:#fff;font-size:1rem}
.callout .eyebrow{margin-bottom:.4rem}
.callout p + p{margin-top:.6rem}

.article__body table{font-size:.9375rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.article__body th,.article__body td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.article__body thead th{background:#f4f4f2;font-weight:600;color:var(--ink);font-size:.875rem}
.article__body tbody th{font-weight:500;color:var(--ink)}
.article__body tbody tr:last-child th,.article__body tbody tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:520px}

/* A mid-article offer in the brand lime, kept compact so it interrupts the
   reading without hijacking it. */
.article__offer{display:grid;gap:1rem;margin-top:2.5rem;padding:1.5rem;background:var(--lime);border-radius:var(--radius)}
.article__offer h2{margin:0;font-size:1.375rem;line-height:1.2;letter-spacing:-.03em}
.article__offer p{font-size:.9375rem;line-height:1.55;color:rgba(15,16,16,.78)}
.article__offer .btn{justify-self:start;white-space:nowrap}

/* Short-answer questions reuse the homepage accordion, so app.js runs it. */
.article-faq{margin-top:3rem}
.article-faq h2{font-size:1.5rem;letter-spacing:-.03em}
.article-faq .faq__list{grid-template-columns:1fr;margin-top:1.25rem}

.article__foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--faint);
}
.article__foot a{color:var(--ink);font-weight:500}

.read-next{background:var(--bg-steps);padding-block:2.75rem;border-top:1px solid var(--line)}
.read-next__grid{display:grid;gap:1.25rem;margin-top:1.5rem}

/* --------------------------------------------------------------------------
   4. Breakpoints, matching styles.css
   -------------------------------------------------------------------------- */
@media (max-width:599px){
  .blog-hero__actions{flex-direction:column;align-items:stretch}
  .blog-hero__actions .btn{width:100%}
}
@media (min-width:700px){
  .post-grid,.read-next__grid{grid-template-columns:1fr 1fr}
  .article__offer{grid-template-columns:1fr auto;align-items:center;padding:1.75rem}
  .article__offer .btn{justify-self:end}
}
@media (min-width:1040px){
  .blog-hero{padding-block:4.25rem 4.5rem}
  .blog-list{padding-block:2.5rem 4rem}
  .post-grid,.read-next__grid{grid-template-columns:repeat(3,1fr)}
  .article{padding-block:2rem 4rem}
  /* Contents, body, share. The side columns are fixed so the body keeps the
     same measure whatever the viewport; the sticky offset clears the header. */
  .article__layout{grid-template-columns:15rem minmax(0,1fr) 7.5rem;gap:2.5rem;margin-top:2.25rem}
  .article__col{max-width:44rem;justify-self:center;width:100%}
  .article__side,.share{position:sticky;top:6.5rem}
  .share ul{flex-direction:column}
  .read-next{padding-block:3.5rem}
}
/* Below the three-column layout the contents becomes one scrolling row of
   section chips, so the headline is still on the first screen and the list
   is one thumb-flick to reach. The build-it link is dropped here; the offer
   further down the article covers it. */
@media (max-width:1039px){
  .toc{padding:.9rem 1rem}
  .toc ol{display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:.6rem;padding-bottom:.25rem;scrollbar-width:none}
  .toc ol::-webkit-scrollbar{display:none}
  .toc li{flex:none}
  .toc ol a{min-height:44px;align-items:center;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;white-space:nowrap;font-size:.8125rem}
  .toc__cta{display:none}
}
@media (pointer:coarse){
  .crumbs a,.article__foot a,.article__meta a,.author-box h2 a,.author-box__more{display:inline-flex;align-items:center;min-height:44px}
  .crumbs{row-gap:0}
}
/* --------------------------------------------------------------------------
   5. Author
   -------------------------------------------------------------------------- */
.blog-hero__lede a{color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:.15em}
.article__author{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px;text-underline-offset:.15em}
.article__author:hover{text-decoration-color:var(--ink)}

/* Author page header: the same dark band as the blog hero, with the person
   on it. The avatar is an initial until there is a photograph. */
.author{background:var(--bg-compare);color:#fff;padding-block:1.5rem 3rem}
.crumbs--dark{color:rgba(255,255,255,.6)}
.crumbs--dark a:hover{color:#fff}
.crumbs--dark [aria-current]{color:rgba(255,255,255,.85)}
.author__card{display:grid;gap:1.5rem;margin-top:2rem;align-items:start}
.author__avatar,.author__photo{
  display:flex;align-items:center;justify-content:center;
  width:112px;height:112px;border-radius:var(--radius);
  background:var(--lime);color:var(--ink);
  font-size:3rem;font-weight:800;letter-spacing:-.04em;
}
.author__photo{object-fit:cover}
.author__eyebrow{color:var(--lime)}
.author h1{margin-top:.5rem;color:#fff;font-size:clamp(2rem,1.3rem + 2.6vw,2.75rem);letter-spacing:-.04em}
.author__role{margin-top:.6rem;font-size:1.0625rem;font-weight:500;color:#fff}
.author__bio{margin-top:1rem;max-width:40rem;font-size:1rem;line-height:1.7;color:rgba(255,255,255,.72)}
.author__facts{display:grid;gap:.5rem;margin-top:1.25rem}
.author__facts li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9375rem;color:rgba(255,255,255,.85)}
.author__facts .icon{width:20px;height:20px;margin-top:.1rem;color:var(--lime)}
.author__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.author .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.author .btn--ghost:hover{border-color:#fff}
.author__posts-title{font-size:1.5rem;letter-spacing:-.03em}
.author__posts-title + .post-grid{margin-top:1.25rem}

/* The box at the foot of every post that carries the byline to the author
   page. Replaces "read next" while there is one post; both can coexist. */
.author-box{
  display:grid;gap:1.25rem;margin-top:3rem;padding:1.5rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.author-box__avatar{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:64px;height:64px;border-radius:var(--radius);
  background:var(--lime);color:var(--ink);font-size:1.75rem;font-weight:800;
}
.author-box h2{margin-top:.35rem;font-size:1.25rem;letter-spacing:-.03em}
.author-box h2 a:hover{text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px}
.author-box p:not(.eyebrow){margin-top:.5rem;font-size:.9375rem;line-height:1.6}
.author-box__more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.875rem;font-weight:600;color:var(--ink);
}
.author-box__more .btn__arrow{width:15px;height:15px}
.author-box__more:hover{text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px}

@media (min-width:700px){
  .author__card{grid-template-columns:auto 1fr;gap:2rem}
  .author-box{grid-template-columns:auto 1fr;padding:1.75rem}
}
@media (min-width:1040px){
  .author{padding-block:2rem 4rem}
  .author__card{margin-top:2.5rem;gap:2.5rem}
  .author__avatar,.author__photo{width:144px;height:144px;font-size:3.75rem}
}

@media (prefers-reduced-motion:reduce){
  .post-card:hover{transform:none;box-shadow:none}
}