/*
Theme Name: Crawl to Cite
Theme URI: https://crawl-to-cite.example/
Author: WE Web Design
Author URI: https://example.org/
Description: Generative engine optimization first, and the search it grew from. The front page is an answer engine: ask the guides and an answer card answers from them, with its sources; beside it the sites the guides cite most and the guides the site links to most, a preview of a page as a search result and as a quoted answer, and every guide as an answer card. A guide opens as a question and its answer: the short answer with its numbered sources and the questions to ask next, what an answer engine can lift from the page, the text with its sections beside it, and its link profile. No web font, no image. Link blue and answer violet on result white; periwinkle and lilac at night. Categories, tags and author archives are never shown or linked.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crawl-to-cite
Tags: blog, grid-layout, custom-menu, threaded-comments, translation-ready, block-patterns, wide-blocks, editor-style
*/

/* ========================================================================
   1. TOKENS - link blue + answer violet on result white, periwinkle + lilac at night (34/34 token pairs AA, worst 5.21:1); system faces only (no web font), sans headings
   ======================================================================== */
:root{
  --paper:#fbfaf7;
  --paper-2:#efede6;
  --ink:#17161a;
  --ink-2:#3a3940;
  --ink-3:#5b5a62;
  --rule:#dddad1;
  --card:#ffffff;
  --accent:#0606f9;
  --accent-2:#9b06db;
  --warn:#9a4708;
  --warn-soft:#fef3c7;
  --safe:#0e7490;
  --safe-soft:#e0f2fe;
  --link:var(--accent);
  --focus:#17161a;

  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --serif:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --measure:42rem;
  --measure-wide:64rem;
  --shell:84rem;

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;

  --radius-1:.25rem;
  --radius-2:.5rem;
  --radius-3:.75rem;

  --shadow-1:0 1px 2px rgba(26,36,33,.06),0 1px 1px rgba(26,36,33,.04);
  --shadow-2:0 4px 12px rgba(26,36,33,.08),0 2px 4px rgba(26,36,33,.04);

  --z-base:0;
  --z-sticky:10;
  --z-rail:20;
  --z-progress:30;
  --z-topbar:40;
  --z-drawer:50;
  --z-skip:999;

  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#101014;
  --paper-2:#1b1b21;
  --ink:#ecebf0;
  --ink-2:#c9c8d2;
  --ink-3:#9d9ca8;
  --rule:#2c2c34;
  --card:#15151a;
  --accent:#8fa8ff;
  --accent-2:#c38bee;
  --warn:#fbbf24;
  --warn-soft:#1c1410;
  --safe:#7dd3fc;
  --safe-soft:#0c1f2e;
  --link:var(--accent);
  --focus:#efede6;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.3);
  --shadow-2:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101014;
    --paper-2:#1b1b21;
    --ink:#ecebf0;
    --ink-2:#c9c8d2;
    --ink-3:#9d9ca8;
    --rule:#2c2c34;
    --card:#15151a;
    --accent:#8fa8ff;
    --accent-2:#c38bee;
    --warn:#fbbf24;
    --warn-soft:#1c1410;
    --safe:#7dd3fc;
    --safe-soft:#0c1f2e;
    --link:var(--accent);
    --focus:#efede6;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.3);
    --shadow-2:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}

/* ========================================================================
   2. RESET + BASE
   ======================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  font-feature-settings:'ss01','kern','liga';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
img{aspect-ratio:attr(width)/attr(height)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--radius-1);
}
hr{border:0;border-top:1px solid var(--rule);margin:var(--space-6) 0}
::selection{background:var(--accent);color:var(--paper)}

/* ========================================================================
   3. SKIP LINK (WD-9 — focus override mandatory)
   ======================================================================== */
.skip-link{
  position:absolute;
  left:-9999px;top:-9999px;
  width:auto;height:auto;
  clip:auto;clip-path:none;overflow:visible;
  background:var(--ink);
  color:var(--paper);
  padding:.75rem 1.25rem;
  border-radius:var(--radius-2);
  font-weight:600;
  z-index:var(--z-skip);
  text-decoration:none;
}
.skip-link:focus{left:1rem;top:1rem}

/* ========================================================================
   4. TYPOGRAPHY (WD-10, WD-14)
   ======================================================================== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:2.4rem 0 .8rem;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(2rem,4.2vw,2.75rem);line-height:1.15;letter-spacing:-.02em;margin-top:0}
h2{font-size:clamp(1.5rem,2.6vw,1.875rem)}
h3{font-size:clamp(1.25rem,2vw,1.4rem)}
h4{font-size:1.125rem}
h5,h6{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
p{margin:0 0 1.1rem;text-wrap:pretty}
strong,b{font-weight:600;color:var(--ink)}
em,i{font-style:italic}
small{font-size:.8125rem;color:var(--ink-2)}
blockquote{
  border-left:3px solid var(--accent);
  margin:1.6rem 0;
  padding:.4rem 0 .4rem 1.2rem;
  font-family:var(--serif);
  font-size:1.125rem;
  font-style:italic;
  color:var(--ink-2);
}
blockquote cite{display:block;font-style:normal;font-size:.875rem;color:var(--ink-3);margin-top:.4rem}
code,kbd,pre,samp{font-family:ui-monospace,'SF Mono','Menlo','Consolas',monospace;font-size:.9em}
:not(pre)>code{background:var(--paper-2);padding:.15em .4em;border-radius:var(--radius-1);color:var(--ink)}
pre{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-2);
  padding:1rem 1.2rem;
  overflow-x:auto;
  font-size:.875rem;
  line-height:1.55;
  margin:1.5rem 0;
}
ul,ol{margin:0 0 1.2rem;padding-left:1.4rem}
li{margin:.4rem 0}
ul li::marker{color:var(--accent)}
dl{margin:1.2rem 0}
dt{font-weight:600;margin-top:.8rem}
dd{margin:0 0 .4rem 1.2rem;color:var(--ink-2)}
table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.95rem}
th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:600;color:var(--ink);background:var(--paper-2)}
tbody tr:hover{background:var(--paper-2)}
figure{margin:1.6rem 0}
figcaption{font-size:.875rem;color:var(--ink-3);text-align:center;margin-top:.5rem;font-style:italic}

/* ========================================================================
   5. LAYOUT — page shell
   ======================================================================== */
