/* itsbits.app — shared stylesheet
   ratified during the june 2026 site audit; values match shipped reality.
   per SITE.md, hex casing is lowercase. */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --fg-secondary: #6b6b6b;
  /* studio red — reserved for the mark's heart only (DESIGN.md "Studio
     red is reserved" + SITE.md "Color"). One hex in both light and dark
     modes; system red is dynamic in SwiftUI but the site uses a single
     value at this mark size. */
  --red: #ff3b30;
  --column: 560px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #ffffff;
    --fg-secondary: #9b9b9b;
  }
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* layout — inner pages use 4rem top breathing room; the homepage gets
   an extra 2rem on top via the :has(.mark) bump below. sides 1.5rem,
   bottom 4rem. */
main {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}
main:has(.mark) {
  padding-top: var(--space-6);
}

/* studio mark — homepage uses .mark (56px); inner pages use .mark-sm
   (32px) inside a .mark-link wrapper that links back to /. */
.mark,
.mark-sm {
  display: block;
}
.mark {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-5);
}
.mark-sm {
  width: 32px;
  height: 32px;
}
.mark circle,
.mark-sm circle {
  fill: var(--fg);
  animation: pulse 2.8s ease-in-out infinite;
  transform-origin: center;
}
/* The heart — the ninth bit at the grid centre, holds still while the
   eight perimeter bits breathe. DESIGN.md "Heart and void": the heart
   signs; the void waits. Same diameter as its siblings; the higher
   `.heart` specificity beats the perimeter `circle` rules in both
   light and dark mode (one hex per SITE.md). `animation: none`
   overrides the pulse keyframes inherited from the rule above. */
.mark .heart,
.mark-sm .heart {
  fill: var(--red);
  animation: none;
}
/* per-bit phase delays — linear spread across the cycle, matching the
   canonical BitGrid.swift wave (top-left → bottom-right ripple). Values
   ported from apps/jacket/jacket/Shared/BitGrid.swift:
     phaseDelays = (0..<8).map { Double($0) * (2 * 1.4 / 8) }
                 = [0, 0.35, 0.7, 1.05, 1.4, 1.75, 2.1, 2.45] */
.mark circle:nth-of-type(1),
.mark-sm circle:nth-of-type(1) { animation-delay: 0s; }
.mark circle:nth-of-type(2),
.mark-sm circle:nth-of-type(2) { animation-delay: -0.35s; }
.mark circle:nth-of-type(3),
.mark-sm circle:nth-of-type(3) { animation-delay: -0.7s; }
.mark circle:nth-of-type(4),
.mark-sm circle:nth-of-type(4) { animation-delay: -1.05s; }
.mark circle:nth-of-type(5),
.mark-sm circle:nth-of-type(5) { animation-delay: -1.4s; }
.mark circle:nth-of-type(6),
.mark-sm circle:nth-of-type(6) { animation-delay: -1.75s; }
.mark circle:nth-of-type(7),
.mark-sm circle:nth-of-type(7) { animation-delay: -2.1s; }
.mark circle:nth-of-type(8),
.mark-sm circle:nth-of-type(8) { animation-delay: -2.45s; }

/* canonical range ported from BitGrid.swift's pulseFloor = 0.3. The
   5s / 0.92↔1.0 values present pre-Fix-1 were drafting residue — an
   8% swing reads as static; 70% swing reads as breathing. */
@keyframes pulse {
  0%, 100% { opacity: 1.0; }
  50%      { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .mark circle,
  .mark-sm circle { animation: none; }
}

.mark-link {
  display: inline-block;
  margin-bottom: var(--space-5);
  background-image: none;
  padding: 0;
}
.mark-link:hover { opacity: 0.55; }

/* typography — three sizes, per SITE.md "Design rules → Typography".
     large    2.5rem    (≈42.5px) — wordmark, page titles, app names
     regular  1rem      (17px)    — body, subtitles, taglines, leads, section headings
     small    0.875rem  (≈15px)   — signoff, dates, descriptions, captions
   sub-element hierarchy (subtitle, h2) is carried by color, weight, and
   spacing rather than size. */

h1,
.wordmark,
.name {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-2);
}

/* subtitles sit at body size with secondary color; spacing below them
   carries the lead-in hierarchy. */
.tagline,
.subtitle,
.lead {
  color: var(--fg-secondary);
  margin: 0 0 var(--space-5);
}

.updated {
  color: var(--fg-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
}

/* hyperlinks with bits-underline (CSS radial-gradient form — see SITE.md
   "Bits underline"). 6px × 2px tile so the gradient circles render
   round; 1px-tall tile squashes them into dashes. */
a {
  color: var(--fg);
  text-decoration: none;
  background-image: radial-gradient(circle, var(--fg) 0.8px, transparent 1.2px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 4px;
  transition: opacity 0.15s ease;
}
a:hover { opacity: 0.55; }

/* homepage apps list. */
.apps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.apps li {
  display: flex;
  align-items: baseline;
  /* fixed gap between the app name and its description — replaces the
     pre-Fix-3 min-width: 4.5rem column-style reservation on .apps a
     (which dragged the bits-underline well past short names). */
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.apps a {
  font-weight: 500;
  color: var(--fg);
}
.apps .desc {
  color: var(--fg-secondary);
  font-size: 0.875rem;
}

/* jacket page — body group + anti-feature line + price line. */
.body {
  margin: 0 0 var(--space-4);
}
.body p:last-child {
  margin-bottom: 0;
}
.anti {
  color: var(--fg-secondary);
}
.price {
  color: var(--fg-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* app store CTA — see SITE.md "CTA exception": exempt by kind from the
   bits-underline rule, since it's a button not a link. Inversion on hover.
   Removed from jacket.html until the real App Store ID exists; the CSS
   stays here ready for the day it returns. */
.cta {
  margin: var(--space-5) 0;
}
.cta a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-weight: 500;
  background-image: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cta a:hover {
  background: var(--fg);
  color: var(--bg);
  opacity: 1;
}

/* page-footer cluster — signoff on the left, legal on the right, both
   on one baseline at desktop. `flex-wrap` stacks them on narrow viewports
   where the two halves would otherwise crash; gap covers the wrap. */
footer.signature {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

/* signoff. */
.signoff {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 0.875rem;
}
.signoff a {
  background-image: radial-gradient(circle, var(--fg-secondary) 0.8px, transparent 1.2px);
}

/* legal footer — the "fine print" tier. Extra-small (`0.75rem`) + half
   opacity puts it below the `small` caption tier without crowding the
   signoff's voice. The legal entity name ("itsbits LLC") is the one
   exception to BRAND.md's lowercase rule — the registered form is
   required on this surface.

   Carries the `about` link too (post-Resolution, June 2026): the
   signature tier stands alone (no nav riding on the signoff), and the
   about link rides this fine-print register instead. Reason recorded
   in SITE.md "Signoff" — the legal line's arrival overcrowded the
   footer; the split-by-register pattern fixed it. */
.legal {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 0.75rem;
  opacity: 0.5;
}
/* legal-tier links use a dotted text-decoration, not the bits-gradient
   used elsewhere on the site. SITE.md "Bits underline → fine-print
   exception": the gradient circles render squashed at 0.75rem (the
   tile geometry was tuned for body/small text, not fine-print), so
   the legal tier switches to `underline dotted` — a fine-print
   variation on the bits motif rather than a solid line. */
.legal a {
  background-image: none;
  padding-bottom: 0;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}