/* ============================================================
 * Taut Tech: long-form page layer (audit, guides, comparisons)
 * Loads after /assets/tt.css and only uses its tokens. Same rules:
 * four type sizes, 0.5px hairlines, no rounding, no shadows.
 * ============================================================ */

/* ---------- page head ---------- */
.art-head h1{max-width:22ch}
.crumbs{font-size:var(--t-14);color:var(--text-2)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--sand9)}
.crumbs a{color:var(--text-2);text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--text)}
.art-head .sub{max-width:60ch}
.dateline{margin-top:14px;font-size:var(--t-14);color:var(--text-2)}
.answer{margin:28px 0 0;padding:22px 24px;border:.5px solid var(--line);border-left:2px solid var(--accent);background:var(--bg-raised);max-width:72ch}
.answer p{color:var(--text)}
.cta-note{margin-top:14px;font-size:var(--t-14);color:var(--text-2)}

/* ---------- prose ---------- */
.prose{padding-block:clamp(40px,6vw,72px) 0}
.prose>*{max-width:68ch}
.prose h2{font-family:var(--disp);font-weight:700;font-size:var(--t-24);line-height:1.25;letter-spacing:-.015em;margin:clamp(48px,6vw,72px) 0 16px;padding-top:28px;border-top:.5px solid var(--line);max-width:none;scroll-margin-top:88px}
.prose>h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp);font-weight:600;font-size:var(--t-17);line-height:1.35;letter-spacing:-.005em;margin:28px 0 8px;scroll-margin-top:88px}
.prose p{margin:0 0 16px;color:var(--text-2)}
.prose p strong,.prose li strong{color:var(--text);font-weight:600}
.prose em{font-style:italic}
.prose ul,.prose ol{margin:0 0 16px;padding-left:1.3em;color:var(--text-2)}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--sand9)}
.prose a{color:var(--text);text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:4px;text-decoration-color:var(--line-strong);transition:text-decoration-color var(--dur) var(--ease)}
.prose a:hover{text-decoration-color:var(--text)}
.prose .fine{font-size:var(--t-14)}
.prose .cite{font-size:var(--t-14);text-decoration:none;color:var(--accent-text);white-space:nowrap}
.prose .cite:hover{text-decoration:underline}
.prose a,.prose td,.prose li{overflow-wrap:anywhere}

/* checklists: printable boxes, not form controls */
.prose ul.checklist{list-style:none;padding-left:0}
.prose ul.checklist li{position:relative;padding-left:30px}
.prose ul.checklist li::before{content:"";position:absolute;left:0;top:.25em;width:16px;height:16px;border:1px solid var(--sand9);background:var(--bg-raised)}

/* comparison table: scrolls sideways on small screens, first column pinned */
.table-scroll{max-width:none;margin:8px 0 12px;overflow-x:auto;border:.5px solid var(--line);background:var(--bg-raised);-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
.prose table{border-collapse:collapse;width:100%;min-width:880px;font-size:var(--t-14);line-height:1.45}
.prose th,.prose td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:.5px solid var(--line);border-right:.5px solid var(--line)}
.prose thead th{font-family:var(--disp);font-weight:600;color:var(--text);background:var(--fill);font-size:var(--t-14)}
.prose tbody th{font-weight:600;color:var(--text);width:15%}
.prose td{color:var(--text-2)}
.prose th:last-child,.prose td:last-child{border-right:0}
.prose tbody tr:last-child>*{border-bottom:0}
.prose thead th:last-child,.prose td:last-child{background:color-mix(in srgb,var(--tomato3) 45%,var(--bg-raised))}
@media(max-width:820px){.prose thead th:first-child,.prose tbody th{position:sticky;left:0;z-index:1;background:var(--sand1);box-shadow:.5px 0 0 var(--line)}.prose thead th:first-child{background:var(--fill)}}

/* sources */
.prose .sources li{font-size:var(--t-14)}

/* ---------- score gauge ---------- */
.gauge{margin:20px 0 24px;padding:20px 24px 18px;border:.5px solid var(--line);background:var(--bg-raised);max-width:380px}
.gauge svg{display:block;width:100%;height:auto}
.gauge .g-ends{font-family:var(--body);font-size:14px;fill:var(--text-2)}
.gauge figcaption{margin-top:10px;text-align:center;color:var(--text-2);font-size:var(--t-14)}
.gauge figcaption b{display:block;font-family:var(--disp);font-weight:700;font-size:var(--t-24);line-height:1.2;color:var(--text);margin-bottom:2px}

