/* ==========================================================
   Austek Engineering CC — pages.css
   Article, blog index and FAQ layouts.

   Loaded only by /blog/, /faq/ and the article pages, after
   styles.css. Kept separate so the homepage's cache-busting
   version does not have to move every time an article is
   edited. Uses the tokens defined in styles.css — no new
   colours, no new fonts.
   ========================================================== */

/* ───────── shared page head ───────── */
.phead{
  padding-top:calc(var(--hdr) + clamp(36px,6vw,72px));
  padding-bottom:clamp(30px,4vw,48px);
  border-bottom:1px solid var(--rule);
}
.phead__in{max-width:760px}
.phead h1{font-size:clamp(1.95rem,4.4vw,3.1rem);color:var(--ink);letter-spacing:-.035em}
.phead__sub{margin:20px 0 0;color:var(--ink-3);line-height:1.7;font-size:clamp(1rem,1.4vw,1.08rem);max-width:60ch}

/* ───────── breadcrumb ───────── */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:22px;
}
.crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.crumb a:hover{color:var(--arc-ink);border-bottom-color:currentColor}
.crumb i{font-style:normal;color:var(--rule-2)}
.crumb [aria-current]{color:var(--ink-2)}

/* ───────── article body ───────── */
.post{padding-block:clamp(40px,5.5vw,72px)}
.post__in{max-width:760px}

.post__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:18px 0 0;font-family:var(--m);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.post__meta b{font-weight:500;color:var(--ink-3)}

/* The answer block. Sits directly under the H1 and has to make
   sense quoted on its own, so it is styled to read as a lede. */
.answer{
  margin:28px 0 0;padding:20px 22px;
  background:var(--paper-3);border:1px solid var(--rule);
  border-left:2px solid var(--arc);border-radius:3px;
  color:var(--ink-2);line-height:1.72;font-size:clamp(1rem,1.35vw,1.06rem);
}
.answer strong{color:var(--ink);font-weight:600}

/* Rich text. Deliberately not reusing .prose — that is a flex
   column tuned for the About block and does not expect headings. */
.rtxt{margin-top:clamp(32px,4vw,48px)}
.rtxt > * + *{margin-top:18px}
.rtxt h2{
  font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--ink);
  line-height:1.15;margin-top:clamp(38px,4.5vw,56px);
}
.rtxt h2:first-child{margin-top:0}
.rtxt h3{font-size:clamp(1.02rem,1.7vw,1.16rem);color:var(--ink);line-height:1.25;margin-top:30px}
.rtxt p{color:var(--ink-3);line-height:1.78;font-size:15.5px}
.rtxt p strong{color:var(--ink-2)}
.rtxt a{color:var(--arc-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rtxt a:hover{text-decoration-thickness:2px}
.rtxt ul,.rtxt ol{margin:18px 0 0;padding-left:20px;color:var(--ink-3);line-height:1.78;font-size:15.5px}
.rtxt li + li{margin-top:9px}
.rtxt li::marker{color:var(--ink-4)}

/* ───────── tables ─────────
   Real <table> markup, wrapped so it can scroll instead of
   breaking the layout on a phone. */
.tw{overflow-x:auto;margin-top:26px;border:1px solid var(--rule);border-radius:3px;background:var(--paper-3)}
.tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
/* Caption and the Sources heading were --ink-4 (about 3:1); --ink-3 is
   5.3:1 or better on every ground here. 28 October 2026. */
.tw caption{
  caption-side:top;text-align:left;padding:14px 16px 0;
  font-family:var(--m);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.tw th,.tw td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.tw thead th{
  font-family:var(--b);font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);
  border-bottom:1px solid var(--rule-2);white-space:nowrap;
}
.tw tbody th{font-weight:600;color:var(--ink);font-family:var(--b);font-size:14.5px}
.tw tbody td{color:var(--ink-3);line-height:1.6}
.tw tbody tr:last-child th,.tw tbody tr:last-child td{border-bottom:0}

/* ───────── callout ───────── */
.note{
  margin-top:28px;padding:18px 20px;border:1px solid var(--rule);
  border-radius:3px;background:var(--paper-2);
}
.note p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.note p + p{margin-top:10px}
.note__k{
  display:block;font-family:var(--m);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--arc-ink);margin-bottom:9px;
}

/* ───────── sources ───────── */
.srcs{margin-top:clamp(40px,5vw,60px);padding-top:26px;border-top:1px solid var(--rule)}
.srcs h2{font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 14px}
.srcs ol{margin:0;padding-left:18px;color:var(--ink-3);font-size:13.5px;line-height:1.7}
.srcs li + li{margin-top:9px}
.srcs a{color:var(--arc-ink);text-decoration:underline;text-underline-offset:2px;word-break:break-word}

/* ───────── end-of-article CTA ───────── */
.pcta{
  margin-top:clamp(40px,5vw,60px);padding:clamp(24px,3.4vw,34px);
  background:var(--void);color:var(--fg);border-radius:4px;
}
.pcta h2{font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--fg);margin:0}
.pcta p{margin:14px 0 0;color:var(--fg-2);line-height:1.72;font-size:15px;max-width:52ch}
.pcta__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* The phone button is a ghost button on this navy panel; without these
   it kept the light-ground navy text and could not be seen (1:1). Same
   treatment as the hero's ghost button. */