.page-shell{min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

/* ========================================================================
   6. TOPBAR (WD-7 touch 44+)
   ======================================================================== */
.topbar{
  position:sticky;top:0;z-index:var(--z-topbar);
  background:color-mix(in oklab,var(--paper) 92%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:.6rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1rem;
  min-height:60px;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand__mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);
  color:var(--paper);
  font-family:var(--serif);
  font-weight:600;
  font-size:1.05rem;
  display:grid;place-items:center;
  letter-spacing:-.02em;
}
.brand__name{font-family:var(--serif);font-weight:600;font-size:1.125rem;letter-spacing:-.01em}
.topbar__inner{flex-wrap:wrap;row-gap:.35rem}
.brand{flex:1 1 auto;min-width:0;min-height:44px}
.brand__mark{flex:0 0 auto}
.brand__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__nav{display:flex;order:4;flex:1 1 100%;flex-wrap:wrap;gap:0 1.2rem;font-size:.95rem;align-items:center}
.topbar__nav a{color:var(--ink-2);text-decoration:none;padding:.6rem 0;min-height:44px;display:inline-flex;align-items:center}
.topbar__nav a:hover,.topbar__nav a[aria-current="page"]{color:var(--ink)}
.topbar__search{order:3;flex:1 1 100%;min-width:0}
.theme-toggle{order:2;flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-2)}
.theme-toggle:hover{color:var(--ink);background:var(--paper-2)}
.theme-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:block}
}
@media (min-width:48rem){
  .topbar__inner{flex-wrap:nowrap}
  .brand{flex:0 0 auto}
  .topbar__nav{order:0;flex:0 1 auto;margin-left:auto;flex-wrap:nowrap}
  .topbar__search{order:0;flex:0 1 20rem;margin-left:auto}
  .topbar__nav + .topbar__search{margin-left:0}
  .theme-toggle{order:0}
}

/* ========================================================================
   7. SEARCH INPUT
   ======================================================================== */
.search-form{position:relative;width:100%}
.search-form__input{
  width:100%;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:.55rem 3rem .55rem 2.4rem;
  font-size:1rem;
  min-height:44px;
  color:var(--ink);
}
.search-form__input::placeholder{color:var(--ink-3)}
.search-form__icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.search-form__submit{position:absolute;right:.05rem;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:transparent}
.search-form__submit:hover{color:var(--ink);background:var(--paper)}

/* ========================================================================
   8. READING PROGRESS BAR (WD-16 reduced-motion respect)
   ======================================================================== */
.reading-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:var(--z-progress);
  background:transparent;
  pointer-events:none;
}
.reading-progress__bar{
  display:block;height:100%;width:0;
  background:var(--accent);
  transition:width .12s linear;
  transform-origin:left;
}
@media (prefers-reduced-motion:reduce){
  .reading-progress__bar{transition:none}
}

/* ========================================================================
   9-10. (front-page hero + magazine grid removed)
   The front page is a results page: the emblem and the counts, the search, the snippet preview, the link hubs, every guide newest first (section 28).
   ======================================================================== */

/* ========================================================================
   11. ARTICLE — two-column long-form
   ======================================================================== */
.article-shell{
  max-width:var(--measure-wide);
  margin:0 auto;
  padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,2rem);
}
.article-main{min-width:0;max-width:46rem;margin-inline:auto}
.article-main--page{margin-inline:auto;padding-block:clamp(2.5rem,5vw,4rem)}

/* ========================================================================
   11b. COLLAPSIBLE SUMMARY CARD (optional — sits at top of article)
   ======================================================================== */
.tldr-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:4px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1.2rem 1.4rem;
  margin:0 0 2rem;
  box-shadow:var(--shadow-1);
}
.tldr-card[open] summary{margin-bottom:.8rem}
.tldr-card summary{
  cursor:pointer;
  display:flex;align-items:center;gap:.6rem;
  list-style:none;
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  color:var(--accent-2);
  letter-spacing:-.005em;
  min-height:32px;
}
.tldr-card summary::-webkit-details-marker{display:none}
.tldr-card summary::before{
  content:'';
  width:0;height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .15s ease;
  flex-shrink:0;
}
.tldr-card[open] summary::before{transform:rotate(90deg)}
.tldr-card__label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--accent);
  margin-right:auto;
}
.tldr-card p,.tldr-card ul,.tldr-card ol{
  font-size:.985rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 .8rem;
}
.tldr-card p:last-child,.tldr-card ul:last-child,.tldr-card ol:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .tldr-card summary::before{transition:none}
}

/* ========================================================================
   11c. FOOTNOTE-STYLE REFERENCES (sourced citations, bottom of article)
   ======================================================================== */
.article-refs{
  margin:3rem 0 0;
  padding:1.6rem 0 0;
  border-top:2px solid var(--accent);
}
.article-refs__heading{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 1rem;
  color:var(--ink);
}
.article-refs__list{
  list-style:none;
  margin:0;padding:0;
  counter-reset:refs;
  font-size:.9rem;
  line-height:1.55;
}
.article-refs__list li{
  counter-increment:refs;
  display:flex;
  gap:.6rem;
  margin:.6rem 0;
  color:var(--ink-2);
}
.article-refs__list li::before{
  content:counter(refs);
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:600;
  color:var(--accent-2);
  min-width:1.6rem;
  text-align:right;
  flex-shrink:0;
}
.article-refs__list a{color:var(--link);text-underline-offset:.16em;word-break:break-word}
.article-refs__source{font-style:italic;color:var(--ink-3)}

