/* ═══════════════════════════════════════════════════════════════════
   Signal — the shared design system.

   Everything here is scoped to .sg, so a page opts in by putting the class on
   its wrapper; nothing leaks into the rest of the site, which still runs on
   Tailwind. Extracted from the About page, which was the first page built in
   this language and remains its reference implementation.

   Display: Syne · Body: Inter · Labels: JetBrains Mono
   The three fonts are the page's responsibility to load.

   Contents
     Foundation     tokens, reset, shell, section rhythm, headings
     Accents        [data-accent] sets --accent / --accent-rgb per subtree
     Reveal         scroll-in animation, opt-in via [data-reveal]
     Buttons        .sg-btn and friends
     Bento          .sg-bento grid + .sg-card family
     Filters        pill row for filtering a collection
     Tiles          .sg-tile card with a screenshot or logo head
     Rails          infinite marquee of logos (.sg-brand / .sg-tech)
     Light section  .sg-notes inverts the tokens for one pale section
     Responsive     the breakpoints for the above, then reduced motion
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   Foundation
   ═══════════════════════════════════════════════════════════════════ */
.sg {
  --bg: #04070c; --bg-2: #070c14; --panel: #0a1119; --panel-2: #0e1722;
  --ink: #eef7f3; --muted: #9db3ac; --dim: #5f7772;
  --line: rgba(148, 163, 184, .13); --line-2: rgba(148, 163, 184, .24);
  --green: #34d399; --green-2: #6ee7b7; --cyan: #67e8f9; --warm: #f5c451;
  --display: 'Syne', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 1.25rem;
  position: relative; background: var(--bg); color: var(--ink); font-family: var(--body); overflow-x: clip;
  --accent: var(--green); --accent-rgb: 52, 211, 153;
}
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg-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; }
.sg-shell { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.sg-section { position: relative; padding-block: clamp(5rem, 9vw, 8rem); }
.sg h1, .sg h2, .sg h3 { margin: 0; font-family: var(--display); letter-spacing: -.02em; line-height: 1.02; color: var(--ink); }
.sg h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 800; text-wrap: balance; }
/* A page whose h1 is an ordinary section heading rather than a hero name. No
   size was ever set for h1 because the reference page's only h1 is .sg-name,
   which brings its own; without this an h1 falls back to the browser's 2em
   against a 1.02 line-height and reads smaller than the h2 below it. Scoped to
   .sg-head so it cannot reach .sg-name, which it would otherwise outrank. */
