@import url("./design/tokens.css");
@import url("./design/base.css");

/* ---- Header ---------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-bg);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(8px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--ss-sp-4);
  gap: var(--ss-sp-4);
}
.site-header .brand {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  font-family: var(--ss-font-display);
  font-size: var(--ss-fs-3); font-weight: 600;
  color: var(--ss-fg); text-decoration: none; letter-spacing: -0.01em;
}
.site-header .brand .dot { color: var(--ss-accent); }
.site-header nav { display: flex; gap: var(--ss-sp-5); flex-wrap: wrap; }
.site-header nav a {
  font-size: var(--ss-fs-6); color: var(--ss-fg-muted);
  text-decoration: none;
}
.site-header nav a[aria-current="page"] { color: var(--ss-fg); }
.site-header nav a:hover { color: var(--ss-accent); }

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--ss-line);
  background: var(--ss-bg-elev);
  padding-block: var(--ss-sp-7);
  margin-top: var(--ss-sp-9);
  color: var(--ss-fg-muted); font-size: var(--ss-fs-7);
}
.site-footer .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ss-sp-5); }
.site-footer h4 { font-size: var(--ss-fs-7); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ss-fg-faint); margin-bottom: var(--ss-sp-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-sp-2); }
.site-footer a { color: var(--ss-fg-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ss-accent); }
.site-footer .colophon { grid-column: 1 / -1; padding-top: var(--ss-sp-5); border-top: 1px solid var(--ss-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ss-sp-3); }

/* ---- Hero ------------------------------------------------------------ */
.hero {
  padding-block: clamp(var(--ss-sp-7), 10vw, var(--ss-sp-9));
  border-bottom: 1px solid var(--ss-line);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(245,197,24,0.08), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(124,193,255,0.05), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .eyebrow {
  display: inline-block; font-family: var(--ss-font-mono);
  font-size: var(--ss-fs-7); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ss-accent); margin-bottom: var(--ss-sp-4);
}
.hero h1 { max-width: 22ch; margin-bottom: var(--ss-sp-5); }
.hero p.lede { max-width: 52ch; font-size: var(--ss-fs-4); color: var(--ss-fg-muted); margin-bottom: var(--ss-sp-6); }
.hero .cta { display: flex; gap: var(--ss-sp-3); flex-wrap: wrap; }

/* ---- Sections -------------------------------------------------------- */
section { padding-block: var(--ss-sp-8); }
section + section { border-top: 1px solid var(--ss-line-soft); }
.section-eyebrow { font-family: var(--ss-font-mono); font-size: var(--ss-fs-7); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ss-fg-faint); margin-bottom: var(--ss-sp-2); }
.section-title { margin-bottom: var(--ss-sp-3); }
.section-lede { color: var(--ss-fg-muted); max-width: 60ch; margin-bottom: var(--ss-sp-6); }

/* ---- Cards ---------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ss-sp-4); }
.card {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  padding: var(--ss-sp-5);
  display: flex; flex-direction: column; gap: var(--ss-sp-3);
  transition: border-color var(--ss-dur-2) var(--ss-ease), transform var(--ss-dur-2) var(--ss-ease);
}
.card:hover { border-color: var(--ss-fg-faint); transform: translateY(-1px); }
.card h3 { margin: 0; font-size: var(--ss-fs-3); }
.card p { color: var(--ss-fg-muted); margin: 0; }

/* ---- Services list -------------------------------------------------- */
.services { display: grid; gap: var(--ss-sp-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.service {
  border-top: 1px solid var(--ss-line);
  padding-top: var(--ss-sp-5);
}
.service .price {
  font-family: var(--ss-font-mono); font-size: var(--ss-fs-7);
  color: var(--ss-accent); letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---- Properties (3 product callouts) ------------------------------- */
.properties { display: grid; gap: var(--ss-sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.property {
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  padding: var(--ss-sp-5);
  background: var(--ss-bg-card);
  display: flex; flex-direction: column; gap: var(--ss-sp-3);
}
.property .name { font-family: var(--ss-font-display); font-size: var(--ss-fs-3); }
.property .domain { font-family: var(--ss-font-mono); font-size: var(--ss-fs-7); color: var(--ss-fg-faint); }
.property a.cta { color: var(--ss-accent); text-decoration: none; align-self: flex-start; border-bottom: 1px solid var(--ss-accent-soft); }
.property a.cta:hover { color: var(--ss-fg); border-color: var(--ss-fg); }

/* ---- Paper list ---------------------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-sp-3); }
.list-item {
  display: grid; gap: var(--ss-sp-2);
  padding: var(--ss-sp-4) 0;
  border-bottom: 1px solid var(--ss-line-soft);
}
.list-item h3 { margin: 0; font-size: var(--ss-fs-4); font-family: var(--ss-font-display); }
.list-item .meta { font-family: var(--ss-font-mono); font-size: var(--ss-fs-7); color: var(--ss-fg-faint); display: flex; gap: var(--ss-sp-3); flex-wrap: wrap; }
.list-item .meta .sep { color: var(--ss-fg-faint); }
.list-item .summary { color: var(--ss-fg-muted); margin: 0; max-width: 70ch; }

/* ---- Filter bar ---------------------------------------------------- */
.filter-bar {
  display: flex; gap: var(--ss-sp-3); align-items: center; flex-wrap: wrap;
  padding-block: var(--ss-sp-4);
  border-bottom: 1px solid var(--ss-line);
  margin-bottom: var(--ss-sp-5);
}
.filter-bar input[type="search"] {
  flex: 1; min-width: 200px;
  background: var(--ss-bg-elev);
  border: 1px solid var(--ss-line);
  color: var(--ss-fg);
  padding: 0.65em 0.85em;
  border-radius: var(--ss-radius-md);
  font: inherit;
}
.filter-bar input[type="search"]:focus { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.filter-bar .count { color: var(--ss-fg-muted); font-family: var(--ss-font-mono); font-size: var(--ss-fs-7); }

/* ---- Changelog ----------------------------------------------------- */
.runs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-sp-3); }
.run {
  padding: var(--ss-sp-4);
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-md);
  font-family: var(--ss-font-mono);
  font-size: var(--ss-fs-7);
  display: grid; gap: var(--ss-sp-2);
}
.run .row { display: flex; gap: var(--ss-sp-4); flex-wrap: wrap; color: var(--ss-fg-muted); }
.run .row .k { color: var(--ss-fg-faint); }
.run .row .v { color: var(--ss-fg); }
.run.has-error { border-color: var(--ss-danger); }
.run.has-error .v.err { color: var(--ss-danger); }

/* ---- Form (engagements) ------------------------------------------- */
form.engagement {
  display: grid; gap: var(--ss-sp-4); max-width: 38rem;
}
form.engagement label { display: grid; gap: var(--ss-sp-2); font-size: var(--ss-fs-6); color: var(--ss-fg-muted); }
form.engagement input,
form.engagement select,
form.engagement textarea {
  background: var(--ss-bg-elev);
  border: 1px solid var(--ss-line);
  color: var(--ss-fg);
  padding: 0.7em 0.85em;
  border-radius: var(--ss-radius-md);
  font: inherit;
}
form.engagement textarea { min-height: 10rem; resize: vertical; }
form.engagement input:focus,
form.engagement select:focus,
form.engagement textarea:focus { outline: 2px solid var(--ss-accent); outline-offset: 1px; }

/* ---- Misc ---------------------------------------------------------- */
.empty {
  padding: var(--ss-sp-8) var(--ss-sp-5);
  text-align: center;
  color: var(--ss-fg-muted);
  border: 1px dashed var(--ss-line);
  border-radius: var(--ss-radius-lg);
}
.kbd { font-family: var(--ss-font-mono); background: var(--ss-bg-elev); border: 1px solid var(--ss-line); padding: 0.1em 0.4em; border-radius: var(--ss-radius-sm); font-size: var(--ss-fs-7); }