/* Trustli — shared site chrome (nav, footer, motion, type accents).
   Loaded alongside each page's own inline styles; does not redefine
   page-local component classes (.card, .q, .cls, etc). */

:root{
  --tl-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

/* ---------- top nav ---------- */
.tl-nav{
  position:sticky; top:0; z-index:20;
  background:var(--ground); border-bottom:1px solid var(--line);
}
.tl-nav-row{
  max-width:920px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:56px;
}
.tl-mark{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--ink); font:600 14.5px/1 var(--mono); letter-spacing:.04em;
  flex:none;
}
.tl-mark svg{ flex:none; display:block; }
.tl-mark svg .ring{ stroke:var(--accent); }
.tl-mark svg .check{ stroke:var(--accent); }
.tl-links{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
}
.tl-links a{
  color:var(--muted); text-decoration:none; font-size:13.8px; font-weight:500;
  padding:8px 10px; border-radius:5px; white-space:nowrap;
}
.tl-links a:hover{ color:var(--ink); background:var(--accent-soft); }
.tl-links a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.tl-links a[aria-current="page"]{ color:var(--accent); }
.tl-toggle{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); cursor:pointer; flex:none;
}
.tl-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tl-toggle svg{ display:block; }

@media (max-width:760px){
  .tl-toggle{ display:inline-flex; }
  .tl-links{
    position:absolute; left:0; right:0; top:56px;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line);
    padding:6px 14px 12px; max-height:0; overflow:hidden;
  }
  .tl-nav.is-open .tl-links{ max-height:420px; padding:6px 14px 12px; }
  .tl-links a{ padding:12px 6px; border-bottom:1px solid var(--line); border-radius:0; }
  .tl-links a:last-child{ border-bottom:none; }
}

/* ---------- footer ---------- */
.tl-footer{
  border-top:1px solid var(--line); margin-top:46px; padding:22px 0 40px;
}
.tl-footer-row{
  max-width:920px; margin:0 auto; padding:0 20px;
}
.tl-sitemap{
  display:flex; flex-wrap:wrap; gap:4px 2px; margin:0 0 12px;
  font:500 13.2px/1 var(--mono);
}
.tl-sitemap a{ color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:4px; }
.tl-sitemap a:hover{ color:var(--accent); background:var(--accent-soft); }
.tl-sitemap span{ color:var(--faint); padding:6px 0; }
.tl-signoff{ color:var(--faint); font-size:12.5px; letter-spacing:.02em; }

/* ---------- serif display type: audit/document register, not app chrome ---------- */
.tl-serif, h1{ font-family:var(--tl-display); font-weight:600; }

/* ---------- calm entrance on load ---------- */
@media (prefers-reduced-motion:no-preference){
  .tl-rise{ animation:tl-rise .5s cubic-bezier(.22,.61,.36,1) both; }
  .tl-rise.tl-d1{ animation-delay:.06s; }
  .tl-rise.tl-d2{ animation-delay:.12s; }
  @keyframes tl-rise{
    from{ opacity:0; transform:translateY(9px); }
    to{ opacity:1; transform:none; }
  }
}

/* ---------- progressive scroll reveal (site.js adds/removes classes; content
   is visible by default so this only ever adds polish, never hides text) ---------- */
.tl-observe{ transition:opacity .5s ease, transform .5s ease; }
.tl-observe.tl-pre{ opacity:0; transform:translateY(12px); }
.tl-observe.tl-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .tl-observe.tl-pre{ opacity:1; transform:none; }
}