/* Generated by scripts/build-site-header.ts — do not edit.
 * Source of truth: app/_lib/site-footer.ts.
 * Mounted by the static pages under public/ and by the blog.
 */

:root {
  --ink: #0d0c0a;
  --ink-faint: #8c8983;
  --ink-mute: #5c5952;
  --ink-soft: #403d38;
  --line: #dce1e8;
  --line-hover: #c2c9d3;
  --line-soft: #eceff4;
  --paper-warm: #f7f7f8;
  --sans: 'Albert Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* Structure, lifted from app/globals.css. */
.fg-logo.fg-logo--merged { gap: 0; }
.fg-logo--merged svg.brand-fmark { height: 16px; width: auto; flex: none; margin-right: 2px; transform: translateY(-0.5px); }
.fg-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.fg-logo em { font-style: italic; color: inherit; }
.fg-footer { padding: clamp(44px, 6vw, 72px) 0 32px; background: var(--paper-warm); border-top: 1px solid var(--line-soft); width: 100%; overflow-x: clip; }
.fg-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; margin-bottom: 40px; width: 100%; align-items: start; }
.fg-footer-brand { min-width: 0; }
.fg-footer-tag { margin: 12px 0 18px; font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); max-width: 220px; }
.fg-footer-social { display: flex; gap: 14px; flex-wrap: wrap; }
.fg-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-mute); transition: color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; flex-shrink: 0; }
.fg-footer-social a:hover { color: var(--ink); border-color: var(--line-hover); transform: translateY(-2px); }
.fg-footer-col { min-width: 0; }
.fg-footer-col h3 { margin: 0 0 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.fg-footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fg-footer-col a { font-family: var(--sans); font-size: 14px; color: var(--ink-mute); text-decoration: none; transition: color 0.16s ease; }
.fg-footer-col a:hover { color: var(--ink); }
.fg-footer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.fg-footer-foot-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fg-footer-email { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-mute); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink-mute) 35%, transparent); transition: color 0.16s ease, border-color 0.16s ease; }
.fg-footer-email:hover { color: var(--ink); border-bottom-color: var(--ink); }
.fg-footer-toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translateX(-50%) translateY(12px); max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 40px rgba(13, 12, 10, 0.14); font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.fg-footer-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.fg-footer-foot p { margin: 0; font-family: var(--sans); font-size: 13px; color: var(--ink-faint); }
@media (max-width: 880px) {
  .fg-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .fg-footer-brand { grid-column: 1 / -1; }
  .fg-footer-tag { max-width: 36em; }
  .fg-footer-foot { flex-direction: column; align-items: flex-start; }
  .fg-footer-foot-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .fg-footer { padding: 40px 0 28px; }
  .fg-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fg-footer-brand { grid-column: 1 / -1; }
  .fg-footer-col a { padding: 11px 0; }
  .fg-footer-email { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Skin, from app/footer-skin.css. */
/*
 * The site footer's Nightfall styling — the ONE place it is defined.
 *
 * Concatenated into the generated `public/_fluttergo-footer.css` by
 * scripts/build-site-header.ts, alongside the structural `.fg-footer` rules
 * lifted from globals.css. Every surface loads that sheet: the Astro pages
 * link it, and the static pages and blog get it injected by
 * `_fluttergo-footer.js` when the footer mounts.
 *
 * It used to live in three places — home-nightfall.css for the homepage,
 * _fluttergo-nightfall.css for everything else, and globals.css underneath
 * both — which is why the homepage footer sat 635px tall against 445px
 * elsewhere, and why the wordmark rendered as a stray 16px line of Inter on
 * every page that was not the homepage: the rule styling it was homepage-only.
 *
 * Spacing follows the sub-pages, which read better than the homepage's
 * roomier version: a 72px opening, 40px down to the base bar, 32px between
 * columns.
 *
 * THE `html` PREFIX IS DELIBERATE. Astro inlines its bundled CSS into <head>
 * AFTER any hand-placed <link>, so on a specificity tie the bundle wins
 * wherever this sheet sits. The leading `html` outranks the equivalent
 * globals.css rule instead of depending on load order.
 */

html .fg-footer {
  background: transparent;
  border-top: 0;
  position: relative;
  padding: 72px 0 32px;
  margin-top: 0;
}

/* Hairline echoing the sky→ember scroll rail, so the page closes on the two
   colours it opens with. */
html .fg-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 200, 255, 0.35) 22%, rgba(255, 106, 61, 0.3) 72%, transparent);
}

