/* ============================================================
   Kevin Goldman · shared skin
   Tokens, header, footer, buttons. Loaded on every page.
   On legacy pages it loads after style.css and re-tones it.
   ============================================================ */
:root {
  --paper: #FFFDF6;      /* ticket stock */
  --cream: #F3F1E8;      /* butcher paper */
  --ink: #16181B;        /* cast iron */
  --ink-soft: #4B5057;
  --steel: #DDE2E4;      /* the pass */
  --steel-deep: #AEB7BB;
  --tomato: #DD4124;
  --tomato-deep: #B93019;
  --herb: #1E6A49;
  --butter: #F7CB45;
  --line: #E4E0D2;
  --white: #ffffff;
  /* legacy aliases so the June guide pages pick up the new palette */
  --bronze: var(--tomato);
  --bronze-dark: var(--tomato-deep);
  --display: 'Italiana', 'Didot', 'Times New Roman', serif;
  --body: 'Lato', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --max: 1200px;
}

/* ---------- Header ---------- */
.kg-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.kg-bar {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.kg-logo { white-space: nowrap; display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: var(--ink); }
.kg-logo b { font-family: var(--display); font-weight: 400; font-size: 1.55rem; letter-spacing: .01em; }
.kg-logo b i { font-style: normal; color: var(--tomato); }
.kg-logo small { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; }
.kg-nav ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.kg-nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.kg-nav a:hover, .kg-nav a[aria-current="page"] { border-color: var(--tomato); }
.kg-nav a.kg-cta {
  background: var(--tomato); color: #fff; padding: 11px 18px; border: 0; border-radius: 999px;
  transition: transform .15s ease, background .15s ease;
}
.kg-nav a.kg-cta:hover { background: var(--tomato-deep); transform: translateY(-1px); }
.kg-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.kg-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.kg-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kg-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kg-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.kg-tabs { border-top: 1px solid var(--line); background: var(--cream); }
.kg-tabs div { max-width: var(--max); margin: 0 auto; padding: 0 24px; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.kg-tabs div::-webkit-scrollbar { display: none; }
.kg-tabs a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-soft); text-decoration: none; padding: 11px 0; border-bottom: 2px solid transparent;
}
.kg-tabs a:hover, .kg-tabs a[aria-current="page"] { color: var(--tomato); border-color: var(--tomato); }

@media (max-width: 1100px) {
  .kg-toggle { display: block; }
  .kg-nav {
    position: fixed; inset: 0; top: 71px; background: var(--paper); padding: 28px 24px;
    transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  }
  .kg-nav.open { transform: none; }
  .kg-nav ul { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kg-nav a { font-size: .95rem; padding: 12px 0; }
  .kg-nav a.kg-cta { margin-top: 12px; }
}

/* ---------- Footer ---------- */
.kg-footer { background: var(--ink); color: #C9CDD1; font-size: .92rem; line-height: 1.65; }
.kg-foot-grid {
  max-width: var(--max); margin: 0 auto; padding: 64px 24px 36px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
}
.kg-footer .kg-logo { color: #fff; margin-bottom: 14px; }
.kg-footer .kg-logo small { color: #9AA1A7; }
.kg-footer h4 { font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--butter); margin: 0 0 14px; }
.kg-footer ul { list-style: none; margin: 0; padding: 0; }
.kg-footer li { margin-bottom: 8px; }
.kg-footer a { color: #E8EAEC; text-decoration: none; }
.kg-footer a:hover { color: var(--butter); }
.kg-fine {
  max-width: var(--max); margin: 0 auto; padding: 22px 24px 40px; border-top: 1px solid #2B2F34;
  font-size: .78rem; color: #8C939A; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}
@media (max-width: 900px) { .kg-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kg-foot-grid { grid-template-columns: 1fr; } }

/* ---------- Legacy page re-tone (June guides, vendors, about) ---------- */
body { background: var(--paper); }
.eyebrow { font-family: var(--mono); letter-spacing: .18em; font-weight: 500; }
.btn { border-radius: 999px; font-family: var(--mono); letter-spacing: .14em; }
.facts-band { background: var(--ink); }
.facts-band .num { color: var(--butter); }
header.site, footer.site { display: none; } /* replaced by chrome.js */

:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }