/* ─────────────────────────────────────────────────────────────
   Dev&Stone — Swiss Minimal design tokens + components
   ───────────────────────────────────────────────────────────── */

:root {
  /* Palette ─ warm, neutral, restrained */
  --ink:        #1a1a1a;
  --ink-80:     rgba(26,26,26,0.80);
  --ink-65:     rgba(26,26,26,0.65);
  --ink-72:     rgba(26,26,26,0.72);
  --ink-62:     rgba(26,26,26,0.62);
  --ink-12:     rgba(26,26,26,0.12);
  --ink-08:     rgba(26,26,26,0.08);
  --paper:      #f4f1ec;
  --paper-2:    #ece8df;
  --accent:     #8a3a18;   /* burnt sienna — used sparingly */
  --rule:       var(--ink-12);
  --rule-soft:  var(--ink-08);

  /* Type */
  --font-sans:  'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (1.25 ratio on a 14px base, hand-tuned for display sizes; fluid clamp on H1/H2/lead) */
  --t-meta:     11px;
  --t-body:     14.5px;
  --t-wordmark: 17px;
  --t-lead:     clamp(16px, 13px + 0.4vw, 18px);
  --t-h3:       22px;
  --t-numeric:  28px;
  --t-h2:       clamp(26px, 8.5px + 2.3vw, 38px);
  --t-h1:       clamp(40px, 5px + 4.6vw, 64px);

  /* Geometry */
  --dot-size:   7px;

  /* Spacing — scale per DESIGN.md §components */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   18px;
  --space-lg:   24px;
  --space-xl:   64px;
  --gutter:     80px;
  --row-pad:    var(--space-md);

  /* Motion */
  --ease:       cubic-bezier(.2,.7,.3,1);
}

@media (max-width: 760px) {
  :root {
    --gutter:    24px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Reset
   ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }

/* Screen-reader-only — visually hide while keeping in the AOM */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────
   Mono labels — the typographic tell of this system
   ───────────────────────────────────────────────────────────── */
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.meta b { color: var(--ink); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────
   Layout shell
   ───────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */
.site-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  font-size: var(--t-wordmark);
  font-weight: 600;
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .amp { color: var(--ink-62); margin: 0 1px; font-weight: 500; }
.foot-row .amp { opacity: 0.5; }

.site-nav { display: flex; gap: 22px; }
.site-nav a { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-65); transition: color .15s var(--ease); }
.site-nav a:hover { color: var(--ink); }

.ext-arrow { display: inline-block; transition: transform .2s var(--ease); }
.site-nav a:hover .ext-arrow,
.foot-links a:hover .ext-arrow { transform: translate(1px, -2px); }

@media (max-width: 540px) {
  .site-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-nav { gap: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--rule);
}
.hero h1 {
  margin: 12px 0 0;
  font-size: var(--t-h1);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-md);
}
.hero-aside p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-65);
  max-width: 38ch;
}
.hero-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-stats .stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.hero-stats .stat .num {
  font-family: var(--font-mono);
  font-size: var(--t-numeric);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-stats .stat .lbl {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-72);
}

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 40px; }
}

/* ─────────────────────────────────────────────────────────────
   Apps index — desktop table + mobile card list
   ───────────────────────────────────────────────────────────── */
.apps-section { padding: 36px 0 56px; flex: 1; }