/* In-prose footnote callout */
.prose sup.fn-ref{
  font-family:var(--mono);
  font-size:.72em;
  font-weight:600;
  vertical-align:super;
  line-height:0;
}
.prose sup.fn-ref a{
  color:var(--accent-2);
  text-decoration:none;
  padding:0 .15em;
  background:var(--paper-2);
  border-radius:.2em;
}
.prose sup.fn-ref a:hover{background:var(--accent);color:var(--paper)}

/* ========================================================================
   11d. INLINE RELATED CARD (in-flow related card)
   ======================================================================== */
.inline-related-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1.1rem 1.3rem;
  margin:2rem 0;
  display:flex;flex-direction:column;gap:.4rem;
}
.inline-related-card__label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-3);
}
.inline-related-card__title{font-family:var(--serif);font-size:1.05rem;line-height:1.3;margin:0;letter-spacing:-.01em}
.inline-related-card__title a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.inline-related-card__title a:hover{color:var(--accent-2);border-bottom-color:var(--accent)}
.inline-related-card__why{font-size:.95rem;color:var(--ink-2);margin:.2rem 0 0;line-height:1.55}

/* Decision/comparison card — two options side by side */
.diy-vs-pro{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  overflow:hidden;
  margin:2rem 0;
}
@media (min-width:720px){.diy-vs-pro{grid-template-columns:1fr 1fr}}
.diy-vs-pro__col{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.diy-vs-pro__col--safe{background:var(--safe-soft);border-bottom:1px solid var(--rule)}
.diy-vs-pro__col--pro{background:var(--warn-soft)}
@media (min-width:720px){
  .diy-vs-pro__col--safe{border-bottom:0;border-right:1px solid var(--rule)}
}
.diy-vs-pro__label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:700;
}
.diy-vs-pro__col--safe .diy-vs-pro__label{color:var(--safe)}
.diy-vs-pro__col--pro .diy-vs-pro__label{color:var(--warn)}
.diy-vs-pro__title{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin:0;color:var(--ink)}
.diy-vs-pro__body{font-size:.925rem;color:var(--ink-2);line-height:1.55;margin:0}
.diy-vs-pro__body ul{margin:.4rem 0 0;padding-left:1.2rem}
.diy-vs-pro__body li{margin:.2rem 0}

/* ========================================================================
   12. ARTICLE HEAD
   ======================================================================== */
.post__header{margin-bottom:2rem}
.post__kicker{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  font-weight:600;
  color:var(--accent-2);
  text-decoration:none;
  margin-bottom:.8rem;
}
.post__kicker:hover{color:var(--accent)}
.post__title{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,2.75rem);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 1rem;
  text-wrap:balance;
}
.post__byline{
  display:flex;flex-wrap:wrap;gap:1rem 1.4rem;
  font-size:.875rem;color:var(--ink-3);
  margin:0 0 1.4rem;
  padding:0;
}
.post__byline > span{display:inline-flex;align-items:baseline;gap:.4rem}
.post__byline .label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.7rem;
  font-weight:600;
  color:var(--ink-3);
}
.post__byline time{color:var(--ink-2)}
.post__featured-img{margin:0 0 2rem;border-radius:var(--radius-3);overflow:hidden;border:1px solid var(--rule)}
.post__featured-img img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* ========================================================================
   13. PROSE — body content (long-form readability)
   ======================================================================== */
.prose{font-size:1.0625rem;line-height:1.75}
/* A raw URL or a long unbroken string in the content must wrap instead of
   widening the page on a phone (tema 53: a references list of raw URLs pushed
   the page to 473px at 320). Tables are excluded - they scroll in their region. */
.prose :is(p,li,dd,dt,blockquote,figcaption,h2,h3,h4){overflow-wrap:anywhere}
.prose > * + *{margin-top:0}
.prose p{margin:0 0 1.2rem}
.prose h2{margin:2.6rem 0 .9rem;scroll-margin-top:5rem;font-size:clamp(1.4rem,2.4vw,1.75rem)}
.prose h3{margin:2rem 0 .7rem;scroll-margin-top:5rem;font-size:clamp(1.15rem,1.8vw,1.3rem)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.6rem}
.prose li{margin:.5rem 0}
.prose img{border-radius:var(--radius-2);border:1px solid var(--rule);margin:1.6rem 0}
.prose a{color:var(--link)}
.prose a:hover{color:var(--accent)}

/* ========================================================================
   14. TL;DR CARD (block pattern)
   ======================================================================== */
.tldr{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1.2rem 1.4rem;
  margin:0 0 2rem;
}
.tldr__label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--accent-2);
  margin-bottom:.5rem;
}
.tldr p{margin:0 0 .6rem;font-size:.985rem;line-height:1.6;color:var(--ink-2)}
.tldr p:last-child{margin-bottom:0}
.tldr ul,.tldr ol{margin:.4rem 0 0;padding-left:1.2rem;font-size:.975rem;color:var(--ink-2)}

/* ========================================================================
   15. LEGAL DISCLAIMER CALLOUT
   ======================================================================== */
.legal-disclaimer{
  background:var(--warn-soft);
  border:1px solid color-mix(in oklab,var(--warn) 35%,var(--rule));
  border-radius:var(--radius-3);
  padding:1.1rem 1.3rem;
  margin:0 0 2rem;
  font-size:.925rem;
  line-height:1.55;
  color:var(--ink-2);
}
.legal-disclaimer__label{
  display:flex;align-items:center;gap:.5rem;
  font-weight:700;
  color:var(--warn);
  margin-bottom:.4rem;
  font-size:.85rem;
  letter-spacing:.04em;
}
.legal-disclaimer__label::before{
  content:'';
  display:inline-block;
  width:14px;height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L1 21h22L12 2zm0 6l7.5 13h-15L12 8zm-1 4v4h2v-4h-2zm0 5v2h2v-2h-2z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L1 21h22L12 2zm0 6l7.5 13h-15L12 8zm-1 4v4h2v-4h-2zm0 5v2h2v-2h-2z'/></svg>") no-repeat center / contain;
  flex-shrink:0;
}
.legal-disclaimer p{margin:0 0 .5rem}
.legal-disclaimer p:last-child{margin-bottom:0}

