/* TIP brand shell (2026-09-29). The ONE stylesheet for the site header, footer
   and brand tokens. Source of truth: the homepage (index.html). Every public
   page links this file and gets its header/footer markup from
   scripts/brand/shell.mjs, so no page manages its own logo.
   All selectors are tip- prefixed so they never collide with page CSS. */
:root{
  --tip-paper:#F2EDE3; --tip-paper-2:#EBE4D6;
  --tip-ink:#161310; --tip-ink-soft:#3A352E; --tip-ink-faint:#6E6557;
  --tip-ox:#7A2E2E; --tip-ox-deep:#5C1F1F;
  --tip-hair:rgba(22,19,16,.16);
  --tip-display:'Fraunces',Georgia,'Times New Roman',serif;
  --tip-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tip-wrap:1120px;
}
.tip-wrap{max-width:var(--tip-wrap);margin:0 auto;padding:0 24px;box-sizing:border-box;width:100%}

/* header: identical to the homepage nav */
.tip-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;width:100%;background:rgba(242,237,227,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:border-color .2s;font-family:var(--tip-body);box-sizing:border-box}
.tip-nav.scrolled,.tip-nav.ruled{border-bottom-color:var(--tip-hair)}
.tip-nav .tip-wrap{display:flex;align-items:center;gap:28px;height:64px}
.tip-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tip-ink);font-family:var(--tip-display);font-weight:500;font-size:1.05rem;line-height:1.2;letter-spacing:normal;margin-right:auto;text-transform:none}
.tip-brand img{width:34px;height:auto;display:block}
.tip-nav a.tip-link{text-decoration:none;font:400 .95rem/1.2 var(--tip-body);color:var(--tip-ink-soft);letter-spacing:0;text-transform:none}
.tip-nav a.tip-link:hover,.tip-nav a.tip-link[aria-current="page"]{color:var(--tip-ink)}
.tip-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--tip-ox);color:#FBF7F0;text-decoration:none;font:600 1.02rem/1 var(--tip-body);letter-spacing:0;text-transform:none;padding:18px 26px;border-radius:6px;border:0;cursor:pointer;transition:background .15s}
.tip-btn:hover{background:var(--tip-ox-deep);color:#FBF7F0}
.tip-btn.sm{font-size:.9rem;padding:11px 16px;white-space:nowrap}
.tip-micro{margin-top:14px;font:400 .9rem/1.5 var(--tip-body);color:var(--tip-ink-faint)}
.tip-nav :focus-visible,.tip-foot :focus-visible{outline:2px solid var(--tip-ox);outline-offset:3px;border-radius:2px}

/* footer: one footer for every page */
.tip-foot{width:100%;border-top:1px solid var(--tip-hair);padding:40px 0 48px;font:400 .88rem/1.6 var(--tip-body);color:var(--tip-ink-faint);background:var(--tip-paper);box-sizing:border-box;text-align:left}
.tip-foot .tip-wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.tip-foot-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tip-ink);font:500 .98rem/1.2 var(--tip-display);letter-spacing:normal;margin-right:auto}
.tip-foot-brand img{width:26px;height:auto;display:block}
.tip-foot nav{display:flex;gap:20px;flex-wrap:wrap}
.tip-foot a{text-decoration:none;color:var(--tip-ink-soft)}
.tip-foot a:hover{color:var(--tip-ink)}
.tip-foot p{margin:0;flex-basis:100%;font-size:.88rem;color:var(--tip-ink-faint)}

@media (max-width:640px){
  .tip-nav a.tip-link{display:none}
  .tip-brand{font-size:.95rem}
  .tip-brand .tip-word{display:none}
  .tip-foot nav{gap:14px 20px}
  .tip-foot-brand{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.tip-nav,.tip-btn{transition:none}}