/* Front Counter AI: the chrome every page shares. The design tokens (the street's colors and
   type), the gold leaf, the buttons, the fixed header with its phone menu, and the dusk footer
   with the site links. The home page (home.css) and the inner pages (site.css) load this first
   and add their own sections after it. Markup for the header and footer: see _BRIEF5.md. */

:root {
  --cream: #fbf1e1;
  --paper: #fffaf1;
  --sand: #f2dcb9;
  --sand-2: #e3c295;
  --linen: #f3e3c3;
  --brick: #b5563a;
  --brick-dk: #8f3f2a;
  --brick-lo: #6e3020;
  --green: #1f4d3a;
  --green-dk: #153628;
  --green-hi: #3c7a5d;
  --ink: #1b1a17;
  --ink-2: #4e453c;
  --ink-3: #65584b;
  --gold: #d9a441;
  --glow: #ffe3a3;
  --plum: #5d3550;

  --disp: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: max(16px, min(4vw, 56px));
  --max: 1320px;
  --head-h: 72px;
  --walk: 54px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --t-xl: max(32px, min(4vw, 56px));
  --t-l: max(24px, min(2.6vw, 36px));
  --t-m: max(17px, min(1.4vw, 20px));
  --t-s: 15px;

  --sky: linear-gradient(180deg, #fbdcbc 0, #f9cfa8 28%, #f4b986 56%, #eda461 80%, #e8963a 100%);

  /* the shared components wear the street */
  --sl-font: var(--body);
  --sl-font-display: var(--disp);
  --sl-ink: var(--ink);
  --sl-muted: #65584b;
  --sl-bg: var(--paper);
  --sl-bg-2: #f6e7cf;
  --sl-line: rgba(27, 26, 23, .16);
  --sl-accent: var(--brick);
  --sl-accent-ink: var(--paper);
  --sl-me: var(--green);
  --sl-me-ink: var(--cream);
  --sl-radius: 20px;
  --sl-radius-sm: 12px;
  --sl-focus: 0 0 0 3px rgba(181, 86, 58, .45);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); scroll-padding-top: calc(var(--head-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--glow); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; }

/* gold leaf: the sign painter's lettering */
.gold { background: linear-gradient(100deg, #c08a2c 0%, #f3cf6e 9%, #d9a441 18%, #f6dc8a 27%, #e2ad45 33%, #fff7dc 42%, #e9b84f 50%, #c08a2c 66%, #f3cf6e 80%, #d9a441 100%); background-size: 300% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; }
/* gold on warm glass needs the painter's black outline */
.gw { filter: drop-shadow(1px 0 0 #1b1a17) drop-shadow(-1px 0 0 #1b1a17) drop-shadow(0 1px 0 #1b1a17) drop-shadow(0 -1px 0 #1b1a17) drop-shadow(2px 3px 0 rgba(27, 26, 23, .3)); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font: 700 16.5px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .16s ease, background .16s ease, color .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--glow); box-shadow: 0 14px 30px -16px rgba(60, 20, 10, .7); }
.btn-ink:hover { background: #2b2925; }
.btn-line { border-color: var(--ink); color: var(--ink); background: rgba(255, 250, 241, .5); }
.btn-line:hover { background: var(--ink); color: var(--glow); }
.btn-brick { background: var(--brick); color: var(--paper); }
.btn-brick:hover { background: var(--brick-dk); }

/* ---------- header ---------- */
.site-head { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gut); background: rgba(251, 236, 214, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(27, 26, 23, .08); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; flex: none; }
.brand-name { font: 800 18px/1 var(--disp); letter-spacing: -.01em; white-space: nowrap; }
.mark { width: 30px; height: 30px; flex: none; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--brick-dk); text-decoration: underline; text-underline-offset: 4px; }
.nav a[aria-current="page"] { color: var(--brick-dk); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-sam { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 6px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: rgba(255, 250, 241, .55); color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; white-space: nowrap; }
.nav-sam:hover { background: var(--ink); color: var(--glow); }
.nav-menu { display: none; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; }
@media (max-width: 1080px) {
  .nav a { padding: 0 8px; font-size: 15px; }
  .nav-sam { padding: 0 12px; }
}
@media (max-width: 940px) {
  .nav-menu { display: inline-flex; }
  .nav { display: none; position: fixed; z-index: 99; inset: var(--head-h) 0 0 0; flex-direction: column; align-items: stretch; gap: 0; padding: 18px var(--gut) 40px; overflow: auto; background: var(--cream); border-top: 1px solid rgba(27, 26, 23, .1); }
  body.nav-open .nav { display: flex; }
  body.nav-open { overflow: hidden; }
  /* the header's backdrop blur would make it the containing block of the fixed sheet (a 59px strip) */
  body.nav-open .site-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cream); }
  body.nav-open .sam-fab { display: none; }
  .nav a { min-height: 60px; padding: 0 4px; border-radius: 0; border-bottom: 1.5px dashed rgba(217, 164, 65, .55); font: 700 24px/1.2 var(--disp); letter-spacing: -.01em; }
  .nav a:hover { text-decoration: none; }
  .nav a[aria-current="page"] { text-decoration: none; color: var(--brick-dk); }
  .nav-sam { margin: 22px 0 0; min-height: 56px; justify-content: center; font-size: 17px; background: var(--ink); color: var(--glow); }
}
@media (max-width: 640px) {
  .site-head { gap: 6px; padding: 0 12px 0 16px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 15px; }
}

/* ---------- footer: the street at dusk, then the links ---------- */
.site-foot { background: var(--ink); color: var(--cream); padding-bottom: 110px; }
.dusk { position: relative; height: max(190px, min(17vw, 250px)); overflow: hidden; background: linear-gradient(180deg, #f2b27e 0, #e08c6a 30%, #b0606c 62%, #6e3a54 100%); }
.dusk-sun { position: absolute; left: 64%; bottom: 26%; width: 150px; height: 150px; translate: -50% 50%; border-radius: 50%; background: radial-gradient(circle, #fff1cc 0, #ffd08a 34%, rgba(255, 170, 110, .55) 50%, rgba(255, 170, 110, 0) 70%); }
.dusk-row { position: absolute; left: 0; bottom: 0; width: 100%; height: 170px; object-fit: cover; object-position: left bottom; }
.dusk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(27, 26, 23, 0), var(--ink)); }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 44px var(--gut) 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.brand-foot { color: var(--cream); }
.foot-tag { margin-top: 10px; color: var(--glow); font-weight: 600; }
.foot-reach { margin-top: 18px; display: grid; gap: 4px; }
.foot-reach a { display: inline-flex; align-items: center; min-height: 44px; font: 700 20px/1.2 var(--disp); color: var(--cream); text-decoration: none; }
.foot-reach a:hover { color: var(--glow); }
.foot-reach span { color: rgba(251, 241, 225, .62); }
.foot-nav { display: contents; }
.foot-col { display: grid; align-content: start; gap: 2px; }
.foot-k { margin-bottom: 8px; font: 700 13px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.foot-col a { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 36px; padding: 4px 0; color: var(--cream); text-decoration: none; font-weight: 600; }
.foot-col a:hover { color: var(--glow); text-decoration: underline; text-underline-offset: 4px; }
.foot-col a span { color: rgba(251, 241, 225, .55); font-weight: 500; }
.foot-fine { max-width: var(--max); margin: 36px auto 0; padding: 22px var(--gut) 0; display: grid; gap: 8px; font-size: 14px; color: rgba(251, 241, 225, .66); }
.foot-fine p:first-child { padding-top: 22px; border-top: 1px solid rgba(251, 241, 225, .12); margin-top: -22px; }
.foot-fine .sl-chip-ai { margin-right: 6px; background: var(--glow); color: var(--ink); }
.foot-fine a { color: var(--cream); }
@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-in { grid-template-columns: 1fr; } .foot-reach a { font-size: 18px; } }

/* ---------- Sam's floating button on the street ---------- */
.sam-fab { background: var(--ink); color: var(--cream); box-shadow: 0 0 0 2px rgba(255, 250, 241, .55), 0 20px 40px -18px rgba(0, 0, 0, .6); }
.sam-chip, .msg-act { min-height: 44px; }