/* ========================================================================
   16. CALLOUT (general block pattern, info/warning)
   ======================================================================== */
.callout{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1rem 1.2rem;
  margin:1.6rem 0;
  font-size:.975rem;
}
.callout.is-style-warning{
  border-left-color:var(--warn);
  background:var(--warn-soft);
}
.callout p{margin:0 0 .6rem}
.callout p:last-child{margin-bottom:0}

/* ========================================================================
   17. META RAIL (right column on article)
   ======================================================================== */
.meta-rail__group{margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--rule)}
.meta-rail__group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.meta-rail__label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-3);
  margin:0 0 .55rem;
}
.meta-rail__value{font-size:.925rem;color:var(--ink-2);margin:0;line-height:1.5}
.meta-rail__value strong{color:var(--ink);font-weight:600}

/* ========================================================================
   18. TOC (table of contents — scrollspy)
   ======================================================================== */
.toc__list{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.4}
.toc__list li{margin:.35rem 0}
.toc__list a{
  color:var(--ink-2);
  text-decoration:none;
  display:block;
  padding:.2rem .55rem;
  border-left:2px solid transparent;
  border-radius:0 var(--radius-1) var(--radius-1) 0;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.toc__list a:hover{color:var(--ink);background:var(--paper-2)}
.toc__list a.is-active{
  color:var(--accent-2);
  border-left-color:var(--accent);
  background:var(--paper-2);
  font-weight:600;
}
@media (prefers-reduced-motion:reduce){
  .toc__list a{transition:none}
}
.toc__list .toc-h3{padding-left:.9rem;font-size:.85rem;color:var(--ink-3)}
.toc__list .toc-h3 a{padding-left:.9rem}

/* ========================================================================
   19. MOBILE TOC DRAWER
   ======================================================================== */
.inline-toc{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  padding:.8rem 1.2rem;
  margin:0 0 2rem;
}
.inline-toc summary{
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
  color:var(--ink);
  list-style:none;
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem 0;
  min-height:32px;
}
.inline-toc summary::-webkit-details-marker{display:none}
.inline-toc summary::before{
  content:'';
  display:inline-block;
  width:0;height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .15s ease;
  flex-shrink:0;
}
.inline-toc[open] summary::before{transform:rotate(90deg)}
.inline-toc .toc__list{margin-top:.6rem;padding-left:.4rem}
@media (prefers-reduced-motion:reduce){
  .inline-toc summary::before{transition:none}
}

.toc-drawer-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:.5rem 1rem;
  font-size:.9rem;
  color:var(--ink-2);
  margin:0 0 1rem;
  min-height:44px;
}
.toc-drawer-toggle:hover{color:var(--ink);background:var(--card)}
@media (min-width:1080px){
  .toc-drawer-toggle{display:none}
}
.toc-drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  background:rgba(26,36,33,.5);
  display:none;
  padding:5rem 1rem 1rem;
}
.toc-drawer[data-open="true"]{display:block}
.toc-drawer__panel{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  padding:1.4rem;
  max-width:32rem;
  margin:0 auto;
  max-height:80vh;
  overflow:auto;
}
.toc-drawer__close{
  float:right;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--radius-2);
  color:var(--ink-2);
}
.toc-drawer__close:hover{color:var(--ink);background:var(--paper-2)}

/* ========================================================================
   20. PAGINATION
   ======================================================================== */
.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  margin:3rem 0 2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.pagination a,.pagination span{
  display:inline-grid;place-items:center;
  min-width:44px;height:44px;
  padding:0 .8rem;
  border-radius:var(--radius-2);
  font-size:.95rem;
  color:var(--ink-2);
  text-decoration:none;
  border:1px solid var(--rule);
}
.pagination a:hover{color:var(--ink);background:var(--paper-2);border-color:var(--ink-3)}
.pagination .current{background:var(--accent);color:var(--paper);border-color:var(--accent);font-weight:600}
.pagination .dots{border:0;background:transparent}

/* ========================================================================
   21. POST NAV (prev / next)
   ======================================================================== */
.post-nav{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:3rem 0 0;
  padding-top:1.6rem;
  border-top:1px solid var(--rule);
}
@media (min-width:640px){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{
  display:block;
  padding:1rem 1.2rem;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s ease;
}
.post-nav a:hover{border-color:var(--accent)}
.post-nav__label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink-3);
  margin-bottom:.3rem;
}
.post-nav__title{font-family:var(--serif);font-size:1.025rem;line-height:1.3;color:var(--ink)}
.post-nav__next{text-align:right}

/* ========================================================================
   22. FOOTER
   ======================================================================== */
.site-footer{
  border-top:1px solid var(--rule);
  padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(3rem,6vw,5rem);
  font-size:.925rem;
  color:var(--ink-2);
}
.site-footer__top{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1.6rem;
  margin-bottom:2rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--rule);
}
.site-footer__brand{display:flex;flex-direction:column;gap:.4rem;max-width:24rem}
.site-footer__name{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.site-footer__tag{color:var(--ink-3);font-size:.9rem;line-height:1.5;margin:0}
.site-footer__links{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.9rem}
.site-footer__links a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.site-footer__links a:hover{color:var(--ink)}
.site-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.825rem;color:var(--ink-3)}
.site-footer__disclaimer{max-width:50rem;line-height:1.55;color:var(--ink-3);font-size:.825rem;margin:1rem 0 0}

