/* ============================================================
   site.css — the ONE shared design system for singletrackmom.github.io
   Content pages only (overviews, PRDs, case pages, work/about/index).
   Tools are exempt: they keep their own styles + the back-link footer.

   Source of truth: style-guide/index.html + wayfinder/overview.html template.
   Change a value HERE and it updates every page that links this file.
   Page-specific components (charts, matrices, mocks) stay in a small
   inline <style> on that page only.
   ============================================================ */

:root{
  --ink:#26221f;        /* H1 + body text            */
  --muted:#6d635f;      /* H3, captions, nav, subtitles */
  --rule:#e5ddd1;       /* soft dividers             */
  --warm:#f4efe8;       /* thumbnails                */
  --plum:#7a5080;       /* links only                */
  --plum-light:#9e73a4; /* legend swatch (ARC study) */
  --sage:#6b8f6e;       /* accent fill               */
  --sage-text:#456546;  /* H2 + eyebrow + bullets (AA on white) */
  --gold-text:#75592c;
  --rose-text:#94395a;
  --lav:#f7f4f8;        /* the one filled-box color  */
  --lav-line:#d9c9e0;   /* box + rule borders        */
  --plum-pale:#f7f4f8;  /* alias of --lav on purpose */
}

*{box-sizing:border-box;margin:0;padding:0}

body{font-family:'DM Sans',sans-serif;background:#fff;color:var(--ink);font-size:15px;line-height:1.65}

/* ---- Links: plum in every state, nothing else is plum ---- */
a{color:var(--plum);text-decoration:none}
a:visited{color:var(--plum)}
a:hover{text-decoration:underline}
/* Card links: the whole card is the link, but only the title shows the underline affordance on hover, never the full card text */
a.card,a.card:hover{text-decoration:none}
a.card:hover .ct{text-decoration:underline}
a:focus-visible{outline:2px solid var(--plum);outline-offset:2px}

/* ---- Accessibility baseline ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#fff;color:#26221f;
  border:2px solid #7a5080;border-radius:0 0 6px 0;padding:.6rem 1rem;
  font:600 .95rem/1.2 'DM Sans',system-ui,sans-serif;text-decoration:none}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid #7a5080 !important;outline-offset:2px !important;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- Header + primary nav (identical on every page) ---- */
.site-head{max-width:1000px;margin:0 auto;padding:1.4rem 1.5rem 0;background:#fff}
.site-bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--lav-line)}


.site-nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:nowrap;justify-content:flex-end}
.site-nav a{font-size:0.9rem;font-weight:500;letter-spacing:.02em;line-height:1.1;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:.05rem}

.site-nav a:visited{color:var(--muted)}

/* ---- Main column ---- */
main{max-width:1000px;margin:0 auto;padding:2.4rem 1.5rem 1.4rem}

/* ---- Type system ---- */
h1{font-family:'Lora',Georgia,serif;font-size:1.9rem;font-weight:600;color:var(--ink);margin:0 0 0.4rem;line-height:1.12}
.eyebrow{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--sage-text);font-weight:600;margin-bottom:0.55rem}
/* .arc p (below) styles every paragraph and out-specifies .eyebrow, forcing the eyebrow to ink + 1.03rem. Restore it. */
.arc p.eyebrow{font-size:0.72rem;color:var(--sage-text);margin:0 0 0.55rem}
.lead-sub{font-family:'Lora',Georgia,serif;font-style:italic;font-size:1.15rem;color:var(--muted);max-width:720px;margin-bottom:1.7rem;line-height:1.5}
h2{font-family:'Lora',Georgia,serif;font-size:1.2rem;font-weight:600;color:var(--sage-text);margin:2.2rem 0 .5rem;line-height:1.25}
h3{font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin:1.4rem 0 .4rem}

/* ---- Prose: the reading column stops at 680px ---- */
.prose{max-width:680px}
.prose p{margin:0 0 1.1rem;font-size:1.03rem;color:var(--ink)}
p.body,.prose p.body{max-width:680px}

/* ---- Lists (the bullet fix: padding-left survives the * reset) ---- */
.prose ul,.prose ol{max-width:680px;margin:.35rem 0 1.2rem;padding-left:1.25rem}
.prose ul{list-style:disc}
.prose ul.stack{padding-left:1.15rem}
.prose li{margin:0 0 .5rem;font-size:1.03rem;line-height:1.55}
.prose li::marker{color:var(--sage-text)}
/* list safety: keep bullets inside the margin even outside .prose */
ul.stack{padding-left:1.15rem}
ul.stack li::marker{color:var(--sage-text)}

