/* css/style.css — base, layout, chrome. Components live in components.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ember); }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: var(--track-head); line-height: var(--lh-head);
  margin: 0 0 var(--s-4); text-wrap: balance;
}
h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 var(--s-4); }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
::selection { background: var(--ember); color: var(--ghee); }

/* ---- layout ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.narrow { max-width: var(--wrap-narrow); }
.band { padding: var(--s-9) 0; }
.band-tight { padding: var(--s-7) 0; }
.band-wash { background: var(--linen-2); }

/* THE KITCHEN. Everything inside re-points the semantic tokens so components
   written for linen render correctly on coal without a second set of rules. */
.kitchen {
  --bg: var(--coal); --fg: var(--ghee); --muted: var(--ash); --accent: var(--turmeric);
  --rule: var(--iron); --rule-strong: #57443a; --ink-2: #d9c7a6; --linen-2: var(--soot); --linen: var(--soot);
  background: var(--coal); color: var(--ghee);
}
.kitchen a { color: var(--turmeric); }
.kitchen a:hover { color: var(--ghee); }
.kitchen ::selection { background: var(--turmeric); color: var(--coal); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- voice ---- */
.eyebrow {
  font-family: var(--font-data); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4);
}
.eyebrow::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ember); flex: none; }
.kitchen .eyebrow::before { background: var(--turmeric); }
.lede { font-size: var(--t-md); color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); }
.section-head h2 { margin-bottom: 0; }
@media (max-width: 700px) { .section-head { flex-direction: column; align-items: flex-start; } }
.card-meta { font-family: var(--font-data); }
.data, .facts, .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: var(--s-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: var(--s-5) 0; }
.prose th, .prose td { text-align: left; padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.prose td.num { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.prose th.num { font-family: var(--font-data); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
blockquote { margin: var(--s-6) 0; padding-left: var(--s-5); border-left: 3px solid var(--ember); font-size: var(--t-md); color: var(--ink-2); }

/* ---- header ---- */
.skip { position: absolute; left: -999px; top: 0; background: var(--ember); color: var(--ghee); padding: var(--s-3); z-index: 100; }
.skip:focus { left: var(--s-4); }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--coal); color: var(--ghee); border-bottom: 1px solid var(--iron); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 66px; }
.brand { font-family: var(--font-display); font-size: 1.25rem; color: inherit; text-decoration: none; letter-spacing: 0.005em; display: flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; }
.brand small { font-family: var(--font-data); font-size: var(--t-xs); color: var(--ash); letter-spacing: 0.1em; }
.nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.4rem); }
.nav a { color: var(--ghee); text-decoration: none; font-size: var(--t-sm); font-weight: 500; opacity: 0.86; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: var(--turmeric); }
.nav .btn { opacity: 1; }
.nav-toggle { display: none; background: none; border: 1px solid var(--iron); color: var(--ghee); padding: 0.5rem 0.9rem; border-radius: var(--radius); font: inherit; font-size: var(--t-sm); cursor: pointer; }
@media (max-width: 980px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 66px; background: var(--coal); border-bottom: 1px solid var(--iron); flex-direction: column; align-items: stretch; padding: var(--s-4) clamp(1rem, 4vw, 2.5rem) var(--s-6); gap: var(--s-2); }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: var(--s-3) 0; border-bottom: 1px solid var(--iron); font-size: var(--t-base); }
  .nav .btn { margin-top: var(--s-4); text-align: center; border-bottom: none; }
}

/* ---- footer ---- */
.site-footer { background: var(--coal); color: var(--ash); padding: var(--s-9) 0 var(--s-8); margin-top: var(--s-8); }
.site-footer a { color: var(--ghee); text-decoration: none; }
.site-footer a:hover { color: var(--turmeric); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-6); }
.footer-grid h3 { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ash); font-weight: 500; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--s-2); font-size: var(--t-sm); }
.footer-base { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--iron); font-size: var(--t-xs); display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.footer-owner { max-width: 70ch; margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- call bar (mobile) ---- */
.callbar { display: none; }
@media (max-width: 700px) {
  .callbar { display: flex; gap: var(--s-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--s-2) var(--s-3); background: var(--coal); border-top: 1px solid var(--iron); }
  .callbar .btn { flex: 1; text-align: center; }
  body { padding-bottom: 64px; }
}

/* ---- reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }