/* sufiplugins.com — the shipping log.
   Light, dense, precise. The ONLY colour on the page is the green in the
   release heatmap and the live dots: everything else is ink on paper. */

:root {
  color-scheme: light;
  --paper: #fbfaf7;
  --panel: #ffffff;
  --ink: #14150f;
  --ink-2: #4a4c44;
  --muted: #82857a;
  --line: rgba(20, 21, 15, 0.13);
  --line-soft: rgba(20, 21, 15, 0.07);

  /* Sequential ramp, one hue, light to dark. Empty is neutral grey so "no ship"
     never reads as "a little ship". */
  --heat-0: #e8e7e0;
  --heat-1: #cfe9d2;
  --heat-2: #97d3a4;
  --heat-3: #52b776;
  --heat-4: #1c8f4d;
  --heat-5: #0d6534;

  --pad-x: clamp(20px, 4.5vw, 68px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1; }

.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.wrap { width: min(1280px, 100%); margin: 0 auto; }
.section { padding: clamp(44px, 5.5vw, 80px) var(--pad-x); }
.label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--pad-x);
  background: rgba(251, 250, 247, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.site-nav a { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
.nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: var(--ink); color: var(--paper) !important; }

/* hero */
.hero { padding: clamp(52px, 7vw, 96px) var(--pad-x) clamp(28px, 3vw, 40px); }
.hero h1 { font-size: clamp(38px, 5.6vw, 76px); line-height: 0.98; max-width: 18ch; text-wrap: balance; }
.hero .lede { margin-top: 22px; max-width: 62ch; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; text-wrap: pretty; }

/* stat row */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin-top: clamp(32px, 4vw, 52px); background: var(--line); border: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--panel); }
.stat b { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; }
.stat span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-family: "JetBrains Mono", ui-monospace, monospace; }

/* heatmap */
.heat-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.heat-head h2 { font-size: clamp(22px, 2.4vw, 30px); }
.heat-scroll { overflow-x: auto; padding-bottom: 6px; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 4px; width: max-content; }
.cell { width: 22px; height: 22px; border-radius: 3px; background: var(--heat-0); }
.cell[data-n="1"] { background: var(--heat-1); }
.cell[data-n="2"] { background: var(--heat-2); }
.cell[data-n="3"] { background: var(--heat-3); }
.cell[data-n="4"] { background: var(--heat-4); }
.cell[data-n="5"] { background: var(--heat-5); }
.cell.pad { background: transparent; }
.cell:not(.pad):hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.months { display: flex; gap: 4px; width: max-content; margin-bottom: 8px; }
.month { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; color: var(--muted); }
.heat-legend { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; color: var(--muted); }
.heat-legend .cell { width: 14px; height: 14px; }
.heat-legend .cell:hover { outline: none; }
#tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  padding: 8px 11px; background: var(--ink); color: var(--paper);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.5;
  transition: opacity 100ms ease; max-width: 280px;
}
#tip.on { opacity: 1; }

/* apps table */
.apps { width: 100%; border-collapse: collapse; margin-top: 22px; }
.apps th { text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--ink); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.apps td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 15px; color: var(--ink-2); }
.apps td.name { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; }
.apps td.blurb { line-height: 1.55; }
.apps .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--heat-4); margin-right: 7px; vertical-align: middle; }
.apps a.open { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.apps a.open:hover { border-color: var(--ink); }

/* log */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 15px; border: 1px solid var(--line); background: var(--panel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.day { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; padding: 22px 0 4px; border-top: 1px solid var(--line); }
.day > .when { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink); white-space: nowrap; padding-top: 2px; }
.day-entries { display: flex; flex-direction: column; }
.entry { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 22px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.day-entries > .entry:first-child { border-top: 0; padding-top: 0; }
.entry .what { display: flex; flex-direction: column; gap: 3px; }
.entry .what b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.entry .what span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.entry ul { display: flex; flex-direction: column; gap: 7px; }
.entry li { font-size: 15px; line-height: 1.55; color: var(--ink-2); padding-left: 16px; position: relative; }
.entry li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 1px; background: var(--muted); }
.more { display: flex; justify-content: center; margin-top: 28px; }
.more button { min-height: 52px; padding: 0 28px; border: 1px solid var(--ink); background: transparent; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.more button:hover { background: var(--ink); color: var(--paper); }
.count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--muted); }

/* about + footer */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.about h2 { font-size: clamp(26px, 3vw, 38px); }
.about p { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 32px var(--pad-x) 48px; border-top: 1px solid var(--line); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a, .site-footer span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--muted); }

@media (max-width: 720px) {
  .entry, .day { grid-template-columns: 1fr; gap: 8px; }
  .cell { width: 15px; height: 15px; }
  .site-header { flex-wrap: wrap; gap: 10px; }
  .site-nav { width: 100%; flex-wrap: wrap; gap: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #tip { transition: none; } }