/* SO Ventures — base components. Needs tokens.css first. Every colour is a token. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.so-root {
  margin: 0;
  background: var(--so-ground);
  color: var(--so-ink);
  font-family: var(--so-font-text);
  font-size: var(--so-type-body-size);
  line-height: var(--so-type-body-leading);
  letter-spacing: var(--so-type-body-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(.so-root) a { color: inherit; }
.so-root img, .so-root svg, .so-root video, .so-root canvas { max-width: 100%; }
.so-root ::selection { background: var(--so-band-base); color: #fff; }

:where(.so-root) :focus-visible {
  outline: 2px solid var(--so-accent);
  outline-offset: 3px;
  border-radius: var(--so-radius-tick);
}

/* ---------- Layout ---------- */

.so-wrap {
  width: 100%;
  max-width: var(--so-layout-max);
  margin-inline: auto;
  padding-inline: var(--so-layout-gutter);
}

.so-section { position: relative; padding-block: var(--so-space-10); }
.so-section--tight { padding-block: var(--so-space-9); }

/* A scope that changes the light also changes the ink it passes down. */
.so-deep, .so-chrome, .so-void, [data-band] { color: var(--so-ink); }

/* A chapter that paints its own ground when there is no field behind it. */
.so-nofield .so-section { background: var(--so-ground); }

.so-stack { display: flex; flex-direction: column; gap: var(--so-space-5); }
.so-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--so-space-3); }

.so-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--so-space-5); }
@media (max-width: 800px) { .so-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Type ---------- */

.so-hero, .so-display, .so-headline {
  font-family: var(--so-font-display);
  margin: 0;
  text-wrap: balance;
}
.so-hero {
  font-size: var(--so-type-hero-size);
  font-weight: var(--so-type-hero-weight);
  letter-spacing: var(--so-type-hero-tracking);
  line-height: var(--so-type-hero-leading);
}
.so-display {
  font-size: var(--so-type-display-size);
  font-weight: var(--so-type-display-weight);
  letter-spacing: var(--so-type-display-tracking);
  line-height: var(--so-type-display-leading);
}
.so-headline {
  font-size: var(--so-type-headline-size);
  font-weight: var(--so-type-headline-weight);
  letter-spacing: var(--so-type-headline-tracking);
  line-height: var(--so-type-headline-leading);
}
/* Light words land on one heavy phrase. The heavy phrase always starts a new line. */
.so-hero b, .so-display b, .so-headline b { font-weight: var(--so-type-hero-strong); display: block; }
.so-hero b.so-inline, .so-display b.so-inline, .so-headline b.so-inline { display: inline; }

.so-title {
  font-family: var(--so-font-display);
  font-size: var(--so-type-title-size);
  font-weight: var(--so-type-title-weight);
  letter-spacing: var(--so-type-title-tracking);
  line-height: var(--so-type-title-leading);
  margin: 0;
}
.so-lead {
  font-size: var(--so-type-lead-size);
  line-height: var(--so-type-lead-leading);
  letter-spacing: var(--so-type-lead-tracking);
  color: var(--so-ink-2);
  max-width: var(--so-layout-measure);
  margin: 0;
  text-wrap: pretty;
}
.so-body { max-width: var(--so-layout-measure); color: var(--so-ink-2); margin: 0; text-wrap: pretty; }
.so-small { font-size: var(--so-type-small-size); line-height: var(--so-type-small-leading); color: var(--so-muted); margin: 0; }

/* Mono labels are the studio's instrument voice: upper case, bracketed when they count something. */
.so-label {
  font-family: var(--so-font-mono);
  font-size: var(--so-type-label-size);
  line-height: var(--so-type-label-leading);
  letter-spacing: var(--so-type-label-tracking);
  text-transform: uppercase;
  color: var(--so-muted);
  font-variant-numeric: tabular-nums;
}
.so-label--ink { color: var(--so-ink); }
.so-label--accent { color: var(--so-accent); }
.so-num { font-family: var(--so-font-mono); font-variant-numeric: tabular-nums; }

/* Dot-matrix type. The letters are made of the same dots as the field. */
.so-matrix {
  font-family: var(--so-font-display);
  font-size: var(--so-type-matrix-size);
  font-weight: var(--so-type-matrix-weight);
  letter-spacing: var(--so-type-matrix-tracking);
  line-height: var(--so-type-matrix-leading);
  color: transparent;
  background-image: radial-gradient(circle at center, var(--so-ink) 0 34%, transparent 38%);
  background-size: 0.055em 0.055em;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
}
.so-matrix--spectrum {
  background-image:
    radial-gradient(circle at center, transparent 0 34%, var(--so-ground) 38%),
    var(--so-spectrum);
  background-size: 0.055em 0.055em, 100% 100%;
}

/* The refraction line: one hairline of spectrum where light enters an object. Once per view. */
.so-refract { position: relative; }
.so-refract::before {
  content: "";
  position: absolute;
  inset: -1px 12% auto 12%;
  height: 1px;
  background: var(--so-spectrum);
  opacity: 0.9;
  border-radius: 1px;
  pointer-events: none;
}

/* ---------- Surfaces ---------- */

.so-frost {
  background: var(--so-frost);
  -webkit-backdrop-filter: blur(var(--so-blur-frost)) saturate(1.4);
  backdrop-filter: blur(var(--so-blur-frost)) saturate(1.4);
  border: 1px solid var(--so-frost-edge);
  border-radius: var(--so-radius-panel);
  box-shadow: var(--so-shadow-float);
}

.so-card {
  position: relative;
  background: var(--so-frost);
  -webkit-backdrop-filter: blur(var(--so-blur-frost)) saturate(1.4);
  backdrop-filter: blur(var(--so-blur-frost)) saturate(1.4);
  border: 1px solid var(--so-frost-edge);
  border-radius: var(--so-radius-card);
  padding: var(--so-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--so-space-4);
  transition: transform var(--so-motion-settle) var(--so-motion-ease),
              box-shadow var(--so-motion-settle) var(--so-motion-ease);
}
a.so-card { text-decoration: none; }
a.so-card:hover { transform: translateY(-3px); box-shadow: var(--so-shadow-lift); }

/* The tab: a label that sits on a card's edge like a folder tab. */
.so-tab {
  position: absolute;
  top: -1px;
  right: var(--so-space-5);
  transform: translateY(-100%);
  padding: 5px 10px 4px;
  border: 1px solid var(--so-frost-edge);
  border-bottom: 0;
  border-radius: var(--so-radius-control) var(--so-radius-control) 0 0;
  background: var(--so-frost);
  -webkit-backdrop-filter: blur(var(--so-blur-frost));
  backdrop-filter: blur(var(--so-blur-frost));
}

.so-rule { border: 0; border-top: 1px solid var(--so-line); margin: 0; }

/* ---------- Controls ---------- */

.so-btn {
  --btn-bg: var(--so-action);
  --btn-fg: var(--so-on-action);
  --btn-edge: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--so-layout-control);
  padding: 0 18px;
  border-radius: var(--so-radius-control);
  border: 1px solid var(--btn-edge);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 0.9375rem/1 var(--so-font-text);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--so-motion-instant) var(--so-motion-ease),
              background-color var(--so-motion-quick) var(--so-motion-ease);
}
.so-btn:hover { transform: translateY(-1px); }
.so-btn:active { transform: translateY(0) scale(0.98); }
.so-btn--ghost { --btn-bg: transparent; --btn-fg: var(--so-ink); --btn-edge: var(--so-line-strong); }
.so-btn--ghost:hover { --btn-bg: var(--so-hover); }
.so-btn--accent { --btn-bg: var(--so-accent); --btn-fg: var(--so-on-accent); }
.so-btn--sm { min-height: 34px; padding: 0 12px; font-size: 0.8125rem; }
.so-btn .so-arrow { transition: transform var(--so-motion-quick) var(--so-motion-ease); }
.so-btn:hover .so-arrow, .so-link:hover .so-arrow { transform: translate(2px, -2px); }

