/* site.css — long-form article styling for marketing pages.
 *
 * WHY THIS FILE EXISTS. Pages linked it and it did not exist: /brand/site.css
 * returned 404 in production, so `blog/august-what-shipped-since-founding.html`
 * — the one page that relies on it rather than carrying its own inline <style> —
 * rendered with unstyled .post, .tldr and .byline. A 404 on a stylesheet fails
 * silently: the HTML is fine, the page just looks wrong, and nothing reports it.
 *
 * SCOPE IS DELIBERATELY NARROW. Only the article rules that page actually uses,
 * verified against its markup rather than guessed:
 *   .post .eyebrow .byline .tldr .tldr-label  + the elements inside .post
 * Nav, buttons, layout and colour tokens already come from brand.css and are
 * NOT repeated here — two files defining .gc-btn would be a bug waiting to
 * happen. Anything else a future page needs should be added consciously, not
 * inherited from a grab-bag.
 *
 * Values are lifted verbatim from the inline block several posts already carry
 * (eu-buyers-withdrawal-ready-checkout.html is the reference), so a page using
 * this file is visually identical to one using its own copy. If you change a
 * value here, those inline copies will drift — that duplication is pre-existing
 * and worth collapsing separately, once every post links this file.
 *
 * Depends on brand.css for --gc-* tokens. Load it after brand.css.
 */

/* ── article shell ─────────────────────────────────────────────────────── */
.post { max-width:68ch; margin:0 auto; padding:40px 0 64px; }

.post .eyebrow {
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gc-black); background:var(--gc-yellow);
  padding:6px 12px; margin-bottom:20px;
}

.post h1 {
  font-weight:600; font-size:clamp(32px,4.4vw,50px); line-height:1.12;
  letter-spacing:-0.02em; color:var(--gc-black); text-wrap:balance; margin-bottom:14px;
}

.byline { font-size:14px; color:var(--gc-ink-2); margin-bottom:28px; }
.byline b { color:var(--gc-black); font-weight:600; }

/* ── TL;DR callout ─────────────────────────────────────────────────────── */
.tldr {
  background:var(--gc-blue); color:var(--gc-black); border-left:4px solid var(--gc-black);
  border-radius:0; padding:22px 26px; margin-bottom:36px;
}
.tldr .tldr-label {
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gc-black); margin-bottom:8px;
}
.tldr p { font-size:15.5px; color:var(--gc-black); line-height:1.65; margin:0; }

/* ── body copy ─────────────────────────────────────────────────────────── */
.post h2 {
  font-weight:600; font-size:clamp(24px,3vw,32px); line-height:1.16;
  letter-spacing:-0.015em; color:var(--gc-black); margin:48px 0 14px; text-wrap:balance;
}
.post h3 { font-weight:600; font-size:19px; letter-spacing:-0.01em; color:var(--gc-black); margin:28px 0 8px; }
.post p { font-size:16px; line-height:1.75; margin-bottom:18px; color:var(--gc-ink); }
.post ul, .post ol { margin:0 0 18px 22px; }
.post li { font-size:16px; line-height:1.75; margin-bottom:8px; color:var(--gc-ink); }

/* Links carry the brand underline rather than a colour change, so they stay
   legible on the paper background and match the nav's active marker. */
.post a {
  color:var(--gc-black); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--gc-yellow); text-decoration-thickness:2px; text-underline-offset:3px;
}
.post a:hover { text-decoration-color:var(--gc-black); }

.post code {
  font-family:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; font-size:0.86em;
  background:var(--gc-paper-2); border:1px solid var(--gc-line-soft); color:var(--gc-black);
  border-radius:0; padding:2px 6px; white-space:nowrap;
}
/* Inside the callout the paper-grey chip disappears against the blue. */
.tldr code { background:var(--gc-white); border-color:var(--gc-white); }

/* ── small screens ─────────────────────────────────────────────────────── */
@media (max-width:720px) {
  .post { padding:24px 0 48px; }
}