.sg-head h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 800; text-wrap: balance; }
.sg h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; }
.sg p { margin: 0; }
.sg-label { margin: 0 0 1rem; color: var(--green); font: 600 .68rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.sg-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sg-head-sub { max-width: 44rem; margin-top: 1.1rem; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.sg-head-split { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-end; justify-content: space-between; }

/* ═══════════════════════════════════════════════════════════════════
   Accents
   ═══════════════════════════════════════════════════════════════════ */
[data-accent="emerald"] { --accent: #34d399; --accent-rgb: 52, 211, 153; }
[data-accent="cyan"] { --accent: #67e8f9; --accent-rgb: 103, 232, 249; }
[data-accent="violet"] { --accent: #c4b5fd; --accent-rgb: 196, 181, 253; }
[data-accent="amber"] { --accent: #fcd34d; --accent-rgb: 252, 211, 77; }
[data-accent="red"] { --accent: #fb7185; --accent-rgb: 251, 113, 133; }

/* ═══════════════════════════════════════════════════════════════════
   Reveal
   ═══════════════════════════════════════════════════════════════════ */
.sg.is-enhanced [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.sg.is-enhanced [data-reveal].is-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════ */
.sg-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border-radius: 999px; font: 600 .9rem/1 var(--body); text-decoration: none; cursor: pointer; border: 1px solid var(--line-2); color: var(--ink); background: rgba(255, 255, 255, .03); transition: transform .2s, border-color .2s, background .2s, color .2s; position: relative; }
.sg-btn:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .6); }
.sg-btn-primary { background: var(--green); border-color: var(--green); color: #04110c; }
.sg-btn-primary:hover { background: var(--green-2); }
.sg-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.sg-btn-pulse { position: absolute; inset: -4px; border-radius: inherit; border: 1px solid rgba(52, 211, 153, .5); animation: sg-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes sg-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════════
   Bento cards
   ═══════════════════════════════════════════════════════════════════ */
.sg-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 1rem; }
.sg-card { --mx: 50%; --my: 50%; position: relative; grid-column: span 2; padding: 1.4rem 1.5rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; gap: .5rem; transition: border-color .25s, transform .25s; }
.sg-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(52, 211, 153, .12), transparent 45%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sg-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.sg-card:hover::before { opacity: 1; }
.sg-card-wide { grid-column: span 4; }
.sg-card-tall { grid-row: span 2; }
.sg-card-num { grid-column: span 1; }
.sg-card-num .sg-card-huge { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
.sg-card-cta { grid-column: span 2; background: linear-gradient(150deg, rgba(52, 211, 153, .16), var(--panel) 60%); }
.sg-card-label { color: var(--green); font: 600 .62rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.sg-card-big { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sg-card-big small { font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sg-card-huge { font-family: var(--display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: #fff; margin-top: auto; }
.sg-card-huge span { color: var(--green); }
.sg-card-sub { color: var(--muted); font-size: .9rem; }
.sg-card-and { color: var(--green); font-weight: 400; }
.sg-card-and { color: var(--green); font-weight: 400; }
.sg-card-text { color: var(--ink); font-size: 1.05rem; line-height: 1.55; margin-top: .2rem; }
.sg-live-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.sg-live-list b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1; color: #fff; }
.sg-live-list span { color: var(--muted); font-size: .85rem; }
.sg-card-link { margin-top: auto; color: var(--green-2); font-size: .85rem; text-decoration: none; }
.sg-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .3rem 0 0; padding: 0; }
.sg-tags > * { padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font: 500 .76rem/1 var(--body); }
.sg-card-cta .sg-btn { align-self: flex-start; margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════
   Filters
   ═══════════════════════════════════════════════════════════════════ */
.sg-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.sg-filters button { padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.sg-filters button span { color: var(--dim); margin-left: .3rem; }
.sg-filters button.is-active { color: var(--green); border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .08); }

/* ═══════════════════════════════════════════════════════════════════
   Tiles
   ═══════════════════════════════════════════════════════════════════ */
.sg-tile { display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); overflow: hidden; transition: transform .25s, border-color .25s; }
.sg-tile:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .5); }
.sg-tile[hidden] { display: none; }
.sg-tile-screen { aspect-ratio: 16 / 9; background: #0b1220; overflow: hidden; border-bottom: 1px solid var(--line); }
.sg-tile-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s; }
.sg-tile:hover .sg-tile-screen > img { transform: scale(1.04); }
.sg-tile-logo { width: 100%; height: 100%; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .14), transparent 65%); }
.sg-tile-logo img { max-width: 150px; max-height: 56px; object-fit: contain; }
.sg-tile-logo strong { font-family: var(--display); font-size: 1.4rem; }
.sg-tile-body { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: .55rem; }
.sg-tile-meta { display: flex; justify-content: space-between; color: var(--dim); font: 600 .58rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.sg-tile-meta span:last-child { color: var(--green); }
.sg-tile h3 { font-size: 1.35rem; }
.sg-tile-tagline { color: var(--ink); font-size: .92rem; line-height: 1.5; }
.sg-tile-rel { color: var(--muted); font-size: .85rem; line-height: 1.55; }
.sg-tile-rel b { color: var(--ink); font-weight: 600; }
.sg-tile-links { display: flex; gap: 1rem; margin-top: .3rem; }
.sg-tile-links a { color: var(--green-2); font-size: .82rem; text-decoration: none; }
.sg-tile-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   Rails
   ═══════════════════════════════════════════════════════════════════ */
.sg-rails { display: grid; gap: 0; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(52, 211, 153, .04), transparent 30%, transparent 70%, rgba(52, 211, 153, .04)); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sg-rail { overflow: hidden; }
.sg-rail + .sg-rail { border-top: 1px solid var(--line); }
.sg-rail-track { display: flex; width: max-content; animation: sg-rail var(--wall-speed, 46s) linear infinite; }
.sg-rail-b .sg-rail-track { animation-direction: reverse; animation-duration: calc(var(--wall-speed, 46s) * 2.1); }
.sg-rails.is-paused .sg-rail-track, .sg-rails:hover .sg-rail-track, .sg-rails:focus-within .sg-rail-track, .sg-rails.is-hidden .sg-rail-track { animation-play-state: paused; }
@keyframes sg-rail { to { transform: translateX(-50%); } }
.sg-rail-group { display: flex; flex: none; }
.sg-brand { position: relative; display: grid; place-items: center; width: 250px; height: 132px; padding: 1.4rem 2rem; border-right: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .25s; }
.sg-brand img { display: block; max-width: 150px; max-height: 46px; width: auto; height: auto; object-fit: contain; opacity: .78; transition: opacity .25s, transform .25s; }
.sg-brand-mono { font: 800 1.1rem/1 var(--display); color: #fff; opacity: .8; }
.sg-brand:hover, .sg-brand:focus-visible { background: rgba(255, 255, 255, .03); }
.sg-brand:hover img, .sg-brand:focus-visible img { opacity: 1; transform: translateY(-6px); }
.sg-brand-label { position: absolute; left: 0; right: 0; bottom: .8rem; display: grid; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.sg-brand:hover .sg-brand-label, .sg-brand:focus-visible .sg-brand-label { opacity: 1; transform: none; }
.sg-brand-label b { color: var(--ink); font-size: .78rem; font-weight: 600; }
.sg-brand-label small { color: var(--green); font: 600 .58rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.sg-tech { width: 150px; height: 112px; }
.sg-tech img { max-width: 40px; max-height: 40px; opacity: .62; transition: opacity .25s, transform .25s, filter .25s; }
.sg-tech:hover img, .sg-tech:focus-visible img { opacity: 1; transform: translateY(-6px) scale(1.04); }
.sg-tech .sg-brand-label { bottom: .55rem; }
.sg-tech .sg-brand-label b { font-size: .7rem; }
.sg-tech .sg-brand-label small { font-size: .52rem; letter-spacing: .1em; }

/* ═══════════════════════════════════════════════════════════════════
   Light section
   ═══════════════════════════════════════════════════════════════════ */
.sg-notes { --ink: #12231c; --muted: #46615a; --dim: #7a8f88; --line: rgba(20, 60, 45, .16); --line-2: rgba(20, 60, 45, .3); color: var(--ink); background: #ece7db; background-image: linear-gradient(rgba(97, 79, 48, .06) 1px, transparent 1px); background-size: 100% 38px; }
.sg-notes h2, .sg-notes h3 { color: var(--ink); }
.sg-notes .sg-label { color: #8b6636; }

/* ═══════════════════════════════════════════════════════════════════
   Utilities
   ═══════════════════════════════════════════════════════════════════ */
.sg-empty { color: var(--dim); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sg-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-card-wide { grid-column: span 4; }
}
@media (max-width: 640px) {
  .sg-shell { width: calc(100% - 32px); }
  .sg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .sg-card, .sg-card-wide, .sg-card-cta { grid-column: span 2; }
  .sg-card-num { grid-column: span 1; }
  .sg-card-tall { grid-row: auto; }
  .sg-brand { width: 200px; height: 112px; }
  .sg-tech { width: 128px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg *, .sg *::before, .sg *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sg.is-enhanced [data-reveal] { opacity: 1; transform: none; }
  .sg-rail-track { animation: none !important; }
  .sg-rails { mask-image: none; }
  .sg-rail { overflow-x: auto; }
}