/* ========================================================================
   23. COMMENTS
   ======================================================================== */
.comments-area{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.comments-title{font-family:var(--serif);font-size:1.4rem;margin:0 0 1.4rem}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{margin:0 0 1.4rem;padding:1rem 1.2rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-3)}
.comment-meta{font-size:.875rem;color:var(--ink-3);margin-bottom:.5rem}
.comment-meta cite{font-style:normal;color:var(--ink);font-weight:600}
.comment-form label{display:block;font-size:.875rem;margin:.8rem 0 .3rem;color:var(--ink-2);font-weight:500}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-2);
  padding:.6rem .8rem;
  font:inherit;
  color:var(--ink);
  min-height:44px;
}
.comment-form textarea{min-height:8rem;resize:vertical}
.form-submit input[type="submit"],.button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);
  color:var(--paper);
  border:0;
  padding:.7rem 1.4rem;
  border-radius:var(--radius-2);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  min-height:44px;
  min-width:44px;
  transition:background .15s ease;
}
.form-submit input[type="submit"]:hover,.button:hover{background:var(--accent-2)}
@media (prefers-reduced-motion:reduce){
  .form-submit input[type="submit"],.button{transition:none}
}

/* ========================================================================
   24. 404 / SEARCH
   ======================================================================== */
.error-404,.search-results-head{padding:clamp(3rem,6vw,5rem) 0;text-align:center}
.error-404__code{font-family:var(--serif);font-size:clamp(4rem,12vw,7rem);line-height:1;color:var(--accent);letter-spacing:-.04em;margin:0}
.error-404__title{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2rem);margin:.6rem 0 1rem}
.error-404__lede{color:var(--ink-2);max-width:36rem;margin:0 auto 1.4rem;line-height:1.6}
.error-404__suggest{max-width:34rem;margin:1.6rem auto 0;text-align:left}

/* ========================================================================
   25. WP HELPERS
   ======================================================================== */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;padding:0;margin:-1px;border:0;word-wrap:normal!important}
.alignleft{float:left;margin:.5rem 1.4rem 1rem 0}
.alignright{float:right;margin:.5rem 0 1rem 1.4rem}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{max-width:min(var(--measure-wide),100%);margin-left:auto;margin-right:auto}
.alignfull{max-width:100%;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.wp-block-image img{border-radius:var(--radius-2)}
.wp-block-quote{border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.2rem;margin:1.6rem 0;font-family:var(--serif);font-style:italic;color:var(--ink-2)}
.wp-block-pullquote{border:0;padding:1.5rem 1.5rem;text-align:left;font-family:var(--serif);font-size:1.3rem;line-height:1.4}
.wp-block-table{margin:1.5rem 0}
.wp-block-table table{border:1px solid var(--rule)}

/* ========================================================================
   28. THE RESULTS
   Front page as an answer engine (2.0.0): the head (the title, the question field and the answer card with its
   sources, on a soft glow); every guide as a search result with the sites it cites; where the answers come from (the
   sites the guides cite most and the guides the site links to most, each with a bar); the preview of a page as a
   result and as a quoted answer; every guide, newest first, as an answer card. Answers wear a blue-to-violet edge and
   a spark; links are link blue, a visited result turns violet. No web font, no image. Every colour from the tokens.
   ======================================================================== */
html{scroll-padding-top:var(--ctc-pad,5rem)}
@media (max-width:47.99rem){
  .topbar{position:static}
  html{scroll-padding-top:1rem}
}
.prose h2,.prose h3{scroll-margin-top:0}
.brand__mark{font-weight:700;font-family:var(--sans);font-size:.92rem}
/* the name of the site stays on one line on a phone (a long word would otherwise break inside it) */
@media (max-width:47.99rem){.brand{flex:1 1 0}.brand__name{white-space:normal;overflow:visible;line-height:1.15;font-size:clamp(.78rem,4.2vw,1rem);letter-spacing:-.01em;overflow-wrap:normal}}
.reading-progress__bar{background-image:linear-gradient(90deg,var(--accent),var(--accent-2))}
[data-finder][hidden],[data-q][hidden],[data-preview][hidden]{display:none}
.ctc-spark{display:inline-block;flex:0 0 auto;width:1.05em;height:1.05em;margin-right:.4em;vertical-align:-.15em;fill:var(--accent-2)}

/* the answer edge: a card with a blue-to-violet border, used by every answer of the theme */
.ctc-live,.ctc-card,.ctc-pv__answer{border:2px solid transparent;border-radius:1.1rem;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--accent),var(--accent-2)) border-box}

