/* SIN product pages — an ACCENT LAYER over sinvaux-main.css, never a second
   design system.

   The company site's structure, typography (Bodoni Moda + Inter), grain and
   hairline vocabulary are inherited untouched. What changes is the accent:
   grenat gives way to the violet of the SIN brand kit, the same way Aftermath
   carries its own identity inside the same house.

   WHY NOT A FULL RESKIN. The product directive is explicit about avoiding
   "generic SaaS purple", "excessive glassmorphism" and "giant gradients
   everywhere", and the fastest route to all three is a purple stylesheet with
   opinions. So violet appears in exactly four places — the mark, links and
   buttons, one hairline state, and the bolt itself — and the page underneath
   stays the disciplined editorial layout the rest of the site uses. */

.sin-scope {
  --violet: #A855F7;
  --violet-soft: #C084FC;
  --violet-deep: #7C3AED;
  --violet-line: rgba(168, 87, 247, 0.28);
  --violet-wash: rgba(168, 87, 247, 0.07);
}

/* The grenat button, restated in violet for this product only. Scoped so a
   stray class on another page cannot pick it up. */
.sin-scope .btn.violet {
  background: var(--violet-deep);
  border: 1px solid var(--violet);
  color: #FFFFFF;
}
.sin-scope .btn.violet:hover { background: var(--violet); }

.sin-scope .kicker { color: var(--violet-soft); }
.sin-scope a:not(.btn):not(.nav-link):hover { color: var(--violet-soft); }

/* ---------- the lockup ---------- */

.sin-lockup { display: flex; align-items: center; gap: 1rem; }
.sin-lockup svg { width: 3.2rem; height: 3.2rem; flex: none; }
.sin-lockup .sin-word {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 2.6rem;
  letter-spacing: 0.22em;
  line-height: 1;
  margin: 0;
}
.sin-lockup .sin-sub {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  color: var(--ink-soft);
  margin: 0.45rem 0 0;
  text-transform: uppercase;
}

/* ---------- cards ---------- */

.sin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.sin-card { background: var(--ivory); padding: 1.8rem 1.6rem; }
.sin-card h4 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.6rem;
}
.sin-card p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.sin-card .sin-tag {
  display: inline-block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-soft);
  border: 1px solid var(--violet-line);
  padding: 0.18rem 0.5rem;
  margin-bottom: 0.9rem;
}

/* ---------- the download panel ---------- */

.sin-download {
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--violet-wash), transparent 60%);
  padding: 2.2rem;
}
.sin-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.4rem 2rem;
  margin-top: 1.8rem;
  font-family: Inter, system-ui, sans-serif;
}
.sin-meta dt {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.sin-meta dd { margin: 0; font-size: 0.86rem; }
.sin-meta dd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* ---------- release list ---------- */

.sin-release { border-top: 1px solid var(--line); padding: 2rem 0; }
.sin-release:first-of-type { border-top: none; }
.sin-release-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sin-release-head h3 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin: 0;
}
.sin-release-date {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.sin-chan {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--violet-line);
  color: var(--violet-soft);
  padding: 0.12rem 0.45rem;
}
.sin-notes { font-family: Inter, system-ui, sans-serif; font-size: 0.88rem; line-height: 1.7; }
.sin-notes h5 {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.2rem 0 0.4rem;
}
.sin-notes ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.sin-notes li { margin: 0.3rem 0; }

/* ---------- docs ---------- */

.sin-docs { display: grid; grid-template-columns: 14rem 1fr; gap: 3rem; align-items: start; }
.sin-docs nav { position: sticky; top: 6rem; font-family: Inter, system-ui, sans-serif; }
.sin-docs nav a {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.32rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.8rem;
}
.sin-docs nav a:hover { color: var(--ink); border-left-color: var(--violet); }
.sin-docs nav h4 {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.6rem 0 0.5rem 0.8rem;
}
.sin-docs nav h4:first-child { margin-top: 0; }
.sin-doc-body { font-family: Inter, system-ui, sans-serif; font-size: 0.92rem; line-height: 1.8; }
.sin-doc-body h3 {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.5rem;
  margin: 3rem 0 0.8rem;
  scroll-margin-top: 6rem;
}
.sin-doc-body h3:first-child { margin-top: 0; }
.sin-doc-body p, .sin-doc-body li { color: var(--ink-soft); }
.sin-doc-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  padding: 0.1rem 0.35rem;
}
.sin-doc-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  padding: 1rem 1.2rem;
  overflow-x: auto;
}
.sin-doc-body pre code { background: none; border: none; padding: 0; }

/* A statement of fact the page is making about itself — used where the
   honest answer is "not yet" rather than a claim. */
.sin-note {
  border-left: 2px solid var(--violet);
  background: var(--violet-wash);
  padding: 0.9rem 1.2rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 1.4rem 0;
}

.sin-shot {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  display: block;
}

@media (max-width: 820px) {
  .sin-docs { grid-template-columns: 1fr; }
  .sin-docs nav { position: static; }
  .sin-lockup .sin-word { font-size: 1.9rem; }
  .sin-lockup svg { width: 2.4rem; height: 2.4rem; }
}