html .fg-footer > .container {
  max-width: none;
  padding: 0;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

html .fg-footer .fg-footer-grid {
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 0;
  margin-bottom: 40px;
}

html .fg-footer .fg-footer-tag {
  color: var(--nf-muted, #94a0b6);
  font-size: 14.5px;
  /* 220px forced "…apps with / AI." onto a two-word orphan line. */
  max-width: 30ch;
  margin: 14px 0 22px;
}

html .fg-footer .fg-footer-col h3 {
  color: var(--nf-dim, #77839b);
  font-family: var(--nf-mono, 'JetBrains Mono Variable', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 500;
  margin-bottom: 18px;
}
html .fg-footer .fg-footer-col ul { gap: 12px; }
html .fg-footer .fg-footer-col a {
  color: var(--nf-muted, #94a0b6);
  font-size: 14.5px;
  position: relative;
  display: inline-block;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
html .fg-footer .fg-footer-col a:hover {
  color: var(--nf-star, #e9eef9);
  transform: translateX(3px);
}

html .fg-footer .fg-footer-social { gap: 10px; }
html .fg-footer .fg-footer-social a {
  border-color: var(--nf-line, rgba(148, 170, 220, 0.13));
  color: var(--nf-muted, #94a0b6);
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
html .fg-footer .fg-footer-social a:hover {
  color: var(--nf-star, #e9eef9);
  border-color: rgba(91, 200, 255, 0.45);
  background: rgba(91, 200, 255, 0.07);
}

html .fg-footer .fg-footer-foot {
  border-top-color: var(--nf-line, rgba(148, 170, 220, 0.13));
  color: var(--nf-dim, #77839b);
  padding-top: 22px;
}
html .fg-footer .fg-footer-foot p { color: var(--nf-dim, #77839b); font-size: 13px; }

html .fg-footer .fg-logo,
html .fg-footer .fg-logo span { color: var(--nf-star, #e9eef9); }
html .fg-footer .fg-logo em { color: var(--nf-dim, #77839b); }
html .fg-footer .fg-footer-email {
  color: var(--nf-muted, #94a0b6);
  border-bottom-color: rgba(148, 170, 220, 0.35);
}
html .fg-footer .fg-footer-email:hover {
  color: var(--nf-star, #e9eef9);
  border-bottom-color: var(--nf-star, #e9eef9);
}

@media (max-width: 880px) {
  html .fg-footer .fg-footer-social a { width: 44px; height: 44px; }
  /* The five-track desktop row is set at `html .fg-footer ...` specificity, so
     the generic `.fg-footer-grid` breakpoints below it never took effect: on a
     phone the four link columns were squeezed to ~36px each and the headings
     broke mid-word ("RESO / URCE / S"). Restate the responsive tracks at the
     same specificity so they actually win. */
  html .fg-footer .fg-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  html .fg-footer .fg-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  html .fg-footer .fg-footer-grid { gap: 26px 20px; }
  /* The links carry 11px of vertical padding on a phone so each row is a real
     44px target. The 12px list gap on top of that stretched a four-item column
     to more than 200px, so hand the spacing over to the padding. */
  html .fg-footer .fg-footer-col ul { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html .fg-footer .fg-footer-col a:hover { transform: none; }
  html .fg-footer .fg-footer-col a,
  html .fg-footer .fg-footer-social a { transition: none; }
}