.apps-section .section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
}
.apps-section .section-head h2 {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.apps-table { width: 100%; }
.apps-list { list-style: none; margin: 0; padding: 0; }

.apps-row {
  display: grid;
  grid-template-columns: 36px 1.2fr 2.4fr 130px 90px;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--row-pad) 0;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.apps-row.is-header {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.apps-row.is-header > * {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.apps-row.is-link { cursor: pointer; }
.apps-row.is-empty {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: var(--space-lg) 0;
}
.apps-row .col-right { text-align: right; }
.apps-row.is-link::before {
  content: "";
  position: absolute;
  inset: 0 -8px;
  background: linear-gradient(90deg, transparent, var(--paper-2) 6%, var(--paper-2) 94%, transparent);
  opacity: 0;
  transition: opacity .2s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.apps-row.is-link > * { position: relative; z-index: 1; }
.apps-row.is-link:hover::before { opacity: 1; }
.apps-row.is-link:hover .row-cta { color: var(--accent); }
.apps-row.is-link:hover .row-cta .arrow { transform: translateX(3px); }

.apps-row .row-num {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--ink-62);
  font-variant-numeric: tabular-nums;
}
.apps-row > * { min-width: 0; }
.apps-row .row-name {
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
.apps-row .row-name .sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  color: var(--ink-62);
  font-weight: 400;
  text-transform: lowercase;
}
.apps-row .row-desc { color: var(--ink-65); font-size: var(--t-body); overflow-wrap: anywhere; }
.apps-row .row-cta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-65);
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: flex-end;
  transition: color .15s var(--ease);
}
.apps-row .row-cta .arrow { transition: transform .2s var(--ease); display: inline-block; }

/* Status pill — minimal: dot + label, no fills */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-65);
}
.status .dot {
  width: var(--dot-size); height: var(--dot-size); border-radius: var(--dot-size);
  background: var(--ink); flex: 0 0 auto;
}
.status.beta .dot { background: var(--ink); opacity: 0.45; }
.status.wip  .dot { background: transparent; border: 1px solid var(--ink-72); width: 6px; height: 6px; }
.status.live { color: var(--ink); }

/* Filter chips */
.filters {
  display: inline-flex;
  gap: var(--space-xs);
  padding: 3px;
  background: var(--paper-2);
  border-radius: 999px;
  position: relative;
}
.filter-puck {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  width: 0;
  background: var(--ink);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform-origin: left center;
}
.filters button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-65);
  cursor: pointer;
  /* 50ms delay lags the color flip behind the puck slide so the active text never goes paper-on-paper. */
  transition: color .2s var(--ease) .05s;
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.filters button[aria-pressed="true"] {
  background: transparent;
}
.filters.puck-ready button[aria-pressed="true"] {
  color: var(--paper);
}
.filters button:not([aria-pressed="true"]):hover { color: var(--ink); }

/* Mobile: collapse table into cards */
@media (max-width: 760px) {
  .apps-row.is-header { display: none; }
  .apps-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num   name"
      "num   desc"
      "stat  cta";
    gap: 4px 16px;
    padding: 18px 0;
    align-items: start;
  }
  .apps-row .row-num   { grid-area: num; padding-top: 5px; }
  .apps-row .row-name  { grid-area: name; }
  .apps-row .row-desc  { grid-area: desc; padding-bottom: 10px; }
  .apps-row .row-status{ grid-area: stat; }
  .apps-row .row-cta   { grid-area: cta; justify-self: end; }
  .apps-row.is-link::before { inset: 0; }
  .apps-section .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Touch-target floor: ≥44px on filter chips */
  .filters button {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
  }
}

/* Touch-target floor: ≥44px on nav and footer links when stacked */
@media (max-width: 540px) {
  .site-nav a,
  .foot-row a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--rule);
  padding: 22px 0 32px;
}
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.foot-row a { color: var(--ink-65); transition: color .15s var(--ease); }
.foot-row a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 22px; }

/* ─────────────────────────────────────────────────────────────
   Focus — keyboard navigation
   ───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.filters button:focus-visible { outline-offset: 2px; }
.filters button[aria-pressed="true"]:focus-visible {
  outline-color: var(--paper);
  outline-offset: -3px;
}
.apps-row.is-link:focus-visible {
  outline-offset: -2px;
}

/* ─────────────────────────────────────────────────────────────
   Reveal animation
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); animation: reveal .55s var(--ease) forwards; }
  .reveal[data-d="1"]  { animation-delay: .04s; }
  .reveal[data-d="2"]  { animation-delay: .10s; }
  .reveal[data-d="3"]  { animation-delay: .16s; }
  .reveal[data-d="4"]  { animation-delay: .22s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }

  /* Hero italic — sets after the H1 lands, the press impression making contact */
  .hero h1 em {
    color: var(--ink);
    animation: ink-set .65s var(--ease) .65s forwards;
  }
  @keyframes ink-set { to { color: var(--accent); } }

  /* Filter row stagger — used by JS on filter swap */
  @keyframes row-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ─────────────────────────────────────────────────────────────
   Selection
   ───────────────────────────────────────────────────────────── */
::selection { background: var(--ink); color: var(--paper); }