/* Shared by index.html and plugins.html: palette, background, the header
   menu, sections, the rack, text links, footer. Page-only styles (the
   hero, the signup, the phone frame) stay inline in their page. */
:root {
  --bg: #060607;
  --fg: #f0f0f0;
  --dim: rgba(255,255,255,.55);
  --dimmer: rgba(255,255,255,.35);
  --line: rgba(255,255,255,.14);
  --accent: #64d2ff;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  /* static dot lattice (a nod to Point Cloud) over a barely-there
     monochrome drift — pure CSS, no animation */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1.4px),
    radial-gradient(110% 90% at 68% 38%, #131315 0%, #0b0b0c 45%, var(--bg) 100%);
  background-size: 17px 17px, auto;
  background-attachment: fixed, fixed;
  background-repeat: repeat, no-repeat;
  color: var(--fg); font-family: var(--mono);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }

/* ---------- header menu ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  max-width: 1040px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.nav-home {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .35em;
  text-decoration: none;
}
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 11px; letter-spacing: .3em; text-decoration: none; color: var(--dim);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a[aria-current="page"] { color: var(--fg); border-color: var(--fg); }
@media (max-width: 420px) {
  .nav-home { font-size: 12px; letter-spacing: .25em; }
  .nav-links { gap: 16px; }
  .nav-links a { letter-spacing: .2em; }
}

/* ---------- sections + the rack ---------- */
section { max-width: 1040px; margin: 0 auto; padding: 110px 24px 0; }
.kicker { font-size: 15px; font-weight: 600; letter-spacing: .45em; color: var(--dim); margin-bottom: 42px; }
.kicker::before { content: "— "; color: var(--dimmer); }
/* No boxes (owner, 2026-10-14): a still with rounded corners and no
   outline, the name and one short line under it. A card whose
   still is missing shows just its text. */
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 52px 28px; }
/* The stills are 9:16 phone frames, shown as a 3:4 centre crop. */
.fx img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #000;
  border-radius: 8px; margin-bottom: 18px;
}
/* Laid out from the start (a display:none lazy image never loads), faded in
   on load; a missing still removes its img (index.html script). */
.fx img { opacity: 0; transition: opacity .4s; }
.fx.has-img img { opacity: 1; }
.fx-name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .3em; }
.fx-tag { font-size: 10px; font-weight: 400; letter-spacing: .2em; color: var(--dim); }
.fx-desc { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--dim); }
.fx-desc b { color: var(--fg); font-weight: 600; }
/* Two up on phones; the name's tracking is tightened so DIFFERENCE fits. */
@media (max-width: 480px) {
  .rack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 16px; }
  .fx img { border-radius: 6px; margin-bottom: 14px; }
  .fx-name { font-size: 12px; letter-spacing: .2em; }
  .fx-desc { font-size: 12px; line-height: 1.6; }
}

/* ---------- text links ---------- */
.more { font-size: 11px; letter-spacing: .25em; color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.more:hover { color: var(--fg); border-color: var(--fg); }
/* Capsule link (owner, 2026-10-14): the app's chrome pills, outlined. */
.pill {
  display: inline-block; padding: 12px 22px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  font-size: 11px; letter-spacing: .25em; text-decoration: none; color: var(--fg);
  transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- footer ---------- */
footer {
  margin-top: 120px; border-top: 1px solid var(--line);
  padding: 34px 24px 44px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; align-items: center;
  font-size: 11px; letter-spacing: .1em; color: var(--dimmer);
}
footer a { text-decoration: none; color: var(--dim); }
footer a:hover { color: var(--fg); }
footer .foot-logo img { display: block; height: 34px; width: 34px; opacity: .8; }
footer .foot-logo:hover img { opacity: 1; }