/* ---- Hero image + video slot ---- */
.hero-media{max-width:820px;border:1px solid var(--lav-line);border-radius:10px;overflow:hidden;margin:0 0 1.8rem}
.hero-media img{width:100%;display:block}
.video-slot{max-width:820px;aspect-ratio:16/9;background:var(--lav);border:1px solid var(--lav-line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:0.85rem;letter-spacing:0.02em;margin:0 0 1.8rem}

/* ---- Link/button row (pills) ---- */
.links{display:flex;flex-wrap:wrap;gap:0.6rem;margin:0 0 2.4rem}
.links a{font-size:0.85rem;text-decoration:none;border:1px solid var(--lav-line);border-radius:2rem;padding:0.45rem 1rem;color:var(--ink);transition:border-color .12s,color .12s}
.links a.primary{background:var(--plum);color:#fff;border-color:var(--plum)}
.links a:hover{border-color:var(--plum);color:var(--plum)}
.links a.primary:hover{color:#fff;opacity:0.92}

/* ---- Tabs: link form (a.tab) and button form (button.tab) ---- */
.tabs{border-bottom:1px solid var(--lav-line);margin:1.6rem 0 1.7rem;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
.tabs a.tab,.tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;font-family:'DM Sans',sans-serif;font-size:0.9rem;font-weight:500;letter-spacing:.02em;color:var(--muted);padding:0 0 .05rem;margin-bottom:-1px;text-decoration:none;line-height:1.1;cursor:pointer}
.tabs a.tab:hover,.tab:hover{color:var(--plum);border-bottom-color:var(--plum)}
.tabs a.tab[aria-current="page"],.tab[aria-selected="true"]{color:var(--plum);border-bottom-color:var(--plum)}
.tab:focus-visible{outline:3px solid var(--plum);outline-offset:2px;border-radius:3px}
.panel[hidden]{display:none}
.panel:focus{outline:none}

/* ---- Back link (secondary) ---- */
.backto{font-size:0.85rem;margin:2.2rem 0 0}
.backto a{color:var(--muted);text-decoration:none}
.backto a:hover{color:var(--plum)}

/* ---- Site footer (identical on every content page) ---- */
.sitefoot{position:relative;text-align:left;margin:0 auto;padding:1.6rem 1.5rem 3rem;max-width:1000px;font-family:'DM Sans',sans-serif;font-size:0.85rem;color:var(--muted);line-height:1.7;background:#fff}
.sitefoot::before{content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:var(--lav-line)}
.sitefoot .foot-links{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:0.2rem}
.sitefoot a{font-size:0.9rem;font-weight:500;letter-spacing:.02em;line-height:1.1;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:.05rem}

.sitefoot a:visited{color:var(--muted)}
.sitefoot .sep{color:var(--muted);padding:0 0.4rem}

@media(max-width:520px){h1{font-size:1.7rem}}

/* ============================================================
   ARC study components (airc-sss/ pages only)
   Scoped under .arc (the <main class="arc"> on those pages) so
   these generic names (card, cards, stats, timeline, bare p/ul/li)
   never leak onto any other page. Additive only, moved verbatim
   from the retired airc-sss/study.css. Do not use elsewhere.
   ============================================================ */

/* ARC pages use bare <p>/<ul>/<li>/<h2> (no .prose wrapper) */
.arc p{max-width:820px;font-size:1.03rem;margin:0 0 1.1rem;color:var(--ink)}
.arc ul{max-width:820px;margin:0 0 1.1rem;padding-left:1.5rem;list-style-position:outside}
.arc li{font-size:1.03rem;line-height:1.65;margin-bottom:0.45rem;padding-left:0.25rem}
.arc li::marker{color:var(--sage-text)}
.arc h2{max-width:820px}

/* Cards */
.arc .cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0.4rem 0 0.6rem;max-width:820px}
.arc .card{border:1px solid var(--lav-line);border-radius:11px;padding:1rem 1.15rem;background:var(--plum-pale)}
.arc .card h3{font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin:1.4rem 0 .4rem}
.arc .card p{font-size:0.96rem;margin:0;color:var(--ink);max-width:none}
@media(max-width:720px){.arc .cards{grid-template-columns:1fr}}

/* Stat row */
.arc .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.5rem;padding:0.3rem 0 0;margin:0.4rem 0 0.9rem;max-width:820px}
.arc .stat{min-width:0}
.arc .stat .n{font-family:'Lora',Georgia,serif;font-size:1.5rem;color:var(--plum);line-height:1.1}
.arc .stat .l{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media(max-width:600px){.arc .stats{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.arc .stats{grid-template-columns:1fr}}

/* Demographics, designed */
.arc .demog{max-width:820px;border:1px solid var(--lav-line);border-radius:11px;background:var(--plum-pale);padding:1.15rem 1.3rem;margin:0.4rem 0 1.4rem}
.arc .demog .cap{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 0.7rem}
.arc .propbar{display:flex;width:100%;height:2.2rem;border-radius:7px;overflow:hidden;border:1px solid var(--lav-line)}
.arc .propbar span{display:block;height:100%}
.arc .proplegend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.4rem 2rem;margin:0.85rem 0 0;padding:0;list-style:none;max-width:none}
.arc .proplegend li{display:flex;align-items:center;gap:0.55rem;font-size:0.92rem;color:var(--ink);margin:0;padding:0}
.arc .proplegend li::marker{content:""}
.arc .proplegend .sw{width:0.85rem;height:0.85rem;border-radius:3px;flex:none}
.arc .proplegend .pct{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);padding-left:0.5rem}
.arc .demog .divider{border:0;border-top:1px solid var(--lav-line);margin:1.15rem 0 1.05rem}
.arc .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:0.95rem 1.5rem;margin:0;padding:0;list-style:none;max-width:none}
.arc .figs li{margin:0;padding:0}
.arc .figs .n{font-family:'Lora',Georgia,serif;font-size:1.4rem;color:var(--plum);line-height:1.05}
.arc .figs .l{font-size:0.82rem;color:var(--muted);line-height:1.35}
.arc .demog .foot{margin:1.05rem 0 0;font-size:0.9rem;color:var(--muted);max-width:none}
.arc .flowsteps{margin:0;padding:0 0 0 1.35rem;display:flex;flex-direction:column;gap:0.6rem;max-width:none}
.arc .flowsteps li{font-size:0.95rem;color:var(--ink);line-height:1.5}
.arc .flowsteps li::marker{color:var(--ink);font-weight:600}
.arc .refs{margin:0;padding:0;list-style:none;max-width:none;display:flex;flex-direction:column;gap:0.95rem}
.arc .refs li{font-size:0.92rem;line-height:1.55;color:var(--ink);margin:0;padding:0}
.arc .refs .rk{display:block;font-weight:700;color:var(--sage-text);font-size:0.82rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:0.15rem}
.arc .refs a{color:var(--plum);text-decoration:underline}
.arc .refs a:hover{text-decoration:none}
@media(max-width:520px){.arc .proplegend{grid-template-columns:1fr}}
@media(max-width:600px){.arc .figs{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.arc .figs{grid-template-columns:1fr}}

/* Sources note */
.arc .srcs{font-size:0.85rem;color:var(--muted);max-width:820px;margin:0.7rem 0 1.1rem}
.arc .srcs a{text-decoration:underline}

/* Roadmap timeline */
.arc .timeline{max-width:820px;margin:0.4rem 0 1.1rem;list-style:none;padding:0}
.arc .timeline li{position:relative;padding:0 0 0.9rem 1.4rem;margin:0;border-left:2px solid var(--lav-line);font-size:1.0rem}
.arc .timeline li:last-child{border-left-color:transparent}
.arc .timeline li::before{content:"";position:absolute;left:-6px;top:0.45rem;width:10px;height:10px;border-radius:50%;background:var(--plum)}
.arc .timeline .when{font-weight:600;color:var(--ink)}
.arc .timeline .what{color:var(--muted)}

/* Active-state, identical for name, nav, and footer links */
.site-name,.site-name:visited{font-size:0.9rem;font-weight:500;letter-spacing:.02em;line-height:1.1;color:var(--muted,#6d635f);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:.05rem}
.site-name[aria-current="page"],.site-name[aria-current="page"]:visited{color:var(--plum,#7a5080);border-bottom-color:var(--plum,#7a5080)}
.site-nav a[aria-current="page"],.site-nav a[aria-current="page"]:visited{color:var(--plum,#7a5080);border-bottom-color:var(--plum,#7a5080)}
.foot-links a,.foot-links a:visited{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:.05rem}
.foot-links a[aria-current="page"],.foot-links a[aria-current="page"]:visited{color:var(--plum,#7a5080);border-bottom-color:var(--plum,#7a5080);text-decoration:none}
.site-name:hover,.site-nav a:hover,.foot-links a:hover{color:var(--plum,#7a5080);border-bottom-color:var(--plum,#7a5080);text-decoration:none}