/* the head: the question field and the answer card */
.ctc-hero{border-bottom:1px solid var(--rule);background:radial-gradient(48rem 26rem at 88% 0%,var(--paper-2),transparent 70%)}
.ctc-hero__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;padding-top:clamp(1.6rem,5vw,3.2rem);padding-bottom:clamp(1.6rem,4vw,2.8rem)}
@media (min-width:64rem){.ctc-hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:2.6rem}}
.ctc-hero__kicker{display:flex;align-items:center;margin:0 0 .7rem;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.ctc-hero__title{max-width:16ch;margin:0 0 .8rem;font-family:var(--serif);font-weight:800;font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
.ctc-hero__lede{max-width:56ch;margin:0 0 1.2rem;font-size:1.06rem;line-height:1.6;color:var(--ink-2)}
.ctc-prompt{display:grid;gap:.45rem;max-width:40rem;margin:0 0 1.1rem}
.ctc-prompt__label{font-weight:700;font-size:.95rem}
.ctc-prompt__bar{display:flex;align-items:center;box-sizing:border-box;min-height:56px;padding:0 1.1rem;border:2px solid transparent;border-radius:999px;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--accent),var(--accent-2)) border-box}
.ctc-prompt__bar:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.ctc-prompt__input{flex:1 1 auto;min-width:0;box-sizing:border-box;min-height:52px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1.08rem;outline:none}
.ctc-prompt__input::placeholder{color:var(--ink-3)}
.ctc-prompt__status{min-height:1.4em;margin:0;font-size:.9rem;color:var(--ink-3)}
.ctc-hero__counts{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.ctc-hero__counts li{margin:0;padding:.25rem .75rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ctc-live{min-width:0;padding:1.2rem 1.3rem 1.25rem}
.ctc-live__k,.ctc-card__k{display:flex;align-items:center;margin:0;font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.ctc-live__from{margin:.35rem 0 .2rem;font-size:.86rem;color:var(--ink-3)}
.ctc-live__q{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.ctc-live__q:hover{text-decoration:underline;text-underline-offset:.16em}
.ctc-live__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;margin:.2rem 0 .8rem;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.ctc-live__more{min-height:0;margin:.6rem 0 0;font-size:.88rem;color:var(--ink-3)}
.ctc-live__more:empty{display:none}

/* the sites a guide cites, as numbered chips */
.ctc-cites{display:flex;flex-wrap:wrap;gap:.35rem;margin:0}
.ctc-cites__chip{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;box-sizing:border-box;padding:.18rem .6rem .18rem .22rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper);
  font-family:var(--mono);font-size:.74rem;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.ctc-cites__n{display:inline-grid;place-items:center;flex:0 0 auto;min-width:1.25rem;height:1.25rem;padding:0 .2rem;box-sizing:border-box;border-radius:999px;background:var(--accent-2);color:var(--paper);font-size:.68rem;font-weight:700}

/* section heads */
.ctc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1.4rem;margin:0;padding-bottom:.5rem;border-bottom:2px solid var(--ink)}
.ctc-head__title{margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;letter-spacing:-.015em}
.ctc-head__note{flex:1 1 18rem;margin:0;font-size:.92rem;color:var(--ink-3)}

/* every guide, as a result, in a box of its own */
.ctc-search,.ctc-map,.ctc-preview{padding-top:clamp(1.6rem,3vw,2.4rem);padding-bottom:.6rem}
.ctc-serp{max-height:36rem;overflow-y:auto;overscroll-behavior:contain;margin:1rem 0 0;padding:.2rem 1.2rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card);list-style:none}
.ctc-serp li{min-width:0;margin:0;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.ctc-serp li:last-child{border-bottom:0}
.ctc-serp__crumb,.ctc-pv__crumb{margin:0;font-family:var(--mono);font-size:.78rem;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.ctc-serp__title{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:.1rem 0;font-size:1.14rem;font-weight:600;line-height:1.3;color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.ctc-serp__title:hover,.ctc-row__link:hover{text-decoration:underline;text-underline-offset:.16em}
.ctc-serp__title:visited{color:var(--accent-2)}
.ctc-serp__title:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ctc-serp__snippet{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:var(--measure);margin:0 0 .45rem;font-size:.94rem;line-height:1.55;color:var(--ink-2)}

/* where the answers come from: two panels of bars */
.ctc-map__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1.2rem;margin:1rem 0 0}
.ctc-map__part{min-width:0;padding:1rem 1.2rem 1.1rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card)}
.ctc-map__part--sites{border-top:4px solid var(--accent-2)}
.ctc-map__part--hubs{border-top:4px solid var(--accent)}
.ctc-map__k{margin:0 0 .6rem;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.ctc-bars{margin:0;padding:0;list-style:none}
.ctc-bars__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.15rem .8rem;margin:0;padding:.45rem 0;border-bottom:1px solid var(--rule)}
.ctc-bars__row:last-child{border-bottom:0}
.ctc-bars__name{min-width:0;font-weight:600;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.ctc-bars__link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:none}
.ctc-bars__link:hover{text-decoration:underline;text-underline-offset:.16em}
.ctc-bars__n{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.ctc-bar{grid-column:1 / -1;display:block;width:100%;height:.45rem}
.ctc-bar__bg{fill:var(--paper-2)}
.ctc-bar__fill{fill:var(--accent-2)}
.ctc-bar__fill--hub{fill:var(--accent)}

/* the preview: a result and a quoted answer */
.ctc-pv{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;margin:1rem 0 0}
@media (min-width:56rem){.ctc-pv{grid-template-columns:minmax(0,22rem) minmax(0,1fr);align-items:start}}
.ctc-pv__form{display:grid;gap:.4rem}
.ctc-pv__label{font-weight:700;font-size:.95rem}
.ctc-pv__input{box-sizing:border-box;width:100%;min-height:48px;padding:.6rem 1rem;border:2px solid var(--ink);border-radius:.8rem;background:var(--card);color:var(--ink);font:inherit;font-size:1.02rem}
.ctc-pv__input--area{resize:vertical}
.ctc-pv__input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ctc-pv__count{min-height:1.4em;margin:.2rem 0 0;font-size:.9rem;color:var(--ink-3)}
.ctc-pv__out{display:grid;gap:.5rem;min-width:0}
.ctc-pv__as{margin:.3rem 0 0;font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ctc-pv__card{box-sizing:border-box;max-width:37.5rem;padding:1rem 1.2rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card)}
.ctc-pv__title{margin:.2rem 0;font-size:1.25rem;font-weight:600;line-height:1.35;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctc-pv__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.ctc-pv__answer{box-sizing:border-box;max-width:37.5rem;padding:1rem 1.2rem}
.ctc-pv__ak{display:flex;align-items:center;margin:0 0 .4rem;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.ctc-pv__quote{margin:0 0 .7rem;font-size:1rem;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.ctc-pv__title.is-empty,.ctc-pv__desc.is-empty,.ctc-pv__quote.is-empty{color:var(--ink-3);font-style:italic}

/* every guide, newest first, as an answer card */
.ctc-latest{padding-top:clamp(1.8rem,3vw,2.6rem);padding-bottom:clamp(2.4rem,6vw,4rem)}
.ctc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr));gap:1rem;margin:1rem 0 0;padding:0;list-style:none}
.ctc-row{display:flex;flex-direction:column;gap:.45rem;min-width:0;margin:0;padding:1.05rem 1.2rem 1.1rem;border:1px solid var(--rule);border-left:4px solid var(--accent-2);border-radius:1rem;background:var(--card)}
.ctc-row__k{margin:0;font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.ctc-row__title{margin:0;font-family:var(--serif);font-weight:700;font-size:1.2rem;line-height:1.3}
.ctc-row__link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.ctc-row__link:visited{color:var(--accent-2)}
.ctc-row__short{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0;font-size:.96rem;line-height:1.6;color:var(--ink-2)}
.ctc-row__meta{display:flex;flex-wrap:wrap;gap:0 1.1rem;margin:auto 0 0;font-family:var(--mono);font-size:.76rem;line-height:1.7;color:var(--ink-3)}
.ctc-row--plain{border-left-color:var(--rule)}
.ctc-empty{margin:1rem 0 0;color:var(--ink-2)}
.ctc-turn{display:block;margin:1.6rem 0 0;padding:0;border:0}
.ctc-turn .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.ctc-turn .page-numbers{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px;height:auto;margin:0;padding:0 1rem;border:1px solid var(--rule);border-radius:999px;
  background:var(--card);font-weight:700;font-size:1rem;line-height:1.2;color:var(--accent);text-decoration:none}
.ctc-turn .page-numbers.current{border-color:var(--accent);background:var(--accent);color:var(--paper)}
.ctc-turn a.page-numbers:hover{border-color:var(--accent);text-decoration:underline}
.ctc-turn .page-numbers.dots{border-color:transparent;background:none;color:var(--ink-3)}

/* ========================================================================
   29. THE GUIDE
   A guide as a question and its answer: the way back; the question, its date; the answer card (the short answer,
   its sources as numbered chips, the questions to ask next) beside what an answer engine can lift from the page; the
   text with its sections beside it (on the left and sticky on a wide screen, before the text on a phone); the link
   profile; at the END the note, the newer and older guides and the way back.
   ======================================================================== */
.ctc-page>.wrap{max-width:calc(var(--measure) + 17rem + 2 * clamp(1rem,4vw,2rem))}
.ctc-back-top{margin-top:0;margin-bottom:0;padding-top:.9rem;padding-bottom:0}
.ctc-back-top__link{display:inline-flex;align-items:center;gap:.4rem;box-sizing:border-box;min-height:44px;padding:0 1rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);font-weight:600;font-size:.92rem;text-decoration:none}
.ctc-back-top__link:hover{border-color:var(--accent);text-decoration:underline}
.ctc-ask{padding-top:1rem;padding-bottom:1.3rem}
.ctc-ask__k{display:flex;align-items:center;margin:0 0 .5rem;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.ctc-ask__q{max-width:var(--measure-wide);margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.1;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.ctc-ask__meta{margin:.8rem 0 0;font-size:.95rem;color:var(--ink-3)}
.ctc-answer{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--rule)}
@media (min-width:64rem){.ctc-answer{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}}
.ctc-card{min-width:0;padding:1.2rem 1.35rem 1.3rem}
.ctc-card__text{margin:.6rem 0 0;font-size:1.16rem;line-height:1.65;color:var(--ink)}
.ctc-card__label{margin:1rem 0 .4rem;font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ctc-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.ctc-chips li{margin:0;min-width:0}
.ctc-chip{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;box-sizing:border-box;min-height:44px;padding:.2rem .85rem .2rem .3rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper);
  font-family:var(--mono);font-size:.8rem;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.ctc-chip:hover{border-color:var(--accent-2);text-decoration:underline}
.ctc-chip__n{display:inline-grid;place-items:center;flex:0 0 auto;min-width:1.7rem;height:1.7rem;border-radius:999px;background:var(--accent-2);color:var(--paper);font-size:.78rem;font-weight:700}
.ctc-next{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}
.ctc-next li{margin:0}
.ctc-next__link{display:flex;align-items:center;box-sizing:border-box;min-height:44px;padding:.45rem .9rem;border:1px solid var(--rule);border-radius:.9rem .9rem .9rem .2rem;background:var(--paper);font-size:.95rem;line-height:1.35;overflow-wrap:anywhere}
.ctc-next__link:hover{border-color:var(--accent)}
.ctc-lift{min-width:0;padding:1rem 1.1rem 1.1rem;border:1px solid var(--rule);border-radius:1.1rem;background:var(--paper-2)}
.ctc-lift__title{margin:0 0 .7rem;font-family:var(--mono);font-size:.78rem;font-weight:700;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.ctc-lift__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:0}
.ctc-lift__tile{min-width:0;padding:.6rem .7rem;border-radius:.7rem;background:var(--card)}
.ctc-lift__tile dt{margin:0;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ctc-lift__tile dd{margin:.2rem 0 0;font-weight:700;font-size:.98rem;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.ctc-page__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;padding-top:1.6rem}
@media (min-width:64rem){
  .ctc-page--rail .ctc-page__grid{grid-template-columns:15rem minmax(0,1fr);align-items:start}
  .ctc-page--rail .ctc-page__rail{grid-column:1;grid-row:1;position:sticky;top:calc(var(--ctc-bar,4rem) + 1rem);max-height:calc(100vh - var(--ctc-bar,4rem) - 2rem);overflow-y:auto}
  .ctc-page--rail .ctc-page__body{grid-column:2;grid-row:1}
}
.ctc-page__body{min-width:0}
.ctc-page__body .prose{max-width:var(--measure);overflow-wrap:anywhere}
.ctc-toc{min-width:0;padding:.8rem 1rem .9rem;border:1px solid var(--rule);border-top:4px solid var(--accent);border-radius:1rem;background:var(--card)}
.ctc-toc__title{margin:0 0 .4rem;font-family:var(--mono);font-weight:700;font-size:.76rem;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ctc-toc__list{margin:0;padding:0 0 0 1.2rem;font-family:var(--mono);font-size:.82rem;color:var(--ink-3)}
.ctc-toc__list li{margin:0}
.ctc-toc__link{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:.1rem 0;font-family:var(--sans);font-size:.92rem;line-height:1.3;overflow-wrap:anywhere}

/* the link profile */
.ctc-profile{margin-top:2.4rem}
.ctc-profile__title{margin:0 0 .8rem;padding-bottom:.4rem;border-bottom:2px solid var(--ink);font-family:var(--serif);font-weight:800;font-size:1.4rem}
.ctc-profile__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start;gap:1rem}
.ctc-profile__part{min-width:0;padding:.85rem 1rem .9rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card)}
.ctc-profile__part--out{border-top:4px solid var(--accent)}
.ctc-profile__part--in{border-top:4px solid var(--ink-2)}
.ctc-profile__part--cites{border-top:4px solid var(--accent-2)}
.ctc-profile__k{margin:0 0 .4rem;font-family:var(--mono);font-weight:700;font-size:.8rem;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.ctc-profile__list{margin:0;padding:0;list-style:none}
.ctc-cite__list{margin:0;padding:0 0 0 1.9rem;list-style:decimal}
.ctc-cite__list li::marker{font-family:var(--mono);font-size:.8rem;color:var(--accent-2)}
.ctc-profile__list li,.ctc-cite__list li{margin:0}
.ctc-profile__link,.ctc-cite__link{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:.1rem 0;font-size:.93rem;line-height:1.3;overflow-wrap:anywhere}
.ctc-cite__host{display:block;margin:-.4rem 0 .3rem;font-family:var(--mono);font-size:.74rem;color:var(--ink-3);overflow-wrap:anywhere}

/* the end: the note, the newer and older guides, the way back */
.ctc-page__end{margin-top:2.4rem;padding-bottom:clamp(3rem,6vw,5rem)}
.ctc-page__end>*{max-width:var(--measure)}
.ctc-page__end .legal-disclaimer{margin:0;border:1px solid var(--rule);border-left:4px solid var(--accent-2);border-radius:1rem;background:var(--paper-2)}
.ctc-page__end .legal-disclaimer__label{color:var(--accent-2)}
.ctc-page__end .legal-disclaimer__label::before{display:none}
.ctc-near{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.8rem;margin:2rem 0 0}
.ctc-near__link{display:flex;flex-direction:column;gap:.2rem;box-sizing:border-box;min-height:48px;padding:.75rem .95rem .85rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card);color:var(--ink);text-decoration:none}
.ctc-near__link--next{text-align:right}
.ctc-near__k{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ctc-near__q{font-weight:700;line-height:1.3;color:var(--accent);overflow-wrap:anywhere}
.ctc-near__link:hover .ctc-near__q{text-decoration:underline;text-underline-offset:.16em}
.ctc-back{margin:2rem 0 0;font-weight:700}
.ctc-back a{display:inline-flex;align-items:center;min-height:44px}
.prose table{font-variant-numeric:tabular-nums}
.prose th{font-weight:700;color:var(--ink);background-color:var(--paper-2)}
.prose :is(th,td),.prose :is(th,td) :is(p,li){overflow-wrap:break-word}
.prose iframe,.prose embed,.prose object{display:block;max-width:100%}
.prose pre{box-sizing:border-box;max-width:100%;overflow-x:auto}
.prose table{display:block;max-width:100%;overflow-x:auto}
@media (max-width:47.99rem){
  .prose table{font-size:.88rem}
  .prose th,.prose td{min-width:5.5rem;padding:.5rem .45rem}
}
.ctc-split .post-page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
@media (forced-colors:active){
  .ctc-spark,.ctc-bar__fill,.ctc-bar__fill--hub{fill:CanvasText}
  .ctc-live,.ctc-card,.ctc-pv__answer,.ctc-prompt__bar{border:2px solid CanvasText;background:Canvas}
  .ctc-serp,.ctc-pv__card,.ctc-map__part,.ctc-row,.ctc-lift,.ctc-toc,.ctc-profile__part,.ctc-near__link,.ctc-chip,.ctc-cites__chip{border:2px solid CanvasText}
}
@media print{
  .ctc-prompt,.ctc-live,.ctc-serp,.ctc-map,.ctc-preview,.ctc-turn,.ctc-back,.ctc-back-top,.ctc-near,.ctc-page__rail{display:none}
  .ctc-card,.ctc-live{background:none;border:1px solid currentColor}
  .ctc-row__short,.ctc-live__text{display:block;-webkit-line-clamp:unset}
}

/* ========================================================================
   26. PRINT
   ======================================================================== */
@media print{
  .topbar,.site-footer,.meta-rail,.toc-drawer,.reading-progress,.post-nav,.comments-area,.skip-link{display:none!important}
  html:root:root{--paper:#fff;--paper-2:#fff;--card:#fff;--ink:#000;--ink-2:#222;--ink-3:#444;--rule:#999;--accent:#000;--accent-2:#000;--link:#000;--warn:#000;--safe:#000}
  body{background:#fff;color:#000}
  .article-shell{display:block;padding:0}
  .article-main{max-width:none}
  a{color:inherit;text-decoration:underline}
  .prose h2,.prose h3{break-after:avoid}
  .prose img{max-width:100%;break-inside:avoid}
}

/* ========================================================================
   27. GLOBAL REDUCED MOTION OVERRIDE (WD-16 safety net)
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}