.pcta .btn--ghost{border-color:var(--hair-2);color:var(--fg)}
.pcta .btn--ghost:hover{background:rgba(238,244,251,.08);border-color:var(--fg-4)}

/* ───────── blog index ───────── */
.plist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pitem{
  border:1px solid var(--rule);border-radius:3px;background:var(--paper-3);
  transition:border-color .2s,transform .2s var(--ease);
}
.pitem:hover{border-color:var(--rule-2);transform:translateY(-2px)}
.pitem a{display:block;padding:clamp(20px,2.6vw,28px);text-decoration:none;color:inherit}
.pitem__k{
  font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--arc-ink);margin:0 0 12px;
}
.pitem h2{font-size:clamp(1.15rem,2vw,1.42rem);color:var(--ink);line-height:1.18;margin:0}
.pitem p{margin:12px 0 0;color:var(--ink-3);line-height:1.7;font-size:14.5px;max-width:64ch}
.pitem__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13.5px;font-weight:600;color:var(--arc-ink);
}
.pitem:hover .pitem__go span{transform:translateX(3px)}
.pitem__go span{transition:transform .2s var(--ease)}

/* ───────── FAQ ───────── */
.faq{list-style:none;margin:0;padding:0;max-width:820px}
.faq > li{padding:clamp(22px,2.8vw,30px) 0;border-bottom:1px solid var(--rule)}
.faq > li:first-child{padding-top:0}
.faq h2{font-size:clamp(1.08rem,1.9vw,1.32rem);color:var(--ink);line-height:1.25}
.faq p{margin:14px 0 0;color:var(--ink-3);line-height:1.78;font-size:15.5px;max-width:68ch}
.faq p strong{color:var(--ink-2)}
.faq a{color:var(--arc-ink);text-decoration:underline;text-underline-offset:3px}
.faq ul{margin:14px 0 0;padding-left:20px;color:var(--ink-3);line-height:1.78;font-size:15.5px;max-width:68ch}
.faq li + li{margin-top:8px}

@media (max-width:560px){
  .answer{padding:17px 18px}
  .pcta{padding:22px}
  /* Tables fit the phone (phone audit, 28 October 2026). A 440px minimum
     inside a 348px box cut the last column mid-word ("Chromiu") with
     nothing to say it scrolled. The tables now take the width they are
     given and wrap whole words, at 13.5px with tighter cell padding. */
  .tw table{min-width:0;font-size:13.5px}
  .tw th,.tw td{padding:10px 9px}
  .tw th:first-child,.tw td:first-child{padding-left:12px}
  .tw th:last-child,.tw td:last-child{padding-right:12px}
  .tw thead th{white-space:normal;font-size:13px;letter-spacing:.02em}
  .tw tbody th{font-size:13.5px}
  .tw caption{padding:12px 12px 2px}
  /* If a table still cannot fit (a very narrow screen), a soft shadow on the
     edge that has more to show says it scrolls. The two white covers move
     with the table and hide each shadow once that edge is reached. */
  .tw{
    background:
      linear-gradient(90deg,var(--paper-3) 30%,rgba(255,255,255,0)) left/36px 100% no-repeat local,
      linear-gradient(270deg,var(--paper-3) 30%,rgba(255,255,255,0)) right/36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(13,27,42,.18),rgba(13,27,42,0)) left/12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(13,27,42,.18),rgba(13,27,42,0)) right/12px 100% no-repeat scroll,
      var(--paper-3);
  }
}

/* Phones (the same 640px line as styles.css). Breadcrumb links were 19px
   tall; the padding gives each a 43px tap height and the matching negative
   margin keeps the line exactly where it was. */
@media (max-width:640px){
  .crumb a{padding-block:12px;margin-block:-12px}
  /* Article pages have no page head, and the article's own top padding
     falls to 40px on a phone, so the breadcrumb sat under the 64px fixed
     header where it could be neither read nor tapped. It now starts where
     the blog index and FAQ pages put theirs. */
  .post{padding-top:calc(var(--hdr) + 36px)}
  /* No reading text under 13px on a phone (28 October 2026): breadcrumb,
     the byline and date line, table captions, note labels and the Sources
     heading were 11-11.5px. */
  .crumb,.post__meta,.tw caption,.note__k,.srcs h2{font-size:13px}
  .rtxt p,.rtxt ul,.rtxt ol,.faq p,.faq ul,.note p,.pcta p,.pitem p:not(.pitem__k),.srcs ol{font-size:16px}
}