/* ---------- closing CTA ---------- */
.art-final{text-align:left;border-top:.5px solid var(--line);margin-top:clamp(56px,8vw,96px)}
.art-final .cta-lead{font-family:var(--disp);font-weight:600;font-size:var(--t-24);line-height:1.3;letter-spacing:-.015em;color:var(--text-2);max-width:40ch}
.art-final .cta-lead strong{color:var(--text);font-weight:700}
/* long CTA labels wrap on phones instead of overflowing */
@media(max-width:480px){.art-head .ph-cta .btn,.art-final .ph-cta .btn{white-space:normal;height:auto;min-height:48px;padding-block:12px;line-height:1.3;text-align:center;max-width:100%}}
.art-head .answer + p{margin-top:24px;max-width:68ch}
@media(max-width:640px){.crumbs ol{align-items:center}.crumbs li{display:inline-flex;align-items:center}.crumbs a{display:inline-flex;align-items:center;min-height:44px}} /* phone tap target for the breadcrumb links: 44px tall, natural width (polish 2026-10-27) */
/* blog drafts 2026-10-26 v3: body measure 54ch on .prose text (paragraphs, list items) and example messages.
   Applied to the text inside .prose, not the .wrap container itself, so the column stays left-aligned with the header and tables keep full width.
   Shared file: also tightens the live pipeline and fractional posts. */
.prose>p,.prose li{max-width:54ch}
/* blog drafts 2026-10-26: labelled example messages */
.prose .example-msg{margin:0 0 20px;padding:16px 20px;border:.5px solid var(--line);border-left:2px solid var(--line-strong);background:var(--bg-raised);max-width:54ch}
.prose .example-msg figcaption{font-size:var(--t-14);font-weight:600;color:var(--text-2);margin:0 0 6px}
.prose .example-msg blockquote{margin:0}
.prose .example-msg blockquote p{margin:0;color:var(--text);font-style:italic}
/* blog drafts 2026-10-26: FAQ now follows the CTA block; the CTA padding already gives the gap */
.prose.art-faq{padding-top:0}
/* follow-up 2026-10-26: the head answer box and the intro paragraph(s) after it use the 54ch body measure.
   The answer box is border-box with 24px side padding and a 2px + 0.5px border, so its cap adds those back
   to keep the text inside at 54ch. The second selector covers the fractional post's second intro paragraph. */
.art-head .answer{max-width:calc(54ch + 50.5px)}
.art-head .answer + p,.art-head .answer + p + p{max-width:54ch}
.prose a.btn-primary,.prose a.btn-primary:visited,.prose a.btn-primary:hover,.prose a.btn-primary:active{color:#fff;text-decoration:none}
/* blog enrich 2026-10-27: stat callouts, pull quotes and figures (diagrams).
   Uses the existing type sizes (14/17/24/display), hairlines and tokens. No rounding, no shadows. */
.prose .stat-callout{margin:32px 0;padding:22px 24px;border:.5px solid var(--line);border-left:2px solid var(--accent);background:var(--bg-raised);max-width:calc(54ch + 50.5px)}
.prose .stat-callout .stat-num{margin:0 0 8px;font-family:var(--disp);font-weight:700;font-size:var(--t-display);line-height:1;letter-spacing:-.02em;color:var(--accent-text)}
.prose .stat-callout .stat-text{margin:0 0 12px;font-size:var(--t-17);color:var(--text)}
.prose .stat-callout .stat-src{margin:0;font-size:var(--t-14);color:var(--text-2)}
.prose .pull-quote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent);max-width:54ch}
.prose .pull-quote blockquote{margin:0}
.prose .pull-quote blockquote p{margin:0 0 10px;font-family:var(--disp);font-weight:600;font-size:var(--t-24);line-height:1.3;letter-spacing:-.015em;color:var(--text)}
.prose .pull-quote figcaption{font-size:var(--t-14);color:var(--text-2)}
.prose .fig{margin:32px 0 36px;max-width:480px}
.prose .fig img{display:block;width:100%;height:auto;border:.5px solid var(--line);background:var(--bg-raised)}
.prose .fig figcaption{margin-top:10px;font-size:var(--t-14);line-height:1.5;color:var(--text-2)}
/* blog enrich fix 2026-10-27: post banner under the H1, and the diagram credit line in figcaptions. */
.art-head .post-banner{display:block;width:min(100%,68ch);max-width:100%;height:auto;margin:20px 0 24px;border:.5px solid var(--line);background:var(--bg-raised)}
.prose .fig .fig-credit{display:block;margin-top:4px}
/* site batch 2026-10-28: breadcrumbs. Home and Blog get a 44x44 hit area at every width from a transparent ::after, so the text and spacing stay as they were. */
.crumbs{position:relative;z-index:1}
.crumbs a{position:relative}
.crumbs a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
/* site batch 2026-10-28: Works Cited, MLA hanging indent */
.prose .works-cited{list-style:none;padding-left:0}
.prose .works-cited li{font-size:var(--t-14);padding-left:2em;text-indent:-2em;overflow-wrap:anywhere}