/* ============================================================
   Tiny Byte Studio — prototype frame
   Shared chrome for every /prototypes/<slug> page.

   Sibling of concepts/concept-frame.css, and deliberately NOT
   the same file. A concept is an unsolicited redesign of a real
   company, so its frame carries a disclosure bar and a legal
   disclaimer. A prototype's subject is invented by us, so there
   is no third party to disclaim — the job here is only to say
   "this company is fictional, the build is ours" and to lead
   back to the studio.

   Like the concept frame, this styles nothing global (no body,
   heading or link resets) so it can sit on top of a prototype's
   own design language. Load it AFTER the prototype's CSS.

   Two ways in:

   1. .tbp-barlink  — for a prototype that ALREADY has its own
      notice/disclosure bar (Nightjar does). Drop the link inside
      that bar. Nothing is positioned, so the host page's layout
      math is untouched.

   2. .tbp-bar      — a standalone sticky bar, for a prototype
      with no notice of its own. Don't use both.

   Every prototype gets .tbp-outro at the end of <body>.
   ============================================================ */

.tbp-barlink,
.tbp-bar,
.tbp-outro {
  /* Tiny Byte tokens, namespaced so a prototype's palette can't collide */
  --tbp-ink:       #0c0c0d;
  --tbp-ink-soft:  #141416;
  --tbp-ink-line:  #26262a;
  --tbp-cream:     #f4f1ea;
  --tbp-cream-dim: #9a978f;
  --tbp-ember:     #ff5c35;
  --tbp-display:   'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tbp-body:      'Inter', ui-sans-serif, system-ui, sans-serif;
  --tbp-maxw:      1180px;
  --tbp-gutter:    clamp(1.25rem, 4vw, 3.5rem);
}

.tbp-bar *, .tbp-bar *::before, .tbp-bar *::after,
.tbp-outro *, .tbp-outro *::before, .tbp-outro *::after { box-sizing: border-box; }

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

/* ---------- 1. Inline studio link -----------------------------
   For a host bar that already carries the "fictional" disclosure.
   flex: none so it never absorbs space the disclosure needs —
   the host's own text truncates before this does. */

.tbp-barlink {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--tbp-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tbp-cream);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 92, 53, 0.55);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tbp-barlink:hover {
  color: var(--tbp-ember);
  border-bottom-color: var(--tbp-ember);
}

.tbp-barlink img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
}

/* The host bar's disclosure must never be the thing that truncates to make
   room for this link. Nightjar's notice needs ~935px to fit its sentence
   plus the link; below that the sentence ellipsises mid-word, so the link
   goes instead. The outro carries the same link, so nothing is lost. */
@media (max-width: 1024px) {
  .tbp-barlink { display: none; }
}

/* ---------- 2. Standalone sticky bar --------------------------
   Only for a prototype with no notice bar of its own. */

.tbp-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--tbp-ink);
  color: var(--tbp-cream);
  border-bottom: 1px solid var(--tbp-ink-line);
  font-family: var(--tbp-body);
  line-height: 1.35;
}

.tbp-bar__inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 42px;
  padding-block: 0.4rem;
}

.tbp-bar__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  background: var(--tbp-ember);
  color: var(--tbp-ink);
  font-family: var(--tbp-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tbp-bar__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.8rem;
  color: var(--tbp-cream-dim);
}

.tbp-bar__text b { font-weight: 600; color: var(--tbp-cream); }

/* The standalone bar wraps its text to its own line instead of truncating it,
   so it always has room for the link. This out-specifies the width-based hide
   above, which exists for host bars that clip rather than wrap. */
.tbp-bar .tbp-barlink { display: inline-flex; }

@media (max-width: 860px) {
  .tbp-bar__inner { flex-wrap: wrap; gap: 0.45rem 0.7rem; padding-block: 0.55rem; }
  .tbp-bar__text { flex: 1 1 100%; order: 3; font-size: 0.74rem; }
  .tbp-bar .tbp-barlink { margin-left: auto; }
}

/* ---------- Outro: whose build this is ------------------------ */

.tbp-outro {
  background: var(--tbp-ink);
  color: var(--tbp-cream);
  font-family: var(--tbp-body);
  line-height: 1.6;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--tbp-ink-line);
}

.tbp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-family: var(--tbp-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tbp-ember);
}

.tbp-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--tbp-ember);
}

.tbp-outro h2 {
  margin: 0 0 1rem;
  font-family: var(--tbp-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tbp-cream);
  max-width: 20ch;
}

.tbp-outro__lede {
  margin: 0;
  max-width: 62ch;
  color: var(--tbp-cream-dim);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

/* What the build demonstrates — a short, honest spec list */

.tbp-facts {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--tbp-ink-line);
  border: 1px solid var(--tbp-ink-line);
  border-radius: 16px;
  overflow: hidden;
}

.tbp-facts li {
  background: var(--tbp-ink-soft);
  padding: clamp(1.4rem, 3vw, 1.85rem);
}

.tbp-facts h3 {
  margin: 0 0 0.5rem;
  font-family: var(--tbp-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--tbp-cream);
}

.tbp-facts p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--tbp-cream-dim);
}

/* Studio CTA */

.tbp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--tbp-ink-line);
  border-radius: 16px;
  background: var(--tbp-ink-soft);
}

.tbp-cta__text { max-width: 46ch; }

.tbp-cta__text strong {
  display: block;
  font-family: var(--tbp-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--tbp-cream);
  margin-bottom: 0.45rem;
}

.tbp-cta__text span {
  font-size: 0.94rem;
  color: var(--tbp-cream-dim);
}

.tbp-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 100px;
  background: var(--tbp-ember);
  color: var(--tbp-ink);
  font-family: var(--tbp-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.tbp-btn:hover { background: #ff7a57; transform: translateY(-2px); }

/* Fine print */

.tbp-fine {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--tbp-ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.tbp-fine p {
  margin: 0;
  max-width: 78ch;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #6f6c66;
}

.tbp-fine a {
  color: #8f8c85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tbp-fine a:hover { color: var(--tbp-ember); }

.tbp-fine__mark {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--tbp-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tbp-cream-dim);
  text-decoration: none;
}

.tbp-fine__mark img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}

.tbp-fine__mark:hover { color: var(--tbp-cream); }

@media (prefers-reduced-motion: reduce) {
  .tbp-btn:hover { transform: none; }
}