.so-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--so-ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--so-motion-settle) var(--so-motion-ease);
}
.so-link:hover { background-size: 100% 1px; }

.so-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--so-radius-tick);
  font-family: var(--so-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-ink-2);
  white-space: nowrap;
}
.so-tag--accent { border-color: color-mix(in srgb, var(--so-accent) 45%, transparent); color: var(--so-accent); }
.so-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--so-band-base); flex: none; }
.so-dot--live { box-shadow: 0 0 0 0 var(--so-band-base); animation: so-pulse 2.4s var(--so-motion-ease) infinite; }
@keyframes so-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--so-band-base) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

.so-field-input {
  height: var(--so-layout-control);
  padding: 0 14px;
  border-radius: var(--so-radius-control);
  border: 1px solid var(--so-line-strong);
  background: var(--so-frost);
  color: var(--so-ink);
  font: 400 0.9375rem var(--so-font-text);
}

/* ---------- Navigation ---------- */

.so-nav {
  position: fixed;
  z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  right: 12px;
  max-width: calc(var(--so-layout-max) + 24px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--so-space-4);
  padding: 8px 8px 8px 18px;
  border-radius: var(--so-radius-card);
  background: var(--so-frost);
  -webkit-backdrop-filter: blur(var(--so-blur-frost)) saturate(1.5);
  backdrop-filter: blur(var(--so-blur-frost)) saturate(1.5);
  border: 1px solid var(--so-frost-edge);
}
.so-nav__mark { display: inline-flex; height: 20px; color: var(--so-ink); }
.so-nav__mark svg { height: 100%; width: auto; }
.so-nav__links { display: flex; align-items: center; gap: var(--so-space-5); }
.so-nav__links a:not(.so-btn) {
  font-family: var(--so-font-mono);
  font-size: var(--so-type-label-size);
  letter-spacing: var(--so-type-label-tracking);
  text-transform: uppercase;
  color: var(--so-ink-2);
  text-decoration: none;
}
.so-nav__links a:not(.so-btn):hover { color: var(--so-ink); }
@media (max-width: 640px) { .so-nav__links a:not(.so-btn) { display: none; } }

/* ---------- Chapter counter (fixed, bottom left) ---------- */

.so-chapter {
  position: fixed;
  z-index: 15;
  left: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex;
  align-items: stretch;
  border: 1px solid var(--so-line-strong);
  border-radius: var(--so-radius-control);
  background: var(--so-frost);
  -webkit-backdrop-filter: blur(var(--so-blur-frost));
  backdrop-filter: blur(var(--so-blur-frost));
  overflow: hidden;
}
.so-chapter__n {
  font-family: var(--so-font-mono);
  font-size: 1.25rem;
  line-height: 1;
  padding: 10px 12px;
  border-right: 1px solid var(--so-line);
  font-variant-numeric: tabular-nums;
}
.so-chapter__name { padding: 0 12px; display: flex; align-items: center; }
@media (max-width: 640px) { .so-chapter { display: none; } }

/* ---------- Field ---------- */

.so-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.so-above { position: relative; z-index: 1; }

/* ---------- Decode: characters resolve from mono glyphs ---------- */

.so-decode-char { font-family: var(--so-font-mono); font-weight: 400; opacity: 0.55; }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .so-root *, .so-root *::before, .so-root *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}